@i-cell/ids-styles 0.0.69 → 0.0.70

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/autocomplete/autocomplete.css +4 -2
  2. package/dist/autocomplete/autocomplete.min.css +1 -1
  3. package/dist/autocomplete/autocomplete.plugin.js +8 -1
  4. package/dist/checkbox/checkbox.css +111 -99
  5. package/dist/checkbox/checkbox.min.css +1 -1
  6. package/dist/checkbox/checkbox.plugin.js +130 -123
  7. package/dist/components.css +454 -317
  8. package/dist/components.min.css +1 -1
  9. package/dist/components.plugin.js +569 -447
  10. package/dist/dialog/dialog.css +2 -0
  11. package/dist/dialog/dialog.min.css +1 -1
  12. package/dist/dialog/dialog.plugin.js +8 -2
  13. package/dist/option/option.css +1 -0
  14. package/dist/option/option.min.css +1 -1
  15. package/dist/option/option.plugin.js +8 -1
  16. package/dist/radio/radio.css +336 -216
  17. package/dist/radio/radio.min.css +1 -1
  18. package/dist/radio/radio.plugin.js +415 -320
  19. package/package.json +1 -1
package/dist/checkbox/checkbox.css CHANGED
@@ -224,83 +224,83 @@
224
224
  font-size: var(--ids-comp-checkbox-label-typography-font-size-dense);
225
225
  line-height: var(--ids-comp-checkbox-label-typography-line-height-dense);
226
226
  }
227
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate) {
227
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate):not([aria-readonly=true]) {
228
228
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-hovered);
229
229
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-hovered);
230
230
  }
231
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):is(:checked, :indeterminate) {
231
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):is(:checked, :indeterminate):not([aria-readonly=true]) {
232
232
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-hovered);
233
233
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-hovered);
234
234
  }
235
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled) + .ids-checkbox__icon {
235
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
236
236
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-hovered);
237
237
  }
238
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate) {
238
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not([aria-readonly=true]):not(:checked):not(:indeterminate) {
239
239
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-pressed);
240
240
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-pressed);
241
241
  }
242
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):is(:checked, :indeterminate) {
242
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not([aria-readonly=true]):is(:checked, :indeterminate) {
243
243
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-pressed);
244
244
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-pressed);
245
245
  }
246
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled) + .ids-checkbox__icon {
246
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
247
247
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-pressed);
248
248
  }
249
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
249
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]) {
250
250
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-default);
251
251
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-default);
252
252
  }
253
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
253
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):hover {
254
254
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-hovered);
255
255
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-hovered);
256
256
  }
257
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
257
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):active {
258
258
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-pressed);
259
259
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-pressed);
260
260
  }
261
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible {
261
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus-visible {
262
262
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-focused);
263
263
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-focused);
264
264
  outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-light-focused);
265
265
  }
266
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:disabled {
266
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:disabled, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox][aria-readonly=true] {
267
267
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-disabled);
268
268
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-disabled);
269
269
  }
270
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) {
270
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) {
271
271
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-default);
272
272
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-default);
273
273
  }
274
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover {
274
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover {
275
275
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-hovered);
276
276
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-hovered);
277
277
  }
278
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active {
278
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active {
279
279
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-pressed);
280
280
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-pressed);
281
281
  }
282
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible {
282
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible {
283
283
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-focused);
284
284
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-focused);
285
285
  outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-light-focused);
286
286
  }
287
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled {
287
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked[aria-readonly=true], .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate[aria-readonly=true] {
288
288
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-disabled);
289
289
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-disabled);
290
290
  }
291
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon {
291
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
292
292
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-default);
293
293
  }
294
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon {
294
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon {
295
295
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-hovered);
296
296
  }
297
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon {
297
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon {
298
298
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-pressed);
299
299
  }
300
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon {
300
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon {
301
301
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-focused);
302
302
  }
303
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled + .ids-checkbox__icon {
303
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked[aria-readonly=true] + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate[aria-readonly=true] + .ids-checkbox__icon {
304
304
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-disabled);
305
305
  }
306
306
  .ids-checkbox.ids-checkbox-light .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
@@ -318,83 +318,83 @@
318
318
  .ids-checkbox.ids-checkbox-light.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
319
319
  color: var(--ids-comp-checkbox-label-color-fg-light-disabled);
320
320
  }
321
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate) {
321
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate):not([aria-readonly=true]) {
322
322
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-hovered);
323
323
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-hovered);
324
324
  }
325
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):is(:checked, :indeterminate) {
325
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):is(:checked, :indeterminate):not([aria-readonly=true]) {
326
326
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-hovered);
327
327
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-hovered);
328
328
  }
329
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled) + .ids-checkbox__icon {
329
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
330
330
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-hovered);
331
331
  }
332
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate) {
332
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not([aria-readonly=true]):not(:checked):not(:indeterminate) {
333
333
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-pressed);
334
334
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-pressed);
335
335
  }
