1 files changed, 101 insertions, 112 deletions
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index 60cee65..f3fb793 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -1,140 +1,130 @@
-@use "sass:meta";
+@use 'sass:meta';
-@use "pkg:iro-sass/bem";
+@use 'pkg:iro-sass/src/bem';
-@use "pkg:iro-sass/functions" as fn;
+@use 'pkg:iro-sass/src/functions' as fn;
-@use "pkg:iro-sass/props";
+@use 'pkg:iro-sass/src/props';
-@use "../props" as *;
+@use '../props' as *;
-@use "../core.vars" as core;
+@use '../core.vars' as core;
-@forward "checkbox.vars";
+@forward 'checkbox.vars';
-@use "checkbox.vars" as vars;
+@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);
-                margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
+                margin-inline:
-                        calc(
+                        calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
-                                props.get(vars.$spacing-sibling) - props.get(vars.$pad-b) - props.get(
+                        calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-b) - props.get(vars.$key-focus--border-offset));
-                                                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(
+                        margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$size) - props.get(vars.$key-focus--border-offset));
-                                0.5em * props.get(core.$font--standard--line-height) - 0.5 *
+                        vertical-align:     top;
-                                        props.get(vars.$size) - props.get(vars.$key-focus--border-offset)
+                        background-color:   props.get(vars.$box-border-color);
-                        );
+                        background-clip:    padding-box;
-                        vertical-align: top;
+                        border:             props.get(vars.$key-focus--border-offset) solid transparent;
-                        background-color: props.get(vars.$box-border-color);
+                        border-radius:      calc(props.get(vars.$border-width) + props.get(vars.$key-focus--border-offset));
-                        background-clip: padding-box;
-                        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)
-                        );
                        &::before,
                        &::after {
                                position: absolute;
-                                display: block;
+                                display:  block;
-                                content: "";
+                                content:  '';
                        }
                        &::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);
-                                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 0.2s ease;
+                                transition:         transform .2s ease;
                        }
                        &::after {
-                                inset-block-start: calc(0.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;
-                                transform: scale(0);
+                                transform:           scale(0);
-                                transition: transform 0.2s ease;
+                                transition:          transform .2s ease;
-                                border-block-width: 0 2px;
+                                border-block-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));
-                        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);
-                        transform: scale(0);
+                        transform:          scale(0);
-                        transform-origin: 40% 90%;
+                        transform-origin:   40% 90%;
-                        transition: transform 0.2s ease;
+                        transition:         transform .2s ease;
                }
-                @include bem.elem("label") {
+                @include bem.elem('label') {
-                        margin-inline-start: calc(
+                        margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset));
-                                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;
-                        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,
                        &:focus-visible {
-                                @include bem.sibling-elem("label") {
+                                @include bem.sibling-elem('label') {
                                        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);
                                }
                        }
                        &:checked {
-                                @include bem.sibling-elem("box") {
+                                @include bem.sibling-elem('box') {
                                        &::before {
                                                transform: scale(0);
                                        }
-                                        @include bem.elem("check-icon") {
+                                        @include bem.elem('check-icon') {
                                                transform: scale(1);
                                        }
                                }
                        }
                        &:indeterminate {
-                                @include bem.sibling-elem("box") {
+                                @include bem.sibling-elem('box') {
                                        &::before {
                                                transform: scale(0);
                                        }
@@ -143,18 +133,18 @@
                                                transform: scale(1);
                                        }
-                                        @include bem.elem("check-icon") {
+                                        @include bem.elem('check-icon') {
                                                transform: scale(0);
                                        }
                                }
                        }
                        &:disabled {
-                                @include bem.sibling-elem("label") {
+                                @include bem.sibling-elem('label') {
                                        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);
                                        &::before {
@@ -164,59 +154,58 @@
                        }
                        &:focus-visible {
-                                @include bem.sibling-elem("label") {
+                                @include bem.sibling-elem('label') {
                                        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
+                                        outline:    props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
-                                                props.get(vars.$key-focus--border-width);
+                                        box-shadow:
-                                        box-shadow: 0 0 0
+                                                0
-                                                calc(
+                                                0
-                                                        props.get(vars.$key-focus--border-width) +
+                                                0
-                                                                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);
                                }
                        }
                }
-                @include bem.modifier("standalone") {
+                @include bem.modifier('standalone') {
-                        @include bem.elem("box") {
+                        @include bem.elem('box') {
                                margin-block-start: 0;
                        }
                }
-                @include bem.modifier("accent") {
+                @include bem.modifier('accent') {
-                        @include bem.elem("native") {
+                        @include bem.elem('native') {
                                &:checked {
-                                        @include bem.sibling-elem("box") {
+                                        @include bem.sibling-elem('box') {
                                                background-color: props.get(vars.$accent--box-border-color);
                                        }
                                        &:hover,
                                        &:focus-visible {
-                                                @include bem.sibling-elem("box") {
+                                                @include bem.sibling-elem('box') {
                                                        background-color: props.get(vars.$accent--hover--box-border-color);
                                                }
                                        }
                                }
                                &:indeterminate {
-                                        @include bem.sibling-elem("box") {
+                                        @include bem.sibling-elem('box') {
                                                background-color: props.get(vars.$accent--box-border-color);
                                        }
                                        &:hover,
                                        &:focus-visible {
-                                                @include bem.sibling-elem("box") {
+                                                @include bem.sibling-elem('box') {
                                                        background-color: props.get(vars.$accent--hover--box-border-color);
                                                }
                                        }
                                }
                                &:disabled {
-                                        @include bem.sibling-elem("box") {
+                                        @include bem.sibling-elem('box') {
                                                background-color: props.get(vars.$disabled--box-border-color);
                                                &::before {
@@ -225,13 +214,13 @@
                                        }
                                        &:checked {
-                                                @include bem.sibling-elem("box") {
+                                                @include bem.sibling-elem('box') {
                                                        background-color: props.get(vars.$disabled--box-border-color);
                                                }
                                        }
                                        &:indeterminate {
-                                                @include bem.sibling-elem("box") {
+                                                @include bem.sibling-elem('box') {
                                                        background-color: props.get(vars.$disabled--box-border-color);
                                                }
                                        }

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