@i-cell/ids-styles 0.0.67 → 0.0.69

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.
@@ -3533,7 +3533,7 @@ input[autocomplete] {
3533
3533
  justify-content: center;
3534
3534
  align-items: flex-start;
3535
3535
  }
3536
- .ids-checkbox-group > .ids-checkbox-group__label {
3536
+ .ids-checkbox-group > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
3537
3537
  font-style: normal;
3538
3538
  }
3539
3539
  .ids-checkbox-group > .ids-checkbox-group__list {
@@ -3548,72 +3548,132 @@ input[autocomplete] {
3548
3548
  align-items: flex-start;
3549
3549
  }
3550
3550
  .ids-checkbox-group.ids-checkbox-group-compact {
3551
- padding: var(--ids-comp-checkbox-group-vertical-container-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-compact);
3552
- gap: var(--ids-comp-checkbox-group-vertical-container-size-gap-compact);
3551
+ padding: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-compact);
3552
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-compact);
3553
3553
  }
3554
- .ids-checkbox-group.ids-checkbox-group-compact .ids-checkbox-group__label {
3554
+ .ids-checkbox-group.ids-checkbox-group-compact > .ids-checkbox-group__legend {
3555
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-compact);
3556
+ }
3557
+ .ids-checkbox-group.ids-checkbox-group-compact > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
3555
3558
  font-family: var(--ids-comp-checkbox-group-label-typography-font-family-compact);
3556
3559
  font-size: var(--ids-comp-checkbox-group-label-typography-font-size-compact);
3557
3560
  font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-compact);
3558
3561
  line-height: var(--ids-comp-checkbox-group-label-typography-line-height-compact);
3559
3562
  letter-spacing: var(--ids-comp-checkbox-group-label-typography-letter-spacing-compact);
3560
3563
  }
3561
- .ids-checkbox-group.ids-checkbox-group-compact .ids-checkbox-group__list {
3562
- padding: var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-compact);
3563
- gap: var(--ids-comp-checkbox-group-horizontal-list-size-gap-compact);
3564
+ .ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
3565
+ padding: var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-y-compact) var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-x-compact);
3566
+ gap: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-compact) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-compact);
3567
+ }
3568
+ .ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
3569
+ padding: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-y-compact) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-x-compact);
3570
+ gap: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-compact) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-compact);
3571
+ }
3572
+ .ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
3573
+ padding: var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-x-compact);
3574
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-compact);
3575
+ }
3576
+ .ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
3577
+ padding: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-compact);
3578
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-compact);
3564
3579
  }
3565
3580
  .ids-checkbox-group.ids-checkbox-group-comfortable {
3566
- padding: var(--ids-comp-checkbox-group-vertical-container-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-comfortable);
3567
- gap: var(--ids-comp-checkbox-group-vertical-container-size-gap-comfortable);
3581
+ padding: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-comfortable);
3582
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-comfortable);
3568
3583
  }
3569
- .ids-checkbox-group.ids-checkbox-group-comfortable .ids-checkbox-group__label {
3584
+ .ids-checkbox-group.ids-checkbox-group-comfortable > .ids-checkbox-group__legend {
3585
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-comfortable);
3586
+ }
3587
+ .ids-checkbox-group.ids-checkbox-group-comfortable > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
3570
3588
  font-family: var(--ids-comp-checkbox-group-label-typography-font-family-comfortable);
3571
3589
  font-size: var(--ids-comp-checkbox-group-label-typography-font-size-comfortable);
3572
3590
  font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-comfortable);
3573
3591
  line-height: var(--ids-comp-checkbox-group-label-typography-line-height-comfortable);
3574
3592
  letter-spacing: var(--ids-comp-checkbox-group-label-typography-letter-spacing-comfortable);
3575
3593
  }
3576
- .ids-checkbox-group.ids-checkbox-group-comfortable .ids-checkbox-group__list {
3577
- padding: var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-comfortable);
3578
- gap: var(--ids-comp-checkbox-group-horizontal-list-size-gap-comfortable);
3594
+ .ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
3595
+ padding: var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-y-comfortable) var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-x-comfortable);
3596
+ gap: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-comfortable) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-comfortable);
3597
+ }
3598
+ .ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
3599
+ padding: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-y-comfortable) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-x-comfortable);
3600
+ gap: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-comfortable) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-comfortable);
3601
+ }
3602
+ .ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
3603
+ padding: var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-x-comfortable);
3604
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-comfortable);
3605
+ }
3606
+ .ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
3607
+ padding: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-comfortable);
3608
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-comfortable);
3579
3609
  }
