@i-cell/ids-styles 0.0.14 → 0.0.15-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/dist/checkbox/pseudo-checkbox.css +416 -0
  2. package/dist/checkbox/pseudo-checkbox.min.css +1 -0
  3. package/dist/checkbox/pseudo-checkbox.plugin.js +426 -0
  4. package/dist/components.css +890 -160
  5. package/dist/components.min.css +1 -1
  6. package/dist/components.plugin.js +825 -82
  7. package/dist/form-elements/form-field/form-field.css +58 -148
  8. package/dist/form-elements/form-field/form-field.min.css +1 -1
  9. package/dist/form-elements/form-field/form-field.plugin.js +62 -64
  10. package/dist/option/option.css +273 -0
  11. package/dist/option/option.min.css +1 -0
  12. package/dist/option/option.plugin.js +252 -0
  13. package/dist/select/select.css +131 -0
  14. package/dist/select/select.min.css +1 -0
  15. package/dist/select/select.plugin.js +103 -0
  16. package/dist/switch/switch.css +9 -12
  17. package/dist/switch/switch.min.css +1 -1
  18. package/dist/switch/switch.plugin.js +9 -18
  19. package/package.json +2 -2
package/dist/checkbox/pseudo-checkbox.css ADDED
@@ -0,0 +1,416 @@
1
+ .ids-pseudo-checkbox {
2
+ display: inline-flex;
3
+ align-self: stretch;
4
+ }
5
+ .ids-pseudo-checkbox .ids-pseudo-checkbox__input-wrapper {
6
+ position: relative;
7
+ display: flex;
8
+ align-items: center;
9
+ justify-content: center;
10
+ }
11
+ .ids-pseudo-checkbox .ids-pseudo-checkbox__input-wrapper input[type=checkbox] {
12
+ appearance: none;
13
+ -webkit-appearance: none;
14
+ flex-shrink: 0;
15
+ border-style: solid;
16
+ margin: 0;
17
+ }
18
+ .ids-pseudo-checkbox .ids-pseudo-checkbox__input-wrapper input[type=checkbox] + .ids-pseudo-checkbox__icon {
19
+ position: absolute;
20
+ }
21
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-compact {
22
+ padding: var(--ids-comp-checkbox-container-size-padding-y-compact) var(--ids-comp-checkbox-container-size-padding-x-compact);
23
+ gap: var(--ids-comp-checkbox-container-size-gap-compact);
24
+ }
25
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-compact .ids-pseudo-checkbox__input-wrapper input[type=checkbox] {
26
+ width: var(--ids-comp-checkbox-input-size-width-compact);
27
+ height: var(--ids-comp-checkbox-input-size-height-compact);
28
+ border-radius: var(--ids-comp-checkbox-input-size-border-radius-compact);
29
+ border-width: var(--ids-comp-checkbox-input-size-border-width-compact);
30
+ }
31
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-compact .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:focus {
32
+ outline-width: var(--ids-comp-checkbox-focused-outline-outline-compact);
33
+ }
34
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-compact .ids-pseudo-checkbox__input-wrapper .ids-pseudo-checkbox__icon {
35
+ height: var(--ids-comp-checkbox-input-size-icon-compact);
36
+ width: var(--ids-comp-checkbox-input-size-icon-compact);
37
+ line-height: var(--ids-comp-checkbox-input-size-icon-compact);
38
+ }
39
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-comfortable {
40
+ padding: var(--ids-comp-checkbox-container-size-padding-y-comfortable) var(--ids-comp-checkbox-container-size-padding-x-comfortable);
41
+ gap: var(--ids-comp-checkbox-container-size-gap-comfortable);
42
+ }
43
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-comfortable .ids-pseudo-checkbox__input-wrapper input[type=checkbox] {
44
+ width: var(--ids-comp-checkbox-input-size-width-comfortable);
45
+ height: var(--ids-comp-checkbox-input-size-height-comfortable);
46
+ border-radius: var(--ids-comp-checkbox-input-size-border-radius-comfortable);
47
+ border-width: var(--ids-comp-checkbox-input-size-border-width-comfortable);
48
+ }
49
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-comfortable .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:focus {
50
+ outline-width: var(--ids-comp-checkbox-focused-outline-outline-comfortable);
51
+ }
52
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-comfortable .ids-pseudo-checkbox__input-wrapper .ids-pseudo-checkbox__icon {
53
+ height: var(--ids-comp-checkbox-input-size-icon-comfortable);
54
+ width: var(--ids-comp-checkbox-input-size-icon-comfortable);
55
+ line-height: var(--ids-comp-checkbox-input-size-icon-comfortable);
56
+ }
57
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-spacious {
58
+ padding: var(--ids-comp-checkbox-container-size-padding-y-spacious) var(--ids-comp-checkbox-container-size-padding-x-spacious);
59
+ gap: var(--ids-comp-checkbox-container-size-gap-spacious);
60
+ }
61
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-spacious .ids-pseudo-checkbox__input-wrapper input[type=checkbox] {
62
+ width: var(--ids-comp-checkbox-input-size-width-spacious);
63
+ height: var(--ids-comp-checkbox-input-size-height-spacious);
64
+ border-radius: var(--ids-comp-checkbox-input-size-border-radius-spacious);
65
+ border-width: var(--ids-comp-checkbox-input-size-border-width-spacious);
66
+ }
67
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-spacious .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:focus {
68
+ outline-width: var(--ids-comp-checkbox-focused-outline-outline-spacious);
69
+ }
70
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-spacious .ids-pseudo-checkbox__input-wrapper .ids-pseudo-checkbox__icon {
71
+ height: var(--ids-comp-checkbox-input-size-icon-spacious);
72
+ width: var(--ids-comp-checkbox-input-size-icon-spacious);
73
+ line-height: var(--ids-comp-checkbox-input-size-icon-spacious);
74
+ }
75
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-dense {
76
+ padding: var(--ids-comp-checkbox-container-size-padding-y-dense) var(--ids-comp-checkbox-container-size-padding-x-dense);
77
+ gap: var(--ids-comp-checkbox-container-size-gap-dense);
78
+ }
79
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-dense .ids-pseudo-checkbox__input-wrapper input[type=checkbox] {
80
+ width: var(--ids-comp-checkbox-input-size-width-dense);
81
+ height: var(--ids-comp-checkbox-input-size-height-dense);
82
+ border-radius: var(--ids-comp-checkbox-input-size-border-radius-dense);
83
+ border-width: var(--ids-comp-checkbox-input-size-border-width-dense);
84
+ }
85
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-dense .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:focus {
86
+ outline-width: var(--ids-comp-checkbox-focused-outline-outline-dense);
87
+ }
88
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-dense .ids-pseudo-checkbox__input-wrapper .ids-pseudo-checkbox__icon {
89
+ height: var(--ids-comp-checkbox-input-size-icon-dense);
90
+ width: var(--ids-comp-checkbox-input-size-icon-dense);
91
+ line-height: var(--ids-comp-checkbox-input-size-icon-dense);
92
+ }
93
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
94
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-default);
95
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-default);
96
+ }
97
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
98
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-hovered);
99
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-hovered);
100
+ }
101
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
102
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-pressed);
103
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-pressed);
104
+ }
105
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus {
106
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-focused);
107
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-focused);
108
+ outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-light-focused);
109
+ }
110
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:disabled {
111
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-disabled);
112
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-disabled);
113
+ }
114
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) {
115
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-light-default);
116
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-default);
117
+ }
118
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover {
119
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-light-hovered);
120
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-hovered);
121
+ }
122
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active {
123
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-light-pressed);
124
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-pressed);
125
+ }
126
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus {
127
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-light-focused);
128
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-focused);
129
+ outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-light-focused);
130
+ }
131
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:disabled, .ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled {
132
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-light-disabled);
133
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-disabled);
134
+ }
135
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-pseudo-checkbox__icon {
136
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-default);
137
+ }
138
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-pseudo-checkbox__icon {
139
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-hovered);
140
+ }
141
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-pseudo-checkbox__icon {
142
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-pressed);
143
+ }
144
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-pseudo-checkbox__icon {
145
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-focused);
146
+ }
147
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:disabled, .ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled {
148
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-disabled);
149
+ }
150
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
151
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-default);
152
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-default);
153
+ }
154
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
155
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-hovered);
156
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-hovered);
157
+ }
158
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
159
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-pressed);
160
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-pressed);
161
+ }
162
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus {
163
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-focused);
164
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-focused);
165
+ outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-dark-focused);
166
+ }
167
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:disabled {
168
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-disabled);
169
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-disabled);
170
+ }
171
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) {
172
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-default);
173
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-default);
174
+ }
175
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover {
176
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-hovered);
177
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-hovered);
178
+ }
179
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active {
180
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-pressed);
181
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-pressed);
182
+ }
183
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus {
184
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-focused);
185
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-focused);
186
+ outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-dark-focused);
187
+ }
188
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:disabled, .ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled {
189
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-disabled);
190
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-disabled);
191
+ }
192
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-pseudo-checkbox__icon {
193
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-default);
194
+ }
195
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-pseudo-checkbox__icon {
196
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-hovered);
197
+ }
198
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-pseudo-checkbox__icon {
199
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-pressed);
200
+ }
201
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-pseudo-checkbox__icon {
202
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-focused);
203
+ }
204
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:disabled, .ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled {
205
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-disabled);
206
+ }
207
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
208
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-default);
209
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-default);
210
+ }
211
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
212
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-hovered);
213
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-hovered);
214
+ }
215
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
216
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-pressed);
217
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-pressed);
218
+ }
219
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus {
220
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-focused);
221
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-focused);
222
+ outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-surface-focused);
223
+ }
224
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:disabled {
225
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-disabled);
226
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-disabled);
227
+ }
228
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) {
229
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-default);
230
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-default);
231
+ }
232
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover {
233
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-hovered);
234
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-hovered);
235
+ }
236
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active {
237
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-pressed);
238
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-pressed);
239
+ }
240
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus {
241
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-focused);
242
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-focused);
243
+ outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-surface-focused);
244
+ }
245
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:disabled, .ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled {
246
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-disabled);
247
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-disabled);
248
+ }
249
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-pseudo-checkbox__icon {
250
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-default);
251
+ }
252
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-pseudo-checkbox__icon {
253
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-hovered);
254
+ }
255
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-pseudo-checkbox__icon {
256
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-pressed);
257
+ }
258
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-pseudo-checkbox__icon {
259
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-focused);
260
+ }
261
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:disabled, .ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled {
262
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-disabled);
263
+ }
264
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-disabled {
265
+ opacity: var(--ids-comp-checkbox-disabled);
266
+ }
267
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-disabled .ids-pseudo-checkbox__input-wrapper .ids-pseudo-checkbox__touch-target {
268
+ cursor: not-allowed;
269
+ }
270
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-disabled .ids-pseudo-checkbox__input-wrapper input[type=checkbox] {
271
+ cursor: not-allowed;
272
+ }
273
+ .ids-pseudo-checkbox.ids-pseudo-checkbox-disabled .ids-pseudo-checkbox__input-wrapper input[type=checkbox] + .ids-pseudo-checkbox__icon {
274
+ cursor: not-allowed;
275
+ }
276
+ .ids-pseudo-checkbox:not(.ids-pseudo-checkbox-disabled) .ids-pseudo-checkbox__input-wrapper .ids-pseudo-checkbox__touch-target {
277
+ cursor: pointer;
278
+ }
279
+ .ids-pseudo-checkbox:not(.ids-pseudo-checkbox-disabled) .ids-pseudo-checkbox__input-wrapper input[type=checkbox] {
280
+ cursor: pointer;
281
+ }
282
+ .ids-pseudo-checkbox:not(.ids-pseudo-checkbox-disabled) .ids-pseudo-checkbox__input-wrapper input[type=checkbox] + .ids-pseudo-checkbox__icon {
283
+ cursor: pointer;
284
+ }
285
+ .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled), .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
286
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-error-default);
287
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-default);
288
+ }
289
+ .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
290
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-error-hovered);
291
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-hovered);
292
+ }
293
+ .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
294
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-error-pressed);
295
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-pressed);
296
+ }
297
+ .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus {
298
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-error-focused);
299
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-focused);
300
+ }
301
+ .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled), .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) {
302
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-light-error-default);
303
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-default);
304
+ }
305
+ .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover {
306
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-light-error-hovered);
307
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-hovered);
308
+ }
309
+ .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active {
310
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-light-error-pressed);
311
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-pressed);
312
+ }
313
+ .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus {
314
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-light-error-focused);
315
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-focused);
316
+ }
317
+ .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-pseudo-checkbox__icon {
318
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-default);
319
+ }
320
+ .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-pseudo-checkbox__icon {
321
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-hovered);
322
+ }
323
+ .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-pseudo-checkbox__icon {
324
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-pressed);
325
+ }
326
+ .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-pseudo-checkbox__icon {
327
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-focused);
328
+ }
329
+ .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled), .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
330
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-error-default);
331
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-default);
332
+ }
333
+ .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
334
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-error-hovered);
335
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-hovered);
336
+ }
337
+ .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
338
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-error-pressed);
339
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-pressed);
340
+ }
341
+ .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus {
342
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-error-focused);
343
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-focused);
344
+ }
345
+ .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled), .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) {
346
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-error-default);
347
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-default);
348
+ }
349
+ .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover {
350
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-error-hovered);
351
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-hovered);
352
+ }
353
+ .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active {
354
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-error-pressed);
355
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-pressed);
356
+ }
357
+ .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus {
358
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-error-focused);
359
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-focused);
360
+ }
361
+ .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-pseudo-checkbox__icon {
362
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-default);
363
+ }
364
+ .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-pseudo-checkbox__icon {
365
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-hovered);
366
+ }
367
+ .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-pseudo-checkbox__icon {
368
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-pressed);
369
+ }
370
+ .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-pseudo-checkbox__icon {
371
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-focused);
372
+ }
373
+ .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled), .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
374
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-error-default);
375
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-default);
376
+ }
377
+ .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
378
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-error-hovered);
379
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-hovered);
380
+ }
381
+ .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
382
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-error-pressed);
383
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-pressed);
384
+ }
385
+ .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus {
386
+ border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-error-focused);
387
+ background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-focused);
388
+ }
389
+ .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled), .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) {
390
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-error-default);
391
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-default);
392
+ }
393
+ .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover {
394
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-error-hovered);
395
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-hovered);
396
+ }
397
+ .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active {
398
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-error-pressed);
399
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-pressed);
400
+ }
401
+ .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus {
402
+ border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-error-focused);
403
+ background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-focused);
404
+ }
405
+ .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-pseudo-checkbox__icon {
406
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-default);
407
+ }
408
+ .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-pseudo-checkbox__icon {
409
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-hovered);
410
+ }
411
+ .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-pseudo-checkbox__icon {
412
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-pressed);
413
+ }
414
+ .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-pseudo-checkbox__icon, .ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-pseudo-checkbox__icon {
415
+ color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-focused);
416
+ }
package/dist/checkbox/pseudo-checkbox.min.css ADDED
@@ -0,0 +1 @@
1
+ .ids-pseudo-checkbox{display:inline-flex;align-self:stretch}.ids-pseudo-checkbox .ids-pseudo-checkbox__input-wrapper{position:relative;display:flex;align-items:center;justify-content:center}.ids-pseudo-checkbox .ids-pseudo-checkbox__input-wrapper input[type=checkbox]{appearance:none;-webkit-appearance:none;flex-shrink:0;border-style:solid;margin:0}.ids-pseudo-checkbox .ids-pseudo-checkbox__input-wrapper input[type=checkbox]+.ids-pseudo-checkbox__icon{position:absolute}.ids-pseudo-checkbox.ids-pseudo-checkbox-compact{padding:var(--ids-comp-checkbox-container-size-padding-y-compact) var(--ids-comp-checkbox-container-size-padding-x-compact);gap:var(--ids-comp-checkbox-container-size-gap-compact)}.ids-pseudo-checkbox.ids-pseudo-checkbox-compact .ids-pseudo-checkbox__input-wrapper input[type=checkbox]{width:var(--ids-comp-checkbox-input-size-width-compact);height:var(--ids-comp-checkbox-input-size-height-compact);border-radius:var(--ids-comp-checkbox-input-size-border-radius-compact);border-width:var(--ids-comp-checkbox-input-size-border-width-compact)}.ids-pseudo-checkbox.ids-pseudo-checkbox-compact .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:focus{outline-width:var(--ids-comp-checkbox-focused-outline-outline-compact)}.ids-pseudo-checkbox.ids-pseudo-checkbox-compact .ids-pseudo-checkbox__input-wrapper .ids-pseudo-checkbox__icon{height:var(--ids-comp-checkbox-input-size-icon-compact);width:var(--ids-comp-checkbox-input-size-icon-compact);line-height:var(--ids-comp-checkbox-input-size-icon-compact)}.ids-pseudo-checkbox.ids-pseudo-checkbox-comfortable{padding:var(--ids-comp-checkbox-container-size-padding-y-comfortable) var(--ids-comp-checkbox-container-size-padding-x-comfortable);gap:var(--ids-comp-checkbox-container-size-gap-comfortable)}.ids-pseudo-checkbox.ids-pseudo-checkbox-comfortable .ids-pseudo-checkbox__input-wrapper input[type=checkbox]{width:var(--ids-comp-checkbox-input-size-width-comfortable);height:var(--ids-comp-checkbox-input-size-height-comfortable);border-radius:var(--ids-comp-checkbox-input-size-border-radius-comfortable);border-width:var(--ids-comp-checkbox-input-size-border-width-comfortable)}.ids-pseudo-checkbox.ids-pseudo-checkbox-comfortable .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:focus{outline-width:var(--ids-comp-checkbox-focused-outline-outline-comfortable)}.ids-pseudo-checkbox.ids-pseudo-checkbox-comfortable .ids-pseudo-checkbox__input-wrapper .ids-pseudo-checkbox__icon{height:var(--ids-comp-checkbox-input-size-icon-comfortable);width:var(--ids-comp-checkbox-input-size-icon-comfortable);line-height:var(--ids-comp-checkbox-input-size-icon-comfortable)}.ids-pseudo-checkbox.ids-pseudo-checkbox-spacious{padding:var(--ids-comp-checkbox-container-size-padding-y-spacious) var(--ids-comp-checkbox-container-size-padding-x-spacious);gap:var(--ids-comp-checkbox-container-size-gap-spacious)}.ids-pseudo-checkbox.ids-pseudo-checkbox-spacious .ids-pseudo-checkbox__input-wrapper input[type=checkbox]{width:var(--ids-comp-checkbox-input-size-width-spacious);height:var(--ids-comp-checkbox-input-size-height-spacious);border-radius:var(--ids-comp-checkbox-input-size-border-radius-spacious);border-width:var(--ids-comp-checkbox-input-size-border-width-spacious)}.ids-pseudo-checkbox.ids-pseudo-checkbox-spacious .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:focus{outline-width:var(--ids-comp-checkbox-focused-outline-outline-spacious)}.ids-pseudo-checkbox.ids-pseudo-checkbox-spacious .ids-pseudo-checkbox__input-wrapper .ids-pseudo-checkbox__icon{height:var(--ids-comp-checkbox-input-size-icon-spacious);width:var(--ids-comp-checkbox-input-size-icon-spacious);line-height:var(--ids-comp-checkbox-input-size-icon-spacious)}.ids-pseudo-checkbox.ids-pseudo-checkbox-dense{padding:var(--ids-comp-checkbox-container-size-padding-y-dense) var(--ids-comp-checkbox-container-size-padding-x-dense);gap:var(--ids-comp-checkbox-container-size-gap-dense)}.ids-pseudo-checkbox.ids-pseudo-checkbox-dense .ids-pseudo-checkbox__input-wrapper input[type=checkbox]{width:var(--ids-comp-checkbox-input-size-width-dense);height:var(--ids-comp-checkbox-input-size-height-dense);border-radius:var(--ids-comp-checkbox-input-size-border-radius-dense);border-width:var(--ids-comp-checkbox-input-size-border-width-dense)}.ids-pseudo-checkbox.ids-pseudo-checkbox-dense .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:focus{outline-width:var(--ids-comp-checkbox-focused-outline-outline-dense)}.ids-pseudo-checkbox.ids-pseudo-checkbox-dense .ids-pseudo-checkbox__input-wrapper .ids-pseudo-checkbox__icon{height:var(--ids-comp-checkbox-input-size-icon-dense);width:var(--ids-comp-checkbox-input-size-icon-dense);line-height:var(--ids-comp-checkbox-input-size-icon-dense)}.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled){border-color:var(--ids-comp-checkbox-input-unselected-color-border-light-default);background-color:var(--ids-comp-checkbox-input-unselected-color-bg-light-default)}.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover{border-color:var(--ids-comp-checkbox-input-unselected-color-border-light-hovered);background-color:var(--ids-comp-checkbox-input-unselected-color-bg-light-hovered)}.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active{border-color:var(--ids-comp-checkbox-input-unselected-color-border-light-pressed);background-color:var(--ids-comp-checkbox-input-unselected-color-bg-light-pressed)}.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus{border-color:var(--ids-comp-checkbox-input-unselected-color-border-light-focused);background-color:var(--ids-comp-checkbox-input-unselected-color-bg-light-focused);outline-color:var(--ids-comp-checkbox-input-selected-color-focused-outline-light-focused)}.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:disabled{border-color:var(--ids-comp-checkbox-input-unselected-color-border-light-disabled);background-color:var(--ids-comp-checkbox-input-unselected-color-bg-light-disabled)}.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled){border-color:var(--ids-comp-checkbox-input-selected-color-border-light-default);background-color:var(--ids-comp-checkbox-input-selected-color-bg-light-default)}.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover{border-color:var(--ids-comp-checkbox-input-selected-color-border-light-hovered);background-color:var(--ids-comp-checkbox-input-selected-color-bg-light-hovered)}.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active{border-color:var(--ids-comp-checkbox-input-selected-color-border-light-pressed);background-color:var(--ids-comp-checkbox-input-selected-color-bg-light-pressed)}.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus{border-color:var(--ids-comp-checkbox-input-selected-color-border-light-focused);background-color:var(--ids-comp-checkbox-input-selected-color-bg-light-focused);outline-color:var(--ids-comp-checkbox-input-selected-color-focused-outline-light-focused)}.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:disabled,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled{border-color:var(--ids-comp-checkbox-input-selected-color-border-light-disabled);background-color:var(--ids-comp-checkbox-input-selected-color-bg-light-disabled)}.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-pseudo-checkbox__icon{color:var(--ids-comp-checkbox-input-selected-color-fg-icon-light-default)}.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-pseudo-checkbox__icon{color:var(--ids-comp-checkbox-input-selected-color-fg-icon-light-hovered)}.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-pseudo-checkbox__icon{color:var(--ids-comp-checkbox-input-selected-color-fg-icon-light-pressed)}.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon{color:var(--ids-comp-checkbox-input-selected-color-fg-icon-light-focused)}.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:disabled,.ids-pseudo-checkbox.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled{color:var(--ids-comp-checkbox-input-selected-color-fg-icon-light-disabled)}.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled){border-color:var(--ids-comp-checkbox-input-unselected-color-border-dark-default);background-color:var(--ids-comp-checkbox-input-unselected-color-bg-dark-default)}.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover{border-color:var(--ids-comp-checkbox-input-unselected-color-border-dark-hovered);background-color:var(--ids-comp-checkbox-input-unselected-color-bg-dark-hovered)}.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active{border-color:var(--ids-comp-checkbox-input-unselected-color-border-dark-pressed);background-color:var(--ids-comp-checkbox-input-unselected-color-bg-dark-pressed)}.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus{border-color:var(--ids-comp-checkbox-input-unselected-color-border-dark-focused);background-color:var(--ids-comp-checkbox-input-unselected-color-bg-dark-focused);outline-color:var(--ids-comp-checkbox-input-selected-color-focused-outline-dark-focused)}.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:disabled{border-color:var(--ids-comp-checkbox-input-unselected-color-border-dark-disabled);background-color:var(--ids-comp-checkbox-input-unselected-color-bg-dark-disabled)}.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled){border-color:var(--ids-comp-checkbox-input-selected-color-border-dark-default);background-color:var(--ids-comp-checkbox-input-selected-color-bg-dark-default)}.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover{border-color:var(--ids-comp-checkbox-input-selected-color-border-dark-hovered);background-color:var(--ids-comp-checkbox-input-selected-color-bg-dark-hovered)}.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active{border-color:var(--ids-comp-checkbox-input-selected-color-border-dark-pressed);background-color:var(--ids-comp-checkbox-input-selected-color-bg-dark-pressed)}.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus{border-color:var(--ids-comp-checkbox-input-selected-color-border-dark-focused);background-color:var(--ids-comp-checkbox-input-selected-color-bg-dark-focused);outline-color:var(--ids-comp-checkbox-input-selected-color-focused-outline-dark-focused)}.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:disabled,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled{border-color:var(--ids-comp-checkbox-input-selected-color-border-dark-disabled);background-color:var(--ids-comp-checkbox-input-selected-color-bg-dark-disabled)}.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-pseudo-checkbox__icon{color:var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-default)}.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-pseudo-checkbox__icon{color:var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-hovered)}.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-pseudo-checkbox__icon{color:var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-pressed)}.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon{color:var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-focused)}.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:disabled,.ids-pseudo-checkbox.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled{color:var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-disabled)}.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled){border-color:var(--ids-comp-checkbox-input-unselected-color-border-surface-default);background-color:var(--ids-comp-checkbox-input-unselected-color-bg-surface-default)}.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover{border-color:var(--ids-comp-checkbox-input-unselected-color-border-surface-hovered);background-color:var(--ids-comp-checkbox-input-unselected-color-bg-surface-hovered)}.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active{border-color:var(--ids-comp-checkbox-input-unselected-color-border-surface-pressed);background-color:var(--ids-comp-checkbox-input-unselected-color-bg-surface-pressed)}.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus{border-color:var(--ids-comp-checkbox-input-unselected-color-border-surface-focused);background-color:var(--ids-comp-checkbox-input-unselected-color-bg-surface-focused);outline-color:var(--ids-comp-checkbox-input-selected-color-focused-outline-surface-focused)}.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:disabled{border-color:var(--ids-comp-checkbox-input-unselected-color-border-surface-disabled);background-color:var(--ids-comp-checkbox-input-unselected-color-bg-surface-disabled)}.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled){border-color:var(--ids-comp-checkbox-input-selected-color-border-surface-default);background-color:var(--ids-comp-checkbox-input-selected-color-bg-surface-default)}.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover{border-color:var(--ids-comp-checkbox-input-selected-color-border-surface-hovered);background-color:var(--ids-comp-checkbox-input-selected-color-bg-surface-hovered)}.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active{border-color:var(--ids-comp-checkbox-input-selected-color-border-surface-pressed);background-color:var(--ids-comp-checkbox-input-selected-color-bg-surface-pressed)}.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus{border-color:var(--ids-comp-checkbox-input-selected-color-border-surface-focused);background-color:var(--ids-comp-checkbox-input-selected-color-bg-surface-focused);outline-color:var(--ids-comp-checkbox-input-selected-color-focused-outline-surface-focused)}.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:disabled,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled{border-color:var(--ids-comp-checkbox-input-selected-color-border-surface-disabled);background-color:var(--ids-comp-checkbox-input-selected-color-bg-surface-disabled)}.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-pseudo-checkbox__icon{color:var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-default)}.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-pseudo-checkbox__icon{color:var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-hovered)}.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-pseudo-checkbox__icon{color:var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-pressed)}.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon{color:var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-focused)}.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:disabled,.ids-pseudo-checkbox.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled{color:var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-disabled)}.ids-pseudo-checkbox.ids-pseudo-checkbox-disabled{opacity:var(--ids-comp-checkbox-disabled)}.ids-pseudo-checkbox.ids-pseudo-checkbox-disabled .ids-pseudo-checkbox__input-wrapper .ids-pseudo-checkbox__touch-target{cursor:not-allowed}.ids-pseudo-checkbox.ids-pseudo-checkbox-disabled .ids-pseudo-checkbox__input-wrapper input[type=checkbox]{cursor:not-allowed}.ids-pseudo-checkbox.ids-pseudo-checkbox-disabled .ids-pseudo-checkbox__input-wrapper input[type=checkbox]+.ids-pseudo-checkbox__icon{cursor:not-allowed}.ids-pseudo-checkbox:not(.ids-pseudo-checkbox-disabled) .ids-pseudo-checkbox__input-wrapper .ids-pseudo-checkbox__touch-target{cursor:pointer}.ids-pseudo-checkbox:not(.ids-pseudo-checkbox-disabled) .ids-pseudo-checkbox__input-wrapper input[type=checkbox]{cursor:pointer}.ids-pseudo-checkbox:not(.ids-pseudo-checkbox-disabled) .ids-pseudo-checkbox__input-wrapper input[type=checkbox]+.ids-pseudo-checkbox__icon{cursor:pointer}.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled),.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled){border-color:var(--ids-comp-checkbox-input-unselected-color-border-light-error-default);background-color:var(--ids-comp-checkbox-input-unselected-color-bg-light-default)}.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover{border-color:var(--ids-comp-checkbox-input-unselected-color-border-light-error-hovered);background-color:var(--ids-comp-checkbox-input-unselected-color-bg-light-hovered)}.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active{border-color:var(--ids-comp-checkbox-input-unselected-color-border-light-error-pressed);background-color:var(--ids-comp-checkbox-input-unselected-color-bg-light-pressed)}.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus{border-color:var(--ids-comp-checkbox-input-unselected-color-border-light-error-focused);background-color:var(--ids-comp-checkbox-input-unselected-color-bg-light-focused)}.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled),.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled){border-color:var(--ids-comp-checkbox-input-selected-color-border-light-error-default);background-color:var(--ids-comp-checkbox-input-selected-color-bg-light-default)}.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover{border-color:var(--ids-comp-checkbox-input-selected-color-border-light-error-hovered);background-color:var(--ids-comp-checkbox-input-selected-color-bg-light-hovered)}.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active{border-color:var(--ids-comp-checkbox-input-selected-color-border-light-error-pressed);background-color:var(--ids-comp-checkbox-input-selected-color-bg-light-pressed)}.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus{border-color:var(--ids-comp-checkbox-input-selected-color-border-light-error-focused);background-color:var(--ids-comp-checkbox-input-selected-color-bg-light-focused)}.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-pseudo-checkbox__icon{color:var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-default)}.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-pseudo-checkbox__icon{color:var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-hovered)}.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-pseudo-checkbox__icon{color:var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-pressed)}.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-light .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon{color:var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-focused)}.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled),.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled){border-color:var(--ids-comp-checkbox-input-unselected-color-border-dark-error-default);background-color:var(--ids-comp-checkbox-input-unselected-color-bg-dark-default)}.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover{border-color:var(--ids-comp-checkbox-input-unselected-color-border-dark-error-hovered);background-color:var(--ids-comp-checkbox-input-unselected-color-bg-dark-hovered)}.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active{border-color:var(--ids-comp-checkbox-input-unselected-color-border-dark-error-pressed);background-color:var(--ids-comp-checkbox-input-unselected-color-bg-dark-pressed)}.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus{border-color:var(--ids-comp-checkbox-input-unselected-color-border-dark-error-focused);background-color:var(--ids-comp-checkbox-input-unselected-color-bg-dark-focused)}.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled),.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled){border-color:var(--ids-comp-checkbox-input-selected-color-border-dark-error-default);background-color:var(--ids-comp-checkbox-input-selected-color-bg-dark-default)}.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover{border-color:var(--ids-comp-checkbox-input-selected-color-border-dark-error-hovered);background-color:var(--ids-comp-checkbox-input-selected-color-bg-dark-hovered)}.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active{border-color:var(--ids-comp-checkbox-input-selected-color-border-dark-error-pressed);background-color:var(--ids-comp-checkbox-input-selected-color-bg-dark-pressed)}.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus{border-color:var(--ids-comp-checkbox-input-selected-color-border-dark-error-focused);background-color:var(--ids-comp-checkbox-input-selected-color-bg-dark-focused)}.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-pseudo-checkbox__icon{color:var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-default)}.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-pseudo-checkbox__icon{color:var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-hovered)}.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-pseudo-checkbox__icon{color:var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-pressed)}.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-dark .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon{color:var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-focused)}.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled),.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled){border-color:var(--ids-comp-checkbox-input-unselected-color-border-surface-error-default);background-color:var(--ids-comp-checkbox-input-unselected-color-bg-surface-default)}.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover{border-color:var(--ids-comp-checkbox-input-unselected-color-border-surface-error-hovered);background-color:var(--ids-comp-checkbox-input-unselected-color-bg-surface-hovered)}.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active{border-color:var(--ids-comp-checkbox-input-unselected-color-border-surface-error-pressed);background-color:var(--ids-comp-checkbox-input-unselected-color-bg-surface-pressed)}.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus{border-color:var(--ids-comp-checkbox-input-unselected-color-border-surface-error-focused);background-color:var(--ids-comp-checkbox-input-unselected-color-bg-surface-focused)}.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled),.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled){border-color:var(--ids-comp-checkbox-input-selected-color-border-surface-error-default);background-color:var(--ids-comp-checkbox-input-selected-color-bg-surface-default)}.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover{border-color:var(--ids-comp-checkbox-input-selected-color-border-surface-error-hovered);background-color:var(--ids-comp-checkbox-input-selected-color-bg-surface-hovered)}.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active{border-color:var(--ids-comp-checkbox-input-selected-color-border-surface-error-pressed);background-color:var(--ids-comp-checkbox-input-selected-color-bg-surface-pressed)}.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus{border-color:var(--ids-comp-checkbox-input-selected-color-border-surface-error-focused);background-color:var(--ids-comp-checkbox-input-selected-color-bg-surface-focused)}.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-pseudo-checkbox__icon{color:var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-default)}.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-pseudo-checkbox__icon{color:var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-hovered)}.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-pseudo-checkbox__icon{color:var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-pressed)}.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ng-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-pseudo-checkbox__icon,.ids-pseudo-checkbox.ids-pseudo-checkbox-invalid.ids-pseudo-checkbox-surface .ids-pseudo-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-pseudo-checkbox__icon{color:var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-focused)}