chore: update SASS and fix all associated depreciation errors

src/scss/_mixins.scss

@@ -1,10 +1,12 @@
+@use 'sass:list';
+
 // Source https://joshbroton.com/quick-fix-sass-mixins-for-css-keyframe-animations/
 @mixin animation($animate...) {
-  $max: length($animate);
+  $max: list.length($animate);
   $animations: '';
 
   @for $i from 1 through $max {
-    $animations: #{$animations + nth($animate, $i)};
+    $animations: #{$animations + list.nth($animate, $i)};
 
     @if $i < $max {
       $animations: #{$animations + ', '};
@@ -27,28 +29,3 @@
     @content;
   }
 }
-
-@mixin themed() {
-  @each $theme, $map in $themes {
-    .#{$theme} & {
-      $theme-map: () !global;
-
-      @each $key, $submap in $map {
-        $value: map-get(map-get($themes, $theme), '#{$key}');
-        $theme-map: map-merge(
-          $theme-map,
-          (
-            $key: $value,
-          )
-        ) !global;
-      }
-      @content;
-
-      $theme-map: null !global;
-    }
-  }
-}
-
-@function t($key) {
-  @return map-get($theme-map, $key);
-}

src/scss/_toast.scss

@@ -1,4 +1,4 @@
-@import 'variables';
+@use 'variables' as *;
 
 .Toastify__toast-body {
   font-size: 16px !important;

src/scss/_variables.scss

@@ -1,7 +1,7 @@
 // since alex will no doubtedly be looking at this file often
 // here's a reminder: please add a new line when doing nested scss, otherwise it is messy!
 @use 'sass:map';
-@import 'mixins';
+@use 'mixins' as *;
 
 $background: 'background';
 $boxShadow: 'boxShadow';
@@ -89,7 +89,36 @@ $themes: (
   ),
 );
 
+$theme-map: null;
+
+@mixin themed() {
+  @each $theme, $themeMap in $themes {
+    .#{$theme} & {
+      $theme-map: () !global;
+
+      @each $key, $submap in $themeMap {
+        $value: map.get(map.get($themes, $theme), '#{$key}');
+        $theme-map: map.merge(
+          $theme-map,
+          (
+            $key: $value,
+          )
+        ) !global;
+      }
+      @content;
+
+      $theme-map: null !global;
+    }
+  }
+}
+
+@function t($key) {
+  @return map.get($theme-map, $key);
+}
+
 %basic {
+  backdrop-filter: blur(map.get($ui-elements, 'backgroundBlur'));
+
   @include themed {
     background: t($background);
     border-radius: t($borderRadius);
@@ -97,8 +126,6 @@ $themes: (
     box-shadow: t($boxShadow);
   }
 
-  backdrop-filter: blur(map.get($ui-elements, 'backgroundBlur'));
-
   .title {
     font-size: 18px;
 

src/scss/index.scss

@@ -1,5 +1,5 @@
-@import 'variables';
-@import 'toast';
+@use 'variables' as *;
+@use 'toast' as *;
 
 body {
   background: #000;