3580
3610
  .ids-checkbox-group.ids-checkbox-group-spacious {
3581
- padding: var(--ids-comp-checkbox-group-vertical-container-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-spacious);
3582
- gap: var(--ids-comp-checkbox-group-vertical-container-size-gap-spacious);
3611
+ padding: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-spacious);
3612
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-spacious);
3583
3613
  }
3584
- .ids-checkbox-group.ids-checkbox-group-spacious .ids-checkbox-group__label {
3614
+ .ids-checkbox-group.ids-checkbox-group-spacious > .ids-checkbox-group__legend {
3615
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-spacious);
3616
+ }
3617
+ .ids-checkbox-group.ids-checkbox-group-spacious > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
3585
3618
  font-family: var(--ids-comp-checkbox-group-label-typography-font-family-spacious);
3586
3619
  font-size: var(--ids-comp-checkbox-group-label-typography-font-size-spacious);
3587
3620
  font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-spacious);
3588
3621
  line-height: var(--ids-comp-checkbox-group-label-typography-line-height-spacious);
3589
3622
  letter-spacing: var(--ids-comp-checkbox-group-label-typography-letter-spacing-spacious);
3590
3623
  }
3591
- .ids-checkbox-group.ids-checkbox-group-spacious .ids-checkbox-group__list {
3592
- padding: var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-spacious);
3593
- gap: var(--ids-comp-checkbox-group-horizontal-list-size-gap-spacious);
3624
+ .ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
3625
+ padding: var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-y-spacious) var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-x-spacious);
3626
+ gap: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-spacious) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-spacious);
3627
+ }
3628
+ .ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
3629
+ padding: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-y-spacious) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-x-spacious);
3630
+ gap: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-spacious) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-spacious);
3631
+ }
3632
+ .ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
3633
+ padding: var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-x-spacious);
3634
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-spacious);
3635
+ }
3636
+ .ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
3637
+ padding: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-spacious);
3638
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-spacious);
3594
3639
  }
3595
3640
  .ids-checkbox-group.ids-checkbox-group-dense {
3596
- padding: var(--ids-comp-checkbox-group-vertical-container-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-dense);
3597
- gap: var(--ids-comp-checkbox-group-vertical-container-size-gap-dense);
3641
+ padding: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-dense);
3642
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-dense);
3598
3643
  }
3599
- .ids-checkbox-group.ids-checkbox-group-dense .ids-checkbox-group__label {
3644
+ .ids-checkbox-group.ids-checkbox-group-dense > .ids-checkbox-group__legend {
3645
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-dense);
3646
+ }
3647
+ .ids-checkbox-group.ids-checkbox-group-dense > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
3600
3648
  font-family: var(--ids-comp-checkbox-group-label-typography-font-family-dense);
3601
3649
  font-size: var(--ids-comp-checkbox-group-label-typography-font-size-dense);
3602
3650
  font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-dense);
3603
3651
  line-height: var(--ids-comp-checkbox-group-label-typography-line-height-dense);
3604
3652
  letter-spacing: var(--ids-comp-checkbox-group-label-typography-letter-spacing-dense);
3605
3653
  }
3606
- .ids-checkbox-group.ids-checkbox-group-dense .ids-checkbox-group__list {
3607
- padding: var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-dense);
3608
- gap: var(--ids-comp-checkbox-group-horizontal-list-size-gap-dense);
3654
+ .ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
3655
+ padding: var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-y-dense) var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-x-dense);
3656
+ gap: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-dense) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-dense);
3657
+ }
3658
+ .ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
3659
+ padding: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-y-dense) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-x-dense);
3660
+ gap: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-dense) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-dense);
3661
+ }
3662
+ .ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
3663
+ padding: var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-x-dense);
3664
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-dense);
3609
3665
  }
