Fix dropdown in modal

sass/components/_buttons.scss

@@ -1,3 +1,6 @@
+@use './mixins.module.scss' as *;
+@use './variables' as *;
+
 :root {
   --btn-height: 40px;
   --btn-font-size-icon: 16px;

sass/components/_cards.scss

@@ -1,3 +1,6 @@
+@use './variables' as *;
+@use './mixins.module.scss' as *;
+
 .card-panel {
   transition: box-shadow .25s;
   padding: 24px;
@@ -8,10 +11,11 @@
 }
 
 .card {
-  overflow: hidden;
+  --background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-surface-tint) 17%);
+
   position: relative;
   //margin: $element-top-margin 0 $element-bottom-margin 0;
-  background-color: var(--md-sys-color-surface);
+  background-color: var(--background-color);
   transition: box-shadow .25s;
   border-radius: 12px;
   @extend .z-depth-1;
@@ -172,28 +176,11 @@
 
   .card-action {
     padding: 0 1.6rem;
-    // position: relative;
-    // border-top: 1px solid var(--md-sys-color-outline-variant);
-    // background-color: inherit;
 
     &:last-child {
       border-radius: 0 0 2px 2px;
     }
     // Replaced card links with buttons (Accessibility, @see https://github.com/materializecss/materialize/issues/565)
-    /*a {
-      padding: 16px 24px;
-      display: inline-block;
-    }
-
-    a:not(.btn):not(.btn-large):not(.btn-floating) {
-      color: var(--md-sys-color-primary);
-      transition: color .3s ease;
-
-      &:hover {
-        background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
-      }
-    }*/
-
     a {
       @include btn(
         var(--btn-height),

sass/components/_chips.scss

@@ -1,3 +1,5 @@
+@use './colors.module.scss' as *;
+
 .chip {
   --font-size: 14px;
   --font-size-icon: 18px;

sass/components/_collapsible.scss

@@ -1,3 +1,7 @@
+@use './variables' as *;
+@use './colors.module.scss' as *;
+@use './global' as *;
+
 .collapsible {
   padding-left: 0;
   list-style-type: none;

sass/components/_collection.scss

@@ -1,4 +1,5 @@
-// Collections
+@use './variables' as *;
+
 .collection {
   padding-left: 0;
   list-style-type: none;
@@ -55,10 +56,8 @@
         top: 16px;
         right: 16px;
       }
-
     }
 
-
     &:last-child {
       border-bottom: none;
     }

sass/components/_color-variables.scss

@@ -355,10 +355,9 @@ $colors: (
 ) !default;
 
 
-// usage: color("name_of_color", "type_of_color")
+// usage: colorFunc("name_of_color", "type_of_color")
 // to avoid to repeating map-get($colors, ...)
-
-@function color($color, $type) {
+@function colorFunc($color, $type) {
   @if map-has-key($colors, $color) {
     $curr_color: map-get($colors, $color);
     @if map-has-key($curr_color, $type) {
@@ -368,3 +367,36 @@ $colors: (
   @warn "Unknown `#{$color}` - `#{$type}` in $colors.";
   @return null;
 }
+
+
+// Color Classes
+@each $color_name, $color in $colors {
+  @each $color_type, $color_value in $color {
+    @if $color_type == "base" {
+      .#{$color_name} {
+        background-color: $color_value !important;
+      }
+      .#{$color_name}-text {
+        color: $color_value !important;
+      }
+    }
+    @else if $color_name != "shades" {
+      .#{$color_name}.#{$color_type} {
+        background-color: $color_value !important;
+      }
+      .#{$color_name}-text.text-#{$color_type} {
+        color: $color_value !important;
+      }
+    }
+  }
+}
+
+// Shade classes
+@each $color, $color_value in $shades {
+  .#{$color} {
+    background-color: $color_value !important;
+  }
+  .#{$color}-text {
+    color: $color_value !important;
+  }
+}

sass/components/_datepicker.scss

@@ -261,29 +261,3 @@
   color: var(--md-sys-color-error);
 }
 
-
-/* Media Queries */
-@media #{$medium-and-up} {
-  // @removed since v2.2.1-dev regarding Material M3 standards
-  /*.datepicker-modal {
-    max-width: 625px;
-  }
-
-  .datepicker-container.modal-content {
-    flex-direction: row;
-  }
-
-  .datepicker-date-display {
-    flex: 0 1 270px;
-  }
-
-  .datepicker-controls,
-  .datepicker-table,
-  .datepicker-footer {
-    width: 320px;
-  }
-
-  .datepicker-day-button {
-    line-height: 44px;
-  }*/
-}

sass/components/_dropdown.scss

