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/_utils.scss | 236 +++++++++++++++++++++++++++++---------------------------
 1 file changed, 121 insertions(+), 115 deletions(-)

(limited to 'src/_utils.scss')

diff --git a/src/_utils.scss b/src/_utils.scss
index dd8e8bb..be2faab 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -1,27 +1,27 @@
-@use 'sass:map';
-@use 'sass:string';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use 'pkg:include-media/dist/include-media' as media;
+@use "sass:map";
+@use "sass:string";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "pkg:include-media/dist/include-media" as media;
 
-@use 'core.vars' as vars;
-@forward 'core.vars';
+@use "core.vars" as vars;
+@forward "core.vars";
 
 /* stylelint-disable-next-line scss/dollar-variable-pattern */
 $-dirs: (
-	'': '',
-	'b':  '-block',
-	'bs': '-block-start',
-	'be': '-block-end',
-	'i':  '-inline',
-	'is': '-inline-start',
-	'ie': '-inline-end',
+	"": "",
+	"b": "-block",
+	"bs": "-block-start",
+	"be": "-block-end",
+	"i": "-inline",
+	"is": "-inline-start",
+	"ie": "-inline-end",
 ) !default;
 
 $-axes: (
-	'': '',
-	'r':  'row-',
-	'c':  'column-',
+	"": "",
+	"r": "row-",
+	"c": "column-",
 ) !default;
 
 /* stylelint-disable-next-line scss/dollar-variable-pattern */