3610
- .ids-checkbox-group.ids-checkbox-group-light > .ids-checkbox-group__label {
3666
+ .ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
3667
+ padding: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-dense);
3668
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-dense);
3669
+ }
3670
+ .ids-checkbox-group.ids-checkbox-group-light > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
3611
3671
  color: var(--ids-comp-checkbox-label-color-fg-light-default);
3612
3672
  }
3613
- .ids-checkbox-group.ids-checkbox-group-dark > .ids-checkbox-group__label {
3673
+ .ids-checkbox-group.ids-checkbox-group-dark > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
3614
3674
  color: var(--ids-comp-checkbox-label-color-fg-dark-default);
3615
3675
  }
3616
- .ids-checkbox-group.ids-checkbox-group-surface > .ids-checkbox-group__label {
3676
+ .ids-checkbox-group.ids-checkbox-group-surface > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
3617
3677
  color: var(--ids-comp-checkbox-label-color-fg-surface-default);
3618
3678
  }
3619
3679
 
@@ -4149,136 +4209,136 @@ input[autocomplete] {
4149
4209
  .ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
4150
4210
  cursor: pointer;
4151
4211
  }
4152
- .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled), .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
4212
+ .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) {
4153
4213
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-error-default);
4154
4214
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-default);
4155
4215
  }
4156
- .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
4216
+ .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 {
4157
4217
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-error-hovered);
4158
4218
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-hovered);
4159
4219
  }
4160
- .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
4220
+ .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 {
4161
4221
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-error-pressed);
4162
4222
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-pressed);
4163
4223
  }
4164
- .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible {
4224
+ .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 {
4165
4225
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-error-focused);
4166
4226
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-focused);
4167
4227
  }
4168
- .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled), .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) {
4228
+ .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) {
4169
4229
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-error-default);
4170
4230
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-default);
4171
4231
  }
4172
- .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover {
4232
+ .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 {
4173
4233
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-error-hovered);
4174
4234
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-hovered);
4175
4235
  }
4176
- .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active {
4236
+ .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 {
4177
4237
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-error-pressed);
4178
4238
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-pressed);
4179
4239
  }
4180
- .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible {
4240
+ .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 {
4181
4241
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-error-focused);
4182
4242
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-focused);
4183
4243
  }
4184
- .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon {
4244
+ .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 {
4185
4245
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-default);
4186
4246
  }
4187
- .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon {
4247
+ .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 {
4188
4248
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-hovered);
4189
4249
  }
4190
- .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon {
4250
+ .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 {
4191
4251
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-pressed);
4192
4252
  }
4193
- .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon {
4253
+ .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 {
4194
4254
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-focused);
4195
4255
  }
4196
- .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled), .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
4256
+ .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) {
4197
4257
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-error-default);
4198
4258
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-default);
4199
4259
  }
4200
- .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
4260
+ .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 {
4201
4261
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-error-hovered);
4202
4262
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-hovered);
4203
4263
  }
4204
- .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
4264
+ .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 {
4205
4265
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-error-pressed);
4206
4266
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-pressed);
4207
4267
  }
4208
- .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible {
4268
+ .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 {
4209
4269
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-error-focused);
4210
4270
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-focused);
4211
4271
  }
4212
- .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled), .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) {
4272
+ .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) {
4213
4273
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-error-default);
4214
4274
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-default);
4215
4275
  }
4216
- .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover {
4276
+ .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 {
4217
4277
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-error-hovered);
4218
4278
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-hovered);
4219
4279
  }
4220
- .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active {
4280
+ .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 {
4221
4281
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-error-pressed);
4222
4282
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-pressed);
4223
4283
  }
4224
- .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible {
4284
+ .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 {
4225
4285
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-error-focused);
4226
4286
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-focused);
4227
4287
  }
4228
- .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon {
4288
+ .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 {
4229
4289
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-default);
4230
4290
  }
4231
- .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon {
4291
+ .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 {
4232
4292
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-hovered);
4233
4293
  }
4234
- .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon {
4294
+ .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 {
4235
4295
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-pressed);
4236
4296
  }
4237
- .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon {
4297
+ .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 {
4238
4298
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-focused);
4239
4299
  }
