chore: update SASS and fix all associated depreciation errors

src/components/Elements/MainModal/scss/index.scss

@@ -1,11 +1,13 @@
-@import 'scss/variables';
-@import 'modules/sidebar';
-@import 'modules/navbar';
-@import 'modules/modalTabContent';
-@import 'modules/links';
-@import 'modules/scrollbars';
-@import 'settings/main';
-@import 'marketplace/main';
+@use 'sass:map';
+@use 'scss/variables' as *;
+@use 'modules/sidebar' as *;
+@use 'modules/navbar' as *;
+@use 'modules/modalTabContent' as *;
+@use 'modules/links' as *;
+@use 'modules/scrollbars' as *;
+@use 'settings/main' as *;
+@use 'marketplace/main' as *;
+// Fixed: Added sass:map module
 
 .Overlay {
   position: fixed;
@@ -26,7 +28,7 @@
   opacity: 1;
   z-index: -2;
   transition-timing-function: ease-in;
-  border-radius: map-get($modal, 'border-radius');
+  border-radius: map.get($modal, 'border-radius');
   user-select: none;
   overflow-y: auto;
   transform: scale(0);

src/components/Elements/MainModal/scss/marketplace/_main.scss

@@ -1,8 +1,8 @@
 // this file is too long
-@import 'modules/item';
-@import 'modules/buttons';
-@import 'modules/lightbox';
-@import 'scss/variables';
+@use 'modules/item' as *;
+@use 'modules/buttons' as *;
+@use 'modules/lightbox' as *;
+@use 'scss/variables' as *;
 
 .creatorItems {
   .item {

src/components/Elements/MainModal/scss/marketplace/modules/_buttons.scss

@@ -1,3 +1,5 @@
+@use 'scss/variables' as *;
+
 .updateCheck {
   flex-flow: row !important;
 }

src/components/Elements/MainModal/scss/marketplace/modules/_item.scss

@@ -1,3 +1,5 @@
+@use 'scss/variables' as *;
+
 .side {
   float: right;
   margin-left: 20px;

src/components/Elements/MainModal/scss/marketplace/modules/_lightbox.scss

@@ -1,3 +1,5 @@
+@use 'scss/variables' as *;
+
 .lightBoxModal {
   margin: auto;
   max-width: 60%;

src/components/Elements/MainModal/scss/modules/_modalTabContent.scss

@@ -1,4 +1,4 @@
-@import 'scss/variables';
+@use 'scss/variables' as *;
 
 .modalTabContent {
   width: 100% !important;

src/components/Elements/MainModal/scss/modules/_scrollbars.scss

@@ -1,4 +1,4 @@
-@import 'scss/variables';
+@use 'scss/variables' as *;
 
 ::-webkit-scrollbar {
   width: 6px;

src/components/Elements/MainModal/scss/modules/_sidebar.scss

@@ -1,4 +1,4 @@
-@import 'scss/variables';
+@use 'scss/variables' as *;
 
 .modalSidebar {
   @include themed {

src/components/Elements/MainModal/scss/settings/_main.scss

@@ -1,9 +1,9 @@
-@import 'scss/variables';
-@import 'modules/material-ui';
-@import 'modules/tabs/about';
-@import 'modules/tabs/changelog';
-@import 'modules/tabs/order';
-@import 'modules/tabs/stats';
+@use 'scss/variables' as *;
+@use 'modules/material-ui' as *;
+@use 'modules/tabs/about' as *;
+@use 'modules/tabs/changelog' as *;
+@use 'modules/tabs/order' as *;
+@use 'modules/tabs/stats' as *;
 
 input {
   /* colour picker */

src/components/Elements/MainModal/scss/settings/modules/_material-ui.scss

@@ -1,6 +1,6 @@
 /* these are overrides for the material ui default styles */
 
-@import 'scss/variables';
+@use 'scss/variables' as *;
 
 .MuiCheckbox-colorPrimary.Mui-checked,
 .MuiSwitch-colorPrimary.Mui-checked,

src/components/Elements/MainModal/scss/settings/modules/tabs/_about.scss

@@ -1,3 +1,5 @@
+@use 'scss/variables' as *;
+
 .aboutLink {
   &:hover {
     opacity: 0.8;

src/components/Elements/MainModal/scss/settings/modules/tabs/_changelog.scss

@@ -1,3 +1,5 @@
+@use 'scss/variables' as *;
+
 .updateChangelog {
   max-width: 75%;
   margin-top: 15px;

src/components/Elements/MainModal/scss/settings/modules/tabs/_order.scss

@@ -1,4 +1,4 @@
-@import 'scss/variables';
+@use 'scss/variables' as *;
 
 .sortableItem {
   cursor: move;

src/components/Elements/MainModal/scss/settings/modules/tabs/_stats.scss

@@ -1,3 +1,5 @@
+@use 'scss/variables' as *;
+
 .stats {
   display: flex;
   flex-flow: column;

src/components/Elements/ShareModal/sharemodal.scss

@@ -1,4 +1,4 @@
-@import 'scss/variables';
+@use 'scss/variables' as *;
 
 .smallModal {
   @extend %tabText;

src/components/Elements/Tooltip/tooltip.scss

@@ -1,4 +1,4 @@
-@import 'scss/variables';
+@use 'scss/variables' as *;
 
 .tooltip {
   position: relative;