From cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Wed, 22 Jul 2026 12:27:09 +0200
Subject: Paths

---
 src/layouts/_split-view.scss | 93 ++++++++++++++++++++++++--------------------
 1 file changed, 51 insertions(+), 42 deletions(-)

(limited to 'src/layouts/_split-view.scss')

diff --git a/src/layouts/_split-view.scss b/src/layouts/_split-view.scss
index ea651c7..1bffddd 100644
--- a/src/layouts/_split-view.scss
+++ b/src/layouts/_split-view.scss
@@ -1,101 +1,110 @@
-@use 'sass:meta';
-@use 'pkg:include-media/dist/include-media' as media;
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
+@use "sass:meta";
+@use "pkg:include-media/dist/include-media" as media;
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
 
-@forward 'split-view.vars';
-@use 'split-view.vars' as vars;
+@forward "split-view.vars";
+@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);
+	@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%;
+		@include bem.elem("panel") {
+			flex: 1 1 auto;
+			inline-size: 100%;
 			min-inline-size: 0;
 
 			&::before {
-				display:       block;
-				margin-block:  -100em 100em;
-				content:       '';
+				display: block;
+				margin-block: -100em 100em;
+				content: "";
 			}
 
-			@include bem.modifier('side-25') {
-				flex:        0 0 auto;
+			@include bem.modifier("side-25") {
+				flex: 0 0 auto;
 				inline-size: 25%;
 			}
 
-			@include bem.modifier('min-50') {
+			@include bem.modifier("min-50") {
 				min-inline-size: props.get(vars.$panel--min-50);
 			}
 
-			@include bem.modifier('min-100') {
+			@include bem.modifier("min-100") {
 				min-inline-size: props.get(vars.$panel--min-100);
 			}
 
-			@include bem.modifier('min-200') {
+			@include bem.modifier("min-200") {
 				min-inline-size: props.get(vars.$panel--min-200);
 			}
 
-			@include bem.modifier('sticky') {
-				position:          sticky;
+			@include bem.modifier("sticky") {
+				position: sticky;
 				inset-block-start: props.get(vars.$panel--sticky-offset);
 			}
 		}
 
-		@include bem.modifier('gapless') {
+		@include bem.modifier("gapless") {
 			gap: props.get(vars.$gapless);
 
-			@include bem.elem('panel') {
-				@include bem.modifier('min-50') {
-					min-inline-size: calc(props.get(vars.$panel--min-50) + props.get(vars.$col-gap) - props.get(vars.$gapless));
+			@include bem.elem("panel") {
+				@include bem.modifier("min-50") {
+					min-inline-size: calc(
+						props.get(vars.$panel--min-50) +
+							props.get(vars.$col-gap) - props.get(vars.$gapless)
+					);
 				}
 
-				@include bem.modifier('min-100') {
-					min-inline-size: calc(props.get(vars.$panel--min-100) + props.get(vars.$col-gap) - props.get(vars.$gapless));
+				@include bem.modifier("min-100") {
+					min-inline-size: calc(
+						props.get(vars.$panel--min-100) +
+							props.get(vars.$col-gap) - props.get(vars.$gapless)
+					);
 				}
 
-				@include bem.modifier('min-200') {
-					min-inline-size: calc(props.get(vars.$panel--min-200) + props.get(vars.$col-gap) - props.get(vars.$gapless));
+				@include bem.modifier("min-200") {
+					min-inline-size: calc(
+						props.get(vars.$panel--min-200) +
+							props.get(vars.$col-gap) - props.get(vars.$gapless)
+					);
 				}
 			}
 		}
 
-		@include bem.elem('content') {
+		@include bem.elem("content") {
 			inline-size: 100%;
 		}
 
-		@include media.media('<=md') {
+		@include media.media("<=md") {
 			flex-direction: column;
-			gap:            props.get(vars.$row-gap);
-			align-items:    stretch;
+			gap: props.get(vars.$row-gap);
+			align-items: stretch;
 
-			@include bem.modifier('gapless') {
+			@include bem.modifier("gapless") {
 				gap: props.get(vars.$gapless);
 			}
 
-			@include bem.modifier('wrap-reverse') {
+			@include bem.modifier("wrap-reverse") {
 				flex-direction: column-reverse;
 			}
 
-			@include bem.elem('panel') {
+			@include bem.elem("panel") {
 				inline-size: auto;
 
-				@include bem.modifier('side-25') {
+				@include bem.modifier("side-25") {
 					inline-size: auto;
 				}
 
-				@include bem.modifier('min-50', 'min-100', 'min-200') {
+				@include bem.modifier("min-50", "min-100", "min-200") {
 					min-inline-size: 0;
 				}
 
-				@include bem.modifier('sticky') {
+				@include bem.modifier("sticky") {
 					position: static;
 				}
 			}
-- 
cgit v1.3.1