From 41b0d0497988274057fc2512c822a6bc9d2d3ebd Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Wed, 6 Aug 2025 16:40:56 +0200
Subject: Switch to tab indentation

---
 src/layouts/_button-group.scss      |  64 ++++----
 src/layouts/_button-group.vars.scss |   8 +-
 src/layouts/_card-list.scss         | 294 ++++++++++++++++++------------------
 src/layouts/_container.scss         |  30 ++--
 src/layouts/_container.vars.scss    |   6 +-
 src/layouts/_flex.scss              |  24 +--
 src/layouts/_form.scss              |  88 +++++------
 src/layouts/_media.scss             |  62 ++++----
 src/layouts/_media.vars.scss        |   8 +-
 src/layouts/_overflow.scss          |   8 +-
 src/layouts/_split-view.scss        | 158 +++++++++----------
 11 files changed, 375 insertions(+), 375 deletions(-)

(limited to 'src/layouts')

diff --git a/src/layouts/_button-group.scss b/src/layouts/_button-group.scss
index 6c874e1..44719be 100644
--- a/src/layouts/_button-group.scss
+++ b/src/layouts/_button-group.scss
@@ -8,43 +8,43 @@
 @use '../objects/button.vars' as button;
 
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+	@include materialize-at-root(meta.module-variables('vars'));
 
-    @include bem.layout('button-group') {
-        display:   inline-flex;
-        flex-wrap: wrap;
-        gap:       props.get(vars.$gap);
+	@include bem.layout('button-group') {
+		display:   inline-flex;
+		flex-wrap: wrap;
+		gap:       props.get(vars.$gap);
 
-        @each $mod, $size in vars.$sizes {
-            @include bem.modifier($mod) {
-                gap: props.get($size);
-            }
-        }
+		@each $mod, $size in vars.$sizes {
+			@include bem.modifier($mod) {
+				gap: props.get($size);
+			}
+		}
 
-        @include bem.modifier('align-block') {
-            margin-inline: calc(-1 * props.get(button.$pad-i) - props.get(button.$border-width));
+		@include bem.modifier('align-block') {
+			margin-inline: calc(-1 * props.get(button.$pad-i) - props.get(button.$border-width));
 
-            @include bem.modifier('pill') {
-                margin-inline: calc(-1 * props.get(button.$pad-i-pill) - props.get(button.$border-width));
-            }
+			@include bem.modifier('pill') {
+				margin-inline: calc(-1 * props.get(button.$pad-i-pill) - props.get(button.$border-width));
+			}
 
-            @include bem.modifier('icon') {
-                margin-inline: calc(-1 * props.get(button.$pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1));
-            }
+			@include bem.modifier('icon') {
+				margin-inline: calc(-1 * props.get(button.$pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1));
+			}
 
-            @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in button.$fixed-sizes {
-                @include bem.modifier('action-#{$mod}') {
-                    margin-inline: calc(-1 * props.get($pad-i) - props.get(button.$border-width));
+			@each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in button.$fixed-sizes {
+				@include bem.modifier('action-#{$mod}') {
+					margin-inline: calc(-1 * props.get($pad-i) - props.get(button.$border-width));
     
-                    @include bem.modifier('pill') {
-                        margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(button.$border-width));
-                    }
-
-                    @include bem.modifier('icon') {
-                        margin-inline: calc(-1 * props.get($pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1));
-                    }
-                }
-            }
-        }
-    }
+					@include bem.modifier('pill') {
+						margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(button.$border-width));
+					}
+
+					@include bem.modifier('icon') {
+						margin-inline: calc(-1 * props.get($pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1));
+					}
+				}
+			}
+		}
+	}
 }