336
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):is(:checked, :indeterminate) {
336
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not([aria-readonly=true]):is(:checked, :indeterminate) {
337
337
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-pressed);
338
338
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-pressed);
339
339
  }
340
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled) + .ids-checkbox__icon {
340
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
341
341
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-pressed);
342
342
  }
343
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
343
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]) {
344
344
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-default);
345
345
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-default);
346
346
  }
347
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
347
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):hover {
348
348
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-hovered);
349
349
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-hovered);
350
350
  }
351
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
351
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):active {
352
352
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-pressed);
353
353
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-pressed);
354
354
  }
355
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible {
355
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus-visible {
356
356
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-focused);
357
357
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-focused);
358
358
  outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-dark-focused);
359
359
  }
360
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:disabled {
360
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:disabled, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox][aria-readonly=true] {
361
361
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-disabled);
362
362
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-disabled);
363
363
  }
364
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) {
364
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) {
365
365
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-default);
366
366
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-default);
367
367
  }
368
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover {
368
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover {
369
369
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-hovered);
370
370
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-hovered);
371
371
  }
372
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active {
372
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active {
373
373
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-pressed);
374
374
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-pressed);
375
375
  }
376
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible {
376
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible {
377
377
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-focused);
378
378
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-focused);
379
379
  outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-dark-focused);
380
380
  }
381
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled {
381
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked[aria-readonly=true], .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate[aria-readonly=true] {
382
382
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-disabled);
383
383
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-disabled);
384
384
  }
385
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon {
385
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
386
386
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-default);
387
387
  }
388
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon {
388
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon {
389
389
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-hovered);
390
390
  }
391
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon {
391
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon {
392
392
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-pressed);
393
393
  }
394
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon {
394
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon {
395
395
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-focused);
396
396
  }
397
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled + .ids-checkbox__icon {
397
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked[aria-readonly=true] + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate[aria-readonly=true] + .ids-checkbox__icon {
398
398
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-disabled);
399
399
  }
400
400
  .ids-checkbox.ids-checkbox-dark .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
@@ -412,83 +412,83 @@
412
412
  .ids-checkbox.ids-checkbox-dark.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
413
413
  color: var(--ids-comp-checkbox-label-color-fg-dark-disabled);
414
414
  }
415
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate) {
415
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate):not([aria-readonly=true]) {
416
416
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-hovered);
417
417
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-hovered);
418
418
  }
419
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):is(:checked, :indeterminate) {
419
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):is(:checked, :indeterminate):not([aria-readonly=true]) {
420
420
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-hovered);
421
421
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-hovered);
422
422
  }
423
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled) + .ids-checkbox__icon {
423
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
424
424
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-hovered);
425
425
  }
426
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate) {
426
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not([aria-readonly=true]):not(:checked):not(:indeterminate) {
427
427
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-pressed);
428
428
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-pressed);
429
429
  }
430
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):is(:checked, :indeterminate) {
430
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not([aria-readonly=true]):is(:checked, :indeterminate) {
431
431
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-pressed);
432
432
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-pressed);
433
433
  }
434
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled) + .ids-checkbox__icon {
434
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
435
435
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-pressed);
436
436
  }
437
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
437
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]) {
438
438
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-default);
439
439
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-default);
440
440
  }
441
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
441
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):hover {
442
442
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-hovered);
443
443
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-hovered);
444
444
  }
445
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
445
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):active {
446
446
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-pressed);
447
447
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-pressed);
448
448
  }
449
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible {
449
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus-visible {
450
450
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-focused);
451
451
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-focused);
452
452
  outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-surface-focused);
453
453
  }
454
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:disabled {
454
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:disabled, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox][aria-readonly=true] {
455
455
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-disabled);
456
456
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-disabled);
457
457
  }
458
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) {
458
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) {
459
459
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-default);
460
460
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-default);
461
461
  }
462
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover {
462
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover {
463
463
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-hovered);
464
464
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-hovered);
465
465
  }
466
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active {
466
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active {
467
467
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-pressed);
468
468
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-pressed);
469
469
  }
470
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible {
470
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible {
471
471
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-focused);
472
472
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-focused);
473
473
  outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-surface-focused);
474
474
  }
475
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled {
475
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked[aria-readonly=true], .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate[aria-readonly=true] {
476
476
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-disabled);
477
477
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-disabled);
478
478
  }
479
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon {
479
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
480
480
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-default);
481
481
  }
482
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon {
482
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon {
483
483
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-hovered);
484
484
  }
485
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon {
485
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon {
486
486
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-pressed);
487
487
  }
488
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon {
488
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon {
489
489
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-focused);
490
490
  }
491
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled + .ids-checkbox__icon {
491
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked[aria-readonly=true] + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate[aria-readonly=true] + .ids-checkbox__icon {
492
492
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-disabled);
493
493
  }
494
494
  .ids-checkbox.ids-checkbox-surface .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
@@ -506,6 +506,9 @@
506
506
  .ids-checkbox.ids-checkbox-surface.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
507
507
  color: var(--ids-comp-checkbox-label-color-fg-surface-disabled);
