Switch to tab indentation

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/objects/_checkbox.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, 190 insertions, 190 deletions
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index 82dd596..5faafb9 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -9,223 +9,223 @@
 @use 'checkbox.vars' as vars;
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.object('checkbox') {
+        @include bem.object('checkbox') {
-        position:       relative;
+                position:       relative;
-        display:        inline-block;
+                display:        inline-block;
-        padding-block:  props.get(vars.$pad-b);
+                padding-block:  props.get(vars.$pad-b);
-        padding-inline: props.get(vars.$pad-i);
+                padding-inline: props.get(vars.$pad-i);
-        margin-inline:
+                margin-inline:
-            calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
+                        calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
-            calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-b) - props.get(vars.$key-focus--border-offset));
+                        calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-b) - props.get(vars.$key-focus--border-offset));
-        @include bem.elem('box') {
+                @include bem.elem('box') {
-            position:           relative;
+                        position:           relative;
-            display:            inline-block;
+                        display:            inline-block;
-            flex:               0 0 auto;
+                        flex:               0 0 auto;
-            inline-size:        props.get(vars.$size);
+                        inline-size:        props.get(vars.$size);
-            block-size:         props.get(vars.$size);
+                        block-size:         props.get(vars.$size);
-            margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$size) - props.get(vars.$key-focus--border-offset));
+                        margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$size) - props.get(vars.$key-focus--border-offset));
-            vertical-align:     top;
+                        vertical-align:     top;
-            background-color:   props.get(vars.$box-border-color);
+                        background-color:   props.get(vars.$box-border-color);
-            background-clip:    padding-box;
+                        background-clip:    padding-box;
-            border:             props.get(vars.$key-focus--border-offset) solid transparent;
+                        border:             props.get(vars.$key-focus--border-offset) solid transparent;
-            border-radius:      calc(props.get(vars.$border-width) + props.get(vars.$key-focus--border-offset));
+                        border-radius:      calc(props.get(vars.$border-width) + props.get(vars.$key-focus--border-offset));
    
-            &::before,
+                        &::before,
-            &::after {
+                        &::after {
-                position: absolute;
+                                position: absolute;
-                display:  block;
+                                display:  block;
-                content:  '';
+                                content:  '';
-            }
+                        }
    
-            &::before {
+                        &::before {
-                inset-block-start:  props.get(vars.$border-width);
+                                inset-block-start:  props.get(vars.$border-width);
-                inset-inline-start: props.get(vars.$border-width);
+                                inset-inline-start: props.get(vars.$border-width);
-                z-index:            2;
+                                z-index:            2;
-                inline-size:        calc(props.get(vars.$size) - 2 * props.get(vars.$border-width));
+                                inline-size:        calc(props.get(vars.$size) - 2 * props.get(vars.$border-width));
-                block-size:         calc(props.get(vars.$size) - 2 * props.get(vars.$border-width));
+                                block-size:         calc(props.get(vars.$size) - 2 * props.get(vars.$border-width));
-                background-color:   props.get(vars.$box-bg-color);
+                                background-color:   props.get(vars.$box-bg-color);
-                transition:         transform .2s ease;
+                                transition:         transform .2s ease;
-            }
+                        }
    
-            &::after {
+                        &::after {
-                inset-block-start:   calc(.5 * props.get(vars.$size) - 1px);
+                                inset-block-start:   calc(.5 * props.get(vars.$size) - 1px);
-                inset-inline-start:  calc(1.5 * props.get(vars.$border-width));
+                                inset-inline-start:  calc(1.5 * props.get(vars.$border-width));
-                z-index:             3;
+                                z-index:             3;
-                box-sizing:          border-box;
+                                box-sizing:          border-box;
-                inline-size:         calc(props.get(vars.$size) - 3 * props.get(vars.$border-width));
+                                inline-size:         calc(props.get(vars.$size) - 3 * props.get(vars.$border-width));
-                block-size:          0;
+                                block-size:          0;
-                border-color:        props.get(vars.$box-bg-color);
+                                border-color:        props.get(vars.$box-bg-color);
-                border-style:        solid;
+                                border-style:        solid;
-                border-radius:       2px;
+                                border-radius:       2px;
-                transition:          transform .2s ease;
+                                transform:           scale(0);
-                transform:           scale(0);
+                                transition:          transform .2s ease;
-                border-block-width:  0 2px;
+                                border-block-width:  0 2px;
-                border-inline-width: 0 2px;
+                                border-inline-width: 0 2px;
-            }
+                        }
-        }
+                }
    