diff --git a/src/layouts/_button-group.vars.scss b/src/layouts/_button-group.vars.scss
index 50c1b53..b56eec7 100644
--- a/src/layouts/_button-group.vars.scss
+++ b/src/layouts/_button-group.vars.scss
@@ -9,8 +9,8 @@ $lg:      props.def(--l-button-group--lg, props.get(core.$size--300)) !default;
 $xl:      props.def(--l-button-group--xl, props.get(core.$size--450)) !default;
 
 $sizes: (
-    'gapless': $gapless,
-    'sm':      $sm,
-    'lg':      $lg,
-    'xl':      $xl,
+	'gapless': $gapless,
+	'sm':      $sm,
+	'lg':      $lg,
+	'xl':      $xl,
 ) !default;
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index cca6e72..aedbfd0 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -8,151 +8,151 @@
 @use 'card-list.vars' as vars;
 
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
-
-    @include bem.layout('card-list') {
-        display:        flex;
-        flex-direction: column;
-        gap:            props.get(vars.$row-gap);
-
-        @include bem.modifier('merge') {
-            position:         relative;
-            gap:              calc(2 * props.get(vars.$merge-padding) + props.get(vars.$border-width));
-            padding:          props.get(vars.$merge-padding);
-            background-color: props.get(vars.$card-bg-color);
-            border:           props.get(vars.$border-width) solid props.get(vars.$border-color);
-            border-radius:    calc(props.get(vars.$rounding) + props.get(vars.$merge-padding));
-
-            @include bem.elem('card') {
-                &:not(:last-child) {
-                    position:                relative;
-                    border-end-start-radius: 0;
-                    border-end-end-radius:   0;
-
-                    &::after {
-                        position:          absolute;
-                        inset-block-start: calc(100% + props.get(vars.$merge-padding) + props.get(vars.$border-width));
-                        inset-inline:      calc(-1 * props.get(vars.$merge-padding) - props.get(vars.$border-width));
-                        content:           '';
-                        display:           block;
-                        block-size:        props.get(vars.$border-width);
-                        background-color:  props.get(vars.$border-color);
-                    }
-                }
-
-                &:hover,
-                &:active,
-                &:focus-visible {
-                    transform:  none;
-                }
-
-                @include bem.next-twin-elem {
-                    border-start-start-radius: 0;
-                    border-start-end-radius:   0;
-                }
-            }
-
-            @include bem.modifier('borderless') {
-                border-color: props.get(vars.$card-bg-color);
-
-                @include bem.elem('card') {
-                    &:not(:last-child) {
-                        &::after {
-                            inset-inline: calc(-1 * props.get(vars.$merge-padding) - 2 * props.get(vars.$border-width));
-                        }
-                    }
-                }
-            }
-
-            @include bem.modifier('shadow') {
-                box-shadow:
-                    props.get(vars.$shadow-x)
-                    props.get(vars.$shadow-y)
-                    props.get(vars.$shadow-blur)
-                    props.get(vars.$shadow-grow)
-                    props.get(vars.$shadow-color);
-            }
-        }
-
-        @include bem.modifier('quiet') {
-            row-gap: props.get(vars.$quiet--row-gap);
-        }
-
-        @include bem.modifier('grid') {
-            display:               grid;
-            grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid--col-width), 1fr));
-            gap:                   props.get(vars.$grid--row-gap) props.get(vars.$grid--col-gap);
-
-            @include bem.modifier('quiet') {
-                row-gap: props.get(vars.$grid--quiet--row-gap);
-            }
-        }
-
-        @include bem.modifier('grid-sm') {
-            display:               grid;
-            grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid-sm--col-width), 1fr));
-            gap:                   props.get(vars.$grid-sm--row-gap) props.get(vars.$grid-sm--col-gap);
-
-            @include bem.modifier("grid-sm") {
-                @include media.media("<=md") {
-                    display: flex;
-                    gap:     props.get(vars.$row-gap);
-                }
-            }
-
-            @include bem.modifier('quiet') {
-                row-gap: props.get(vars.$grid-sm--quiet--row-gap);
-            }
-        }
-
-        @include bem.modifier('masonry') {
-            display:    block;
-            columns:    auto props.get(vars.$masonry--col-width);
-            column-gap: props.get(vars.$masonry--col-gap);
-
-            @include bem.elem('card') {
-                margin-block-end: props.get(vars.$masonry--row-gap);
-                break-inside:     avoid;
-            }
-
-            @include bem.modifier('quiet') {
-                @include bem.elem('card') {
-                    margin-block-end: props.get(vars.$masonry--quiet--row-gap);
-                }
-            }
-        }
-
-        @include bem.modifier('masonry-h') {
-            flex-flow: row wrap;
-            gap:       props.get(vars.$masonry-h--row-gap) props.get(vars.$masonry-h--col-gap);
-
-            @include bem.modifier('no-flush') {
-                &::after {
-                    display:     block;
-                    flex:        1 0 auto;
-                    inline-size: props.get(vars.$masonry-h--row-height);
-                    content:     '';
-                }
-            }
-
-            @include bem.elem('card') {
-                flex:            1 0 auto;
-                max-inline-size: 100%;
-            }
-
-            @include bem.elem('card-image') {
-                block-size: props.get(vars.$masonry-h--row-height);
-            }
-
-            @include bem.modifier('quiet') {
-                row-gap: props.get(vars.$masonry-h--quiet--row-gap);
-            }
-        }
-
-        @include bem.modifier('aspect-5\\/4') {
-            @include bem.elem('card-image') {
-                aspect-ratio: 5 / 4;
-            }
-        }
-    }
+	@include materialize-at-root(meta.module-variables('vars'));
+
+	@include bem.layout('card-list') {
+		display:        flex;
+		flex-direction: column;
+		gap:            props.get(vars.$row-gap);
+
+		@include bem.modifier('merge') {
+			position:         relative;
+			gap:              calc(2 * props.get(vars.$merge-padding) + props.get(vars.$border-width));
+			padding:          props.get(vars.$merge-padding);
+			background-color: props.get(vars.$card-bg-color);
+			border:           props.get(vars.$border-width) solid props.get(vars.$border-color);
+			border-radius:    calc(props.get(vars.$rounding) + props.get(vars.$merge-padding));
+
+			@include bem.elem('card') {
+				&:not(:last-child) {
+					position:                relative;
+					border-end-start-radius: 0;
+					border-end-end-radius:   0;
+
+					&::after {
+						position:          absolute;
+						inset-block-start: calc(100% + props.get(vars.$merge-padding) + props.get(vars.$border-width));
+						inset-inline:      calc(-1 * props.get(vars.$merge-padding) - props.get(vars.$border-width));
+						display:           block;
+						block-size:        props.get(vars.$border-width);
+						content:           '';
+						background-color:  props.get(vars.$border-color);
+					}
+				}
+
+				&:hover,
+				&:active,
+				&:focus-visible {
+					transform:  none;
+				}
+
+				@include bem.next-twin-elem {
+					border-start-start-radius: 0;
+					border-start-end-radius:   0;
+				}
+			}
+
+			@include bem.modifier('borderless') {
+				border-color: props.get(vars.$card-bg-color);
+
+				@include bem.elem('card') {
+					&:not(:last-child) {
+						&::after {
+							inset-inline: calc(-1 * props.get(vars.$merge-padding) - 2 * props.get(vars.$border-width));
+						}
+					}
+				}
+			}
+
+			@include bem.modifier('shadow') {
+				box-shadow:
+					props.get(vars.$shadow-x)
+					props.get(vars.$shadow-y)
+					props.get(vars.$shadow-blur)
+					props.get(vars.$shadow-grow)
+					props.get(vars.$shadow-color);
+			}
+		}
+
+		@include bem.modifier('quiet') {
+			row-gap: props.get(vars.$quiet--row-gap);
+		}
+
+		@include bem.modifier('grid') {
+			display:               grid;
+			grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid--col-width), 1fr));
+			gap:                   props.get(vars.$grid--row-gap) props.get(vars.$grid--col-gap);
+
+			@include bem.modifier('quiet') {
+				row-gap: props.get(vars.$grid--quiet--row-gap);
+			}
+		}
+
+		@include bem.modifier('grid-sm') {
+			display:               grid;
+			grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid-sm--col-width), 1fr));
+			gap:                   props.get(vars.$grid-sm--row-gap) props.get(vars.$grid-sm--col-gap);
+
+			@include bem.modifier('grid-sm') {
+				@include media.media('<=md') {
+					display: flex;
+					gap:     props.get(vars.$row-gap);
+				}
+			}
+
+			@include bem.modifier('quiet') {
+				row-gap: props.get(vars.$grid-sm--quiet--row-gap);
+			}
+		}
+
+		@include bem.modifier('masonry') {
+			display:    block;
+			columns:    auto props.get(vars.$masonry--col-width);
+			column-gap: props.get(vars.$masonry--col-gap);
+
+			@include bem.elem('card') {
+				margin-block-end: props.get(vars.$masonry--row-gap);
+				break-inside:     avoid;
+			}
+
+			@include bem.modifier('quiet') {
+				@include bem.elem('card') {
+					margin-block-end: props.get(vars.$masonry--quiet--row-gap);
+				}
+			}
+		}
+
+		@include bem.modifier('masonry-h') {
+			flex-flow: row wrap;
+			gap:       props.get(vars.$masonry-h--row-gap) props.get(vars.$masonry-h--col-gap);
+
+			@include bem.modifier('no-flush') {
+				&::after {
+					display:     block;
+					flex:        1 0 auto;
+					inline-size: props.get(vars.$masonry-h--row-height);
+					content:     '';
+				}
+			}
+
+			@include bem.elem('card') {
+				flex:            1 0 auto;
+				max-inline-size: 100%;
+			}
+
+			@include bem.elem('card-image') {
+				block-size: props.get(vars.$masonry-h--row-height);
+			}
+
+			@include bem.modifier('quiet') {
+				row-gap: props.get(vars.$masonry-h--quiet--row-gap);
+			}
+		}
+
+		@include bem.modifier('aspect-5\\/4') {
+			@include bem.elem('card-image') {
+				aspect-ratio: 5 / 4;
+			}
+		}
+	}
 }
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
index 17ab2f0..0ae68c1 100644
--- a/src/layouts/_container.scss
+++ b/src/layouts/_container.scss
@@ -7,22 +7,22 @@
 @use 'container.vars' as vars;
 
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+	@include materialize-at-root(meta.module-variables('vars'));
 