4240
- .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled), .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
4300
+ .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) {
4241
4301
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-error-default);
4242
4302
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-default);
4243
4303
  }
4244
- .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
4304
+ .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 {
4245
4305
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-error-hovered);
4246
4306
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-hovered);
4247
4307
  }
4248
- .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
4308
+ .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 {
4249
4309
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-error-pressed);
4250
4310
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-pressed);
4251
4311
  }
4252
- .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible {
4312
+ .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 {
4253
4313
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-error-focused);
4254
4314
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-focused);
4255
4315
  }
4256
- .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled), .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) {
4316
+ .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) {
4257
4317
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-error-default);
4258
4318
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-default);
4259
4319
  }
4260
- .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover {
4320
+ .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 {
4261
4321
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-error-hovered);
4262
4322
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-hovered);
4263
4323
  }
4264
- .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active {
4324
+ .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 {
4265
4325
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-error-pressed);
4266
4326
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-pressed);
4267
4327
  }
4268
- .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible {
4328
+ .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 {
4269
4329
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-error-focused);
4270
4330
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-focused);
4271
4331
  }
4272
- .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon {
4332
+ .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 {
4273
4333
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-default);
4274
4334
  }
4275
- .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon {
4335
+ .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 {
4276
4336
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-hovered);
4277
4337
  }
4278
- .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon {
4338
+ .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 {
4279
4339
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-pressed);
4280
4340
  }
4281
- .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon {
4341
+ .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 {
4282
4342
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-focused);
4283
4343
  }
4284
4344
 
@@ -9197,7 +9257,6 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9197
9257
  }
9198
9258
  .ids-notification > .ids-notification__content-wrapper {
9199
9259
  display: flex;
9200
- justify-content: space-between;
9201
9260
  align-items: flex-start;
9202
9261
  align-content: flex-start;
9203
9262
  flex-wrap: wrap;
@@ -9230,6 +9289,9 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9230
9289
  align-items: center;
9231
9290
  flex-shrink: 0;
9232
9291
  }
9292
+ .ids-notification > .ids-notification__content-wrapper > .ids-notification__close-button-container {
9293
+ margin-left: auto;
9294
+ }
9233
9295
  .ids-notification > .ids-notification__content-wrapper > .ids-notification__close-button-container.ids-notification__label-button {
9234
9296
  display: flex;
9235
9297
  align-self: center;
@@ -9684,8 +9746,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9684
9746
  user-select: none;
9685
9747
  }
9686
9748
  .ids-option > .ids-option__text {
9687
- overflow: hidden;
9688
- text-overflow: ellipsis;
9749
+ overflow-wrap: anywhere;
9689
9750
  font-style: normal;
9690
9751
  }
9691
9752
  .ids-option:not(.ids-option-disabled) {
@@ -9701,7 +9762,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9701
9762
  outline-style: solid;
9702
9763
  }
9703
9764
  .ids-option.ids-option-compact {
9704
- height: var(--ids-comp-forms-option-item-size-min-height-compact);
9765
+ min-height: var(--ids-comp-forms-option-item-size-min-height-compact);
9705
9766
  padding: var(--ids-comp-forms-option-item-size-padding-y-compact) var(--ids-comp-forms-option-item-size-padding-x-compact);
9706
9767
  gap: var(--ids-comp-forms-option-container-size-gap-compact);
9707
9768
  border-radius: var(--ids-comp-forms-option-item-size-border-radius-compact);
@@ -9724,7 +9785,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9724
9785
  outline-width: var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact);
9725
9786
  }
9726
9787
  .ids-option.ids-option-comfortable {
9727
- height: var(--ids-comp-forms-option-item-size-min-height-comfortable);
9788
+ min-height: var(--ids-comp-forms-option-item-size-min-height-comfortable);
9728
9789
  padding: var(--ids-comp-forms-option-item-size-padding-y-comfortable) var(--ids-comp-forms-option-item-size-padding-x-comfortable);
9729
9790
  gap: var(--ids-comp-forms-option-container-size-gap-comfortable);
9730
9791
  border-radius: var(--ids-comp-forms-option-item-size-border-radius-comfortable);
@@ -9747,7 +9808,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9747
9808
  outline-width: var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-comfortable);
