Switch to tab indentationHEAD master

author: Volpeon <git@volpeon.ink> 2025-08-06 16:40:56 +0200
committer: Volpeon <git@volpeon.ink> 2025-08-06 16:40:56 +0200
commit: 41b0d0497988274057fc2512c822a6bc9d2d3ebd (patch)
tree: 015a95ede42b799ac1fd049baa8b0a853b6d3bb3 /src/_utils.scss
parent: Fix button font size (diff)
download: iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.tar.gz
iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.tar.bz2
iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.zip
1 files changed, 287 insertions, 287 deletions
diff --git a/src/_utils.scss b/src/_utils.scss
index 371a357..3dae3b6 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -9,372 +9,372 @@
 /* stylelint-disable-next-line scss/dollar-variable-pattern */
 $-dirs: (
-    '': '',
+        '': '',
-    'b':  '-block',
+        'b':  '-block',
-    'bs': '-block-start',
+        'bs': '-block-start',
-    'be': '-block-end',
+        'be': '-block-end',
-    'i':  '-inline',
+        'i':  '-inline',
-    'is': '-inline-start',
+        'is': '-inline-start',
-    'ie': '-inline-end',
+        'ie': '-inline-end',
 ) !default;
 /* stylelint-disable-next-line scss/dollar-variable-pattern */
 $-sizes: (
-    0: vars.$size--0,
+        0: vars.$size--0,
-    10: vars.$size--10,
+        10: vars.$size--10,
-    50: vars.$size--50,
+        50: vars.$size--50,
-    75: vars.$size--75,
+        75: vars.$size--75,
-    100: vars.$size--100,
+        100: vars.$size--100,
-    125: vars.$size--125,
+        125: vars.$size--125,
-    200: vars.$size--200,
+        200: vars.$size--200,
-    400: vars.$size--400,
+        400: vars.$size--400,
-    700: vars.$size--700,
+        700: vars.$size--700,
-    800: vars.$size--800,
+        800: vars.$size--800,
 ) !default;
 $-font-sizes: (
-    50: vars.$font-size--50,
+        50: vars.$font-size--50,
-    75: vars.$font-size--75,
+        75: vars.$font-size--75,
-    100: vars.$font-size--100,
+        100: vars.$font-size--100,
-    150: vars.$font-size--150,
+        150: vars.$font-size--150,
-    200: vars.$font-size--200,
+        200: vars.$font-size--200,
-    300: vars.$font-size--300,
+        300: vars.$font-size--300,
 ) !default;
 @mixin styles {
-    @include bem.utility('d-block') {
+        @include bem.utility('d-block') {
-        display: block;
+                display: block;
-    }
+        }
-    @include bem.utility('d-inline-block') {
+        @include bem.utility('d-inline-block') {
-        display: inline-block;
+                display: inline-block;
-    }
+        }
-    @include bem.utility('d-contents') {
+        @include bem.utility('d-contents') {
-        display: contents;
+                display: contents;
-    }
+        }
-    @include bem.utility('d-flex') {
+        @include bem.utility('d-flex') {
-        display: flex;
+                display: flex;
-    }
+        }
-    @include bem.utility('td-none') {
+        @include bem.utility('td-none') {
-        text-decoration: none;
+                text-decoration: none;
-    }
+        }
-    @include bem.utility('d-none') {
+        @include bem.utility('d-none') {
-        display: none;
+                display: none;
-        @each $breakpoint in map.keys(media.$breakpoints) {
+                @each $breakpoint in map.keys(media.$breakpoints) {
-            @include media.media('<=#{$breakpoint}') {
+                        @include media.media('<=#{$breakpoint}') {
-                @include bem.suffix('#{$breakpoint}-lo') {
+                                @include bem.suffix('#{$breakpoint}-lo') {
-                    display: none;
+                                        display: none;
-                }
+                                }
-            }
+                        }
-            @include media.media('>#{$breakpoint}') {
+                        @include media.media('>#{$breakpoint}') {
-                @include bem.suffix('#{$breakpoint}-hi') {
+                                @include bem.suffix('#{$breakpoint}-hi') {
-                    display: none;
+                                        display: none;
-                }
+                                }
-            }
+                        }
-        }
+                }
-        @include bem.at-theme('js') {
+                @include bem.at-theme('js') {
-            @include bem.suffix('js') {
+                        @include bem.suffix('js') {
-                display: none;
+                                display: none;
-            }
+                        }
-        }
+                }
-        @include bem.at-theme('no-js') {
+                @include bem.at-theme('no-js') {
-            @include bem.suffix('no-js') {
+                        @include bem.suffix('no-js') {
-                display: none;
+                                display: none;
-            }
+                        }
-        }
+                }
-        @include bem.suffix('empty') {
+                @include bem.suffix('empty') {
-            &:empty {
+                        &:empty {
-                display: none;
+                                display: none;
-            }
+                        }
-        }
+                }
-    }
+        }
-    @include bem.utility('va-top') {
+        @include bem.utility('va-top') {
-        vertical-align: top;
+                vertical-align: top;
-    }
+        }
-    @include bem.utility('va-baseline') {
+        @include bem.utility('va-baseline') {
-        vertical-align: baseline;
+                vertical-align: baseline;
-    }
+        }
-    @include bem.utility('va-middle') {
+        @include bem.utility('va-middle') {
-        vertical-align: middle;
+                vertical-align: middle;
-    }
+        }
-    @include bem.utility('va-bottom') {
+        @include bem.utility('va-bottom') {
-        vertical-align: bottom;
+                vertical-align: bottom;
-    }
+        }
-    @include bem.utility('ta-start') {
+        @include bem.utility('ta-start') {
-        text-align: start;
+                text-align: start;
-    }
+        }
-    @include bem.utility('ta-end') {
+        @include bem.utility('ta-end') {
-        text-align: end;
+                text-align: end;
-    }
+        }
-    @include bem.utility('ta-center') {
+        @include bem.utility('ta-center') {
-        text-align: center;
+                text-align: center;
-    }
+        }
-    @include bem.utility('fw-normal') {
+        @include bem.utility('fw-normal') {
-        font-weight: normal;
+                font-weight: normal;
-    }
+        }
-    @include bem.utility('ai-center') {
+        @include bem.utility('ai-center') {
-        align-items: center;
+                align-items: center;
-    }
+        }
-    @include bem.utility('ai-start') {
+        @include bem.utility('ai-start') {
-        align-items: flex-start;
+                align-items: flex-start;
-    }
+        }
-    @include bem.utility('ai-end') {
+        @include bem.utility('ai-end') {
-        align-items: flex-end;
+                align-items: flex-end;
-    }
+        }
-    @include bem.utility('ac-center') {
+        @include bem.utility('ac-center') {
-        align-content: center;
+                align-content: center;
-    }
+        }
-    @include bem.utility('jc-center') {
+        @include bem.utility('jc-center') {
-        justify-content: center;
+                justify-content: center;
-    }
+        }
-    @include bem.utility('jc-start') {
+        @include bem.utility('jc-start') {
-        justify-content: flex-start;
+                justify-content: flex-start;
-    }
+        }
-    @include bem.utility('jc-end') {
+        @include bem.utility('jc-end') {
-        justify-content: flex-end;
+                justify-content: flex-end;
-    }
+        }
-    @include bem.utility('tt-upper') {
+        @include bem.utility('tt-upper') {
-        text-transform: uppercase;
+                text-transform: uppercase;
-    }
+        }
-    @include bem.utility('tt-lower') {
+        @include bem.utility('tt-lower') {
-        text-transform: lowercase;
+                text-transform: lowercase;
-    }
+        }
-    @include bem.utility('c-heading') {
+        @include bem.utility('c-heading') {
-        color: props.get(vars.$theme, --heading);
+                color: props.get(vars.$theme, --heading);
-        @each $theme in map.keys(props.get(vars.$transparent-colors)) {
+                @each $theme in map.keys(props.get(vars.$transparent-colors)) {
-            $theme-name: static-#{string.slice($theme, 3)};
+                        $theme-name: static-#{string.slice($theme, 3)};
    
-            @include bem.at-theme($theme-name) {
+                        @include bem.at-theme($theme-name) {
-                color: props.get(vars.$transparent-colors, $theme, --900);
+                                color: props.get(vars.$transparent-colors, $theme, --900);
-            }
+                        }
-        }
+                }
-    }
+        }
-    @include bem.utility('c-text') {
+        @include bem.utility('c-text') {
-        color: props.get(vars.$theme, --text);
+                color: props.get(vars.$theme, --text);
-        @each $theme in map.keys(props.get(vars.$transparent-colors)) {
+                @each $theme in map.keys(props.get(vars.$transparent-colors)) {
-            $theme-name: static-#{string.slice($theme, 3)};
+                        $theme-name: static-#{string.slice($theme, 3)};
    
-            @include bem.at-theme($theme-name) {
+                        @include bem.at-theme($theme-name) {
-                color: props.get(vars.$transparent-colors, $theme, --800);
+                                color: props.get(vars.$transparent-colors, $theme, --800);
-            }
+                        }
-        }
+                }
-    }
+        }
-    @include bem.utility('c-mute') {
+        @include bem.utility('c-mute') {
-        color: props.get(vars.$theme, --text-mute);
+                color: props.get(vars.$theme, --text-mute);
-        @each $theme in map.keys(props.get(vars.$transparent-colors)) {
+                @each $theme in map.keys(props.get(vars.$transparent-colors)) {
-            $theme-name: static-#{string.slice($theme, 3)};
+                        $theme-name: static-#{string.slice($theme, 3)};
    
-            @include bem.at-theme($theme-name) {
+                        @include bem.at-theme($theme-name) {
-                color: props.get(vars.$transparent-colors, $theme, --700);
+                                color: props.get(vars.$transparent-colors, $theme, --700);
-            }
+                        }
-        }
+                }
-    }
+        }
-    @include bem.utility('c-mute-more') {
+        @include bem.utility('c-mute-more') {
-        color: props.get(vars.$theme, --text-mute-more);
+                color: props.get(vars.$theme, --text-mute-more);
-        @each $theme in map.keys(props.get(vars.$transparent-colors)) {
+                @each $theme in map.keys(props.get(vars.$transparent-colors)) {
-            $theme-name: static-#{string.slice($theme, 3)};
+                        $theme-name: static-#{string.slice($theme, 3)};
    
-            @include bem.at-theme($theme-name) {
+                        @include bem.at-theme($theme-name) {
-                color: props.get(vars.$transparent-colors, $theme, --600);
+                                color: props.get(vars.$transparent-colors, $theme, --600);
-            }
+                        }
-        }
+                }
-    }
+        }
-    @each $mod, $size in $-font-sizes {
+        @each $mod, $size in $-font-sizes {
-        @include bem.utility('fs-#{$mod}') {
+                @include bem.utility('fs-#{$mod}') {
-            font-size: props.get($size);
+                        font-size: props.get($size);
-        }
+                }
-    }
+        }
-    @each $dir, $prop in (is: inline-size, bs: block-size) {
+        @each $dir, $prop in (is: inline-size, bs: block-size) {
-        @include bem.utility('#{$dir}-100') {
+                @include bem.utility('#{$dir}-100') {
-            #{$prop}: 100%;
+                        #{$prop}: 100%;
-        }
+                }
        
-        @include bem.utility('#{$dir}-75') {
+                @include bem.utility('#{$dir}-75') {
-            #{$prop}: 75%;
+                        #{$prop}: 75%;
-        }
+                }
        
-        @include bem.utility('#{$dir}-50') {
+                @include bem.utility('#{$dir}-50') {
-            #{$prop}: 50%;
+                        #{$prop}: 50%;
-        }
+                }
        
-        @include bem.utility('#{$dir}-25') {
+                @include bem.utility('#{$dir}-25') {
-            #{$prop}: 25%;
+                        #{$prop}: 25%;
-        }
+                }
        
-        @include bem.utility('#{$dir}-1px') {
+                @include bem.utility('#{$dir}-1px') {
-            #{$prop}: 1px;
+                        #{$prop}: 1px;
-        }
+                }
        
-        @include bem.utility('#{$dir}-0') {
+                @include bem.utility('#{$dir}-0') {
-            #{$prop}: 0;
+                        #{$prop}: 0;
-        }
+                }
-    }
+        }
-    @include bem.utility('elp') {
+        @include bem.utility('elp') {
-        overflow:      hidden;
+                overflow:      hidden;
-        text-overflow: ellipsis;
+                text-overflow: ellipsis;
-        white-space:   nowrap;
+                white-space:   nowrap;
-    }
+        }
-    @include bem.utility('o-auto') {
+        @include bem.utility('o-auto') {
-        overflow: auto;
+                overflow: auto;
-    }
+        }
-    @include bem.utility('o-hidden') {
+        @include bem.utility('o-hidden') {
-        overflow: hidden;
+                overflow: hidden;
-    }
+        }
-    @include bem.utility('p-static') {
+        @include bem.utility('p-static') {
-        position: static;
+                position: static;
-    }
+        }
-    @include bem.utility('p-relative') {
+        @include bem.utility('p-relative') {
-        position: relative;
+                position: relative;
-    }
+        }
-    @include bem.utility('p-fixed') {
+        @include bem.utility('p-fixed') {
-        position: fixed;
+                position: fixed;
-    }
+        }
-    @include bem.utility('p-sticky-bs') {
+        @include bem.utility('p-sticky-bs') {
-        position:          sticky;
+                position:          sticky;
-        inset-block-start: props.get(vars.$sticky-top-offset);
+                inset-block-start: props.get(vars.$sticky-top-offset);
-    }
+        }
-    @include bem.utility('p-sticky-be') {
+        @include bem.utility('p-sticky-be') {
-        position:        sticky;
+                position:        sticky;
-        inset-block-end: 0;
+                inset-block-end: 0;
-    }
+        }
-    @include bem.utility('br-round') {
+        @include bem.utility('br-round') {
-        border-radius: props.get(vars.$rounding);
+                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);
+                border-radius: props.get(vars.$rounding--sm);
-    }
+        }
-    @each $dir, $suffix in $-dirs {
+        @each $dir, $suffix in $-dirs {
-        @include bem.utility('m#{$dir}-auto') {
+                @include bem.utility('m#{$dir}-auto') {
-            margin#{$suffix}: auto;
+                        margin#{$suffix}: auto;
-        }
+                }
        
-        @include bem.utility('p#{$dir}-auto') {
+                @include bem.utility('p#{$dir}-auto') {
-            padding#{$suffix}: auto;
+                        padding#{$suffix}: auto;
-        }
+                }
-        @each $mod, $size in $-sizes {
+                @each $mod, $size in $-sizes {
-            @include bem.utility('m#{$dir}-#{$mod}') {
+                        @include bem.utility('m#{$dir}-#{$mod}') {
-                margin#{$suffix}: props.get($size);
+                                margin#{$suffix}: props.get($size);
-            }
+                        }
            
-            @include bem.utility('p#{$dir}-#{$mod}') {
+                        @include bem.utility('p#{$dir}-#{$mod}') {
-                padding#{$suffix}: props.get($size);
+                                padding#{$suffix}: props.get($size);
-            }
+                        }
-        }
+                }
        
-        @include bem.utility('b#{$dir}-0') {
+                @include bem.utility('b#{$dir}-0') {
-            border#{$suffix}: 0;
+                        border#{$suffix}: 0;
-            @include bem.suffix('light') {
+                        @include bem.suffix('light') {
-                @media (prefers-color-scheme: light) {
+                                @media (prefers-color-scheme: light) {
-                    border#{$suffix}: 0;
+                                        border#{$suffix}: 0;
-                }
+                                }
-            }
+                        }
        
-            @include bem.suffix('dark') {
+                        @include bem.suffix('dark') {
-                @media (prefers-color-scheme: dark) {
+                                @media (prefers-color-scheme: dark) {
-                    border#{$suffix}: 0;
+                                        border#{$suffix}: 0;
-                }
+                                }
-            }
+                        }
-        }
+                }
        
-        @include bem.utility('b#{$dir}-1') {
+                @include bem.utility('b#{$dir}-1') {
-            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('light') {
+                        @include bem.suffix('light') {
-                @media (prefers-color-scheme: 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) {
+                                @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') {
+                @include bem.utility('b#{$dir}-1-mute') {
-            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('light') {
+                        @include bem.suffix('light') {
-                @media (prefers-color-scheme: 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) {
+                                @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 {
+                &::before {
-            display:       block;
+                        display:       block;
-            margin-block:  -100em 100em;
+                        margin-block:  -100em 100em;
-            content:       '';
+                        content:       '';
-        }
+                }
-    }
+        }
    
-    @include bem.utility('sr-only') {
+        @include bem.utility('sr-only') {
-        position:    absolute;
+                position:    absolute;
-        width:       1px;
+                width:       1px;
-        height:      1px;
+                height:      1px;
-        padding:     0;
+                padding:     0;
-        margin:      -1px;
+                margin:      -1px;
-        overflow:    hidden;
+                overflow:    hidden;
-        clip-path:   inset(50%);
+                white-space: nowrap;
-        white-space: nowrap;
+                border:      0;
-        border:      0;
+                clip-path:   inset(50%);
-    }
+        }
 }
author	Volpeon <git@volpeon.ink>	2025-08-06 16:40:56 +0200
committer	Volpeon <git@volpeon.ink>	2025-08-06 16:40:56 +0200
commit	41b0d0497988274057fc2512c822a6bc9d2d3ebd (patch)
tree	015a95ede42b799ac1fd049baa8b0a853b6d3bb3 /src/_utils.scss
parent	Fix button font size (diff)
download	iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.tar.gz iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.tar.bz2 iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.zip

diff --git a/src/_utils.scss b/src/_utils.scss index 371a357..3dae3b6 100644 --- a/src/_utils.scss +++ b/src/_utils.scss
@@ -9,372 +9,372 @@
9		9
10	/* stylelint-disable-next-line scss/dollar-variable-pattern */	10	/* stylelint-disable-next-line scss/dollar-variable-pattern */
11	$-dirs: (	11	$-dirs: (
12	'': '',	12	'': '',
13	'b': '-block',	13	'b': '-block',
14	'bs': '-block-start',	14	'bs': '-block-start',
15	'be': '-block-end',	15	'be': '-block-end',
16	'i': '-inline',	16	'i': '-inline',
17	'is': '-inline-start',	17	'is': '-inline-start',
18	'ie': '-inline-end',	18	'ie': '-inline-end',
19	) !default;	19	) !default;
20		20
21	/* stylelint-disable-next-line scss/dollar-variable-pattern */	21	/* stylelint-disable-next-line scss/dollar-variable-pattern */
22	$-sizes: (	22	$-sizes: (
23	0: vars.$size--0,	23	0: vars.$size--0,
24	10: vars.$size--10,	24	10: vars.$size--10,
25	50: vars.$size--50,	25	50: vars.$size--50,
26	75: vars.$size--75,	26	75: vars.$size--75,
27	100: vars.$size--100,	27	100: vars.$size--100,
28	125: vars.$size--125,	28	125: vars.$size--125,
29	200: vars.$size--200,	29	200: vars.$size--200,
30	400: vars.$size--400,	30	400: vars.$size--400,
31	700: vars.$size--700,	31	700: vars.$size--700,
32	800: vars.$size--800,	32	800: vars.$size--800,
33	) !default;	33	) !default;
34		34
35	$-font-sizes: (	35	$-font-sizes: (
36	50: vars.$font-size--50,	36	50: vars.$font-size--50,
37	75: vars.$font-size--75,	37	75: vars.$font-size--75,
38	100: vars.$font-size--100,	38	100: vars.$font-size--100,
39	150: vars.$font-size--150,	39	150: vars.$font-size--150,
40	200: vars.$font-size--200,	40	200: vars.$font-size--200,
41	300: vars.$font-size--300,	41	300: vars.$font-size--300,
42	) !default;	42	) !default;
43		43
44	@mixin styles {	44	@mixin styles {
45	@include bem.utility('d-block') {	45	@include bem.utility('d-block') {
46	display: block;	46	display: block;
47	}	47	}
48		48
49	@include bem.utility('d-inline-block') {	49	@include bem.utility('d-inline-block') {
50	display: inline-block;	50	display: inline-block;
51	}	51	}
52		52
53	@include bem.utility('d-contents') {	53	@include bem.utility('d-contents') {
54	display: contents;	54	display: contents;
55	}	55	}
56		56
57	@include bem.utility('d-flex') {	57	@include bem.utility('d-flex') {
58	display: flex;	58	display: flex;
59	}	59	}
60		60
61	@include bem.utility('td-none') {	61	@include bem.utility('td-none') {
62	text-decoration: none;	62	text-decoration: none;
63	}	63	}
64		64
65	@include bem.utility('d-none') {	65	@include bem.utility('d-none') {
66	display: none;	66	display: none;
67		67
68	@each $breakpoint in map.keys(media.$breakpoints) {	68	@each $breakpoint in map.keys(media.$breakpoints) {
69	@include media.media('<=#{$breakpoint}') {	69	@include media.media('<=#{$breakpoint}') {
70	@include bem.suffix('#{$breakpoint}-lo') {	70	@include bem.suffix('#{$breakpoint}-lo') {
71	display: none;	71	display: none;
72	}	72	}
73	}	73	}
74		74
75	@include media.media('>#{$breakpoint}') {	75	@include media.media('>#{$breakpoint}') {
76	@include bem.suffix('#{$breakpoint}-hi') {	76	@include bem.suffix('#{$breakpoint}-hi') {
77	display: none;	77	display: none;
78	}	78	}
79	}	79	}
80	}	80	}
81		81
82	@include bem.at-theme('js') {	82	@include bem.at-theme('js') {
83	@include bem.suffix('js') {	83	@include bem.suffix('js') {
84	display: none;	84	display: none;
85	}	85	}
86	}	86	}
87		87
88	@include bem.at-theme('no-js') {	88	@include bem.at-theme('no-js') {
89	@include bem.suffix('no-js') {	89	@include bem.suffix('no-js') {
90	display: none;	90	display: none;
91	}	91	}
92	}	92	}
93		93
94	@include bem.suffix('empty') {	94	@include bem.suffix('empty') {
95	&:empty {	95	&:empty {
96	display: none;	96	display: none;
97	}	97	}
98	}	98	}
99	}	99	}
100		100
101	@include bem.utility('va-top') {	101	@include bem.utility('va-top') {
102	vertical-align: top;	102	vertical-align: top;
103	}	103	}
104		104
105	@include bem.utility('va-baseline') {	105	@include bem.utility('va-baseline') {
106	vertical-align: baseline;	106	vertical-align: baseline;
107	}	107	}
108		108
109	@include bem.utility('va-middle') {	109	@include bem.utility('va-middle') {
110	vertical-align: middle;	110	vertical-align: middle;
111	}	111	}
112		112
113	@include bem.utility('va-bottom') {	113	@include bem.utility('va-bottom') {
114	vertical-align: bottom;	114	vertical-align: bottom;
115	}	115	}
116		116
117	@include bem.utility('ta-start') {	117	@include bem.utility('ta-start') {
118	text-align: start;	118	text-align: start;
119	}	119	}
120		120
121	@include bem.utility('ta-end') {	121	@include bem.utility('ta-end') {
122	text-align: end;	122	text-align: end;
123	}	123	}
124		124
125	@include bem.utility('ta-center') {	125	@include bem.utility('ta-center') {
126	text-align: center;	126	text-align: center;
127	}	127	}
128		128
129	@include bem.utility('fw-normal') {	129	@include bem.utility('fw-normal') {
130	font-weight: normal;	130	font-weight: normal;
131	}	131	}
132		132
133	@include bem.utility('ai-center') {	133	@include bem.utility('ai-center') {
134	align-items: center;	134	align-items: center;
135	}	135	}
136		136
137	@include bem.utility('ai-start') {	137	@include bem.utility('ai-start') {
138	align-items: flex-start;	138	align-items: flex-start;
139	}	139	}
140		140
141	@include bem.utility('ai-end') {	141	@include bem.utility('ai-end') {
142	align-items: flex-end;	142	align-items: flex-end;
143	}	143	}
144		144
145	@include bem.utility('ac-center') {	145	@include bem.utility('ac-center') {
146	align-content: center;	146	align-content: center;
147	}	147	}
148		148
149	@include bem.utility('jc-center') {	149	@include bem.utility('jc-center') {
150	justify-content: center;	150	justify-content: center;
151	}	151	}
152		152
153	@include bem.utility('jc-start') {	153	@include bem.utility('jc-start') {
154	justify-content: flex-start;	154	justify-content: flex-start;
155	}	155	}
156		156
157	@include bem.utility('jc-end') {	157	@include bem.utility('jc-end') {
158	justify-content: flex-end;	158	justify-content: flex-end;
159	}	159	}
160		160
161	@include bem.utility('tt-upper') {	161	@include bem.utility('tt-upper') {
162	text-transform: uppercase;	162	text-transform: uppercase;
163	}	163	}
164		164
165	@include bem.utility('tt-lower') {	165	@include bem.utility('tt-lower') {
166	text-transform: lowercase;	166	text-transform: lowercase;
167	}	167	}
168		168
169	@include bem.utility('c-heading') {	169	@include bem.utility('c-heading') {
170	color: props.get(vars.$theme, --heading);	170	color: props.get(vars.$theme, --heading);
171		171
172	@each $theme in map.keys(props.get(vars.$transparent-colors)) {	172	@each $theme in map.keys(props.get(vars.$transparent-colors)) {
173	$theme-name: static-#{string.slice($theme, 3)};	173	$theme-name: static-#{string.slice($theme, 3)};
174		174
175	@include bem.at-theme($theme-name) {	175	@include bem.at-theme($theme-name) {
176	color: props.get(vars.$transparent-colors, $theme, --900);	176	color: props.get(vars.$transparent-colors, $theme, --900);
177	}	177	}
178	}	178	}
179	}	179	}
180		180
181	@include bem.utility('c-text') {	181	@include bem.utility('c-text') {
182	color: props.get(vars.$theme, --text);	182	color: props.get(vars.$theme, --text);
183		183
184	@each $theme in map.keys(props.get(vars.$transparent-colors)) {	184	@each $theme in map.keys(props.get(vars.$transparent-colors)) {
185	$theme-name: static-#{string.slice($theme, 3)};	185	$theme-name: static-#{string.slice($theme, 3)};
186		186
187	@include bem.at-theme($theme-name) {	187	@include bem.at-theme($theme-name) {
188	color: props.get(vars.$transparent-colors, $theme, --800);	188	color: props.get(vars.$transparent-colors, $theme, --800);
189	}	189	}
190	}	190	}
191	}	191	}
192		192
193	@include bem.utility('c-mute') {	193	@include bem.utility('c-mute') {
194	color: props.get(vars.$theme, --text-mute);	194	color: props.get(vars.$theme, --text-mute);
195		195
196	@each $theme in map.keys(props.get(vars.$transparent-colors)) {	196	@each $theme in map.keys(props.get(vars.$transparent-colors)) {
197	$theme-name: static-#{string.slice($theme, 3)};	197	$theme-name: static-#{string.slice($theme, 3)};
198		198
199	@include bem.at-theme($theme-name) {	199	@include bem.at-theme($theme-name) {
200	color: props.get(vars.$transparent-colors, $theme, --700);	200	color: props.get(vars.$transparent-colors, $theme, --700);
201	}	201	}
202	}	202	}
203	}	203	}
204		204
205	@include bem.utility('c-mute-more') {	205	@include bem.utility('c-mute-more') {
206	color: props.get(vars.$theme, --text-mute-more);	206	color: props.get(vars.$theme, --text-mute-more);
207		207
208	@each $theme in map.keys(props.get(vars.$transparent-colors)) {	208	@each $theme in map.keys(props.get(vars.$transparent-colors)) {
209	$theme-name: static-#{string.slice($theme, 3)};	209	$theme-name: static-#{string.slice($theme, 3)};
210		210
211	@include bem.at-theme($theme-name) {	211	@include bem.at-theme($theme-name) {
212	color: props.get(vars.$transparent-colors, $theme, --600);	212	color: props.get(vars.$transparent-colors, $theme, --600);
213	}	213	}
214	}	214	}
215	}	215	}
216		216
217	@each $mod, $size in $-font-sizes {	217	@each $mod, $size in $-font-sizes {
218	@include bem.utility('fs-#{$mod}') {	218	@include bem.utility('fs-#{$mod}') {
219	font-size: props.get($size);	219	font-size: props.get($size);
220	}	220	}
221	}	221	}
222		222
223	@each $dir, $prop in (is: inline-size, bs: block-size) {	223	@each $dir, $prop in (is: inline-size, bs: block-size) {
224	@include bem.utility('#{$dir}-100') {	224	@include bem.utility('#{$dir}-100') {
225	#{$prop}: 100%;	225	#{$prop}: 100%;
226	}	226	}
227		227
228	@include bem.utility('#{$dir}-75') {	228	@include bem.utility('#{$dir}-75') {
229	#{$prop}: 75%;	229	#{$prop}: 75%;
230	}	230	}
231		231
232	@include bem.utility('#{$dir}-50') {	232	@include bem.utility('#{$dir}-50') {
233	#{$prop}: 50%;	233	#{$prop}: 50%;
234	}	234	}
235		235
236	@include bem.utility('#{$dir}-25') {	236	@include bem.utility('#{$dir}-25') {
237	#{$prop}: 25%;	237	#{$prop}: 25%;
238	}	238	}
239		239
240	@include bem.utility('#{$dir}-1px') {	240	@include bem.utility('#{$dir}-1px') {
241	#{$prop}: 1px;	241	#{$prop}: 1px;
242	}	242	}
243		243
244	@include bem.utility('#{$dir}-0') {	244	@include bem.utility('#{$dir}-0') {
245	#{$prop}: 0;	245	#{$prop}: 0;
246	}	246	}
247	}	247	}
248		248
249	@include bem.utility('elp') {	249	@include bem.utility('elp') {
250	overflow: hidden;	250	overflow: hidden;
251	text-overflow: ellipsis;	251	text-overflow: ellipsis;
252	white-space: nowrap;	252	white-space: nowrap;
253	}	253	}
254		254
255	@include bem.utility('o-auto') {	255	@include bem.utility('o-auto') {
256	overflow: auto;	256	overflow: auto;
257	}	257	}
258		258
259	@include bem.utility('o-hidden') {	259	@include bem.utility('o-hidden') {
260	overflow: hidden;	260	overflow: hidden;
261	}	261	}
262		262
263	@include bem.utility('p-static') {	263	@include bem.utility('p-static') {
264	position: static;	264	position: static;
265	}	265	}
266		266
267	@include bem.utility('p-relative') {	267	@include bem.utility('p-relative') {
268	position: relative;	268	position: relative;
269	}	269	}
270		270
271	@include bem.utility('p-fixed') {	271	@include bem.utility('p-fixed') {
272	position: fixed;	272	position: fixed;
273	}	273	}
274		274
275	@include bem.utility('p-sticky-bs') {	275	@include bem.utility('p-sticky-bs') {
276	position: sticky;	276	position: sticky;
277	inset-block-start: props.get(vars.$sticky-top-offset);	277	inset-block-start: props.get(vars.$sticky-top-offset);
278	}	278	}
279		279
280	@include bem.utility('p-sticky-be') {	280	@include bem.utility('p-sticky-be') {
281	position: sticky;	281	position: sticky;
282	inset-block-end: 0;	282	inset-block-end: 0;
283	}	283	}
284		284
285	@include bem.utility('br-round') {	285	@include bem.utility('br-round') {
286	border-radius: props.get(vars.$rounding);	286	border-radius: props.get(vars.$rounding);
287	}	287	}
288		288
289	@include bem.utility('br-round-sm') {	289	@include bem.utility('br-round-sm') {
290	border-radius: props.get(vars.$rounding--sm);	290	border-radius: props.get(vars.$rounding--sm);
291	}	291	}
292		292
293	@each $dir, $suffix in $-dirs {	293	@each $dir, $suffix in $-dirs {
294	@include bem.utility('m#{$dir}-auto') {	294	@include bem.utility('m#{$dir}-auto') {
295	margin#{$suffix}: auto;	295	margin#{$suffix}: auto;
296	}	296	}
297		297
298	@include bem.utility('p#{$dir}-auto') {	298	@include bem.utility('p#{$dir}-auto') {
299	padding#{$suffix}: auto;	299	padding#{$suffix}: auto;
300	}	300	}
301		301
302	@each $mod, $size in $-sizes {	302	@each $mod, $size in $-sizes {
303	@include bem.utility('m#{$dir}-#{$mod}') {	303	@include bem.utility('m#{$dir}-#{$mod}') {
304	margin#{$suffix}: props.get($size);	304	margin#{$suffix}: props.get($size);
305	}	305	}
306		306
307	@include bem.utility('p#{$dir}-#{$mod}') {	307	@include bem.utility('p#{$dir}-#{$mod}') {
308	padding#{$suffix}: props.get($size);	308	padding#{$suffix}: props.get($size);
309	}	309	}
310	}	310	}
311		311
312	@include bem.utility('b#{$dir}-0') {	312	@include bem.utility('b#{$dir}-0') {
313	border#{$suffix}: 0;	313	border#{$suffix}: 0;
314		314
315	@include bem.suffix('light') {	315	@include bem.suffix('light') {
316	@media (prefers-color-scheme: light) {	316	@media (prefers-color-scheme: light) {
317	border#{$suffix}: 0;	317	border#{$suffix}: 0;
318	}	318	}
319	}	319	}
320		320
321	@include bem.suffix('dark') {	321	@include bem.suffix('dark') {
322	@media (prefers-color-scheme: dark) {	322	@media (prefers-color-scheme: dark) {
323	border#{$suffix}: 0;	323	border#{$suffix}: 0;
324	}	324	}
325	}	325	}
326	}	326	}
327		327
328	@include bem.utility('b#{$dir}-1') {	328	@include bem.utility('b#{$dir}-1') {
329	border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);	329	border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
330		330
331	@include bem.suffix('light') {	331	@include bem.suffix('light') {
332	@media (prefers-color-scheme: light) {	332	@media (prefers-color-scheme: light) {
333	border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);	333	border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
334	}	334	}
335	}	335	}
336		336
337	@include bem.suffix('dark') {	337	@include bem.suffix('dark') {
338	@media (prefers-color-scheme: dark) {	338	@media (prefers-color-scheme: dark) {
339	border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);	339	border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
340	}	340	}
341	}	341	}
342	}	342	}
343		343
344	@include bem.utility('b#{$dir}-1-mute') {	344	@include bem.utility('b#{$dir}-1-mute') {
345	border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);	345	border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);
346		346
347	@include bem.suffix('light') {	347	@include bem.suffix('light') {
348	@media (prefers-color-scheme: light) {	348	@media (prefers-color-scheme: light) {
349	border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);	349	border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);
350	}	350	}
351	}	351	}
352		352
353	@include bem.suffix('dark') {	353	@include bem.suffix('dark') {
354	@media (prefers-color-scheme: dark) {	354	@media (prefers-color-scheme: dark) {
355	border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);	355	border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);
356	}	356	}
357	}	357	}
358	}	358	}
359	}	359	}
360		360
361	@include bem.utility('mbs-neutralize') {	361	@include bem.utility('mbs-neutralize') {
362	&::before {	362	&::before {
363	display: block;	363	display: block;
364	margin-block: -100em 100em;	364	margin-block: -100em 100em;
365	content: '';	365	content: '';
366	}	366	}
367	}	367	}
368		368
369	@include bem.utility('sr-only') {	369	@include bem.utility('sr-only') {
370	position: absolute;	370	position: absolute;
371	width: 1px;	371	width: 1px;
372	height: 1px;	372	height: 1px;
373	padding: 0;	373	padding: 0;
374	margin: -1px;	374	margin: -1px;
375	overflow: hidden;	375	overflow: hidden;
376	clip-path: inset(50%);	376	white-space: nowrap;
377	white-space: nowrap;	377	border: 0;
378	border: 0;	378	clip-path: inset(50%);
379	}	379	}
380	}	380	}