-    @include bem.layout('container') {
-        @each $mod, $size in vars.$fixed-sizes {
-            @include bem.modifier($mod) {
-                max-inline-size: props.get($size);
-                margin-inline:   auto;
-            }
-        }
+	@include bem.layout('container') {
+		@each $mod, $size in vars.$fixed-sizes {
+			@include bem.modifier($mod) {
+				max-inline-size: props.get($size);
+				margin-inline:   auto;
+			}
+		}
 
-        @include bem.modifier('pad-i') {
-            padding-inline: props.get(vars.$pad-i);
-        }
+		@include bem.modifier('pad-i') {
+			padding-inline: props.get(vars.$pad-i);
+		}
 
-        @include bem.modifier('pad-b') {
-            padding-block: props.get(vars.$pad-b);
-        }
-    }
+		@include bem.modifier('pad-b') {
+			padding-block: props.get(vars.$pad-b);
+		}
+	}
 }
diff --git a/src/layouts/_container.vars.scss b/src/layouts/_container.vars.scss
index 56b6c89..8f0cef6 100644
--- a/src/layouts/_container.vars.scss
+++ b/src/layouts/_container.vars.scss
@@ -7,9 +7,9 @@ $fixed-150: props.def(--l-container--fixed-150, fn.px-to-rem(860px)) !default;
 $fixed:     props.def(--l-container--fixed, fn.px-to-rem(680px)) !default;
 
 $fixed-sizes: (
-    'fixed-200': $fixed-200,
-    'fixed-150': $fixed-150,
-    'fixed':     $fixed
+	'fixed-200': $fixed-200,
+	'fixed-150': $fixed-150,
+	'fixed':     $fixed
 ) !default;
 
 $pad-i: props.def(--l-container--pad-i, props.get(core.$size--400)) !default;