9748
9809
  }
9749
9810
  .ids-option.ids-option-spacious {
9750
- height: var(--ids-comp-forms-option-item-size-min-height-spacious);
9811
+ min-height: var(--ids-comp-forms-option-item-size-min-height-spacious);
9751
9812
  padding: var(--ids-comp-forms-option-item-size-padding-y-spacious) var(--ids-comp-forms-option-item-size-padding-x-spacious);
9752
9813
  gap: var(--ids-comp-forms-option-container-size-gap-spacious);
9753
9814
  border-radius: var(--ids-comp-forms-option-item-size-border-radius-spacious);
@@ -9770,7 +9831,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9770
9831
  outline-width: var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-spacious);
9771
9832
  }
9772
9833
  .ids-option.ids-option-dense {
9773
- height: var(--ids-comp-forms-option-item-size-min-height-dense);
9834
+ min-height: var(--ids-comp-forms-option-item-size-min-height-dense);
9774
9835
  padding: var(--ids-comp-forms-option-item-size-padding-y-dense) var(--ids-comp-forms-option-item-size-padding-x-dense);
9775
9836
  gap: var(--ids-comp-forms-option-container-size-gap-dense);
9776
9837
  border-radius: var(--ids-comp-forms-option-item-size-border-radius-dense);
@@ -10645,18 +10706,51 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10645
10706
  flex-direction: row-reverse;
10646
10707
  justify-content: start;
10647
10708
  }
10648
- .ids-radio-group .ids-radio.ids-radio-righ {
10709
+ .ids-radio-group .ids-radio.ids-radio-left .ids-radio__label-wrapper {
10710
+ display: flex;
10711
+ flex-direction: column;
10712
+ align-items: flex-start;
10713
+ }
10714
+ .ids-radio-group .ids-radio.ids-radio-left .ids-radio__label-wrapper .ids-radio__label {
10715
+ justify-content: start;
10716
+ }
10717
+ .ids-radio-group .ids-radio.ids-radio-right {
10649
10718
  flex-direction: row;
10650
10719
  justify-content: start;
10651
10720
  }
10721
+ .ids-radio-group .ids-radio.ids-radio-right .ids-radio__label-wrapper {
10722
+ display: flex;
10723
+ flex-direction: column;
10724
+ align-items: flex-start;
10725
+ }
10726
+ .ids-radio-group .ids-radio.ids-radio-right .ids-radio__label-wrapper .ids-radio__label {
10727
+ justify-content: start;
10728
+ }
10652
10729
  .ids-radio-group .ids-radio.ids-radio-top {
10653
10730
  flex-direction: column-reverse;
10654
10731
  align-items: center;
10732
+ justify-content: center;
10733
+ }
10734
+ .ids-radio-group .ids-radio.ids-radio-top .ids-radio__label-wrapper {
10735
+ display: flex;
10736
+ flex-direction: column;
10737
+ align-items: center;
10738
+ }
10739
+ .ids-radio-group .ids-radio.ids-radio-top .ids-radio__label-wrapper .ids-radio__label {
10740
+ justify-content: center;
10655
10741
  }
10656
10742
  .ids-radio-group .ids-radio.ids-radio-bottom {
10657
10743
  flex-direction: column;
10658
10744
  align-items: center;
10659
10745
  }
10746
+ .ids-radio-group .ids-radio.ids-radio-bottom .ids-radio__label-wrapper {
10747
+ display: flex;
10748
+ flex-direction: column;
10749
+ align-items: center;
10750
+ }
10751
+ .ids-radio-group .ids-radio.ids-radio-bottom .ids-radio__label-wrapper .ids-radio__label {
10752
+ justify-content: center;
10753
+ }
10660
10754
  .ids-radio-group .ids-radio .ids-radio__input-wrapper {
10661
10755
  position: relative;
10662
10756
  display: flex;
@@ -10709,7 +10803,6 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10709
10803
  }
10710
10804
  .ids-radio-group .ids-radio .ids-radio__label {
10711
10805
  display: flex;
10712
- justify-content: center;
10713
10806
  align-items: center;
10714
10807
  flex: 1 0 0;
10715
10808
  font-style: normal;
@@ -13976,6 +14069,9 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
13976
14069
  font-style: normal;
13977
14070
  flex-grow: 1;
13978
14071
  }
14072
+ .ids-switch:not(.ids-switch-disabled) > .ids-switch__label {
14073
+ cursor: pointer;
14074
+ }
13979
14075
  .ids-switch.ids-switch-label-right {
13980
14076
  flex-direction: row;
13981
14077
  }
@@ -14197,21 +14293,6 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
14197
14293
  .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button + .ids-switch__label {
14198
14294
  color: var(--ids-comp-switch-label-color-fg-surface-default);
14199
14295
  }
14200
- .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button:hover > .ids-switch__track {
14201
- background-color: var(--ids-comp-switch-track-off-color-bg-surface-hovered);
14202
- }
14203
- .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button:hover > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
14204
- color: var(--ids-comp-switch-track-off-color-fg-icon-surface-default);
14205
- }
14206
- .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button:hover > .ids-switch__track > .ids-switch__handle {
14207
- background-color: var(--ids-comp-switch-handle-off-color-bg-surface-default);
14208
- }
14209
- .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button:hover > .ids-switch__track > .ids-switch__handle > .ids-icon {
14210
- color: var(--ids-comp-switch-handle-off-color-fg-icon-surface-default);
14211
- }
14212
- .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button:hover + .ids-switch__label {
14213
- color: var(--ids-comp-switch-label-color-fg-surface-hovered);
14214
- }
14215
14296
  .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button:active > .ids-switch__track {
14216
14297
  background-color: var(--ids-comp-switch-track-off-color-bg-surface-pressed);
14217
14298
  }
