1 files changed, 68 insertions, 48 deletions

diff --git a/src/layouts/_split-view.scss b/src/layouts/_split-view.scss
index a76f6e8..6469a7d 100644
--- a/src/layouts/_split-view.scss
+++ b/src/layouts/_split-view.scss
@@ -8,64 +8,84 @@
 @use 'split-view.vars' as vars;
 
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
 
-    @include bem.layout('split-view') {
-        display:     flex;
-        gap:         props.get(vars.$col-gap);
-        align-items: start;
+        @include bem.layout('split-view') {
+                display:     flex;
+                gap:         props.get(vars.$col-gap);
+                align-items: start;
 
-        @include bem.modifier('gapless') {
-            gap: props.get(vars.$gapless);
-        }
+                @include bem.elem('panel') {
+                        flex:            1 1 auto;
+                        inline-size:     100%;
+                        min-inline-size: 0;
 
-        @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('side-25') {
-                flex:            0 0 auto;
-                inline-size:     25%;
-                min-inline-size: props.get(vars.$panel--side-25--min);
-            }
+                        @include bem.modifier('sticky-0') {
+                                position:          sticky;
+                                inset-block-start: 0;
+                        }
 
-            @include bem.modifier('sticky') {
-                position:          sticky;
-                inset-block-start: 0;
-            }
+                        @include bem.modifier('sticky') {
+                                position:          sticky;
+                                inset-block-start: props.get(vars.$panel--sticky-offset);
+                        }
 
-            @include bem.modifier('sticky-400') {
-                position:          sticky;
-                inset-block-start: props.get(vars.$panel--sticky-400--inset);
-            }
-        }
+                        @include bem.modifier('sticky-400') {
+                                position:          sticky;
+                                inset-block-start: calc(props.get(vars.$panel--sticky-400--inset) + props.get(vars.$panel--sticky-offset));
+                        }
 
-        @include bem.elem('content') {
-            inline-size: 100%;
-        }
+                        @include bem.modifier('sticky-1200') {
+                                position:          sticky;
+                                inset-block-start: calc(props.get(vars.$panel--sticky-1200--inset) + props.get(vars.$panel--sticky-offset));
+                        }
+                }
 
-        @include media.media('<=md') {
-            flex-direction: column;
-            gap:            props.get(vars.$row-gap);
-            align-items:    stretch;
+                @include bem.modifier('gapless') {
+                        gap: props.get(vars.$gapless);
 
-            @include bem.modifier('wrap-reverse') {
-                flex-direction: column-reverse;
-            }
+                        @include bem.elem('panel') {
+                                @include bem.modifier('side-25') {
+                                        min-inline-size: calc(props.get(vars.$panel--side-25--min) + props.get(vars.$col-gap) - props.get(vars.$gapless));
+                                }
+                        }
+                }
 
-            @include bem.elem('panel') {
-                flex: 1 1 auto;
+                @include bem.elem('content') {
+                        inline-size: 100%;
+                }
 
-                @include bem.modifier('side-25') {
-                    inline-size:     auto;
-                    min-inline-size: 0;
-                }
+                @include media.media('<=md') {
+                        flex-direction: column;
+                        gap:            props.get(vars.$row-gap);
+                        align-items:    stretch;
 
-                @include bem.modifier('sticky', 'sticky-400') {
-                    position: static;
-                }
-            }
-        }
-    }
+                        @include bem.modifier('gapless') {
+                                gap: props.get(vars.$gapless);
+                        }
+
+                        @include bem.modifier('wrap-reverse') {
+                                flex-direction: column-reverse;
+                        }
+
+                        @include bem.elem('panel') {
+                                inline-size: auto;
+                
+                                @include bem.modifier('side-25') {
+                                        inline-size:     auto;
+                                        min-inline-size: 0;
+                                }
+
+                                @include bem.modifier('sticky', 'sticky-400', 'sticky-1200') {
+                                        position: static;
+                                }
+                        }
+                }
+        }
 }