diff --git a/src/layouts/_flex.scss b/src/layouts/_flex.scss
index 902ecdb..c99b253 100644
--- a/src/layouts/_flex.scss
+++ b/src/layouts/_flex.scss
@@ -1,19 +1,19 @@
 @use 'iro-sass/src/bem';
 
 @mixin styles {
-    @include bem.layout('flex') {
-        display: flex;
+	@include bem.layout('flex') {
+		display: flex;
 
-        @include bem.modifier('column') {
-            flex-direction: column;
-        }
+		@include bem.modifier('column') {
+			flex-direction: column;
+		}
 
-        @include bem.modifier('wrap') {
-            flex-wrap: wrap;
-        }
+		@include bem.modifier('wrap') {
+			flex-wrap: wrap;
+		}
 
-        @include bem.modifier('wrap-reverse') {
-            flex-wrap: wrap-reverse;
-        }
-    }
+		@include bem.modifier('wrap-reverse') {
+			flex-wrap: wrap-reverse;
+		}
+	}
 }
diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss
index 5f0567b..c804262 100644
--- a/src/layouts/_form.scss
+++ b/src/layouts/_form.scss
@@ -7,53 +7,53 @@
 @use 'form.vars' as vars;
 
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+	@include materialize-at-root(meta.module-variables('vars'));
 
