ESLINT is holy crap

src/styles/mixins/m3-mixins.sass

@@ -0,0 +1,75 @@
+@mixin m3-label-mixin
+    display: flex
+    position: relative
+    align-items: center
+    justify-content: center
+    aspect-ratio: 1
+
+@mixin m3-state-layer-mixin
+    position: absolute
+    width: 2.5rem
+    aspect-ratio: inherit
+    border-radius: 50%
+    transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
+
+@mixin m3-fab-default($b-radius, $width, $height : $width, $padding : 0)
+    width: $width
+    height: $height
+    border-radius: $b-radius
+    padding: $padding
+
+@mixin m3-fab-colors-palette($bg-color, $color)
+    &:not(.without-elevation)
+        @include elevation-3(false)
+    background-color: var($bg-color)
+    color: var($color)
+    & > svg.m3-svg-icon
+        fill: var($color)
+    & > .m3.m3-ripple-domain > .m3.ripple
+        background: color-mix(in srgb, var($color) 12%, transparent)
+
+@mixin elevation-0($important)
+    @if $important == true
+        box-shadow: none !important
+    @else
+        box-shadow: none
+
+@mixin elevation-1($important)
+    @if $important == true
+        box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30) !important
+    @else
+        box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30)
+
+@mixin elevation-2($important)
+    @if $important == true
+        box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30) !important
+    @else
+        box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30)
+
+@mixin elevation-3($important)
+    @if $important == true
+        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.30), 0 4px 8px 3px rgba(0, 0, 0, 0.15) !important
+    @else
+        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.30), 0 4px 8px 3px rgba(0, 0, 0, 0.15)
+
+@mixin elevation-4($important)
+    @if $important == true
+        box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.30), 0 6px 10px 4px rgba(0, 0, 0, 0.15) !important
+    @else
+        box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.30), 0 6px 10px 4px rgba(0, 0, 0, 0.15)
+
+@mixin elevation-5($important)
+    @if $important == true
+        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.30), 0 8px 12px 6px rgba(0, 0, 0, 0.15) !important
+    @else
+        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.30), 0 8px 12px 6px rgba(0, 0, 0, 0.15)
+
+@mixin state-layer
+    transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
+    content: ""
+    top: 0
+    bottom: 0
+    left: 0
+    right: 0
+    position: absolute
+    background: #00000000