508
508
  }
509
+ .ids-checkbox.ids-checkbox-disabled .ids-checkbox__input-wrapper {
510
+ cursor: not-allowed;
511
+ }
509
512
  .ids-checkbox.ids-checkbox-disabled .ids-checkbox__input-wrapper .ids-checkbox__touch-target {
510
513
  cursor: not-allowed;
511
514
  }
@@ -515,9 +518,15 @@
515
518
  .ids-checkbox.ids-checkbox-disabled .ids-checkbox__input-wrapper input[type=checkbox] + .ids-checkbox__icon {
516
519
  cursor: not-allowed;
517
520
  }
521
+ .ids-checkbox.ids-checkbox-disabled .ids-checkbox__label-wrapper {
522
+ cursor: not-allowed;
523
+ }
518
524
  .ids-checkbox.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
519
525
  cursor: not-allowed;
520
526
  }
527
+ .ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__input-wrapper {
528
+ cursor: pointer;
529
+ }
521
530
  .ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__input-wrapper .ids-checkbox__touch-target {
522
531
  cursor: pointer;
523
532
  }
@@ -527,138 +536,141 @@
527
536
  .ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__input-wrapper input[type=checkbox] + .ids-checkbox__icon {
528
537
  cursor: pointer;
529
538
  }
539
+ .ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__label-wrapper {
540
+ cursor: pointer;
541
+ }
530
542
  .ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
531
543
  cursor: pointer;
532
544
  }
533
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
545
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]) {
534
546
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-error-default);
535
547
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-default);
536
548
  }
537
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
549
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):hover {
538
550
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-error-hovered);
539
551
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-hovered);
540
552
  }
541
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
553
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):active {
542
554
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-error-pressed);
543
555
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-pressed);
544
556
  }
545
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible {
557
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus-visible {
546
558
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-error-focused);
547
559
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-focused);
548
560
  }
549
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) {
561
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) {
550
562
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-error-default);
551
563
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-default);
552
564
  }
553
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover {
565
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover {
554
566
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-error-hovered);
555
567
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-hovered);
556
568
  }
557
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active {
569
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active {
558
570
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-error-pressed);
559
571
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-pressed);
560
572
  }
561
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible {
573
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible {
562
574
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-error-focused);
563
575
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-focused);
564
576
  }
565
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon {
577
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
566
578
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-default);
567
579
  }
568
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon {
580
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon {
569
581
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-hovered);
570
582
  }
571
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon {
583
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon {
572
584
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-pressed);
573
585
  }
574
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon {
586
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon {
575
587
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-focused);
576
588
  }
577
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
589
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]) {
578
590
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-error-default);
579
591
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-default);
580
592
  }
581
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
593
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):hover {
582
594
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-error-hovered);
583
595
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-hovered);
584
596
  }
585
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
597
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):active {
586
598
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-error-pressed);
587
599
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-pressed);
588
600
  }
589
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible {
601
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus-visible {
590
602
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-error-focused);
591
603
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-focused);
592
604
  }
593
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) {
605
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) {
594
606
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-error-default);
595
607
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-default);
596
608
  }
597
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover {
609
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover {
598
610
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-error-hovered);
599
611
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-hovered);
600
612
  }
601
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active {
613
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active {
602
614
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-error-pressed);
603
615
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-pressed);
604
616
  }
605
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible {
617
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible {
606
618
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-error-focused);
607
619
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-focused);
608
620
  }
609
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon {
621
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
610
622
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-default);
611
623
  }
612
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon {
624
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon {
613
625
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-hovered);
614
626
  }
615
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon {
627
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon {
616
628
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-pressed);
617
629
  }
618
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon {
630
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon {
619
631
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-focused);
620
632
  }
621
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
633
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]) {
622
634
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-error-default);
623
635
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-default);
624
636
  }
625
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
637
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):hover {
626
638
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-error-hovered);
627
639
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-hovered);
628
640
  }
629
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
641
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):active {
630
642
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-error-pressed);
631
643
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-pressed);
632
644
  }
633
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible {
645
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):focus-visible {
634
646
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-error-focused);
635
647
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-focused);
636
648
  }
637
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) {
649
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) {
638
650
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-error-default);
639
651
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-default);
640
652
  }
641
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover {
653
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover {
642
654
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-error-hovered);
643
655
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-hovered);
644
656
  }
645
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active {
657
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active {
646
658
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-error-pressed);
647
659
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-pressed);
648
660
  }
649
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible {
661
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible {
650
662
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-error-focused);
651
663
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-focused);
652
664
  }
653
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon {
665
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
654
666
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-default);
655
667
  }
656
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon {
668
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):hover + .ids-checkbox__icon {
657
669
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-hovered);
658
670
  }
659
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon {
671
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):active + .ids-checkbox__icon {
660
672
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-pressed);
661
673
  }
662
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon {
674
+ .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):not([aria-readonly=true]):focus-visible + .ids-checkbox__icon {
663
675
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-focused);
664
676
  }