@@ -14245,6 +14326,21 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
14245
14326
  .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button:focus + .ids-switch__label, .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button:focus-visible + .ids-switch__label {
14246
14327
  color: var(--ids-comp-switch-label-color-fg-surface-focused);
14247
14328
  }
14329
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled):hover > .ids-switch__button > .ids-switch__track {
14330
+ background-color: var(--ids-comp-switch-track-off-color-bg-surface-hovered);
14331
+ }
14332
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled):hover > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
14333
+ color: var(--ids-comp-switch-track-off-color-fg-icon-surface-default);
14334
+ }
14335
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled):hover > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
14336
+ background-color: var(--ids-comp-switch-handle-off-color-bg-surface-default);
14337
+ }
14338
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled):hover > .ids-switch__button > .ids-switch__track > .ids-switch__handle > .ids-icon {
14339
+ color: var(--ids-comp-switch-handle-off-color-fg-icon-surface-default);
14340
+ }
14341
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled):hover > .ids-switch__label {
14342
+ color: var(--ids-comp-switch-label-color-fg-surface-hovered);
14343
+ }
14248
14344
  .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button > .ids-switch__track {
14249
14345
  background-color: var(--ids-comp-switch-track-on-color-bg-surface-default);
14250
14346
  }
@@ -14257,18 +14353,21 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
14257
14353
  .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__handle > .ids-icon {
14258
14354
  color: var(--ids-comp-switch-handle-on-color-fg-icon-surface-default);
14259
14355
  }
14260
- .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track {
14356
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on:hover > .ids-switch__button > .ids-switch__track {
14261
14357
  background-color: var(--ids-comp-switch-track-on-color-bg-surface-hovered);
14262
14358
  }
14263
- .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
14359
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on:hover > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
14264
14360
  color: var(--ids-comp-switch-track-on-color-fg-icon-surface-default);
14265
14361
  }
14266
- .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track > .ids-switch__handle {
14362
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on:hover > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
14267
14363
  background-color: var(--ids-comp-switch-handle-on-color-bg-surface-default);
14268
14364
  }