-    @include bem.layout('form') {
-        display:        flex;
-        flex-direction: column;
-        gap:            props.get(vars.$item-spacing-b) props.get(vars.$label-spacing-i);
+	@include bem.layout('form') {
+		display:        flex;
+		flex-direction: column;
+		gap:            props.get(vars.$item-spacing-b) props.get(vars.$label-spacing-i);
 
-        @include bem.elem('item') {
-            display: block;
-        }
+		@include bem.elem('item') {
+			display: block;
+		}
         
-        @include bem.elem('item-content') {
-            @include bem.modifier('align-start') {
-                align-self: start;
-            }
-        }
-
-        @include bem.modifier('row') {
-            flex-direction: row;
-            align-items:    flex-end;
-        }
-
-        @include bem.modifier('labels-start', 'labels-end') {
-            display:               grid;
-            grid-template-rows:    auto;
-            grid-template-columns: auto 1fr;
-            align-items:           baseline;
-
-            @include bem.elem('item') {
-                display: contents;
-            }
+		@include bem.elem('item-content') {
+			@include bem.modifier('align-start') {
+				align-self: start;
+			}
+		}
+
+		@include bem.modifier('row') {
+			flex-direction: row;
+			align-items:    flex-end;
+		}
+
+		@include bem.modifier('labels-start', 'labels-end') {
+			display:               grid;
+			grid-template-rows:    auto;
+			grid-template-columns: auto 1fr;
+			align-items:           baseline;
+
+			@include bem.elem('item') {
+				display: contents;
+			}
         
-            @include bem.elem('item-label') {
-                grid-column:        1;
-                padding-inline-end: 0;
-            }
+			@include bem.elem('item-label') {
+				grid-column:        1;
+				padding-inline-end: 0;
+			}
         
-            @include bem.elem('item-content') {
-                grid-column:        2;
-                margin-block-start: 0;
-            }
-        }
-
-        @include bem.modifier('labels-end') {
-            @include bem.elem('item-label') {
-                text-align: end;
-            }
-        }
-    }
+			@include bem.elem('item-content') {
+				grid-column:        2;
+				margin-block-start: 0;
+			}
+		}
+
+		@include bem.modifier('labels-end') {
+			@include bem.elem('item-label') {
+				text-align: end;
+			}
+		}
+	}
 }