-        @include bem.elem('check-icon') {
+                @include bem.elem('check-icon') {
-            position:           absolute;
+                        position:           absolute;
-            inset-block-start:  calc(1 * props.get(vars.$border-width));
+                        inset-block-start:  calc(1 * props.get(vars.$border-width));
-            inset-inline-start: calc(1 * props.get(vars.$border-width));
+                        inset-inline-start: calc(1 * props.get(vars.$border-width));
-            z-index:            2;
+                        z-index:            2;
-            display:            block;
+                        display:            block;
-            inline-size:        calc(100% - 2 * props.get(vars.$border-width));
+                        inline-size:        calc(100% - 2 * props.get(vars.$border-width));
-            block-size:         calc(100% - 2 * props.get(vars.$border-width));
+                        block-size:         calc(100% - 2 * props.get(vars.$border-width));
-            margin:             0;
+                        margin:             0;
-            color:              props.get(vars.$box-bg-color);
+                        color:              props.get(vars.$box-bg-color);
-            stroke-width:       fn.px-to-rem(3px);
+                        stroke-width:       fn.px-to-rem(3px);
-            transition:         transform .2s ease;
+                        transform:          scale(0);
-            transform:          scale(0);
+                        transform-origin:   40% 90%;
-            transform-origin:   40% 90%;
+                        transition:         transform .2s ease;
-        }
+                }
    
-        @include bem.elem('label') {
+                @include bem.elem('label') {
-            margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset));
+                        margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset));
-        }
+                }
    
-        @include bem.elem('native') {
+                @include bem.elem('native') {
-            position:           absolute;
+                        position:           absolute;
-            inset-block-start:  0;
+                        inset-block-start:  0;
-            inset-inline-start: 0;
+                        inset-inline-start: 0;
-            z-index:            -1;
+                        z-index:            -1;
-            inline-size:        100%;
+                        inline-size:        100%;
-            block-size:         100%;
+                        block-size:         100%;
-            padding:            0;
+                        padding:            0;
-            margin:             0;
+                        margin:             0;
-            overflow:           hidden;
+                        overflow:           hidden;
-            appearance:         none;
+                        appearance:         none;
-            border-radius:      props.get(vars.$rounding);
+                        border-radius:      props.get(vars.$rounding);
    
-            &:hover,
+                        &:hover,
-            &:focus-visible {
+                        &:focus-visible {
-                @include bem.sibling-elem('label') {
+                                @include bem.sibling-elem('label') {
-                    color: props.get(vars.$hover--label-color);
+                                        color: props.get(vars.$hover--label-color);
-                }
+                                }
    
-                @include bem.sibling-elem('box') {
+                                @include bem.sibling-elem('box') {
-                    background-color: props.get(vars.$hover--box-border-color);
+                                        background-color: props.get(vars.$hover--box-border-color);
-                }
+                                }
-            }
+                        }
    
-            &:checked {
+                        &:checked {
-                @include bem.sibling-elem('box') {
+                                @include bem.sibling-elem('box') {
-                    &::before {
+                                        &::before {
-                        transform: scale(0);
+                                                transform: scale(0);
-                    }
+                                        }
    
-                    @include bem.elem('check-icon') {
+                                        @include bem.elem('check-icon') {
-                        transform: scale(1);
+                                                transform: scale(1);
-                    }
+                                        }
-                }
+                                }
-            }
+                        }
    
-            &:indeterminate {
+                        &:indeterminate {
-                @include bem.sibling-elem('box') {
+                                @include bem.sibling-elem('box') {
-                    &::before {
+                                        &::before {
-                        transform: scale(0);
+                                                transform: scale(0);
-                    }
+                                        }
    
-                    &::after {
+                                        &::after {
-                        transform: scale(1);
+                                                transform: scale(1);
-                    }
+                                        }
    
-                    @include bem.elem('check-icon') {
+                                        @include bem.elem('check-icon') {
-                        transform: scale(0);
+                                                transform: scale(0);
-                    }
+                                        }
-                }
+                                }
-            }
+                        }
    
-            &:disabled {
+                        &:disabled {
-                @include bem.sibling-elem('label') {
+                                @include bem.sibling-elem('label') {
-                    color: props.get(vars.$disabled--label-color);
+                                        color: props.get(vars.$disabled--label-color);
-                }
+                                }
    
-                @include bem.sibling-elem('box') {
+                                @include bem.sibling-elem('box') {
-                    background-color: props.get(vars.$disabled--box-border-color);
+                                        background-color: props.get(vars.$disabled--box-border-color);
    
-                    &::before {
+                                        &::before {
-                        background-color: props.get(vars.$disabled--box-bg-color);
+                                                background-color: props.get(vars.$disabled--box-bg-color);
-                    }
+                                        }
-                }
+                                }
-            }
+                        }
    
-            &:focus-visible {
+                        &:focus-visible {
-                @include bem.sibling-elem('label') {
+                                @include bem.sibling-elem('label') {
-                    color: props.get(vars.$key-focus--label-color);
+                                        color: props.get(vars.$key-focus--label-color);
-                }
+                                }
-                @include bem.sibling-elem('box') {
+                                @include bem.sibling-elem('box') {
-                    outline:    props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
+                                        outline:    props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
-                    box-shadow:
+                                        box-shadow:
-                        0
+                                                0
-                        0
+                                                0
-                        0
+                                                0
-                        calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                                                calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
-                        props.get(vars.$key-focus--outline-color);
+                                                props.get(vars.$key-focus--outline-color);
-                }
+                                }
-            }
+                        }
-        }
+                }
    