@@ -48,145 +48,145 @@ $-font-sizes: (
 ) !default;
 
 $-aspect-ratios: (
-	'1\\/1': '1 / 1',
-	'4\\/3': '4 / 3',
-	'5\\/4': '5 / 4',
+	"1\\/1": "1 / 1",
+	"4\\/3": "4 / 3",
+	"5\\/4": "5 / 4",
 ) !default;
 
 @mixin styles {
-	@include bem.utility('d-block') {
+	@include bem.utility("d-block") {
 		display: block;
 	}
 
-	@include bem.utility('d-inline-block') {
+	@include bem.utility("d-inline-block") {
 		display: inline-block;
 	}
 
-	@include bem.utility('d-inline') {
+	@include bem.utility("d-inline") {
 		display: inline;
 	}
 
-	@include bem.utility('d-contents') {
+	@include bem.utility("d-contents") {
 		display: contents;
 	}
 
-	@include bem.utility('d-flex') {
+	@include bem.utility("d-flex") {
 		display: flex;
 	}
 
-	@include bem.utility('td-none') {
+	@include bem.utility("td-none") {
 		text-decoration: none;
 	}
 
-	@include bem.utility('d-none') {
+	@include bem.utility("d-none") {
 		display: none;
 
 		@each $breakpoint in map.keys(media.$breakpoints) {
-			@include media.media('<=#{$breakpoint}') {
-				@include bem.suffix('#{$breakpoint}-lo') {
+			@include media.media("<=#{$breakpoint}") {
+				@include bem.suffix("#{$breakpoint}-lo") {
 					display: none;
 				}
 			}
 
-			@include media.media('>#{$breakpoint}') {
-				@include bem.suffix('#{$breakpoint}-hi') {
+			@include media.media(">#{$breakpoint}") {
+				@include bem.suffix("#{$breakpoint}-hi") {
 					display: none;
 				}
 			}
 		}
 
-		@include bem.at-theme('js') {
-			@include bem.suffix('js') {
+		@include bem.at-theme("js") {
+			@include bem.suffix("js") {
 				display: none;
 			}
 		}
 
-		@include bem.at-theme('no-js') {
-			@include bem.suffix('no-js') {
+		@include bem.at-theme("no-js") {
+			@include bem.suffix("no-js") {
 				display: none;
 			}
 		}
 
-		@include bem.suffix('empty') {
+		@include bem.suffix("empty") {
 			&:empty {
 				display: none;
 			}
 		}
 	}
 
-	@include bem.utility('va-top') {
+	@include bem.utility("va-top") {
 		vertical-align: top;
 	}
 
-	@include bem.utility('va-baseline') {
+	@include bem.utility("va-baseline") {
 		vertical-align: baseline;
 	}
 
-	@include bem.utility('va-middle') {
+	@include bem.utility("va-middle") {
 		vertical-align: middle;
 	}
 
-	@include bem.utility('va-bottom') {
+	@include bem.utility("va-bottom") {
 		vertical-align: bottom;
 	}
 
-	@include bem.utility('ta-start') {
+	@include bem.utility("ta-start") {
 		text-align: start;
 	}
 
-	@include bem.utility('ta-end') {
+	@include bem.utility("ta-end") {
 		text-align: end;
 	}
 
-	@include bem.utility('ta-center') {
+	@include bem.utility("ta-center") {
 		text-align: center;
 	}
 
-	@include bem.utility('fw-normal') {
+	@include bem.utility("fw-normal") {
 		font-weight: normal;
 	}
 
-	@include bem.utility('ai-center') {
+	@include bem.utility("ai-center") {
 		align-items: center;
 	}
 
-	@include bem.utility('ai-start') {
+	@include bem.utility("ai-start") {
 		align-items: flex-start;
 	}
 
-	@include bem.utility('ai-end') {
+	@include bem.utility("ai-end") {
 		align-items: flex-end;
 	}
 
-	@include bem.utility('ai-stretch') {
+	@include bem.utility("ai-stretch") {
 		align-items: stretch;
 	}
 
-	@include bem.utility('ac-center') {
+	@include bem.utility("ac-center") {
 		align-content: center;
 	}
 
-	@include bem.utility('jc-center') {
+	@include bem.utility("jc-center") {
 		justify-content: center;
 	}
 
-	@include bem.utility('jc-start') {
+	@include bem.utility("jc-start") {
 		justify-content: flex-start;
 	}
 
-	@include bem.utility('jc-end') {
+	@include bem.utility("jc-end") {
 		justify-content: flex-end;
 	}
 
-	@include bem.utility('tt-upper') {
+	@include bem.utility("tt-upper") {
 		text-transform: uppercase;
 	}
 
-	@include bem.utility('tt-lower') {
+	@include bem.utility("tt-lower") {
 		text-transform: lowercase;
 	}
 
-	@include bem.utility('c-heading') {
+	@include bem.utility("c-heading") {
 		color: props.get(vars.$theme, --heading);
 
 		@each $theme in map.keys(props.get(vars.$transparent-colors)) {
@@ -198,7 +198,7 @@ $-aspect-ratios: (
 		}
 	}
 
-	@include bem.utility('c-text') {
+	@include bem.utility("c-text") {
 		color: props.get(vars.$theme, --text);
 
 		@each $theme in map.keys(props.get(vars.$transparent-colors)) {
@@ -210,7 +210,7 @@ $-aspect-ratios: (
 		}
 	}
 
-	@include bem.utility('c-mute') {
+	@include bem.utility("c-mute") {
 		color: props.get(vars.$theme, --text-mute);
 
 		@each $theme in map.keys(props.get(vars.$transparent-colors)) {
@@ -222,7 +222,7 @@ $-aspect-ratios: (
 		}
 	}
 
-	@include bem.utility('c-mute-more') {
+	@include bem.utility("c-mute-more") {
 		color: props.get(vars.$theme, --text-mute-more);
 
 		@each $theme in map.keys(props.get(vars.$transparent-colors)) {
@@ -235,189 +235,195 @@ $-aspect-ratios: (
 	}
 
 	@each $mod, $size in $-font-sizes {
-		@include bem.utility('fs-#{$mod}') {
+		@include bem.utility("fs-#{$mod}") {
 			font-size: props.get($size);
 		}
 	}
 
 	@each $dir, $prop in (is: inline-size, bs: block-size) {
-		@include bem.utility('#{$dir}-100') {
+		@include bem.utility("#{$dir}-100") {
 			#{$prop}: 100%;
 		}
 
-		@include bem.utility('#{$dir}-75') {
+		@include bem.utility("#{$dir}-75") {
 			#{$prop}: 75%;
 		}
 
-		@include bem.utility('#{$dir}-50') {
+		@include bem.utility("#{$dir}-50") {
 			#{$prop}: 50%;
 		}
 
-		@include bem.utility('#{$dir}-25') {
+		@include bem.utility("#{$dir}-25") {
 			#{$prop}: 25%;
 		}
 
-		@include bem.utility('#{$dir}-1px') {
+		@include bem.utility("#{$dir}-1px") {
 			#{$prop}: 1px;
 		}
 
-		@include bem.utility('#{$dir}-0') {
+		@include bem.utility("#{$dir}-0") {
 			#{$prop}: 0;
 		}
 	}
 
-	@include bem.utility('elp') {
-		overflow:      hidden;
+	@include bem.utility("elp") {
+		overflow: hidden;
 		text-overflow: ellipsis;
-		white-space:   nowrap;
+		white-space: nowrap;
 	}
 
-	@include bem.utility('hyph') {
+	@include bem.utility("hyph") {
 		hyphens: auto;
 		hyphenate-limit-chars: auto;
 	}
 
-	@include bem.utility('tw-balance') {
+	@include bem.utility("tw-balance") {
 		text-wrap-style: balance;
 	}
 
-	@include bem.utility('o-auto') {
+	@include bem.utility("o-auto") {
 		overflow: auto;
 	}
 
-	@include bem.utility('o-hidden') {
+	@include bem.utility("o-hidden") {
 		overflow: hidden;
 	}
 
-	@include bem.utility('p-static') {
+	@include bem.utility("p-static") {
 		position: static;
 	}
 
-	@include bem.utility('p-relative') {
+	@include bem.utility("p-relative") {
 		position: relative;
 	}
 
-	@include bem.utility('p-fixed') {
+	@include bem.utility("p-fixed") {
 		position: fixed;
 	}
 
-	@include bem.utility('p-sticky-bs') {
-		position:          sticky;
+	@include bem.utility("p-sticky-bs") {
+		position: sticky;
 		inset-block-start: props.get(vars.$sticky-top-offset);
 	}
 
-	@include bem.utility('p-sticky-be') {
-		position:        sticky;
+	@include bem.utility("p-sticky-be") {
+		position: sticky;
 		inset-block-end: 0;
 	}
 
-	@include bem.utility('br-round') {
+	@include bem.utility("br-round") {
 		border-radius: props.get(vars.$rounding);
 	}
 
-	@include bem.utility('br-round-sm') {
+	@include bem.utility("br-round-sm") {
 		border-radius: props.get(vars.$rounding--sm);
 	}
 
 	@each $dir, $prefix in $-axes {
 		@each $mod, $size in $-sizes {
-			@include bem.utility('#{$dir}g-#{$mod}') {
+			@include bem.utility("#{$dir}g-#{$mod}") {
 				#{$prefix}gap: props.get($size);
 			}
 		}
 	}
 
 	@each $dir, $suffix in $-dirs {
-		@include bem.utility('m#{$dir}-auto') {
+		@include bem.utility("m#{$dir}-auto") {
 			margin#{$suffix}: auto;
 		}
 
-		@include bem.utility('p#{$dir}-auto') {
+		@include bem.utility("p#{$dir}-auto") {
 			padding#{$suffix}: auto;
 		}
 
 		@each $mod, $size in $-sizes {
-			@include bem.utility('m#{$dir}-#{$mod}') {
+			@include bem.utility("m#{$dir}-#{$mod}") {
 				margin#{$suffix}: props.get($size);
 			}
 
-			@include bem.utility('p#{$dir}-#{$mod}') {
+			@include bem.utility("p#{$dir}-#{$mod}") {
 				padding#{$suffix}: props.get($size);
 			}
 		}
 
-		@include bem.utility('b#{$dir}-0') {
+		@include bem.utility("b#{$dir}-0") {
 			border#{$suffix}: 0;
 
-			@include bem.suffix('light') {
+			@include bem.suffix("light") {
 				@media (prefers-color-scheme: light) {
 					border#{$suffix}: 0;
 				}
 			}
 
-			@include bem.suffix('dark') {
+			@include bem.suffix("dark") {
 				@media (prefers-color-scheme: dark) {
 					border#{$suffix}: 0;
 				}
 			}
 		}
 
-		@include bem.utility('b#{$dir}-1') {
-			border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
+		@include bem.utility("b#{$dir}-1") {
+			border#{$suffix}: props.get(vars.$border-width--thin) solid
+				props.get(vars.$theme, --border);
 
-			@include bem.suffix('light') {
+			@include bem.suffix("light") {
 				@media (prefers-color-scheme: light) {
-					border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
+					border#{$suffix}: props.get(vars.$border-width--thin) solid
+						props.get(vars.$theme, --border);
 				}
 			}
 
-			@include bem.suffix('dark') {
+			@include bem.suffix("dark") {
 				@media (prefers-color-scheme: dark) {
-					border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
+					border#{$suffix}: props.get(vars.$border-width--thin) solid
+						props.get(vars.$theme, --border);
 				}
 			}
 		}
 
-		@include bem.utility('b#{$dir}-1-mute') {
-			border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);
+		@include bem.utility("b#{$dir}-1-mute") {
+			border#{$suffix}: props.get(vars.$border-width--thin) solid
+				props.get(vars.$theme, --border-mute);
 
-			@include bem.suffix('light') {
+			@include bem.suffix("light") {
 				@media (prefers-color-scheme: light) {
-					border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);
+					border#{$suffix}: props.get(vars.$border-width--thin) solid
+						props.get(vars.$theme, --border-mute);
 				}
 			}
 
-			@include bem.suffix('dark') {
+			@include bem.suffix("dark") {
 				@media (prefers-color-scheme: dark) {
-					border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);
+					border#{$suffix}: props.get(vars.$border-width--thin) solid
+						props.get(vars.$theme, --border-mute);
 				}
 			}
 		}
 	}
 
-	@include bem.utility('mbs-neutralize') {
+	@include bem.utility("mbs-neutralize") {
 		&::before {
-			display:       block;
-			margin-block:  -100em 100em;
-			content:       '';
+			display: block;
+			margin-block: -100em 100em;
+			content: "";
 		}
 	}
 
 	@each $mod, $value in $-aspect-ratios {
-		@include bem.utility('ar-#{$mod}') {
+		@include bem.utility("ar-#{$mod}") {
 			aspect-ratio: string.unquote($value);
 		}
 	}
 
-	@include bem.utility('sr-only') {
-		position:    absolute;
-		width:       1px;
-		height:      1px;
-		padding:     0;
-		margin:      -1px;
-		overflow:    hidden;
+	@include bem.utility("sr-only") {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
 		white-space: nowrap;
-		border:      0;
-		clip-path:   inset(50%);
+		border: 0;
+		clip-path: inset(50%);
 	}
 }
-- 
cgit v1.3.1