From aeed08dc46662a0d70e04bcea612a701633736e7 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Wed, 22 Jul 2026 13:00:59 +0200
Subject: Revert "Paths"

This reverts commit cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.
---
 src/layouts/_card-list.scss       | 178 ++++++++++++++++----------------------
 src/layouts/_card-list.vars.scss  | 135 +++++++++--------------------
 src/layouts/_container.scss       |  26 +++---
 src/layouts/_container.vars.scss  |  39 +++++----
 src/layouts/_flex.scss            |  10 +--
 src/layouts/_form.scss            |  52 +++++------
 src/layouts/_form.vars.scss       |   6 +-
 src/layouts/_hlist.scss           |  71 +++++++--------
 src/layouts/_hlist.vars.scss      |  18 ++--
 src/layouts/_media.scss           |  30 +++----
 src/layouts/_media.vars.scss      |  20 ++---
 src/layouts/_overflow.scss        |  10 +--
 src/layouts/_split-view.scss      |  93 +++++++++-----------
 src/layouts/_split-view.vars.scss |  15 ++--
 14 files changed, 300 insertions(+), 403 deletions(-)

(limited to 'src/layouts')

diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index c05b798..f2a6ff5 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -1,44 +1,39 @@
-@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 *;
+@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 "../objects/card.vars" as card;
+@use '../objects/card.vars' as card;
 