14269
- .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track > .ids-switch__handle > .ids-icon {
14365
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on:hover > .ids-switch__button > .ids-switch__track > .ids-switch__handle > .ids-icon {
14270
14366
  color: var(--ids-comp-switch-handle-on-color-fg-icon-surface-default);
14271
14367
  }
14368
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on:hover > .ids-switch__label {
14369
+ color: var(--ids-comp-switch-label-color-fg-surface-hovered);
14370
+ }
14272
14371
  .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:active > .ids-switch__track {
14273
14372
  background-color: var(--ids-comp-switch-track-on-color-bg-surface-pressed);
14274
14373
  }
@@ -14335,21 +14434,6 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
14335
14434
  .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button + .ids-switch__label {
14336
14435
  color: var(--ids-comp-switch-label-color-fg-light-default);
14337
14436
  }
14338
- .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button:hover > .ids-switch__track {
14339
- background-color: var(--ids-comp-switch-track-off-color-bg-light-hovered);
14340
- }
14341
- .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button:hover > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
14342
- color: var(--ids-comp-switch-track-off-color-fg-icon-light-default);
14343
- }
14344
- .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button:hover > .ids-switch__track > .ids-switch__handle {
14345
- background-color: var(--ids-comp-switch-handle-off-color-bg-light-default);
14346
- }
14347
- .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button:hover > .ids-switch__track > .ids-switch__handle > .ids-icon {
14348
- color: var(--ids-comp-switch-handle-off-color-fg-icon-light-default);
14349
- }
14350
- .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button:hover + .ids-switch__label {
14351
- color: var(--ids-comp-switch-label-color-fg-light-hovered);
14352
- }
14353
14437
  .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button:active > .ids-switch__track {
14354
14438
  background-color: var(--ids-comp-switch-track-off-color-bg-light-pressed);
14355
14439
  }
@@ -14383,6 +14467,21 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
14383
14467
  .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button:focus + .ids-switch__label, .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button:focus-visible + .ids-switch__label {
14384
14468
  color: var(--ids-comp-switch-label-color-fg-light-focused);
14385
14469
  }
14470
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled):hover > .ids-switch__button > .ids-switch__track {
14471
+ background-color: var(--ids-comp-switch-track-off-color-bg-light-hovered);
14472
+ }
14473
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled):hover > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
14474
+ color: var(--ids-comp-switch-track-off-color-fg-icon-light-default);
14475
+ }
14476
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled):hover > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
14477
+ background-color: var(--ids-comp-switch-handle-off-color-bg-light-default);
14478
+ }
14479
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled):hover > .ids-switch__button > .ids-switch__track > .ids-switch__handle > .ids-icon {
14480
+ color: var(--ids-comp-switch-handle-off-color-fg-icon-light-default);
14481
+ }
14482
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled):hover > .ids-switch__label {
14483
+ color: var(--ids-comp-switch-label-color-fg-light-hovered);
14484
+ }
14386
14485
  .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button > .ids-switch__track {
14387
14486
  background-color: var(--ids-comp-switch-track-on-color-bg-light-default);
14388
14487
  }
@@ -14395,18 +14494,21 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
14395
14494
  .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__handle > .ids-icon {
14396
14495
  color: var(--ids-comp-switch-handle-on-color-fg-icon-light-default);
14397
14496
  }
14398
- .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track {
14497
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on:hover > .ids-switch__button > .ids-switch__track {
14399
14498
  background-color: var(--ids-comp-switch-track-on-color-bg-light-hovered);
14400
14499
  }
14401
- .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
14500
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on:hover > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
14402
14501
  color: var(--ids-comp-switch-track-on-color-fg-icon-light-default);
14403
14502
  }
14404
- .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track > .ids-switch__handle {
14503
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on:hover > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
14405
14504
  background-color: var(--ids-comp-switch-handle-on-color-bg-light-default);
14406
14505
  }
