Paths

1 files changed, 121 insertions, 115 deletions

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%);
         }
 }