-@forward "card-list.vars";
-@use "card-list.vars" as vars;
+@forward 'card-list.vars';
+@use 'card-list.vars' as vars;
 
 @mixin styles {
-	@include materialize-at-root(meta.module-variables("vars"));
+	@include materialize-at-root(meta.module-variables('vars'));
 
-	@include bem.layout("card-list") {
-		display: flex;
+	@include bem.layout('card-list') {
+		display:        flex;
 		flex-direction: column;
-		gap: props.get(vars.$row-gap);
+		gap:            props.get(vars.$row-gap);
 
-		@include bem.modifier("merge") {
-			position: relative;
-			gap: 0;
+		@include bem.modifier('merge') {
+			position:      relative;
+			gap:           0;
 			border-radius: props.get(card.$rounding);
 
-			@include bem.elem("card") {
-				border-color: props.get(card.$border-color) props.get(card.$border-color)
-					props.get(vars.$border-color);
+			@include bem.elem('card') {
+				border-color:    props.get(card.$border-color) props.get(card.$border-color) props.get(vars.$border-color);
 				background-clip: content-box;
-				box-shadow: none;
+				box-shadow:      none;
 
 				&:not(:last-child) {
-					position: relative;
+					position:                relative;
 					border-end-start-radius: 0;
-					border-end-end-radius: 0;
+					border-end-end-radius:   0;
 				}
 
-				@include bem.multi(
-					"&:link, &:visited, &:enabled",
-					"modifier" "interactive",
-					"modifier" "collapsible"
-				) {
+				@include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
 					&:hover,
 					&:active,
 					&:focus-visible {
@@ -51,28 +46,19 @@
 				}
 
 				@include bem.next-twin-elem {
-					margin-block-start: calc(-1 * props.get(card.$border-width));
-					border-block-start-color: transparent;
+					margin-block-start:        calc(-1 * props.get(card.$border-width));
+					border-block-start-color:  transparent;
 					border-start-start-radius: 0;
-					border-start-end-radius: 0;
+					border-start-end-radius:   0;
 
-					@include bem.multi(
-						"&:link, &:visited, &:enabled",
-						"modifier" "interactive",
-						"modifier" "collapsible"
-					) {
+					@include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
 						&:hover,
 						&:active {
 							border-block-start-color: props.get(card.$hover--border-color);
 						}
 
 						&:focus-visible {
-							margin-block-start: calc(
-								-1 *
-									props.get(card.$border-width) - props.get(
-										card.$key-focus--border-width
-									)
-							);
+							margin-block-start: calc(-1 * props.get(card.$border-width) - props.get(card.$key-focus--border-width));
 						}
 					}
 				}
@@ -81,11 +67,7 @@
 					border-block-end-color: props.get(card.$border-color);
 				}
 
-				@include bem.multi(
-					"&:link, &:visited, &:enabled",
-					"modifier" "interactive",
-					"modifier" "collapsible"
-				) {
+				@include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
 					&:hover,
 					&:active {
 						border-color: props.get(card.$hover--border-color);
@@ -93,20 +75,17 @@
 
 					&:focus-visible {
 						border-color: props.get(card.$hover--bg-color);
-						box-shadow: 0 0 0
-							calc(
-								props.get(card.$key-focus--border-width) +
-									props.get(card.$key-focus--outline-width)
-							)
+						box-shadow:
+							0 0 0
+							calc(props.get(card.$key-focus--border-width) + props.get(card.$key-focus--outline-width))
 							props.get(card.$key-focus--outline-color);
 					}
 				}
 			}
 
-			@include bem.modifier("borderless") {
-				@include bem.elem("card") {
-					border-color: props.get(card.$bg-color) props.get(card.$bg-color)
-						props.get(vars.$border-color);
+			@include bem.modifier('borderless') {
+				@include bem.elem('card') {
+					border-color: props.get(card.$bg-color) props.get(card.$bg-color) props.get(vars.$border-color);
 
 					@include bem.next-twin-elem {
 						border-block-start-color: transparent;
@@ -116,11 +95,7 @@
 						border-block-end-color: props.get(card.$bg-color);
 					}
 
-					@include bem.multi(
-						"&:link, &:visited, &:enabled",
-						"modifier" "interactive",
-						"modifier" "collapsible"
-					) {
+					@include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
 						&:hover,
 						&:active {
 							border-color: props.get(card.$hover--border-color);
@@ -133,87 +108,84 @@
 				}
 			}
 
-			@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)
+			@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(card.$shadow-color);
 			}
 
-			@include bem.modifier("interactive") {
-				transition:
-					transform 0.2s,
-					box-shadow 0.2s;
+			@include bem.modifier('interactive') {
+				transition: transform .2s, box-shadow .2s;
 
 				&:hover,
 				&:active,
 				&:focus-within {
 					box-shadow: none;
-					transform: translateY(props.get(card.$hover--offset-b));
+					transform:  translateY(props.get(card.$hover--offset-b));
 				}
 			}
 		}
 
-		@include bem.modifier("quiet") {
+		@include bem.modifier('quiet') {
 			row-gap: props.get(vars.$quiet--row-gap);
 		}
 
-		@each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap,
-			$breakpoint in vars.$grid-layouts
-		{
+		@each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap, $breakpoint in vars.$grid-layouts {
 			@include bem.modifier($mod) {
-				display: grid;
+				display:               grid;
 				grid-template-columns: repeat(auto-fill, minmax(props.get($col-width), 1fr));
-				gap: props.get($row-gap) props.get($col-gap);
+				gap:                   props.get($row-gap) props.get($col-gap);
 
-				@include bem.modifier("quiet") {
+				@include bem.modifier('quiet') {
 					row-gap: props.get($quiet--row-gap);
 				}
 
-				@include media.media("<=#{$breakpoint}") {
+				@include media.media('<=#{$breakpoint}') {
 					display: flex;
 				}
 			}
 		}
 
-		@each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap,
-			$breakpoint in vars.$flex-layouts
-		{
+		@each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap, $breakpoint in vars.$flex-layouts {
 			@include bem.modifier($mod) {
-				display: flex;
+				display:   flex;
 				flex-flow: row wrap;
-				gap: props.get($row-gap) props.get($col-gap);
+				gap:       props.get($row-gap) props.get($col-gap);
 
-				@include bem.modifier("quiet") {
+				@include bem.modifier('quiet') {
 					row-gap: props.get($quiet--row-gap);
 				}
 
-				@include bem.elem("card") {
-					flex: 0.1 0 auto;
+				@include bem.elem('card') {
+					flex:        0.1 0 auto;
 					inline-size: props.get($col-width);
 				}
 
-				@include media.media("<=#{$breakpoint}") {
+				@include media.media('<=#{$breakpoint}') {
 					flex-flow: column nowrap;
 
-					@include bem.elem("card") {
+					@include bem.elem('card') {
 						inline-size: auto;
 					}
 				}
 			}
 		}
 
-		@include bem.modifier("masonry") {
-			display: block;
-			columns: auto props.get(vars.$masonry--col-width);
+		@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") {
+			@include bem.elem('card') {
 				margin-block-end: props.get(vars.$masonry--row-gap);
-				break-inside: avoid;
+				break-inside:     avoid;
 			}
 
-			@include bem.modifier("quiet") {
-				@include bem.elem("card") {
+			@include bem.modifier('quiet') {
+				@include bem.elem('card') {
 					margin-block-end: props.get(vars.$masonry--quiet--row-gap);
 				}
 			}
@@ -222,34 +194,34 @@
 		@each $mod, $row-gap, $col-gap, $row-height, $quiet--row-gap in vars.$masonry-h-layouts {
 			@include bem.modifier($mod) {
 				flex-flow: row wrap;
-				gap: props.get($row-gap) props.get($col-gap);
+				gap:       props.get($row-gap) props.get($col-gap);
 
-				@include bem.modifier("no-flush") {
+				@include bem.modifier('no-flush') {
 					&::after {
-						display: block;
-						flex: 1 0 auto;
+						display:     block;
+						flex:        1 0 auto;
 						inline-size: props.get($row-height);
-						content: "";
+						content:     '';
 					}
 				}
 
-				@include bem.elem("card") {
-					flex: 1 0 auto;
+				@include bem.elem('card') {
+					flex:            1 0 auto;
 					max-inline-size: 100%;
 				}
 
-				@include bem.elem("card-image") {
+				@include bem.elem('card-image') {
 					block-size: props.get($row-height);
 				}
 
-				@include bem.modifier("quiet") {
+				@include bem.modifier('quiet') {
 					row-gap: props.get($quiet--row-gap);
 				}
 			}
 		}
 
-		@include bem.modifier("aspect-5\\/4") {
-			@include bem.elem("card-image") {
+		@include bem.modifier('aspect-5\\/4') {
+			@include bem.elem('card-image') {
 				aspect-ratio: 5 / 4;
 			}
 		}
diff --git a/src/layouts/_card-list.vars.scss b/src/layouts/_card-list.vars.scss
index ece68f3..fb89b52 100644
--- a/src/layouts/_card-list.vars.scss
+++ b/src/layouts/_card-list.vars.scss
@@ -1,116 +1,61 @@
-@use "pkg:iro-sass/props";
-@use "../core.vars" as core;
-@use "../objects/card" as card;
+@use 'pkg:iro-sass/src/props';
+@use '../core.vars' as core;
+@use '../objects/card' as card;
 
-$row-gap: props.def(--l-card-list--row-gap, props.get(core.$size--200)) !default;
+$row-gap:        props.def(--l-card-list--row-gap, props.get(core.$size--200)) !default;
 $quiet--row-gap: props.def(--l-card-list--quiet--row-gap, props.get(core.$size--800)) !default;
 
-$grid--row-gap: props.def(--l-card-list--grid--row-gap, props.get(core.$size--600)) !default;
-$grid--col-gap: props.def(--l-card-list--grid--col-gap, props.get(core.$size--600)) !default;
-$grid--col-width: props.def(--l-card-list--grid--col-width, props.get(core.$size--3200)) !default;
-$grid--quiet--row-gap: props.def(
-	--l-card-list--grid--quiet--row-gap,
-	props.get(core.$size--800)
-) !default;
+$grid--row-gap:        props.def(--l-card-list--grid--row-gap, props.get(core.$size--600)) !default;
+$grid--col-gap:        props.def(--l-card-list--grid--col-gap, props.get(core.$size--600)) !default;
+$grid--col-width:      props.def(--l-card-list--grid--col-width, props.get(core.$size--3200)) !default;
+$grid--quiet--row-gap: props.def(--l-card-list--grid--quiet--row-gap, props.get(core.$size--800)) !default;
 
-$grid-sm--row-gap: props.def(--l-card-list--grid-sm--row-gap, props.get(core.$size--200)) !default;
-$grid-sm--col-gap: props.def(--l-card-list--grid-sm--col-gap, props.get(core.$size--200)) !default;
-$grid-sm--col-width: props.def(
-	--l-card-list--grid-sm--col-width,
-	props.get(core.$size--4600)
-) !default;
-$grid-sm--quiet--row-gap: props.def(
-	--l-card-list--grid-sm--quiet--row-gap,
-	props.get(core.$size--800)
-) !default;
+$grid-sm--row-gap:        props.def(--l-card-list--grid-sm--row-gap, props.get(core.$size--200)) !default;
+$grid-sm--col-gap:        props.def(--l-card-list--grid-sm--col-gap, props.get(core.$size--200)) !default;
+$grid-sm--col-width:      props.def(--l-card-list--grid-sm--col-width, props.get(core.$size--4600)) !default;
+$grid-sm--quiet--row-gap: props.def(--l-card-list--grid-sm--quiet--row-gap, props.get(core.$size--800)) !default;
 
-$grid-xs--row-gap: props.def(--l-card-list--grid-xs--row-gap, props.get(core.$size--200)) !default;
-$grid-xs--col-gap: props.def(--l-card-list--grid-xs--col-gap, props.get(core.$size--200)) !default;
-$grid-xs--col-width: props.def(
-	--l-card-list--grid-xs--col-width,
-	props.get(core.$size--1600)
-) !default;
-$grid-xs--quiet--row-gap: props.def(
-	--l-card-list--grid-xs--quiet--row-gap,
-	props.get(core.$size--800)
-) !default;
+$grid-xs--row-gap:        props.def(--l-card-list--grid-xs--row-gap, props.get(core.$size--200)) !default;
+$grid-xs--col-gap:        props.def(--l-card-list--grid-xs--col-gap, props.get(core.$size--200)) !default;
+$grid-xs--col-width:      props.def(--l-card-list--grid-xs--col-width, props.get(core.$size--1600)) !default;
+$grid-xs--quiet--row-gap: props.def(--l-card-list--grid-xs--quiet--row-gap, props.get(core.$size--800)) !default;
 
 $grid-layouts: (
-	"grid" $grid--row-gap $grid--col-gap $grid--col-width $grid--quiet--row-gap sm,
-	"grid-sm" $grid-sm--row-gap $grid-sm--col-gap $grid-sm--col-width $grid-sm--quiet--row-gap sm,
-	"grid-xs" $grid-xs--row-gap $grid-xs--col-gap $grid-xs--col-width $grid-xs--quiet--row-gap xs
+	'grid'    $grid--row-gap    $grid--col-gap    $grid--col-width    $grid--quiet--row-gap    sm,
+	'grid-sm' $grid-sm--row-gap $grid-sm--col-gap $grid-sm--col-width $grid-sm--quiet--row-gap sm,
+	'grid-xs' $grid-xs--row-gap $grid-xs--col-gap $grid-xs--col-width $grid-xs--quiet--row-gap xs,
 ) !default;
 
 $flex-layouts: (
-	"flex" $grid--row-gap $grid--col-gap $grid--col-width $grid--quiet--row-gap sm,
-	"flex-sm" $grid-sm--row-gap $grid-sm--col-gap $grid-sm--col-width $grid-sm--quiet--row-gap sm,
-	"flex-xs" $grid-xs--row-gap $grid-xs--col-gap $grid-xs--col-width $grid-xs--quiet--row-gap xs
+	'flex'    $grid--row-gap    $grid--col-gap    $grid--col-width    $grid--quiet--row-gap    sm,
+	'flex-sm' $grid-sm--row-gap $grid-sm--col-gap $grid-sm--col-width $grid-sm--quiet--row-gap sm,
+	'flex-xs' $grid-xs--row-gap $grid-xs--col-gap $grid-xs--col-width $grid-xs--quiet--row-gap xs,
 ) !default;
 
-$masonry-h--row-gap: props.def(
-	--l-card-list--masonry-h--row-gap,
-	props.get(core.$size--400)
-) !default;
-$masonry-h--col-gap: props.def(
-	--l-card-list--masonry-h--col-gap,
-	props.get(core.$size--400)
-) !default;
-$masonry-h--row-height: props.def(
-	--l-card-list--masonry-h--row-height,
-	props.get(core.$size--3200)
-) !default;
-$masonry-h--quiet--row-gap: props.def(
-	--l-card-list--masonry-h--quiet--row-gap,
-	props.get(core.$size--800)
-) !default;
+$masonry-h--row-gap:        props.def(--l-card-list--masonry-h--row-gap, props.get(core.$size--400)) !default;
+$masonry-h--col-gap:        props.def(--l-card-list--masonry-h--col-gap, props.get(core.$size--400)) !default;
+$masonry-h--row-height:     props.def(--l-card-list--masonry-h--row-height, props.get(core.$size--3200)) !default;
+$masonry-h--quiet--row-gap: props.def(--l-card-list--masonry-h--quiet--row-gap, props.get(core.$size--800)) !default;
 
-$masonry-h-sm--row-gap: props.def(
-	--l-card-list--masonry-h-sm--row-gap,
-	props.get(core.$size--400)
-) !default;
-$masonry-h-sm--col-gap: props.def(
-	--l-card-list--masonry-h-sm--col-gap,
-	props.get(core.$size--400)
-) !default;
-$masonry-h-sm--row-height: props.def(
-	--l-card-list--masonry-h-sm--row-height,
-	props.get(core.$size--2600)
-) !default;
-$masonry-h-sm--quiet--row-gap: props.def(
-	--l-card-list--masonry-h-sm--quiet--row-gap,
-	props.get(core.$size--800)
-) !default;
+$masonry-h-sm--row-gap:        props.def(--l-card-list--masonry-h-sm--row-gap, props.get(core.$size--400)) !default;
+$masonry-h-sm--col-gap:        props.def(--l-card-list--masonry-h-sm--col-gap, props.get(core.$size--400)) !default;
+$masonry-h-sm--row-height:     props.def(--l-card-list--masonry-h-sm--row-height, props.get(core.$size--2600)) !default;
+$masonry-h-sm--quiet--row-gap: props.def(--l-card-list--masonry-h-sm--quiet--row-gap, props.get(core.$size--800)) !default;
 
 $masonry-h-layouts: (
-	"masonry-h" $masonry-h--row-gap $masonry-h--col-gap $masonry-h--row-height
-		$masonry-h--quiet--row-gap,
-	"masonry-h-sm" $masonry-h-sm--row-gap $masonry-h-sm--col-gap $masonry-h-sm--row-height
-		$masonry-h-sm--quiet--row-gap
+	'masonry-h'    $masonry-h--row-gap    $masonry-h--col-gap    $masonry-h--row-height    $masonry-h--quiet--row-gap,
+	'masonry-h-sm' $masonry-h-sm--row-gap $masonry-h-sm--col-gap $masonry-h-sm--row-height $masonry-h-sm--quiet--row-gap,
 ) !default;
 
-$masonry--row-gap: props.def(--l-card-list--masonry--row-gap, props.get(core.$size--400)) !default;
-$masonry--col-gap: props.def(--l-card-list--masonry--col-gap, props.get(core.$size--400)) !default;
-$masonry--col-width: props.def(
-	--l-card-list--masonry--col-width,
-	props.get(core.$size--3200)
-) !default;
-$masonry--quiet--row-gap: props.def(
-	--l-card-list--masonry--quiet--row-gap,
-	props.get(core.$size--800)
-) !default;
+$masonry--row-gap:        props.def(--l-card-list--masonry--row-gap, props.get(core.$size--400)) !default;
+$masonry--col-gap:        props.def(--l-card-list--masonry--col-gap, props.get(core.$size--400)) !default;
+$masonry--col-width:      props.def(--l-card-list--masonry--col-width, props.get(core.$size--3200)) !default;
+$masonry--quiet--row-gap: props.def(--l-card-list--masonry--quiet--row-gap, props.get(core.$size--800)) !default;
 
-$shadow-x: props.def(--l-card-list--shadow-x, props.get(card.$shadow-x)) !default;
-$shadow-y: props.def(--l-card-list--shadow-y, props.get(card.$shadow-y)) !default;
+$shadow-x:    props.def(--l-card-list--shadow-x, props.get(card.$shadow-x)) !default;
+$shadow-y:    props.def(--l-card-list--shadow-y, props.get(card.$shadow-y)) !default;
 $shadow-blur: props.def(--l-card-list--shadow-blur, props.get(card.$shadow-blur)) !default;
 $shadow-grow: props.def(--l-card-list--shadow-grow, props.get(card.$shadow-grow)) !default;
 
-$border-color: props.def(
-	--l-card-list--border-color,
-	props.get(card.$border-color),
-	"color"
-) !default;
-$border-color-dark: props.def(
-	--l-card-list--border-color,
-	props.get(core.$theme, --border-mute),
-	"dark"
-) !default;
+$border-color:       props.def(--l-card-list--border-color, props.get(card.$border-color), 'color') !default;
+$border-color-dark:  props.def(--l-card-list--border-color, props.get(core.$theme, --border-mute), 'dark') !default;
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
index 7b3dc3f..46ded23 100644
--- a/src/layouts/_container.scss
+++ b/src/layouts/_container.scss
@@ -1,37 +1,37 @@
-@use "sass:meta";
-@use "pkg:iro-sass/bem";
-@use "pkg:iro-sass/props";
-@use "../props" as *;
+@use 'sass:meta';
+@use 'pkg:iro-sass/src/bem';
+@use 'pkg:iro-sass/src/props';
+@use '../props' as *;
 
-@forward "container.vars";
-@use "container.vars" as vars;
+@forward 'container.vars';
+@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") {
+	@include bem.layout('container') {
 		@each $mod, $size in vars.$fixed-sizes {
 			@include bem.modifier($mod) {
 				max-inline-size: props.get($size);
-				margin-inline: auto;
+				margin-inline:   auto;
 			}
 		}
 
-		@include bem.modifier("pad-i") {
+		@include bem.modifier('pad-i') {
 			padding-inline: props.get(vars.$pad-i);
 		}
 
-		@include bem.modifier("pad-b") {
+		@include bem.modifier('pad-b') {
 			padding-block: props.get(vars.$pad-b);
 		}
 
 		@each $mod, $pad-i, $pad-b in vars.$sizes {
 			@include bem.modifier($mod) {
-				@include bem.modifier("pad-i") {
+				@include bem.modifier('pad-i') {
 					padding-inline: props.get($pad-i);
 				}
 
-				@include bem.modifier("pad-b") {
+				@include bem.modifier('pad-b') {
 					padding-block: props.get($pad-b);
 				}
 			}
diff --git a/src/layouts/_container.vars.scss b/src/layouts/_container.vars.scss
index 09ef165..094046f 100644
--- a/src/layouts/_container.vars.scss
+++ b/src/layouts/_container.vars.scss
@@ -1,36 +1,39 @@
-@use "pkg:iro-sass/functions" as fn;
-@use "pkg:iro-sass/props";
-@use "../core.vars" as core;
+@use 'pkg:iro-sass/src/functions' as fn;
+@use 'pkg:iro-sass/src/props';
+@use '../core.vars' as core;
 
 $fixed-200: props.def(--l-container--fixed-200, fn.px-to-rem(1300px)) !default;
 $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:     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--600)) !default;
 $pad-b: props.def(--l-container--pad-b, props.get(core.$size--800)) !default;
 
-$pad-i--md: props.def(--l-container--pad-i, props.get(core.$size--400), "md") !default;
-$pad-b--md: props.def(--l-container--pad-b, props.get(core.$size--700), "md") !default;
+$pad-i--md: props.def(--l-container--pad-i, props.get(core.$size--400), 'md') !default;
+$pad-b--md: props.def(--l-container--pad-b, props.get(core.$size--700), 'md') !default;
 
-$pad-i--sm: props.def(--l-container--pad-i, props.get(core.$size--200), "sm") !default;
-$pad-b--sm: props.def(--l-container--pad-b, props.get(core.$size--600), "sm") !default;
+$pad-i--sm: props.def(--l-container--pad-i, props.get(core.$size--200), 'sm') !default;
+$pad-b--sm: props.def(--l-container--pad-b, props.get(core.$size--600), 'sm') !default;
 
-$pad-i--xs: props.def(--l-container--pad-i, props.get(core.$size--150), "xs") !default;
-$pad-b--xs: props.def(--l-container--pad-b, props.get(core.$size--450), "xs") !default;
+$pad-i--xs: props.def(--l-container--pad-i, props.get(core.$size--150), 'xs') !default;
+$pad-b--xs: props.def(--l-container--pad-b, props.get(core.$size--450), 'xs') !default;
 
 $sm--pad-i: props.def(--l-container--sm--pad-i, props.get(core.$size--300)) !default;
 $sm--pad-b: props.def(--l-container--sm--pad-b, props.get(core.$size--800)) !default;
 
-$sm--pad-i--sm: props.def(--l-container--sm--pad-i, props.get(core.$size--200), "sm") !default;
-$sm--pad-b--sm: props.def(--l-container--sm--pad-b, props.get(core.$size--600), "sm") !default;
+$sm--pad-i--sm: props.def(--l-container--sm--pad-i, props.get(core.$size--200), 'sm') !default;
+$sm--pad-b--sm: props.def(--l-container--sm--pad-b, props.get(core.$size--600), 'sm') !default;
 
-$sm--pad-i--xs: props.def(--l-container--sm--pad-i, props.get(core.$size--150), "xs") !default;
-$sm--pad-b--xs: props.def(--l-container--sm--pad-b, props.get(core.$size--450), "xs") !default;
+$sm--pad-i--xs: props.def(--l-container--sm--pad-i, props.get(core.$size--150), 'xs') !default;
+$sm--pad-b--xs: props.def(--l-container--sm--pad-b, props.get(core.$size--450), 'xs') !default;
 
-$sizes: ("sm" $sm--pad-i $sm--pad-b, "md" $sm--pad-i $sm--pad-b) !default;
+$sizes: (
+	'sm' $sm--pad-i $sm--pad-b,
+	'md' $sm--pad-i $sm--pad-b,
+) !default;
diff --git a/src/layouts/_flex.scss b/src/layouts/_flex.scss
index 70d29f9..ea0b268 100644
--- a/src/layouts/_flex.scss
+++ b/src/layouts/_flex.scss
@@ -1,18 +1,18 @@
-@use "pkg:iro-sass/bem";
+@use 'pkg:iro-sass/src/bem';
 
 @mixin styles {
-	@include bem.layout("flex") {
+	@include bem.layout('flex') {
 		display: flex;
 
-		@include bem.modifier("column") {
+		@include bem.modifier('column') {
 			flex-direction: column;
 		}
 
-		@include bem.modifier("wrap") {
+		@include bem.modifier('wrap') {
 			flex-wrap: wrap;
 		}
 
-		@include bem.modifier("wrap-reverse") {
+		@include bem.modifier('wrap-reverse') {
 			flex-wrap: wrap-reverse;
 		}
 	}
diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss
index f71e469..f094cbc 100644
--- a/src/layouts/_form.scss
+++ b/src/layouts/_form.scss
@@ -1,57 +1,57 @@
-@use "sass:meta";
-@use "pkg:iro-sass/bem";
-@use "pkg:iro-sass/props";
-@use "../props" as *;
+@use 'sass:meta';
+@use 'pkg:iro-sass/src/bem';
+@use 'pkg:iro-sass/src/props';
+@use '../props' as *;
 
-@forward "form.vars";
-@use "form.vars" as vars;
+@forward 'form.vars';
+@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;
+	@include bem.layout('form') {
+		display:        flex;
 		flex-direction: column;
-		gap: props.get(vars.$item-spacing-b) props.get(vars.$label-spacing-i);
+		gap:            props.get(vars.$item-spacing-b) props.get(vars.$label-spacing-i);
 
-		@include bem.elem("item") {
+		@include bem.elem('item') {
 			display: block;
 		}
 
-		@include bem.elem("item-content") {
-			@include bem.modifier("align-start") {
+		@include bem.elem('item-content') {
+			@include bem.modifier('align-start') {
 				align-self: start;
 			}
 		}
 
-		@include bem.modifier("row") {
+		@include bem.modifier('row') {
 			flex-direction: row;
-			align-items: flex-end;
+			align-items:    flex-end;
 		}
 
-		@include bem.modifier("labels-start", "labels-end") {
-			display: grid;
-			grid-template-rows: auto;
+		@include bem.modifier('labels-start', 'labels-end') {
+			display:               grid;
+			grid-template-rows:    auto;
 			grid-template-columns: auto 1fr;
-			align-items: baseline;
+			align-items:           baseline;
 
-			@include bem.elem("item") {
+			@include bem.elem('item') {
 				display: contents;
 			}
 
-			@include bem.elem("item-label") {
-				grid-column: 1;
+			@include bem.elem('item-label') {
+				grid-column:        1;
 				padding-inline-end: 0;
 			}
 
-			@include bem.elem("item-content") {
-				grid-column: 2;
+			@include bem.elem('item-content') {
+				grid-column:        2;
 				margin-block-start: 0;
 			}
 		}
 
-		@include bem.modifier("labels-end") {
-			@include bem.elem("item-label") {
+		@include bem.modifier('labels-end') {
+			@include bem.elem('item-label') {
 				text-align: end;
 			}
 		}
diff --git a/src/layouts/_form.vars.scss b/src/layouts/_form.vars.scss
index 68cb23a..52670cc 100644
--- a/src/layouts/_form.vars.scss
+++ b/src/layouts/_form.vars.scss
@@ -1,5 +1,5 @@
-@use "pkg:iro-sass/props";
-@use "../core.vars" as core;
+@use 'pkg:iro-sass/src/props';
+@use '../core.vars' as core;
 
-$item-spacing-b: props.def(--l-form--item-spacing-b, props.get(core.$size--325)) !default;
+$item-spacing-b:  props.def(--l-form--item-spacing-b, props.get(core.$size--325)) !default;
 $label-spacing-i: props.def(--l-form--label-spacing-i, props.get(core.$size--325)) !default;
diff --git a/src/layouts/_hlist.scss b/src/layouts/_hlist.scss
index 00787db..32b3097 100644
--- a/src/layouts/_hlist.scss
+++ b/src/layouts/_hlist.scss
@@ -1,30 +1,30 @@
-@use "sass:meta";
-@use "pkg:iro-sass/bem";
-@use "pkg:iro-sass/props";
-@use "../props" as *;
+@use 'sass:meta';
+@use 'pkg:iro-sass/src/bem';
+@use 'pkg:iro-sass/src/props';
+@use '../props' as *;
 
-@forward "hlist.vars";
-@use "hlist.vars" as vars;
-@use "../objects/button.vars" as button;
+@forward 'hlist.vars';
+@use 'hlist.vars' as vars;
+@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("hlist") {
-		display: inline-flex;
+	@include bem.layout('hlist') {
+		display:   inline-flex;
 		flex-wrap: wrap;
-		gap: props.get(vars.$gap);
+		gap:       props.get(vars.$gap);
 
 		@each $mod, $size in vars.$sizes {
 			@include bem.modifier($mod) {
 				gap: props.get($size);
 
-				@include bem.modifier("separated") {
-					@include bem.elem("item") {
+				@include bem.modifier('separated') {
+					@include bem.elem('item') {
 						@include bem.next-twin-elem {
 							&::before {
-								content: "·";
-								margin-inline: calc(0.65 * props.get($size));
+								content: '·';
+								margin-inline: calc(.65 * props.get($size));
 							}
 						}
 					}
@@ -32,51 +32,40 @@
 			}
 		}
 
-		@include bem.modifier("separated") {
+		@include bem.modifier('separated') {
 			gap: 0;
 
-			@include bem.elem("item") {
+			@include bem.elem('item') {
 				@include bem.next-twin-elem {
 					&::before {
-						content: "·";
-						margin-inline: calc(0.65 * props.get(vars.$gap));
+						content: '·';
+						margin-inline: calc(.65 * props.get(vars.$gap));
 					}
 				}
 			}
 		}
 
-		@include bem.modifier("buttons") {
+		@include bem.modifier('buttons') {
 			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) - 0.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("buttons-#{$mod}") {
+			@each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in button.$fixed-sizes {
+				@include bem.modifier('buttons-#{$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('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) - 0.5em *
-								(props.get(button.$line-height) - 1)
-						);
+					@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/_hlist.vars.scss b/src/layouts/_hlist.vars.scss
index 557cfae..2d99057 100644
--- a/src/layouts/_hlist.vars.scss
+++ b/src/layouts/_hlist.vars.scss
@@ -1,16 +1,16 @@
-@use "pkg:iro-sass/props";
-@use "../core.vars" as core;
+@use 'pkg:iro-sass/src/props';
+@use '../core.vars' as core;
 
 $gap: props.def(--l-hlist--gap, props.get(core.$size--150)) !default;
 
 $gapless: props.def(--l-hlist--gapless, 0) !default;
-$sm: props.def(--l-hlist--sm, props.get(core.$size--100)) !default;
-$lg: props.def(--l-hlist--lg, props.get(core.$size--300)) !default;
-$xl: props.def(--l-hlist--xl, props.get(core.$size--450)) !default;
+$sm:      props.def(--l-hlist--sm, props.get(core.$size--100)) !default;
+$lg:      props.def(--l-hlist--lg, props.get(core.$size--300)) !default;
+$xl:      props.def(--l-hlist--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/_media.scss b/src/layouts/_media.scss
index b6732bf..4492ea9 100644
--- a/src/layouts/_media.scss
+++ b/src/layouts/_media.scss
@@ -1,17 +1,17 @@
-@use "sass:meta";
-@use "pkg:iro-sass/bem";
-@use "pkg:iro-sass/props";
-@use "../props" as *;
+@use 'sass:meta';
+@use 'pkg:iro-sass/src/bem';
+@use 'pkg:iro-sass/src/props';
+@use '../props' as *;
 
-@forward "media.vars";
-@use "media.vars" as vars;
+@forward 'media.vars';
+@use 'media.vars' as vars;
 
 @mixin styles {
-	@include materialize-at-root(meta.module-variables("vars"));
+	@include materialize-at-root(meta.module-variables('vars'));
 
-	@include bem.layout("media") {
-		display: flex;
-		gap: props.get(vars.$gap);
+	@include bem.layout('media') {
+		display:     flex;
+		gap:         props.get(vars.$gap);
 		align-items: center;
 		line-height: 1.4;
 
@@ -21,19 +21,19 @@
 			}
 		}
 
-		@include bem.modifier("wrap") {
+		@include bem.modifier('wrap') {
 			flex-wrap: wrap;
 		}
 
-		@include bem.elem("block") {
+		@include bem.elem('block') {
 			flex: 0 0 auto;
 
-			@include bem.modifier("shrink", "main") {
-				flex-shrink: 1;
+			@include bem.modifier('shrink', 'main') {
+				flex-shrink:     1;
 				min-inline-size: 0;
 			}
 
-			@include bem.modifier("main") {
+			@include bem.modifier('main') {
 				inline-size: 100%;
 			}
 		}
diff --git a/src/layouts/_media.vars.scss b/src/layouts/_media.vars.scss
index f24ea2a..78e157f 100644
--- a/src/layouts/_media.vars.scss
+++ b/src/layouts/_media.vars.scss
@@ -1,16 +1,16 @@
-@use "pkg:iro-sass/props";
-@use "../core.vars" as core;
+@use 'pkg:iro-sass/src/props';
+@use '../core.vars' as core;
 
-$gap: props.def(--l-media--gap, props.get(core.$size--150)) !default;
+$gap:  props.def(--l-media--gap, props.get(core.$size--150)) !default;
 
 $gapless: props.def(--l-media--gapless, 0) !default;
-$sm: props.def(--l-media--sm, props.get(core.$size--100)) !default;
-$lg: props.def(--l-media--lg, props.get(core.$size--300)) !default;
-$xl: props.def(--l-media--xl, props.get(core.$size--450)) !default;
+$sm:      props.def(--l-media--sm, props.get(core.$size--100)) !default;
+$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 57e2512..ab983b9 100644
--- a/src/layouts/_overflow.scss
+++ b/src/layouts/_overflow.scss
@@ -1,10 +1,10 @@
-@use "pkg:iro-sass/bem";
-@use "pkg:iro-sass/props";
-@use "../core.vars" as core;
+@use 'pkg:iro-sass/src/bem';
+@use 'pkg:iro-sass/src/props';
+@use '../core.vars' as core;
 
 @mixin styles {
-	@include bem.layout("overflow") {
-		overflow: auto;
+	@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 1bffddd..ea651c7 100644
--- a/src/layouts/_split-view.scss
+++ b/src/layouts/_split-view.scss
@@ -1,110 +1,101 @@
-@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 *;
+@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 *;
 
-@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;
 				}
 			}
diff --git a/src/layouts/_split-view.vars.scss b/src/layouts/_split-view.vars.scss
index 9b6dd21..b2944e7 100644
--- a/src/layouts/_split-view.vars.scss
+++ b/src/layouts/_split-view.vars.scss
@@ -1,16 +1,13 @@
-@use "pkg:iro-sass/props";
-@use "../core.vars" as core;
+@use 'pkg:iro-sass/src/props';
+@use '../core.vars' as core;
 
-$col-gap: props.def(--l-split-view--col-gap, props.get(core.$size--800)) !default;
-$row-gap: props.def(--l-split-view--row-gap, props.get(core.$size--600)) !default;
+$col-gap:  props.def(--l-split-view--col-gap, props.get(core.$size--800)) !default;
+$row-gap:  props.def(--l-split-view--row-gap, props.get(core.$size--600)) !default;
 
 $gapless: props.def(--l-split-view--gapless, 0rem) !default;
 
-$panel--min-50: props.def(--l-split-view--panel--min-50, props.get(core.$size--2400)) !default;
+$panel--min-50:  props.def(--l-split-view--panel--min-50,  props.get(core.$size--2400)) !default;
 $panel--min-100: props.def(--l-split-view--panel--min-100, props.get(core.$size--3200)) !default;
 $panel--min-200: props.def(--l-split-view--panel--min-200, props.get(core.$size--4200)) !default;
 
-$panel--sticky-offset: props.def(
-	--l-split-view--panel--sticky-offset,
-	props.get(core.$sticky-top-offset)
-) !default;
+$panel--sticky-offset: props.def(--l-split-view--panel--sticky-offset, props.get(core.$sticky-top-offset)) !default;
-- 
cgit v1.3.1