-        @include bem.modifier('standalone') {
+                @include bem.modifier('standalone') {
-            @include bem.elem('box') {
+                        @include bem.elem('box') {
-                margin-block-start: 0;
+                                margin-block-start: 0;
-            }
+                        }
-        }
+                }
    
-        @include bem.modifier('accent') {
+                @include bem.modifier('accent') {
-            @include bem.elem('native') {
+                        @include bem.elem('native') {
-                &:checked {
+                                &:checked {
-                    @include bem.sibling-elem('box') {
+                                        @include bem.sibling-elem('box') {
-                        background-color: props.get(vars.$accent--box-border-color);
+                                                background-color: props.get(vars.$accent--box-border-color);
-                    }
+                                        }
        
-                    &:hover,
+                                        &:hover,
-                    &:focus-visible {
+                                        &:focus-visible {
-                        @include bem.sibling-elem('box') {
+                                                @include bem.sibling-elem('box') {
-                            background-color: props.get(vars.$accent--hover--box-border-color);
+                                                        background-color: props.get(vars.$accent--hover--box-border-color);
-                        }
+                                                }
-                    }
+                                        }
-                }
+                                }
    
-                &:indeterminate {
+                                &:indeterminate {
-                    @include bem.sibling-elem('box') {
+                                        @include bem.sibling-elem('box') {
-                        background-color: props.get(vars.$accent--box-border-color);
+                                                background-color: props.get(vars.$accent--box-border-color);
-                    }
+                                        }
        
-                    &:hover,
+                                        &:hover,
-                    &:focus-visible {
+                                        &:focus-visible {
-                        @include bem.sibling-elem('box') {
+                                                @include bem.sibling-elem('box') {
-                            background-color: props.get(vars.$accent--hover--box-border-color);
+                                                        background-color: props.get(vars.$accent--hover--box-border-color);
-                        }
+                                                }
-                    }
+                                        }
-                }
+                                }
    
-                &:disabled {
+                                &:disabled {
-                    @include bem.sibling-elem('box') {
+                                        @include bem.sibling-elem('box') {
-                        background-color: props.get(vars.$disabled--box-border-color);
+                                                background-color: props.get(vars.$disabled--box-border-color);
        
-                        &::before {
+                                                &::before {
-                            background-color: props.get(vars.$disabled--box-bg-color);
+                                                        background-color: props.get(vars.$disabled--box-bg-color);
-                        }
+                                                }
-                    }
+                                        }
-                    &:checked {
+                                        &:checked {
-                        @include bem.sibling-elem('box') {
+                                                @include bem.sibling-elem('box') {
-                            background-color: props.get(vars.$disabled--box-border-color);
+                                                        background-color: props.get(vars.$disabled--box-border-color);
-                        }
+                                                }
-                    }
+                                        }
        
-                    &:indeterminate {
+                                        &:indeterminate {
-                        @include bem.sibling-elem('box') {
+                                                @include bem.sibling-elem('box') {
-                            background-color: props.get(vars.$disabled--box-border-color);
+                                                        background-color: props.get(vars.$disabled--box-border-color);
-                        }
+                                                }
-                    }
+                                        }
-                }
+                                }
-            }
+                        }
-        }
+                }
-    }
+        }
 }
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/objects/_checkbox.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/objects/_checkbox.scss b/src/objects/_checkbox.scss index 82dd596..5faafb9 100644 --- a/src/objects/_checkbox.scss +++ b/src/objects/_checkbox.scss
@@ -9,223 +9,223 @@
9	@use 'checkbox.vars' as vars;	9	@use 'checkbox.vars' as vars;
10		10
11	@mixin styles {	11	@mixin styles {
12	@include materialize-at-root(meta.module-variables('vars'));	12	@include materialize-at-root(meta.module-variables('vars'));
13		13
14	@include bem.object('checkbox') {	14	@include bem.object('checkbox') {
15	position: relative;	15	position: relative;
16	display: inline-block;	16	display: inline-block;
17	padding-block: props.get(vars.$pad-b);	17	padding-block: props.get(vars.$pad-b);
18	padding-inline: props.get(vars.$pad-i);	18	padding-inline: props.get(vars.$pad-i);
19	margin-inline:	19	margin-inline:
20	calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))	20	calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
21	calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-b) - props.get(vars.$key-focus--border-offset));	21	calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-b) - props.get(vars.$key-focus--border-offset));
22		22
23	@include bem.elem('box') {	23	@include bem.elem('box') {
24	position: relative;	24	position: relative;
25	display: inline-block;	25	display: inline-block;
26	flex: 0 0 auto;	26	flex: 0 0 auto;
27	inline-size: props.get(vars.$size);	27	inline-size: props.get(vars.$size);
28	block-size: props.get(vars.$size);	28	block-size: props.get(vars.$size);
29	margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$size) - props.get(vars.$key-focus--border-offset));	29	margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$size) - props.get(vars.$key-focus--border-offset));
30	vertical-align: top;	30	vertical-align: top;
31	background-color: props.get(vars.$box-border-color);	31	background-color: props.get(vars.$box-border-color);
32	background-clip: padding-box;	32	background-clip: padding-box;
33	border: props.get(vars.$key-focus--border-offset) solid transparent;	33	border: props.get(vars.$key-focus--border-offset) solid transparent;
34	border-radius: calc(props.get(vars.$border-width) + props.get(vars.$key-focus--border-offset));	34	border-radius: calc(props.get(vars.$border-width) + props.get(vars.$key-focus--border-offset));
35		35
36	&::before,	36	&::before,
37	&::after {	37	&::after {
38	position: absolute;	38	position: absolute;
39	display: block;	39	display: block;
40	content: '';	40	content: '';
41	}	41	}
42		42
43	&::before {	43	&::before {
44	inset-block-start: props.get(vars.$border-width);	44	inset-block-start: props.get(vars.$border-width);
45	inset-inline-start: props.get(vars.$border-width);	45	inset-inline-start: props.get(vars.$border-width);
46	z-index: 2;	46	z-index: 2;
47	inline-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width));	47	inline-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width));
48	block-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width));	48	block-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width));
49	background-color: props.get(vars.$box-bg-color);	49	background-color: props.get(vars.$box-bg-color);
50	transition: transform .2s ease;	50	transition: transform .2s ease;
51	}	51	}
52		52
53	&::after {	53	&::after {
54	inset-block-start: calc(.5 * props.get(vars.$size) - 1px);	54	inset-block-start: calc(.5 * props.get(vars.$size) - 1px);
55	inset-inline-start: calc(1.5 * props.get(vars.$border-width));	55	inset-inline-start: calc(1.5 * props.get(vars.$border-width));
56	z-index: 3;	56	z-index: 3;
57	box-sizing: border-box;	57	box-sizing: border-box;
58	inline-size: calc(props.get(vars.$size) - 3 * props.get(vars.$border-width));	58	inline-size: calc(props.get(vars.$size) - 3 * props.get(vars.$border-width));
59	block-size: 0;	59	block-size: 0;
60	border-color: props.get(vars.$box-bg-color);	60	border-color: props.get(vars.$box-bg-color);
61	border-style: solid;	61	border-style: solid;
62	border-radius: 2px;	62	border-radius: 2px;
63	transition: transform .2s ease;	63	transform: scale(0);
64	transform: scale(0);	64	transition: transform .2s ease;
65	border-block-width: 0 2px;	65	border-block-width: 0 2px;
66	border-inline-width: 0 2px;	66	border-inline-width: 0 2px;
67	}	67	}
68	}	68	}
69		69
70	@include bem.elem('check-icon') {	70	@include bem.elem('check-icon') {
71	position: absolute;	71	position: absolute;
72	inset-block-start: calc(1 * props.get(vars.$border-width));	72	inset-block-start: calc(1 * props.get(vars.$border-width));
73	inset-inline-start: calc(1 * props.get(vars.$border-width));	73	inset-inline-start: calc(1 * props.get(vars.$border-width));
74	z-index: 2;	74	z-index: 2;
75	display: block;	75	display: block;
76	inline-size: calc(100% - 2 * props.get(vars.$border-width));	76	inline-size: calc(100% - 2 * props.get(vars.$border-width));
77	block-size: calc(100% - 2 * props.get(vars.$border-width));	77	block-size: calc(100% - 2 * props.get(vars.$border-width));
78	margin: 0;	78	margin: 0;
79	color: props.get(vars.$box-bg-color);	79	color: props.get(vars.$box-bg-color);
80	stroke-width: fn.px-to-rem(3px);	80	stroke-width: fn.px-to-rem(3px);
81	transition: transform .2s ease;	81	transform: scale(0);
82	transform: scale(0);	82	transform-origin: 40% 90%;
83	transform-origin: 40% 90%;	83	transition: transform .2s ease;
84	}	84	}
85		85
86	@include bem.elem('label') {	86	@include bem.elem('label') {
87	margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset));	87	margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset));
88	}	88	}
89		89
90	@include bem.elem('native') {	90	@include bem.elem('native') {
91	position: absolute;	91	position: absolute;
92	inset-block-start: 0;	92	inset-block-start: 0;
93	inset-inline-start: 0;	93	inset-inline-start: 0;
94	z-index: -1;	94	z-index: -1;
95	inline-size: 100%;	95	inline-size: 100%;
96	block-size: 100%;	96	block-size: 100%;
97	padding: 0;	97	padding: 0;
98	margin: 0;	98	margin: 0;
99	overflow: hidden;	99	overflow: hidden;
100	appearance: none;	100	appearance: none;
101	border-radius: props.get(vars.$rounding);	101	border-radius: props.get(vars.$rounding);
102		102
103	&:hover,	103	&:hover,
104	&:focus-visible {	104	&:focus-visible {
105	@include bem.sibling-elem('label') {	105	@include bem.sibling-elem('label') {
106	color: props.get(vars.$hover--label-color);	106	color: props.get(vars.$hover--label-color);
107	}	107	}
108		108
109	@include bem.sibling-elem('box') {	109	@include bem.sibling-elem('box') {
110	background-color: props.get(vars.$hover--box-border-color);	110	background-color: props.get(vars.$hover--box-border-color);
111	}	111	}
112	}	112	}
113		113
114	&:checked {	114	&:checked {
115	@include bem.sibling-elem('box') {	115	@include bem.sibling-elem('box') {
116	&::before {	116	&::before {
117	transform: scale(0);	117	transform: scale(0);
118	}	118	}
119		119
120	@include bem.elem('check-icon') {	120	@include bem.elem('check-icon') {
121	transform: scale(1);	121	transform: scale(1);
122	}	122	}
123	}	123	}
124	}	124	}
125		125
126	&:indeterminate {	126	&:indeterminate {
127	@include bem.sibling-elem('box') {	127	@include bem.sibling-elem('box') {
128	&::before {	128	&::before {
129	transform: scale(0);	129	transform: scale(0);
130	}	130	}
131		131
132	&::after {	132	&::after {
133	transform: scale(1);	133	transform: scale(1);
134	}	134	}
135		135
136	@include bem.elem('check-icon') {	136	@include bem.elem('check-icon') {
137	transform: scale(0);	137	transform: scale(0);
138	}	138	}
139	}	139	}
140	}	140	}
141		141
142	&:disabled {	142	&:disabled {
143	@include bem.sibling-elem('label') {	143	@include bem.sibling-elem('label') {
144	color: props.get(vars.$disabled--label-color);	144	color: props.get(vars.$disabled--label-color);
145	}	145	}
146		146
147	@include bem.sibling-elem('box') {	147	@include bem.sibling-elem('box') {
148	background-color: props.get(vars.$disabled--box-border-color);	148	background-color: props.get(vars.$disabled--box-border-color);
149		149
150	&::before {	150	&::before {
151	background-color: props.get(vars.$disabled--box-bg-color);	151	background-color: props.get(vars.$disabled--box-bg-color);
152	}	152	}
153	}	153	}
154	}	154	}
155		155
156	&:focus-visible {	156	&:focus-visible {
157	@include bem.sibling-elem('label') {	157	@include bem.sibling-elem('label') {
158	color: props.get(vars.$key-focus--label-color);	158	color: props.get(vars.$key-focus--label-color);
159	}	159	}
160		160
161	@include bem.sibling-elem('box') {	161	@include bem.sibling-elem('box') {
162	outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);	162	outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
163	box-shadow:	163	box-shadow:
164	0	164	0
165	0	165	0
166	0	166	0
167	calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))	167	calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
168	props.get(vars.$key-focus--outline-color);	168	props.get(vars.$key-focus--outline-color);
169	}	169	}
170	}	170	}
171	}	171	}
172		172
173	@include bem.modifier('standalone') {	173	@include bem.modifier('standalone') {
174	@include bem.elem('box') {	174	@include bem.elem('box') {
175	margin-block-start: 0;	175	margin-block-start: 0;
176	}	176	}
177	}	177	}
178		178
179	@include bem.modifier('accent') {	179	@include bem.modifier('accent') {
180	@include bem.elem('native') {	180	@include bem.elem('native') {
181	&:checked {	181	&:checked {
182	@include bem.sibling-elem('box') {	182	@include bem.sibling-elem('box') {
183	background-color: props.get(vars.$accent--box-border-color);	183	background-color: props.get(vars.$accent--box-border-color);
184	}	184	}
185		185
186	&:hover,	186	&:hover,
187	&:focus-visible {	187	&:focus-visible {
188	@include bem.sibling-elem('box') {	188	@include bem.sibling-elem('box') {
189	background-color: props.get(vars.$accent--hover--box-border-color);	189	background-color: props.get(vars.$accent--hover--box-border-color);
190	}	190	}
191	}	191	}
192	}	192	}
193		193
194	&:indeterminate {	194	&:indeterminate {
195	@include bem.sibling-elem('box') {	195	@include bem.sibling-elem('box') {
196	background-color: props.get(vars.$accent--box-border-color);	196	background-color: props.get(vars.$accent--box-border-color);
197	}	197	}
198		198
199	&:hover,	199	&:hover,
200	&:focus-visible {	200	&:focus-visible {
201	@include bem.sibling-elem('box') {	201	@include bem.sibling-elem('box') {
202	background-color: props.get(vars.$accent--hover--box-border-color);	202	background-color: props.get(vars.$accent--hover--box-border-color);
203	}	203	}
204	}	204	}
205	}	205	}
206		206
207	&:disabled {	207	&:disabled {
208	@include bem.sibling-elem('box') {	208	@include bem.sibling-elem('box') {
209	background-color: props.get(vars.$disabled--box-border-color);	209	background-color: props.get(vars.$disabled--box-border-color);
210		210
211	&::before {	211	&::before {
212	background-color: props.get(vars.$disabled--box-bg-color);	212	background-color: props.get(vars.$disabled--box-bg-color);
213	}	213	}
214	}	214	}
215		215
216	&:checked {	216	&:checked {
217	@include bem.sibling-elem('box') {	217	@include bem.sibling-elem('box') {
218	background-color: props.get(vars.$disabled--box-border-color);	218	background-color: props.get(vars.$disabled--box-border-color);
219	}	219	}
220	}	220	}
221		221
222	&:indeterminate {	222	&:indeterminate {
223	@include bem.sibling-elem('box') {	223	@include bem.sibling-elem('box') {
224	background-color: props.get(vars.$disabled--box-border-color);	224	background-color: props.get(vars.$disabled--box-border-color);
225	}	225	}
226	}	226	}
227	}	227	}
228	}	228	}
229	}	229	}
230	}	230	}
231	}	231	}