diff --git a/src/layouts/_media.scss b/src/layouts/_media.scss
index 2192db5..929e60f 100644
--- a/src/layouts/_media.scss
+++ b/src/layouts/_media.scss
@@ -7,35 +7,35 @@
 @use 'media.vars' as vars;
 
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
-
-    @include bem.layout('media') {
-        display:     flex;
-        gap:         props.get(vars.$gap);
-        align-items: center;
-        line-height: 1.4;
-
-        @each $mod, $size in vars.$sizes {
-            @include bem.modifier($mod) {
-                gap: props.get($size);
-            }
-        }
-
-        @include bem.modifier('wrap') {
-            flex-wrap: wrap;
-        }
-
-        @include bem.elem('block') {
-            flex: 0 0 auto;
-
-            @include bem.modifier('shrink', 'main') {
-                flex-shrink:     1;
-                min-inline-size: 0;
-            }
-
-            @include bem.modifier('main') {
-                inline-size: 100%;
-            }
-        }
-    }
+	@include materialize-at-root(meta.module-variables('vars'));
+
+	@include bem.layout('media') {
+		display:     flex;
+		gap:         props.get(vars.$gap);
+		align-items: center;
+		line-height: 1.4;
+
+		@each $mod, $size in vars.$sizes {
+			@include bem.modifier($mod) {
+				gap: props.get($size);
+			}
+		}
+
+		@include bem.modifier('wrap') {
+			flex-wrap: wrap;
+		}
+
+		@include bem.elem('block') {
+			flex: 0 0 auto;
+
+			@include bem.modifier('shrink', 'main') {
+				flex-shrink:     1;
+				min-inline-size: 0;
+			}
+
+			@include bem.modifier('main') {
+				inline-size: 100%;
+			}
+		}
+	}
 }
diff --git a/src/layouts/_media.vars.scss b/src/layouts/_media.vars.scss
index fd6d986..dcb10de 100644
--- a/src/layouts/_media.vars.scss
+++ b/src/layouts/_media.vars.scss
@@ -9,8 +9,8 @@ $lg:      props.def(--l-media--lg, props.get(core.$size--300)) !default;
 $xl:      props.def(--l-media--xl, props.get(core.$size--450)) !default;
 
 $sizes: (
-    'gapless': $gapless,
-    'sm':      $sm,
-    'lg':      $lg,
-    'xl':      $xl,
+	'gapless': $gapless,
+	'sm':      $sm,
+	'lg':      $lg,
+	'xl':      $xl,
 ) !default;
diff --git a/src/layouts/_overflow.scss b/src/layouts/_overflow.scss
index 9fba7eb..6d31d37 100644
--- a/src/layouts/_overflow.scss
+++ b/src/layouts/_overflow.scss
@@ -3,9 +3,9 @@
 @use '../core.vars' as core;
 
 @mixin styles {
-    @include bem.layout('overflow') {
-        overflow:        auto;
-        scrollbar-color: props.get(core.$theme, --text-disabled) transparent;
-    }
+	@include bem.layout('overflow') {
+		overflow:        auto;
+		scrollbar-color: props.get(core.$theme, --text-disabled) transparent;
+	}
 }
 
diff --git a/src/layouts/_split-view.scss b/src/layouts/_split-view.scss
index f522254..6469a7d 100644
--- a/src/layouts/_split-view.scss
+++ b/src/layouts/_split-view.scss
@@ -8,84 +8,84 @@
 @use 'split-view.vars' as vars;
 
 @mixin styles {
-    @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.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-0') {
-                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: calc(props.get(vars.$panel--sticky-400--inset) + props.get(vars.$panel--sticky-offset));
-            }
-
-            @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 bem.modifier('gapless') {
-            gap: props.get(vars.$gapless);
-
-            @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('content') {
-            inline-size: 100%;
-        }
-
-        @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') {
-                inline-size: auto;
+	@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.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-0') {
+				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: calc(props.get(vars.$panel--sticky-400--inset) + props.get(vars.$panel--sticky-offset));
+			}
+
+			@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 bem.modifier('gapless') {
+			gap: props.get(vars.$gapless);
+
+			@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('content') {
+			inline-size: 100%;
+		}
+
+		@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') {
+				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;
-                }
-            }
-        }
-    }
+				@include bem.modifier('side-25') {
+					inline-size:     auto;
+					min-inline-size: 0;
+				}
+
+				@include bem.modifier('sticky', 'sticky-400', 'sticky-1200') {
+					position: static;
+				}
+			}
+		}
+	}
 }
-- 
cgit v1.2.3-70-g09d2