@@ -1,3 +1,6 @@
+@use './variables' as *;
+@use './global' as *;
+
 [popover] {
   outline: none;
   padding: 0;

sass/components/_global.scss

@@ -1,3 +1,5 @@
+@use './_variables' as *;
+
 html {
   box-sizing: border-box;
 }
@@ -19,8 +21,10 @@ textarea {
   font-family: $font-stack;
 }
 
-a { color: $link-color; text-decoration: none;
-   -webkit-tap-highlight-color: transparent; // Gets rid of tap active state
+a {
+  color: $link-color;
+  text-decoration: none;
+  -webkit-tap-highlight-color: transparent; // Gets rid of tap active state
 }
 
 // Positioning
@@ -129,72 +133,6 @@ video.responsive-video {
   height: auto;
 }
 
-// moved to own component styling file @see https://github.com/materializecss/materialize/issues/566
-// Pagination
-/*.pagination {
-
-  li {
-    display: inline-block;
-    border-radius: 2px;
-    text-align: center;
-    vertical-align: top;
-    height: 30px;
-
-    a {
-      color: var(--md-sys-color-on-surface-variant);
-      display: inline-block;
-      font-size: 1.2rem;
-      padding: 0 10px;
-      line-height: 30px;
-    }
-
-    &:hover:not(.disabled) {
-      background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
-    }
-
-    &.active a {
-      color:  var(--md-sys-color-on-primary);
-    }
-
-    &.active,
-    &.active:hover {
-      background-color: var(--md-sys-color-primary);
-    }
-
-    &.disabled a {
-      cursor: default;
-      color: var(--md-sys-color-on-surface);
-    }
-
-    i {
-      font-size: 2rem;
-    }
-  }
-
-
-  li.pages ul li {
-    display: inline-block;
-    float: none;
-  }
-}
-
-@media #{$medium-and-down} {
-  .pagination {
-    width: 100%;
-
-    li.prev,
-    li.next {
-      width: 10%;
-    }
-
-    li.pages {
-      width: 80%;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-  }
-}*/
-
 // Parallax
 .parallax-container {
   position: relative;
@@ -320,6 +258,7 @@ ul.staggered-list li { opacity: 0; }
     padding: 10px 0px;
   }
 }
+
 .page-footer ul {
   padding-left: 0;
   list-style-type: none;

sass/components/_grid.scss

@@ -1,16 +1,18 @@
 @use "sass:math";
+@use './variables' as *;
 
-// Container
 .container {
   margin: 0 auto;
   max-width: 1280px;
   width: 90%;
 }
+
 @media #{$medium-and-up} {
   .container {
     width: 85%;
   }
 }
+
 @media #{$large-and-up} {
   .container {
     width: 70%;

sass/components/_modal.scss

@@ -1,9 +1,13 @@
+@use './variables' as *;
+@use './global' as *;
+
 // use with dialog html element
 .modal {
   --modal-footer-divider-height: 1px;
   --modal-border-radius: 28px;
   --modal-padding: 24px;
   --modal-padding-bottom: 16px;
+  --modal-background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-surface-tint) 17%);
 
   @extend .z-depth-5;
   border: none;
@@ -13,7 +17,7 @@
   width: 55%;
   border-radius: var(--modal-border-radius);
   will-change: top, opacity;
-  background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-surface-tint) 17%);
+  background-color: var(--modal-background-color);
 
   // Dialog open
   &[open] {
@@ -34,16 +38,21 @@
     padding: var(--modal-padding);
     padding-bottom: var(--modal-padding-bottom);
     flex-shrink: 0;
+    position: sticky;
+    top: 0;
+    background-color: var(--modal-background-color);
   }
   .modal-content {
     padding: 0 var(--modal-padding);
-    overflow-y: auto;
   }
   .modal-footer {
     border-radius: 0 0 var(--modal-border-radius) var(--modal-border-radius);
     padding: var(--modal-padding);
     text-align: right;
     flex-shrink: 0;
+    position: sticky;
+    bottom: 0;
+    background-color: var(--modal-background-color);
   }
 
   .modal-close {

sass/components/_navbar.scss

@@ -1,3 +1,6 @@
+@use './variables' as *;
+@use './global' as *;
+
 :root {
   --navbar-height: 64px;
   --navbar-height-mobile: 56px;

sass/components/_pagination.scss

@@ -1,4 +1,6 @@
-// Pagination
+@use './variables' as *;
+@use './mixins.module.scss' as *;
+
 .pagination {
   li {
     display: inline-block;

sass/components/_preloader.scss

@@ -1,4 +1,6 @@
-// Progress Bar
+@use './variables' as *;
+@use './colors.module.scss' as *;
+
 .progress {
   position: relative;
   height: 4px;