1 files changed, 36 insertions, 32 deletions

diff --git a/src/layouts/_split-view.scss b/src/layouts/_split-view.scss
index eac739f..2bc35bc 100644
--- a/src/layouts/_split-view.scss
+++ b/src/layouts/_split-view.scss
@@ -7,47 +7,51 @@
 @forward 'split-view.vars';
 @use 'split-view.vars' as vars;
 
-@include bem.layout('split-view') {
-    display: flex;
-    gap: props.get(vars.$col-gap);
-    align-items: start;
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
 
-    @include bem.elem('panel') {
-        flex: 1 1 auto;
-        inline-size: 100%;
-        min-inline-size: 0;
-
-        @include bem.modifier('side-25') {
-            flex: 0 0 auto;
-            inline-size: 25%;
-            min-inline-size: props.get(vars.$panel--side-25--min);
-        }
-
-        @include bem.modifier('sticky') {
-            position: sticky;
-            inset-block-start: props.get(vars.$panel--sticky--inset);
-        }
-    }
-
-    @include bem.elem('content') {
-        inline-size: 100%;
-    }
-
-    @include media.media('<=md') {
-        flex-direction: column;
-        gap:            props.get(vars.$row-gap);
-        align-items:    stretch;
+    @include bem.layout('split-view') {
+        display: flex;
+        gap: props.get(vars.$col-gap);
+        align-items: start;
 
         @include bem.elem('panel') {
             flex: 1 1 auto;
+            inline-size: 100%;
+            min-inline-size: 0;
 
             @include bem.modifier('side-25') {
-                inline-size: auto;
-                min-inline-size: 0;
+                flex: 0 0 auto;
+                inline-size: 25%;
+                min-inline-size: props.get(vars.$panel--side-25--min);
             }
 
             @include bem.modifier('sticky') {
-                position: static;
+                position: sticky;
+                inset-block-start: props.get(vars.$panel--sticky--inset);
+            }
+        }
+
+        @include bem.elem('content') {
+            inline-size: 100%;
+        }
+
+        @include media.media('<=md') {
+            flex-direction: column;
+            gap: props.get(vars.$row-gap);
+            align-items: stretch;
+
+            @include bem.elem('panel') {
+                flex: 1 1 auto;
+
+                @include bem.modifier('side-25') {
+                    inline-size: auto;
+                    min-inline-size: 0;
+                }
+
+                @include bem.modifier('sticky') {
+                    position: static;
+                }
             }
         }
     }