14407
- .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track > .ids-switch__handle > .ids-icon {
14506
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on:hover > .ids-switch__button > .ids-switch__track > .ids-switch__handle > .ids-icon {
14408
14507
  color: var(--ids-comp-switch-handle-on-color-fg-icon-light-default);
14409
14508
  }
14509
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on:hover > .ids-switch__label {
14510
+ color: var(--ids-comp-switch-label-color-fg-light-hovered);
14511
+ }
14410
14512
  .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:active > .ids-switch__track {
14411
14513
  background-color: var(--ids-comp-switch-track-on-color-bg-light-pressed);
14412
14514
  }
@@ -14473,21 +14575,6 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
14473
14575
  .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button + .ids-switch__label {
14474
14576
  color: var(--ids-comp-switch-label-color-fg-primary-default);
14475
14577
  }
14476
- .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button:hover > .ids-switch__track {
14477
- background-color: var(--ids-comp-switch-track-off-color-bg-primary-hovered);
14478
- }
14479
- .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button:hover > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
14480
- color: var(--ids-comp-switch-track-off-color-fg-icon-primary-default);
14481
- }
14482
- .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button:hover > .ids-switch__track > .ids-switch__handle {
14483
- background-color: var(--ids-comp-switch-handle-off-color-bg-primary-default);
14484
- }
14485
- .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button:hover > .ids-switch__track > .ids-switch__handle > .ids-icon {
14486
- color: var(--ids-comp-switch-handle-off-color-fg-icon-primary-default);
14487
- }
14488
- .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button:hover + .ids-switch__label {
14489
- color: var(--ids-comp-switch-label-color-fg-primary-hovered);
14490
- }
14491
14578
  .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button:active > .ids-switch__track {
14492
14579
  background-color: var(--ids-comp-switch-track-off-color-bg-primary-pressed);
14493
14580
  }
@@ -14521,6 +14608,21 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
14521
14608
  .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button:focus + .ids-switch__label, .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button:focus-visible + .ids-switch__label {
14522
14609
  color: var(--ids-comp-switch-label-color-fg-primary-focused);
14523
14610
  }
14611
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled):hover > .ids-switch__button > .ids-switch__track {
14612
+ background-color: var(--ids-comp-switch-track-off-color-bg-primary-hovered);
14613
+ }
14614
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled):hover > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
14615
+ color: var(--ids-comp-switch-track-off-color-fg-icon-primary-default);
14616
+ }
14617
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled):hover > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
14618
+ background-color: var(--ids-comp-switch-handle-off-color-bg-primary-default);
14619
+ }
14620
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled):hover > .ids-switch__button > .ids-switch__track > .ids-switch__handle > .ids-icon {
14621
+ color: var(--ids-comp-switch-handle-off-color-fg-icon-primary-default);
14622
+ }
14623
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled):hover > .ids-switch__label {
14624
+ color: var(--ids-comp-switch-label-color-fg-primary-hovered);
14625
+ }
14524
14626
  .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button > .ids-switch__track {
14525
14627
  background-color: var(--ids-comp-switch-track-on-color-bg-primary-default);
14526
14628
  }
@@ -14533,18 +14635,21 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
14533
14635
  .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__handle > .ids-icon {
14534
14636
  color: var(--ids-comp-switch-handle-on-color-fg-icon-primary-default);
14535
14637
  }
14536
- .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track {
14638
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on:hover > .ids-switch__button > .ids-switch__track {
14537
14639
  background-color: var(--ids-comp-switch-track-on-color-bg-primary-hovered);
14538
14640
  }
14539
- .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
14641
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on:hover > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
14540
14642
  color: var(--ids-comp-switch-track-on-color-fg-icon-primary-default);
14541
14643
  }
14542
- .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track > .ids-switch__handle {
14644
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on:hover > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
14543
14645
  background-color: var(--ids-comp-switch-handle-on-color-bg-primary-default);
14544
14646
  }
14545
- .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track > .ids-switch__handle > .ids-icon {
14647
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on:hover > .ids-switch__button > .ids-switch__track > .ids-switch__handle > .ids-icon {
14546
14648
  color: var(--ids-comp-switch-handle-on-color-fg-icon-primary-default);
14547
14649
  }
14650
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on:hover > .ids-switch__label {
14651
+ color: var(--ids-comp-switch-label-color-fg-primary-hovered);
14652
+ }
14548
14653
  .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:active > .ids-switch__track {
14549
14654
  background-color: var(--ids-comp-switch-track-on-color-bg-primary-pressed);
14550
14655
  }
@@ -14599,6 +14704,9 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
14599
14704
  .ids-switch.ids-switch-disabled {
14600
14705
  cursor: not-allowed;
14601
14706
  }
14707
+ .ids-switch.ids-switch-disabled > .ids-switch__label {
14708
+ cursor: not-allowed;
14709
+ }
14602
14710
 
14603
14711
  .ids-tab-group {
14604
14712
  box-sizing: border-box;