@i-cell/ids-styles 0.0.67 → 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.
@@ -335,9 +335,11 @@
335
335
  border-color: transparent;
336
336
  }
337
337
  .ids-autocomplete-panel {
338
- display: grid;
339
- overflow: auto;
338
+ display: flex;
339
+ flex-direction: column;
340
+ align-items: flex-start;
340
341
  width: 100%;
342
+ overflow-y: auto;
341
343
  scrollbar-width: thin;
342
344
  }
343
345
  .ids-autocomplete-overlay-panel {
@@ -3533,7 +3535,7 @@ input[autocomplete] {
3533
3535
  justify-content: center;
3534
3536
  align-items: flex-start;
3535
3537
  }
3536
- .ids-checkbox-group > .ids-checkbox-group__label {
3538
+ .ids-checkbox-group > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
3537
3539
  font-style: normal;
3538
3540
  }
3539
3541
  .ids-checkbox-group > .ids-checkbox-group__list {
@@ -3548,72 +3550,132 @@ input[autocomplete] {
3548
3550
  align-items: flex-start;
3549
3551
  }
3550
3552
  .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);
3553
+ 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);
3554
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-compact);
3555
+ }
3556
+ .ids-checkbox-group.ids-checkbox-group-compact > .ids-checkbox-group__legend {
3557
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-compact);
3553
3558
  }
3554
- .ids-checkbox-group.ids-checkbox-group-compact .ids-checkbox-group__label {
3559
+ .ids-checkbox-group.ids-checkbox-group-compact > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
3555
3560
  font-family: var(--ids-comp-checkbox-group-label-typography-font-family-compact);
3556
3561
  font-size: var(--ids-comp-checkbox-group-label-typography-font-size-compact);
3557
3562
  font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-compact);
3558
3563
  line-height: var(--ids-comp-checkbox-group-label-typography-line-height-compact);
3559
3564
  letter-spacing: var(--ids-comp-checkbox-group-label-typography-letter-spacing-compact);
3560
3565
  }
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);
3566
+ .ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
3567
+ 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);
3568
+ 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);
3569
+ }
3570
+ .ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
3571
+ 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);
3572
+ 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);
3573
+ }
3574
+ .ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
3575
+ 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);
3576
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-compact);
3577
+ }
3578
+ .ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
3579
+ 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);
3580
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-compact);
3564
3581
  }
3565
3582
  .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);
3583
+ 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);
3584
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-comfortable);
3585
+ }
3586
+ .ids-checkbox-group.ids-checkbox-group-comfortable > .ids-checkbox-group__legend {
3587
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-comfortable);
3568
3588
  }
3569
- .ids-checkbox-group.ids-checkbox-group-comfortable .ids-checkbox-group__label {
3589
+ .ids-checkbox-group.ids-checkbox-group-comfortable > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
3570
3590
  font-family: var(--ids-comp-checkbox-group-label-typography-font-family-comfortable);
3571
3591
  font-size: var(--ids-comp-checkbox-group-label-typography-font-size-comfortable);
3572
3592
  font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-comfortable);
3573
3593
  line-height: var(--ids-comp-checkbox-group-label-typography-line-height-comfortable);
3574
3594
  letter-spacing: var(--ids-comp-checkbox-group-label-typography-letter-spacing-comfortable);
3575
3595
  }
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);
3596
+ .ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
3597
+ 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);
3598
+ 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);
3599
+ }
3600
+ .ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
3601
+ 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);
3602
+ 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);
3603
+ }
3604
+ .ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
3605
+ 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);
3606
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-comfortable);
3607
+ }
3608
+ .ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
3609
+ 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);
3610
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-comfortable);
3579
3611
  }
3580
3612
  .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);
3613
+ 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);
3614
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-spacious);
3615
+ }
3616
+ .ids-checkbox-group.ids-checkbox-group-spacious > .ids-checkbox-group__legend {
3617
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-spacious);
3583
3618
  }
3584
- .ids-checkbox-group.ids-checkbox-group-spacious .ids-checkbox-group__label {
3619
+ .ids-checkbox-group.ids-checkbox-group-spacious > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
3585
3620
  font-family: var(--ids-comp-checkbox-group-label-typography-font-family-spacious);
3586
3621
  font-size: var(--ids-comp-checkbox-group-label-typography-font-size-spacious);
3587
3622
  font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-spacious);
3588
3623
  line-height: var(--ids-comp-checkbox-group-label-typography-line-height-spacious);
3589
3624
  letter-spacing: var(--ids-comp-checkbox-group-label-typography-letter-spacing-spacious);
3590
3625
  }
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);
3626
+ .ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
3627
+ 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);
3628
+ 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);
3629
+ }
3630
+ .ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
3631
+ 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);
3632
+ 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);
3633
+ }
3634
+ .ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
3635
+ 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);
3636
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-spacious);
3637
+ }
3638
+ .ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
3639
+ 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);
3640
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-spacious);
3594
3641
  }
3595
3642
  .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);
3643
+ 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);
3644
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-dense);
3645
+ }
3646
+ .ids-checkbox-group.ids-checkbox-group-dense > .ids-checkbox-group__legend {
3647
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-dense);
3598
3648
  }
3599
- .ids-checkbox-group.ids-checkbox-group-dense .ids-checkbox-group__label {
3649
+ .ids-checkbox-group.ids-checkbox-group-dense > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
3600
3650
  font-family: var(--ids-comp-checkbox-group-label-typography-font-family-dense);
3601
3651
  font-size: var(--ids-comp-checkbox-group-label-typography-font-size-dense);
3602
3652
  font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-dense);
3603
3653
  line-height: var(--ids-comp-checkbox-group-label-typography-line-height-dense);
3604
3654
  letter-spacing: var(--ids-comp-checkbox-group-label-typography-letter-spacing-dense);
3605
3655
  }
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);
3656
+ .ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
3657
+ 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);
3658
+ 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);
3659
+ }
3660
+ .ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
3661
+ 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);
3662
+ 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);
3663
+ }
3664
+ .ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
3665
+ 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);
3666
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-dense);
3609
3667
  }
3610
- .ids-checkbox-group.ids-checkbox-group-light > .ids-checkbox-group__label {
3668
+ .ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
3669
+ 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);
3670
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-dense);
3671
+ }
3672
+ .ids-checkbox-group.ids-checkbox-group-light > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
3611
3673
  color: var(--ids-comp-checkbox-label-color-fg-light-default);
3612
3674
  }
3613
- .ids-checkbox-group.ids-checkbox-group-dark > .ids-checkbox-group__label {
3675
+ .ids-checkbox-group.ids-checkbox-group-dark > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
3614
3676
  color: var(--ids-comp-checkbox-label-color-fg-dark-default);
3615
3677
  }
3616
- .ids-checkbox-group.ids-checkbox-group-surface > .ids-checkbox-group__label {
3678
+ .ids-checkbox-group.ids-checkbox-group-surface > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
3617
3679
  color: var(--ids-comp-checkbox-label-color-fg-surface-default);
3618
3680
  }
3619
3681
 
@@ -3843,83 +3905,83 @@ input[autocomplete] {
3843
3905
  font-size: var(--ids-comp-checkbox-label-typography-font-size-dense);
3844
3906
  line-height: var(--ids-comp-checkbox-label-typography-line-height-dense);
3845
3907
  }
3846
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate) {
3908
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate):not([aria-readonly=true]) {
3847
3909
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-hovered);
3848
3910
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-hovered);
3849
3911
  }
3850
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):is(:checked, :indeterminate) {
3912
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):is(:checked, :indeterminate):not([aria-readonly=true]) {
3851
3913
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-hovered);
3852
3914
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-hovered);
3853
3915
  }
3854
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled) + .ids-checkbox__icon {
3916
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
3855
3917
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-hovered);
3856
3918
  }
3857
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate) {
3919
+ .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) {
3858
3920
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-pressed);
3859
3921
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-pressed);
3860
3922
  }
3861
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):is(:checked, :indeterminate) {
3923
+ .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) {
3862
3924
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-pressed);
3863
3925
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-pressed);
3864
3926
  }
3865
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled) + .ids-checkbox__icon {
3927
+ .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 {
3866
3928
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-pressed);
3867
3929
  }
3868
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
3930
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]) {
3869
3931
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-default);
3870
3932
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-default);
3871
3933
  }
3872
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
3934
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):hover {
3873
3935
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-hovered);
3874
3936
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-hovered);
3875
3937
  }
3876
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
3938
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):active {
3877
3939
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-pressed);
3878
3940
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-pressed);
3879
3941
  }
3880
- .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 {
3942
+ .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 {
3881
3943
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-focused);
3882
3944
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-focused);
3883
3945
  outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-light-focused);
3884
3946
  }
3885
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:disabled {
3947
+ .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] {
3886
3948
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-disabled);
3887
3949
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-disabled);
3888
3950
  }
3889
- .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) {
3951
+ .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]) {
3890
3952
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-default);
3891
3953
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-default);
3892
3954
  }
3893
- .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 {
3955
+ .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 {
3894
3956
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-hovered);
3895
3957
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-hovered);
3896
3958
  }
3897
- .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 {
3959
+ .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 {
3898
3960
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-pressed);
3899
3961
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-pressed);
3900
3962
  }
3901
- .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 {
3963
+ .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 {
3902
3964
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-focused);
3903
3965
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-focused);
3904
3966
  outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-light-focused);
3905
3967
  }
3906
- .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 {
3968
+ .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] {
3907
3969
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-disabled);
3908
3970
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-disabled);
3909
3971
  }
3910
- .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 {
3972
+ .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 {
3911
3973
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-default);
3912
3974
  }
3913
- .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 {
3975
+ .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 {
3914
3976
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-hovered);
3915
3977
  }
3916
- .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 {
3978
+ .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 {
3917
3979
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-pressed);
3918
3980
  }
3919
- .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 {
3981
+ .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 {
3920
3982
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-focused);
3921
3983
  }
3922
- .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 {
3984
+ .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 {
3923
3985
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-disabled);
3924
3986
  }
3925
3987
  .ids-checkbox.ids-checkbox-light .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
@@ -3937,83 +3999,83 @@ input[autocomplete] {
3937
3999
  .ids-checkbox.ids-checkbox-light.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
3938
4000
  color: var(--ids-comp-checkbox-label-color-fg-light-disabled);
3939
4001
  }
3940
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate) {
4002
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate):not([aria-readonly=true]) {
3941
4003
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-hovered);
3942
4004
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-hovered);
3943
4005
  }
3944
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):is(:checked, :indeterminate) {
4006
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):is(:checked, :indeterminate):not([aria-readonly=true]) {
3945
4007
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-hovered);
3946
4008
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-hovered);
3947
4009
  }
3948
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled) + .ids-checkbox__icon {
4010
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
3949
4011
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-hovered);
3950
4012
  }
3951
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate) {
4013
+ .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) {
3952
4014
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-pressed);
3953
4015
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-pressed);
3954
4016
  }
3955
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):is(:checked, :indeterminate) {
4017
+ .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) {
3956
4018
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-pressed);
3957
4019
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-pressed);
3958
4020
  }
3959
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled) + .ids-checkbox__icon {
4021
+ .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 {
3960
4022
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-pressed);
3961
4023
  }
3962
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
4024
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]) {
3963
4025
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-default);
3964
4026
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-default);
3965
4027
  }
3966
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
4028
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):hover {
3967
4029
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-hovered);
3968
4030
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-hovered);
3969
4031
  }
3970
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
4032
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):active {
3971
4033
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-pressed);
3972
4034
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-pressed);
3973
4035
  }
3974
- .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 {
4036
+ .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 {
3975
4037
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-focused);
3976
4038
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-focused);
3977
4039
  outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-dark-focused);
3978
4040
  }
3979
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:disabled {
4041
+ .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] {
3980
4042
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-disabled);
3981
4043
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-disabled);
3982
4044
  }
3983
- .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) {
4045
+ .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]) {
3984
4046
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-default);
3985
4047
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-default);
3986
4048
  }
3987
- .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 {
4049
+ .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 {
3988
4050
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-hovered);
3989
4051
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-hovered);
3990
4052
  }
3991
- .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 {
4053
+ .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 {
3992
4054
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-pressed);
3993
4055
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-pressed);
3994
4056
  }
3995
- .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 {
4057
+ .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 {
3996
4058
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-focused);
3997
4059
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-focused);
3998
4060
  outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-dark-focused);
3999
4061
  }
4000
- .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 {
4062
+ .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] {
4001
4063
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-disabled);
4002
4064
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-disabled);
4003
4065
  }
4004
- .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 {
4066
+ .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 {
4005
4067
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-default);
4006
4068
  }
4007
- .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 {
4069
+ .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 {
4008
4070
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-hovered);
4009
4071
  }
4010
- .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 {
4072
+ .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 {
4011
4073
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-pressed);
4012
4074
  }
4013
- .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 {
4075
+ .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 {
4014
4076
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-focused);
4015
4077
  }
4016
- .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 {
4078
+ .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 {
4017
4079
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-disabled);
4018
4080
  }
4019
4081
  .ids-checkbox.ids-checkbox-dark .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
@@ -4031,83 +4093,83 @@ input[autocomplete] {
4031
4093
  .ids-checkbox.ids-checkbox-dark.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
4032
4094
  color: var(--ids-comp-checkbox-label-color-fg-dark-disabled);
4033
4095
  }
4034
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate) {
4096
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate):not([aria-readonly=true]) {
4035
4097
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-hovered);
4036
4098
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-hovered);
4037
4099
  }
4038
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):is(:checked, :indeterminate) {
4100
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):is(:checked, :indeterminate):not([aria-readonly=true]) {
4039
4101
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-hovered);
4040
4102
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-hovered);
4041
4103
  }
4042
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled) + .ids-checkbox__icon {
4104
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
4043
4105
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-hovered);
4044
4106
  }
4045
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate) {
4107
+ .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) {
4046
4108
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-pressed);
4047
4109
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-pressed);
4048
4110
  }
4049
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):is(:checked, :indeterminate) {
4111
+ .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) {
4050
4112
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-pressed);
4051
4113
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-pressed);
4052
4114
  }
4053
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled) + .ids-checkbox__icon {
4115
+ .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 {
4054
4116
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-pressed);
4055
4117
  }
4056
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
4118
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]) {
4057
4119
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-default);
4058
4120
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-default);
4059
4121
  }
4060
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
4122
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):hover {
4061
4123
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-hovered);
4062
4124
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-hovered);
4063
4125
  }
4064
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
4126
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):active {
4065
4127
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-pressed);
4066
4128
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-pressed);
4067
4129
  }
4068
- .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 {
4130
+ .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 {
4069
4131
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-focused);
4070
4132
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-focused);
4071
4133
  outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-surface-focused);
4072
4134
  }
4073
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:disabled {
4135
+ .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] {
4074
4136
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-disabled);
4075
4137
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-disabled);
4076
4138
  }
4077
- .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) {
4139
+ .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]) {
4078
4140
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-default);
4079
4141
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-default);
4080
4142
  }
4081
- .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 {
4143
+ .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 {
4082
4144
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-hovered);
4083
4145
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-hovered);
4084
4146
  }
4085
- .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 {
4147
+ .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 {
4086
4148
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-pressed);
4087
4149
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-pressed);
4088
4150
  }
4089
- .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 {
4151
+ .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 {
4090
4152
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-focused);
4091
4153
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-focused);
4092
4154
  outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-surface-focused);
4093
4155
  }
4094
- .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 {
4156
+ .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] {
4095
4157
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-disabled);
4096
4158
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-disabled);
4097
4159
  }
4098
- .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 {
4160
+ .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 {
4099
4161
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-default);
4100
4162
  }
4101
- .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 {
4163
+ .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 {
4102
4164
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-hovered);
4103
4165
  }
4104
- .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 {
4166
+ .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 {
4105
4167
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-pressed);
4106
4168
  }
4107
- .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 {
4169
+ .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 {
4108
4170
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-focused);
4109
4171
  }
4110
- .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 {
4172
+ .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 {
4111
4173
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-disabled);
4112
4174
  }
4113
4175
  .ids-checkbox.ids-checkbox-surface .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
@@ -4125,6 +4187,9 @@ input[autocomplete] {
4125
4187
  .ids-checkbox.ids-checkbox-surface.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
4126
4188
  color: var(--ids-comp-checkbox-label-color-fg-surface-disabled);
4127
4189
  }
4190
+ .ids-checkbox.ids-checkbox-disabled .ids-checkbox__input-wrapper {
4191
+ cursor: not-allowed;
4192
+ }
4128
4193
  .ids-checkbox.ids-checkbox-disabled .ids-checkbox__input-wrapper .ids-checkbox__touch-target {
4129
4194
  cursor: not-allowed;
4130
4195
  }
@@ -4134,9 +4199,15 @@ input[autocomplete] {
4134
4199
  .ids-checkbox.ids-checkbox-disabled .ids-checkbox__input-wrapper input[type=checkbox] + .ids-checkbox__icon {
4135
4200
  cursor: not-allowed;
4136
4201
  }
4202
+ .ids-checkbox.ids-checkbox-disabled .ids-checkbox__label-wrapper {
4203
+ cursor: not-allowed;
4204
+ }
4137
4205
  .ids-checkbox.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
4138
4206
  cursor: not-allowed;
4139
4207
  }
4208
+ .ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__input-wrapper {
4209
+ cursor: pointer;
4210
+ }
4140
4211
  .ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__input-wrapper .ids-checkbox__touch-target {
4141
4212
  cursor: pointer;
4142
4213
  }
@@ -4146,139 +4217,142 @@ input[autocomplete] {
4146
4217
  .ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__input-wrapper input[type=checkbox] + .ids-checkbox__icon {
4147
4218
  cursor: pointer;
4148
4219
  }
4220
+ .ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__label-wrapper {
4221
+ cursor: pointer;
4222
+ }
4149
4223
  .ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
4150
4224
  cursor: pointer;
4151
4225
  }
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) {
4226
+ .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]) {
4153
4227
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-error-default);
4154
4228
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-default);
4155
4229
  }
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 {
4230
+ .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 {
4157
4231
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-error-hovered);
4158
4232
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-hovered);
4159
4233
  }
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 {
4234
+ .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 {
4161
4235
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-error-pressed);
4162
4236
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-pressed);
4163
4237
  }
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 {
4238
+ .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 {
4165
4239
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-error-focused);
4166
4240
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-focused);
4167
4241
  }
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) {
4242
+ .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]) {
4169
4243
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-error-default);
4170
4244
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-default);
4171
4245
  }
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 {
4246
+ .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 {
4173
4247
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-error-hovered);
4174
4248
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-hovered);
4175
4249
  }
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 {
4250
+ .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 {
4177
4251
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-error-pressed);
4178
4252
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-pressed);
4179
4253
  }
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 {
4254
+ .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 {
4181
4255
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-error-focused);
4182
4256
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-focused);
4183
4257
  }
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 {
4258
+ .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 {
4185
4259
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-default);
4186
4260
  }
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 {
4261
+ .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 {
4188
4262
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-hovered);
4189
4263
  }
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 {
4264
+ .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 {
4191
4265
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-pressed);
4192
4266
  }
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 {
4267
+ .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 {
4194
4268
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-focused);
4195
4269
  }
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) {
4270
+ .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]) {
4197
4271
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-error-default);
4198
4272
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-default);
4199
4273
  }
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 {
4274
+ .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 {
4201
4275
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-error-hovered);
4202
4276
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-hovered);
4203
4277
  }
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 {
4278
+ .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 {
4205
4279
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-error-pressed);
4206
4280
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-pressed);
4207
4281
  }
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 {
4282
+ .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 {
4209
4283
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-error-focused);
4210
4284
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-focused);
4211
4285
  }
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) {
4286
+ .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]) {
4213
4287
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-error-default);
4214
4288
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-default);
4215
4289
  }
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 {
4290
+ .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 {
4217
4291
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-error-hovered);
4218
4292
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-hovered);
4219
4293
  }
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 {
4294
+ .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 {
4221
4295
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-error-pressed);
4222
4296
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-pressed);
4223
4297
  }
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 {
4298
+ .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 {
4225
4299
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-error-focused);
4226
4300
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-focused);
4227
4301
  }
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 {
4302
+ .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 {
4229
4303
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-default);
4230
4304
  }
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 {
4305
+ .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 {
4232
4306
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-hovered);
4233
4307
  }
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 {
4308
+ .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 {
4235
4309
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-pressed);
4236
4310
  }
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 {
4311
+ .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 {
4238
4312
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-focused);
4239
4313
  }
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) {
4314
+ .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]) {
4241
4315
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-error-default);
4242
4316
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-default);
4243
4317
  }
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 {
4318
+ .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 {
4245
4319
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-error-hovered);
4246
4320
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-hovered);
4247
4321
  }
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 {
4322
+ .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 {
4249
4323
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-error-pressed);
4250
4324
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-pressed);
4251
4325
  }
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 {
4326
+ .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 {
4253
4327
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-error-focused);
4254
4328
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-focused);
4255
4329
  }
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) {
4330
+ .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]) {
4257
4331
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-error-default);
4258
4332
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-default);
4259
4333
  }
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 {
4334
+ .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 {
4261
4335
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-error-hovered);
4262
4336
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-hovered);
4263
4337
  }
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 {
4338
+ .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 {
4265
4339
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-error-pressed);
4266
4340
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-pressed);
4267
4341
  }
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 {
4342
+ .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 {
4269
4343
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-error-focused);
4270
4344
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-focused);
4271
4345
  }
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 {
4346
+ .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 {
4273
4347
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-default);
4274
4348
  }
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 {
4349
+ .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 {
4276
4350
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-hovered);
4277
4351
  }
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 {
4352
+ .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 {
4279
4353
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-pressed);
4280
4354
  }
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 {
4355
+ .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 {
4282
4356
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-focused);
4283
4357
  }
4284
4358
 
@@ -5769,12 +5843,14 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5769
5843
  }
5770
5844
  .ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-title {
5771
5845
  font-style: normal;
5846
+ color: var(--ids-comp-dialog-header-color-fg-title-default);
5772
5847
  }
5773
5848
  .ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-title.hidden {
5774
5849
  display: none;
5775
5850
  }
5776
5851
  .ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle {
5777
5852
  font-style: normal;
5853
+ color: var(--ids-comp-dialog-header-color-fg-subtitle-default);
5778
5854
  }
5779
5855
  .ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content {
5780
5856
  display: grid;
@@ -9197,7 +9273,6 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9197
9273
  }
9198
9274
  .ids-notification > .ids-notification__content-wrapper {
9199
9275
  display: flex;
9200
- justify-content: space-between;
9201
9276
  align-items: flex-start;
9202
9277
  align-content: flex-start;
9203
9278
  flex-wrap: wrap;
@@ -9230,6 +9305,9 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9230
9305
  align-items: center;
9231
9306
  flex-shrink: 0;
9232
9307
  }
9308
+ .ids-notification > .ids-notification__content-wrapper > .ids-notification__close-button-container {
9309
+ margin-left: auto;
9310
+ }
9233
9311
  .ids-notification > .ids-notification__content-wrapper > .ids-notification__close-button-container.ids-notification__label-button {
9234
9312
  display: flex;
9235
9313
  align-self: center;
@@ -9682,10 +9760,10 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9682
9760
  align-self: stretch;
9683
9761
  box-sizing: border-box;
9684
9762
  user-select: none;
9763
+ flex-shrink: 0;
9685
9764
  }
9686
9765
  .ids-option > .ids-option__text {
9687
- overflow: hidden;
9688
- text-overflow: ellipsis;
9766
+ overflow-wrap: anywhere;
9689
9767
  font-style: normal;
9690
9768
  }
9691
9769
  .ids-option:not(.ids-option-disabled) {
@@ -9701,7 +9779,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9701
9779
  outline-style: solid;
9702
9780
  }
9703
9781
  .ids-option.ids-option-compact {
9704
- height: var(--ids-comp-forms-option-item-size-min-height-compact);
9782
+ min-height: var(--ids-comp-forms-option-item-size-min-height-compact);
9705
9783
  padding: var(--ids-comp-forms-option-item-size-padding-y-compact) var(--ids-comp-forms-option-item-size-padding-x-compact);
9706
9784
  gap: var(--ids-comp-forms-option-container-size-gap-compact);
9707
9785
  border-radius: var(--ids-comp-forms-option-item-size-border-radius-compact);
@@ -9724,7 +9802,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9724
9802
  outline-width: var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact);
9725
9803
  }
9726
9804
  .ids-option.ids-option-comfortable {
9727
- height: var(--ids-comp-forms-option-item-size-min-height-comfortable);
9805
+ min-height: var(--ids-comp-forms-option-item-size-min-height-comfortable);
9728
9806
  padding: var(--ids-comp-forms-option-item-size-padding-y-comfortable) var(--ids-comp-forms-option-item-size-padding-x-comfortable);
9729
9807
  gap: var(--ids-comp-forms-option-container-size-gap-comfortable);
9730
9808
  border-radius: var(--ids-comp-forms-option-item-size-border-radius-comfortable);
@@ -9747,7 +9825,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9747
9825
  outline-width: var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-comfortable);
9748
9826
  }
9749
9827
  .ids-option.ids-option-spacious {
9750
- height: var(--ids-comp-forms-option-item-size-min-height-spacious);
9828
+ min-height: var(--ids-comp-forms-option-item-size-min-height-spacious);
9751
9829
  padding: var(--ids-comp-forms-option-item-size-padding-y-spacious) var(--ids-comp-forms-option-item-size-padding-x-spacious);
9752
9830
  gap: var(--ids-comp-forms-option-container-size-gap-spacious);
9753
9831
  border-radius: var(--ids-comp-forms-option-item-size-border-radius-spacious);
@@ -9770,7 +9848,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9770
9848
  outline-width: var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-spacious);
9771
9849
  }
9772
9850
  .ids-option.ids-option-dense {
9773
- height: var(--ids-comp-forms-option-item-size-min-height-dense);
9851
+ min-height: var(--ids-comp-forms-option-item-size-min-height-dense);
9774
9852
  padding: var(--ids-comp-forms-option-item-size-padding-y-dense) var(--ids-comp-forms-option-item-size-padding-x-dense);
9775
9853
  gap: var(--ids-comp-forms-option-container-size-gap-dense);
9776
9854
  border-radius: var(--ids-comp-forms-option-item-size-border-radius-dense);
@@ -10612,6 +10690,10 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10612
10690
  border-style: none;
10613
10691
  border-color: transparent;
10614
10692
  line-height: 1.5;
10693
+ display: flex;
10694
+ flex-direction: column;
10695
+ justify-content: center;
10696
+ align-items: flex-start;
10615
10697
  }
10616
10698
  .ids-radio-group::before, .ids-radio-group::after, .ids-radio-group *, .ids-radio-group ::before, .ids-radio-group ::after {
10617
10699
  box-sizing: border-box;
@@ -10619,22 +10701,28 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10619
10701
  border-style: none;
10620
10702
  border-color: transparent;
10621
10703
  }
10622
-
10623
- .ids-radio-group {
10624
- display: inline-flex;
10625
- align-items: flex-start;
10626
- justify-content: start;
10704
+ .ids-radio-group.ids-radio-group-left {
10705
+ align-items: flex-end;
10627
10706
  }
10628
- .ids-radio-group.ids-radio-group-horizontal {
10629
- flex-direction: row;
10707
+ .ids-radio-group.ids-radio-group-right {
10708
+ align-items: flex-start;
10630
10709
  }
10631
- .ids-radio-group.ids-radio-group-vertical {
10710
+ .ids-radio-group > .ids-radio-group__legend {
10711
+ display: flex;
10632
10712
  flex-direction: column;
10633
10713
  }
10634
- .ids-radio-group.ids-radio-group-left {
10635
- align-items: flex-end;
10714
+ .ids-radio-group > .ids-radio-group__legend > .ids-radio-group__legend-container > .ids-radio-group__legend-label {
10715
+ font-style: normal;
10636
10716
  }
10637
- .ids-radio-group.ids-radio-group-right {
10717
+ .ids-radio-group > .ids-radio-group__list {
10718
+ display: flex;
10719
+ }
10720
+ .ids-radio-group.ids-radio-group-horizontal > .ids-radio-group__list {
10721
+ flex-direction: row;
10722
+ align-items: center;
10723
+ }
10724
+ .ids-radio-group.ids-radio-group-vertical > .ids-radio-group__list {
10725
+ flex-direction: column;
10638
10726
  align-items: flex-start;
10639
10727
  }
10640
10728
  .ids-radio-group .ids-radio {
@@ -10645,82 +10733,110 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10645
10733
  flex-direction: row-reverse;
10646
10734
  justify-content: start;
10647
10735
  }
10648
- .ids-radio-group .ids-radio.ids-radio-righ {
10736
+ .ids-radio-group .ids-radio.ids-radio-right {
10649
10737
  flex-direction: row;
10650
10738
  justify-content: start;
10651
10739
  }
10652
10740
  .ids-radio-group .ids-radio.ids-radio-top {
10653
10741
  flex-direction: column-reverse;
10742
+ justify-content: center;
10654
10743
  align-items: center;
10655
10744
  }
10656
10745
  .ids-radio-group .ids-radio.ids-radio-bottom {
10657
10746
  flex-direction: column;
10658
10747
  align-items: center;
10659
10748
  }
10749
+ .ids-radio-group .ids-radio.ids-radio-top .ids-radio__label-wrapper, .ids-radio-group .ids-radio.ids-radio-bottom .ids-radio__label-wrapper {
10750
+ align-items: center;
10751
+ }
10752
+ .ids-radio-group .ids-radio.ids-radio-top .ids-radio__label, .ids-radio-group .ids-radio.ids-radio-bottom .ids-radio__label {
10753
+ justify-content: center;
10754
+ }
10755
+ .ids-radio-group .ids-radio.ids-radio-left .ids-radio__label-wrapper, .ids-radio-group .ids-radio.ids-radio-right .ids-radio__label-wrapper {
10756
+ align-items: flex-start;
10757
+ }
10758
+ .ids-radio-group .ids-radio.ids-radio-left .ids-radio__label, .ids-radio-group .ids-radio.ids-radio-right .ids-radio__label {
10759
+ justify-content: start;
10760
+ }
10660
10761
  .ids-radio-group .ids-radio .ids-radio__input-wrapper {
10661
10762
  position: relative;
10662
10763
  display: flex;
10663
10764
  align-items: center;
10664
10765
  justify-content: center;
10665
10766
  }
10666
- .ids-radio-group .ids-radio .ids-radio__input-wrapper .ids-radio__touch-target {
10767
+ .ids-radio-group .ids-radio .ids-radio__touch-target {
10667
10768
  position: absolute;
10668
10769
  cursor: pointer;
10669
10770
  }
10670
- .ids-radio-group .ids-radio .ids-radio__input-wrapper input[type=radio] {
10771
+ .ids-radio-group .ids-radio input[type=radio] {
10671
10772
  appearance: none;
10672
10773
  -webkit-appearance: none;
10673
- flex-shrink: 0;
10674
- border-style: solid;
10675
- margin: 0;
10676
10774
  display: flex;
10677
- justify-content: center;
10678
10775
  align-items: center;
10776
+ justify-content: center;
10679
10777
  flex-shrink: 0;
10778
+ margin: 0;
10779
+ border-style: solid;
10680
10780
  cursor: pointer;
10681
10781
  }
10682
- .ids-radio-group .ids-radio .ids-radio__input-wrapper input[type=radio] + .ids-radio__inner-circle {
10782
+ .ids-radio-group .ids-radio input[type=radio]:focus, .ids-radio-group .ids-radio input[type=radio]:focus-visible {
10783
+ outline-offset: 2px;
10784
+ outline-style: solid;
10785
+ }
10786
+ .ids-radio-group .ids-radio input[type=radio] + .ids-radio__inner-circle {
10683
10787
  position: absolute;
10684
10788
  flex-shrink: 0;
10685
- border-style: solid;
10686
- height: 0;
10687
10789
  width: 0;
10790
+ height: 0;
10688
10791
  border-width: 0;
10792
+ border-style: solid;
10689
10793
  cursor: pointer;
10690
10794
  }
10691
- .ids-radio-group .ids-radio .ids-radio__input-wrapper input[type=radio]:focus, .ids-radio-group .ids-radio .ids-radio__input-wrapper input[type=radio]:focus-visible {
10692
- outline-offset: 2px;
10693
- outline-style: solid;
10795
+ .ids-radio-group .ids-radio .ids-radio__label-wrapper {
10796
+ display: flex;
10797
+ flex-direction: column;
10798
+ cursor: pointer;
10694
10799
  }
10695
10800
  .ids-radio-group .ids-radio .ids-radio__label {
10801
+ display: flex;
10802
+ align-items: center;
10803
+ flex: 1 0 0;
10804
+ font-style: normal;
10696
10805
  cursor: pointer;
10697
10806
  }
10698
- .ids-radio-group .ids-radio.ids-radio-disabled .ids-radio__input-wrapper .ids-radio__touch-target {
10807
+ .ids-radio-group .ids-radio.ids-radio-disabled .ids-radio__touch-target,
10808
+ .ids-radio-group .ids-radio.ids-radio-disabled input[type=radio],
10809
+ .ids-radio-group .ids-radio.ids-radio-disabled input[type=radio] + .ids-radio__inner-circle,
10810
+ .ids-radio-group .ids-radio.ids-radio-disabled .ids-radio__label-wrapper,
10811
+ .ids-radio-group .ids-radio.ids-radio-disabled .ids-radio__label {
10699
10812
  cursor: not-allowed;
10700
10813
  }
10701
- .ids-radio-group .ids-radio.ids-radio-disabled .ids-radio__input-wrapper input[type=radio] {
10702
- cursor: not-allowed;
10814
+ .ids-radio-group.ids-radio-group-compact {
10815
+ padding: var(--ids-comp-radio-group-vertical-fieldset-legend-size-padding-y-compact) var(--ids-comp-radio-group-vertical-fieldset-legend-size-padding-x-compact);
10816
+ gap: var(--ids-comp-radio-group-vertical-fieldset-size-gap-compact);
10703
10817
  }
10704
- .ids-radio-group .ids-radio.ids-radio-disabled .ids-radio__input-wrapper input[type=radio] + .ids-radio__inner-circle {
10705
- cursor: not-allowed;
10818
+ .ids-radio-group.ids-radio-group-compact > .ids-radio-group__legend {
10819
+ gap: var(--ids-comp-radio-group-vertical-fieldset-legend-size-gap-compact);
10706
10820
  }
10707
- .ids-radio-group .ids-radio.ids-radio-disabled .ids-radio__label {
10708
- cursor: not-allowed;
10821
+ .ids-radio-group.ids-radio-group-compact.ids-radio-group-horizontal > .ids-radio-group__legend > .ids-radio-group__legend-container > .ids-radio-group__legend-label {
10822
+ font-family: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-family-compact);
10823
+ font-size: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-size-compact);
10824
+ font-weight: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-weight-compact);
10825
+ line-height: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-line-height-compact);
10826
+ letter-spacing: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-letter-spacing-compact);
10709
10827
  }
10710
- .ids-radio-group .ids-radio .ids-radio__label {
10711
- display: flex;
10712
- justify-content: center;
10713
- align-items: center;
10714
- flex: 1 0 0;
10715
- font-style: normal;
10828
+ .ids-radio-group.ids-radio-group-compact.ids-radio-group-horizontal > .ids-radio-group__list {
10829
+ gap: var(--ids-comp-radio-group-horizontal-fieldset-list-size-gap-y-compact) var(--ids-comp-radio-group-horizontal-fieldset-list-size-gap-x-compact);
10716
10830
  }
10717
- .ids-radio-group.ids-radio-group-compact.ids-radio-group-horizontal {
10718
- padding: var(--ids-comp-radio-group-horizontal-container-size-padding-y-compact) var(--ids-comp-radio-group-horizontal-container-size-padding-x-compact);
10719
- gap: var(--ids-comp-radio-group-horizontal-container-size-gap-compact);
10831
+ .ids-radio-group.ids-radio-group-compact.ids-radio-group-vertical > .ids-radio-group__legend > .ids-radio-group__legend-container > .ids-radio-group__legend-label {
10832
+ font-family: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-family-compact);
10833
+ font-size: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-size-compact);
10834
+ font-weight: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-weight-compact);
10835
+ line-height: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-line-height-compact);
10836
+ letter-spacing: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-letter-spacing-compact);
10720
10837
  }
10721
- .ids-radio-group.ids-radio-group-compact.ids-radio-group-vertical {
10722
- padding: var(--ids-comp-radio-group-vertical-container-size-padding-y-compact) var(--ids-comp-radio-group-vertical-container-size-padding-x-compact);
10723
- gap: var(--ids-comp-radio-group-vertical-container-size-gap-compact);
10838
+ .ids-radio-group.ids-radio-group-compact.ids-radio-group-vertical > .ids-radio-group__list {
10839
+ gap: var(--ids-comp-radio-group-vertical-fieldset-list-size-gap-compact);
10724
10840
  }
10725
10841
  .ids-radio-group.ids-radio-group-compact .ids-radio {
10726
10842
  padding: var(--ids-comp-radio-button-container-size-padding-y-compact) var(--ids-comp-radio-button-container-size-padding-x-compact);
@@ -10729,8 +10845,8 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10729
10845
  .ids-radio-group.ids-radio-group-compact .ids-radio .ids-radio__input-wrapper .ids-radio__touch-target {
10730
10846
  top: calc((var(--ids-comp-radio-button-input-size-height-compact) - var(--ids-comp-radio-button-input-size-touchtarget-height-compact)) / 2);
10731
10847
  left: calc((var(--ids-comp-radio-button-input-size-width-compact) - var(--ids-comp-radio-button-input-size-touchtarget-width-compact)) / 2);
10732
- height: var(--ids-comp-radio-button-input-size-touchtarget-height-compact);
10733
10848
  width: var(--ids-comp-radio-button-input-size-touchtarget-width-compact);
10849
+ height: var(--ids-comp-radio-button-input-size-touchtarget-height-compact);
10734
10850
  }
10735
10851
  .ids-radio-group.ids-radio-group-compact .ids-radio .ids-radio__input-wrapper input[type=radio] {
10736
10852
  width: var(--ids-comp-radio-button-input-size-width-compact);
@@ -10747,21 +10863,43 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10747
10863
  .ids-radio-group.ids-radio-group-compact .ids-radio .ids-radio__input-wrapper input[type=radio]:focus, .ids-radio-group.ids-radio-group-compact .ids-radio .ids-radio__input-wrapper input[type=radio]:focus-visible {
10748
10864
  outline-width: var(--ids-comp-radio-focused-outline-outline-compact);
10749
10865
  }
10866
+ .ids-radio-group.ids-radio-group-compact .ids-radio .ids-radio__label-wrapper {
10867
+ gap: var(--ids-comp-radio-button-label-group-size-gap-compact);
10868
+ }
10750
10869
  .ids-radio-group.ids-radio-group-compact .ids-radio .ids-radio__label {
10751
- padding: var(--ids-comp-radio-button-label-size-padding-y-compact) 0px;
10870
+ padding: var(--ids-comp-radio-button-label-size-padding-y-compact) 0;
10752
10871
  font-family: var(--ids-comp-radio-button-label-typography-font-family-compact);
10753
10872
  font-size: var(--ids-comp-radio-button-label-typography-font-size-compact);
10754
10873
  font-weight: var(--ids-comp-radio-button-label-typography-font-weight-compact);
10755
10874
  line-height: var(--ids-comp-radio-button-label-typography-line-height-compact);
10756
10875
  letter-spacing: var(--ids-comp-radio-button-label-typography-letter-spacing-compact);
10757
10876
  }
10758
- .ids-radio-group.ids-radio-group-comfortable.ids-radio-group-horizontal {
10759
- padding: var(--ids-comp-radio-group-horizontal-container-size-padding-y-comfortable) var(--ids-comp-radio-group-horizontal-container-size-padding-x-comfortable);
10760
- gap: var(--ids-comp-radio-group-horizontal-container-size-gap-comfortable);
10877
+ .ids-radio-group.ids-radio-group-comfortable {
10878
+ padding: var(--ids-comp-radio-group-vertical-fieldset-legend-size-padding-y-comfortable) var(--ids-comp-radio-group-vertical-fieldset-legend-size-padding-x-comfortable);
10879
+ gap: var(--ids-comp-radio-group-vertical-fieldset-size-gap-comfortable);
10880
+ }
10881
+ .ids-radio-group.ids-radio-group-comfortable > .ids-radio-group__legend {
10882
+ gap: var(--ids-comp-radio-group-vertical-fieldset-legend-size-gap-comfortable);
10883
+ }
10884
+ .ids-radio-group.ids-radio-group-comfortable.ids-radio-group-horizontal > .ids-radio-group__legend > .ids-radio-group__legend-container > .ids-radio-group__legend-label {
10885
+ font-family: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-family-comfortable);
10886
+ font-size: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-size-comfortable);
10887
+ font-weight: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-weight-comfortable);
10888
+ line-height: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-line-height-comfortable);
10889
+ letter-spacing: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-letter-spacing-comfortable);
10890
+ }
10891
+ .ids-radio-group.ids-radio-group-comfortable.ids-radio-group-horizontal > .ids-radio-group__list {
10892
+ gap: var(--ids-comp-radio-group-horizontal-fieldset-list-size-gap-y-comfortable) var(--ids-comp-radio-group-horizontal-fieldset-list-size-gap-x-comfortable);
10761
10893
  }
10762
- .ids-radio-group.ids-radio-group-comfortable.ids-radio-group-vertical {
10763
- padding: var(--ids-comp-radio-group-vertical-container-size-padding-y-comfortable) var(--ids-comp-radio-group-vertical-container-size-padding-x-comfortable);
10764
- gap: var(--ids-comp-radio-group-vertical-container-size-gap-comfortable);
10894
+ .ids-radio-group.ids-radio-group-comfortable.ids-radio-group-vertical > .ids-radio-group__legend > .ids-radio-group__legend-container > .ids-radio-group__legend-label {
10895
+ font-family: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-family-comfortable);
10896
+ font-size: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-size-comfortable);
10897
+ font-weight: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-weight-comfortable);
10898
+ line-height: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-line-height-comfortable);
10899
+ letter-spacing: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-letter-spacing-comfortable);
10900
+ }
10901
+ .ids-radio-group.ids-radio-group-comfortable.ids-radio-group-vertical > .ids-radio-group__list {
10902
+ gap: var(--ids-comp-radio-group-vertical-fieldset-list-size-gap-comfortable);
10765
10903
  }
10766
10904
  .ids-radio-group.ids-radio-group-comfortable .ids-radio {
10767
10905
  padding: var(--ids-comp-radio-button-container-size-padding-y-comfortable) var(--ids-comp-radio-button-container-size-padding-x-comfortable);
@@ -10770,8 +10908,8 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10770
10908
  .ids-radio-group.ids-radio-group-comfortable .ids-radio .ids-radio__input-wrapper .ids-radio__touch-target {
10771
10909
  top: calc((var(--ids-comp-radio-button-input-size-height-comfortable) - var(--ids-comp-radio-button-input-size-touchtarget-height-comfortable)) / 2);
10772
10910
  left: calc((var(--ids-comp-radio-button-input-size-width-comfortable) - var(--ids-comp-radio-button-input-size-touchtarget-width-comfortable)) / 2);
10773
- height: var(--ids-comp-radio-button-input-size-touchtarget-height-comfortable);
10774
10911
  width: var(--ids-comp-radio-button-input-size-touchtarget-width-comfortable);
10912
+ height: var(--ids-comp-radio-button-input-size-touchtarget-height-comfortable);
10775
10913
  }
10776
10914
  .ids-radio-group.ids-radio-group-comfortable .ids-radio .ids-radio__input-wrapper input[type=radio] {
10777
10915
  width: var(--ids-comp-radio-button-input-size-width-comfortable);
@@ -10788,21 +10926,43 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10788
10926
  .ids-radio-group.ids-radio-group-comfortable .ids-radio .ids-radio__input-wrapper input[type=radio]:focus, .ids-radio-group.ids-radio-group-comfortable .ids-radio .ids-radio__input-wrapper input[type=radio]:focus-visible {
10789
10927
  outline-width: var(--ids-comp-radio-focused-outline-outline-comfortable);
10790
10928
  }
10929
+ .ids-radio-group.ids-radio-group-comfortable .ids-radio .ids-radio__label-wrapper {
10930
+ gap: var(--ids-comp-radio-button-label-group-size-gap-comfortable);
10931
+ }
10791
10932
  .ids-radio-group.ids-radio-group-comfortable .ids-radio .ids-radio__label {
10792
- padding: var(--ids-comp-radio-button-label-size-padding-y-comfortable) 0px;
10933
+ padding: var(--ids-comp-radio-button-label-size-padding-y-comfortable) 0;
10793
10934
  font-family: var(--ids-comp-radio-button-label-typography-font-family-comfortable);
10794
10935
  font-size: var(--ids-comp-radio-button-label-typography-font-size-comfortable);
10795
10936
  font-weight: var(--ids-comp-radio-button-label-typography-font-weight-comfortable);
10796
10937
  line-height: var(--ids-comp-radio-button-label-typography-line-height-comfortable);
10797
10938
  letter-spacing: var(--ids-comp-radio-button-label-typography-letter-spacing-comfortable);
10798
10939
  }
10799
- .ids-radio-group.ids-radio-group-spacious.ids-radio-group-horizontal {
10800
- padding: var(--ids-comp-radio-group-horizontal-container-size-padding-y-spacious) var(--ids-comp-radio-group-horizontal-container-size-padding-x-spacious);
10801
- gap: var(--ids-comp-radio-group-horizontal-container-size-gap-spacious);
10940
+ .ids-radio-group.ids-radio-group-spacious {
10941
+ padding: var(--ids-comp-radio-group-vertical-fieldset-legend-size-padding-y-spacious) var(--ids-comp-radio-group-vertical-fieldset-legend-size-padding-x-spacious);
10942
+ gap: var(--ids-comp-radio-group-vertical-fieldset-size-gap-spacious);
10802
10943
  }
10803
- .ids-radio-group.ids-radio-group-spacious.ids-radio-group-vertical {
10804
- padding: var(--ids-comp-radio-group-vertical-container-size-padding-y-spacious) var(--ids-comp-radio-group-vertical-container-size-padding-x-spacious);
10805
- gap: var(--ids-comp-radio-group-vertical-container-size-gap-spacious);
10944
+ .ids-radio-group.ids-radio-group-spacious > .ids-radio-group__legend {
10945
+ gap: var(--ids-comp-radio-group-vertical-fieldset-legend-size-gap-spacious);
10946
+ }
10947
+ .ids-radio-group.ids-radio-group-spacious.ids-radio-group-horizontal > .ids-radio-group__legend > .ids-radio-group__legend-container > .ids-radio-group__legend-label {
10948
+ font-family: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-family-spacious);
10949
+ font-size: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-size-spacious);
10950
+ font-weight: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-weight-spacious);
10951
+ line-height: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-line-height-spacious);
10952
+ letter-spacing: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-letter-spacing-spacious);
10953
+ }
10954
+ .ids-radio-group.ids-radio-group-spacious.ids-radio-group-horizontal > .ids-radio-group__list {
10955
+ gap: var(--ids-comp-radio-group-horizontal-fieldset-list-size-gap-y-spacious) var(--ids-comp-radio-group-horizontal-fieldset-list-size-gap-x-spacious);
10956
+ }
10957
+ .ids-radio-group.ids-radio-group-spacious.ids-radio-group-vertical > .ids-radio-group__legend > .ids-radio-group__legend-container > .ids-radio-group__legend-label {
10958
+ font-family: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-family-spacious);
10959
+ font-size: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-size-spacious);
10960
+ font-weight: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-weight-spacious);
10961
+ line-height: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-line-height-spacious);
10962
+ letter-spacing: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-letter-spacing-spacious);
10963
+ }
10964
+ .ids-radio-group.ids-radio-group-spacious.ids-radio-group-vertical > .ids-radio-group__list {
10965
+ gap: var(--ids-comp-radio-group-vertical-fieldset-list-size-gap-spacious);
10806
10966
  }
10807
10967
  .ids-radio-group.ids-radio-group-spacious .ids-radio {
10808
10968
  padding: var(--ids-comp-radio-button-container-size-padding-y-spacious) var(--ids-comp-radio-button-container-size-padding-x-spacious);
@@ -10811,8 +10971,8 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10811
10971
  .ids-radio-group.ids-radio-group-spacious .ids-radio .ids-radio__input-wrapper .ids-radio__touch-target {
10812
10972
  top: calc((var(--ids-comp-radio-button-input-size-height-spacious) - var(--ids-comp-radio-button-input-size-touchtarget-height-spacious)) / 2);
10813
10973
  left: calc((var(--ids-comp-radio-button-input-size-width-spacious) - var(--ids-comp-radio-button-input-size-touchtarget-width-spacious)) / 2);
10814
- height: var(--ids-comp-radio-button-input-size-touchtarget-height-spacious);
10815
10974
  width: var(--ids-comp-radio-button-input-size-touchtarget-width-spacious);
10975
+ height: var(--ids-comp-radio-button-input-size-touchtarget-height-spacious);
10816
10976
  }
10817
10977
  .ids-radio-group.ids-radio-group-spacious .ids-radio .ids-radio__input-wrapper input[type=radio] {
10818
10978
  width: var(--ids-comp-radio-button-input-size-width-spacious);
@@ -10829,21 +10989,43 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10829
10989
  .ids-radio-group.ids-radio-group-spacious .ids-radio .ids-radio__input-wrapper input[type=radio]:focus, .ids-radio-group.ids-radio-group-spacious .ids-radio .ids-radio__input-wrapper input[type=radio]:focus-visible {
10830
10990
  outline-width: var(--ids-comp-radio-focused-outline-outline-spacious);
10831
10991
  }
10992
+ .ids-radio-group.ids-radio-group-spacious .ids-radio .ids-radio__label-wrapper {
10993
+ gap: var(--ids-comp-radio-button-label-group-size-gap-spacious);
10994
+ }
10832
10995
  .ids-radio-group.ids-radio-group-spacious .ids-radio .ids-radio__label {
10833
- padding: var(--ids-comp-radio-button-label-size-padding-y-spacious) 0px;
10996
+ padding: var(--ids-comp-radio-button-label-size-padding-y-spacious) 0;
10834
10997
  font-family: var(--ids-comp-radio-button-label-typography-font-family-spacious);
10835
10998
  font-size: var(--ids-comp-radio-button-label-typography-font-size-spacious);
10836
10999
  font-weight: var(--ids-comp-radio-button-label-typography-font-weight-spacious);
10837
11000
  line-height: var(--ids-comp-radio-button-label-typography-line-height-spacious);
10838
11001
  letter-spacing: var(--ids-comp-radio-button-label-typography-letter-spacing-spacious);
10839
11002
  }
10840
- .ids-radio-group.ids-radio-group-dense.ids-radio-group-horizontal {
10841
- padding: var(--ids-comp-radio-group-horizontal-container-size-padding-y-dense) var(--ids-comp-radio-group-horizontal-container-size-padding-x-dense);
10842
- gap: var(--ids-comp-radio-group-horizontal-container-size-gap-dense);
11003
+ .ids-radio-group.ids-radio-group-dense {
11004
+ padding: var(--ids-comp-radio-group-vertical-fieldset-legend-size-padding-y-dense) var(--ids-comp-radio-group-vertical-fieldset-legend-size-padding-x-dense);
11005
+ gap: var(--ids-comp-radio-group-vertical-fieldset-size-gap-dense);
11006
+ }
11007
+ .ids-radio-group.ids-radio-group-dense > .ids-radio-group__legend {
11008
+ gap: var(--ids-comp-radio-group-vertical-fieldset-legend-size-gap-dense);
10843
11009
  }
10844
- .ids-radio-group.ids-radio-group-dense.ids-radio-group-vertical {
10845
- padding: var(--ids-comp-radio-group-vertical-container-size-padding-y-dense) var(--ids-comp-radio-group-vertical-container-size-padding-x-dense);
10846
- gap: var(--ids-comp-radio-group-vertical-container-size-gap-dense);
11010
+ .ids-radio-group.ids-radio-group-dense.ids-radio-group-horizontal > .ids-radio-group__legend > .ids-radio-group__legend-container > .ids-radio-group__legend-label {
11011
+ font-family: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-family-dense);
11012
+ font-size: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-size-dense);
11013
+ font-weight: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-weight-dense);
11014
+ line-height: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-line-height-dense);
11015
+ letter-spacing: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-letter-spacing-dense);
11016
+ }
11017
+ .ids-radio-group.ids-radio-group-dense.ids-radio-group-horizontal > .ids-radio-group__list {
11018
+ gap: var(--ids-comp-radio-group-horizontal-fieldset-list-size-gap-y-dense) var(--ids-comp-radio-group-horizontal-fieldset-list-size-gap-x-dense);
11019
+ }
11020
+ .ids-radio-group.ids-radio-group-dense.ids-radio-group-vertical > .ids-radio-group__legend > .ids-radio-group__legend-container > .ids-radio-group__legend-label {
11021
+ font-family: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-family-dense);
11022
+ font-size: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-size-dense);
11023
+ font-weight: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-weight-dense);
11024
+ line-height: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-line-height-dense);
11025
+ letter-spacing: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-letter-spacing-dense);
11026
+ }
11027
+ .ids-radio-group.ids-radio-group-dense.ids-radio-group-vertical > .ids-radio-group__list {
11028
+ gap: var(--ids-comp-radio-group-vertical-fieldset-list-size-gap-dense);
10847
11029
  }
10848
11030
  .ids-radio-group.ids-radio-group-dense .ids-radio {
10849
11031
  padding: var(--ids-comp-radio-button-container-size-padding-y-dense) var(--ids-comp-radio-button-container-size-padding-x-dense);
@@ -10852,8 +11034,8 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10852
11034
  .ids-radio-group.ids-radio-group-dense .ids-radio .ids-radio__input-wrapper .ids-radio__touch-target {
10853
11035
  top: calc((var(--ids-comp-radio-button-input-size-height-dense) - var(--ids-comp-radio-button-input-size-touchtarget-height-dense)) / 2);
10854
11036
  left: calc((var(--ids-comp-radio-button-input-size-width-dense) - var(--ids-comp-radio-button-input-size-touchtarget-width-dense)) / 2);
10855
- height: var(--ids-comp-radio-button-input-size-touchtarget-height-dense);
10856
11037
  width: var(--ids-comp-radio-button-input-size-touchtarget-width-dense);
11038
+ height: var(--ids-comp-radio-button-input-size-touchtarget-height-dense);
10857
11039
  }
10858
11040
  .ids-radio-group.ids-radio-group-dense .ids-radio .ids-radio__input-wrapper input[type=radio] {
10859
11041
  width: var(--ids-comp-radio-button-input-size-width-dense);
@@ -10870,94 +11052,106 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10870
11052
  .ids-radio-group.ids-radio-group-dense .ids-radio .ids-radio__input-wrapper input[type=radio]:focus, .ids-radio-group.ids-radio-group-dense .ids-radio .ids-radio__input-wrapper input[type=radio]:focus-visible {
10871
11053
  outline-width: var(--ids-comp-radio-focused-outline-outline-dense);
10872
11054
  }
11055
+ .ids-radio-group.ids-radio-group-dense .ids-radio .ids-radio__label-wrapper {
11056
+ gap: var(--ids-comp-radio-button-label-group-size-gap-dense);
11057
+ }
10873
11058
  .ids-radio-group.ids-radio-group-dense .ids-radio .ids-radio__label {
10874
- padding: var(--ids-comp-radio-button-label-size-padding-y-dense) 0px;
11059
+ padding: var(--ids-comp-radio-button-label-size-padding-y-dense) 0;
10875
11060
  font-family: var(--ids-comp-radio-button-label-typography-font-family-dense);
10876
11061
  font-size: var(--ids-comp-radio-button-label-typography-font-size-dense);
10877
11062
  font-weight: var(--ids-comp-radio-button-label-typography-font-weight-dense);
10878
11063
  line-height: var(--ids-comp-radio-button-label-typography-line-height-dense);
10879
11064
  letter-spacing: var(--ids-comp-radio-button-label-typography-letter-spacing-dense);
10880
11065
  }
10881
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
10882
- border-color: var(--ids-comp-radio-input-unselected-color-border-surface-hovered);
10883
- background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-hovered);
11066
+ .ids-radio-group.ids-radio-group-surface .ids-radio-group__legend-label {
11067
+ color: var(--ids-comp-radio-group-legend-color-fg-surface-default);
10884
11068
  }
10885
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled) {
11069
+ .ids-radio-group.ids-radio-group-surface.ids-radio-group-disabled .ids-radio-group__legend-label {
11070
+ color: var(--ids-comp-radio-group-legend-color-fg-surface-disabled);
11071
+ }
11072
+ .ids-radio-group .ids-radio-surface input[type=radio]:not(:disabled) {
10886
11073
  border-color: var(--ids-comp-radio-input-unselected-color-border-surface-default);
10887
11074
  background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-default);
10888
11075
  }
10889
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled):hover {
11076
+ .ids-radio-group .ids-radio-surface input[type=radio]:not(:disabled):hover {
10890
11077
  border-color: var(--ids-comp-radio-input-unselected-color-border-surface-hovered);
10891
11078
  background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-hovered);
10892
11079
  }
10893
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled):active {
11080
+ .ids-radio-group .ids-radio-surface input[type=radio]:not(:disabled):active {
10894
11081
  border-color: var(--ids-comp-radio-input-unselected-color-border-surface-pressed);
10895
11082
  background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-pressed);
10896
11083
  }
10897
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus-visible {
11084
+ .ids-radio-group .ids-radio-surface input[type=radio]:not(:disabled):focus, .ids-radio-group .ids-radio-surface input[type=radio]:not(:disabled):focus-visible {
10898
11085
  border-color: var(--ids-comp-radio-input-unselected-color-border-surface-default);
10899
11086
  background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-default);
10900
11087
  outline-color: var(--ids-comp-radio-input-unselected-color-focused-outline-surface-focused);
10901
11088
  }
10902
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:disabled {
11089
+ .ids-radio-group .ids-radio-surface input[type=radio]:disabled {
10903
11090
  border-color: var(--ids-comp-radio-input-unselected-color-border-surface-disabled);
10904
11091
  background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-disabled);
10905
11092
  }
10906
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) {
11093
+ .ids-radio-group .ids-radio-surface input[type=radio]:checked:not(:disabled) {
10907
11094
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-default);
10908
11095
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-default);
10909
11096
  }
10910
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
11097
+ .ids-radio-group .ids-radio-surface input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
10911
11098
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-default);
10912
11099
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-default);
10913
11100
  }
10914
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover {
11101
+ .ids-radio-group .ids-radio-surface input[type=radio]:checked:not(:disabled):hover {
10915
11102
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-hovered);
10916
11103
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-hovered);
10917
11104
  }
10918
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
11105
+ .ids-radio-group .ids-radio-surface input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
10919
11106
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-hovered);
10920
11107
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-hovered);
10921
11108
  }
10922
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active {
11109
+ .ids-radio-group .ids-radio-surface input[type=radio]:checked:not(:disabled):active {
10923
11110
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-pressed);
10924
11111
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-pressed);
10925
11112
  }
10926
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
11113
+ .ids-radio-group .ids-radio-surface input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
10927
11114
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-pressed);
10928
11115
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-pressed);
10929
11116
  }
10930
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible {
11117
+ .ids-radio-group .ids-radio-surface input[type=radio]:checked:not(:disabled):focus, .ids-radio-group .ids-radio-surface input[type=radio]:checked:not(:disabled):focus-visible {
10931
11118
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-default);
10932
11119
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-default);
10933
11120
  outline-color: var(--ids-comp-radio-input-selected-color-focused-outline-surface-focused);
10934
11121
  }
10935
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio__inner-circle, .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio__inner-circle {
11122
+ .ids-radio-group .ids-radio-surface input[type=radio]:checked:not(:disabled):focus + .ids-radio__inner-circle, .ids-radio-group .ids-radio-surface input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio__inner-circle {
10936
11123
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-default);
10937
11124
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-default);
10938
11125
  }
10939
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:disabled {
11126
+ .ids-radio-group .ids-radio-surface input[type=radio]:checked:disabled {
10940
11127
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-disabled);
10941
11128
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-disabled);
10942
11129
  }
10943
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:disabled + .ids-radio__inner-circle {
11130
+ .ids-radio-group .ids-radio-surface input[type=radio]:checked:disabled + .ids-radio__inner-circle {
10944
11131
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-disabled);
10945
11132
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-disabled);
10946
11133
  }
10947
- .ids-radio-group .ids-radio-surface:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
11134
+ .ids-radio-group .ids-radio-surface:not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) input[type=radio]:not(:disabled), .ids-radio-group .ids-radio-surface:not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) input[type=radio]:not(:disabled) {
11135
+ border-color: var(--ids-comp-radio-input-unselected-color-border-surface-hovered);
11136
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-hovered);
11137
+ }
11138
+ .ids-radio-group .ids-radio-surface:not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) .ids-radio__label, .ids-radio-group .ids-radio-surface:not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) .ids-radio__label {
11139
+ color: var(--ids-comp-radio-label-color-fg-surface-hovered);
11140
+ }
11141
+ .ids-radio-group .ids-radio-surface:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) input[type=radio]:not(:disabled), .ids-radio-group .ids-radio-surface:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) input[type=radio]:not(:disabled) {
10948
11142
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-hovered);
10949
11143
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-hovered);
10950
11144
  }
10951
- .ids-radio-group .ids-radio-surface:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio__inner-circle {
11145
+ .ids-radio-group .ids-radio-surface:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) input[type=radio]:not(:disabled) + .ids-radio__inner-circle, .ids-radio-group .ids-radio-surface:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) input[type=radio]:not(:disabled) + .ids-radio__inner-circle {
10952
11146
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-hovered);
10953
11147
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-hovered);
10954
11148
  }
11149
+ .ids-radio-group .ids-radio-surface:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) .ids-radio__label, .ids-radio-group .ids-radio-surface:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) .ids-radio__label {
11150
+ color: var(--ids-comp-radio-label-color-fg-surface-hovered);
11151
+ }
10955
11152
  .ids-radio-group .ids-radio-surface .ids-radio__label {
10956
11153
  color: var(--ids-comp-radio-label-color-fg-surface-default);
10957
11154
  }
10958
- .ids-radio-group .ids-radio-surface .ids-radio__label:hover {
10959
- color: var(--ids-comp-radio-label-color-fg-surface-hovered);
10960
- }
10961
11155
  .ids-radio-group .ids-radio-surface .ids-radio__label:active {
10962
11156
  color: var(--ids-comp-radio-label-color-fg-surface-pressed);
10963
11157
  }
@@ -10967,86 +11161,95 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10967
11161
  .ids-radio-group .ids-radio-surface.ids-radio-disabled .ids-radio__label {
10968
11162
  color: var(--ids-comp-radio-label-color-fg-surface-disabled);
10969
11163
  }
10970
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
10971
- border-color: var(--ids-comp-radio-input-unselected-color-border-light-hovered);
10972
- background-color: var(--ids-comp-radio-input-unselected-color-bg-light-hovered);
11164
+ .ids-radio-group.ids-radio-group-light .ids-radio-group__legend-label {
11165
+ color: var(--ids-comp-radio-group-legend-color-fg-light-default);
11166
+ }
11167
+ .ids-radio-group.ids-radio-group-light.ids-radio-group-disabled .ids-radio-group__legend-label {
11168
+ color: var(--ids-comp-radio-group-legend-color-fg-light-disabled);
10973
11169
  }
10974
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled) {
11170
+ .ids-radio-group .ids-radio-light input[type=radio]:not(:disabled) {
10975
11171
  border-color: var(--ids-comp-radio-input-unselected-color-border-light-default);
10976
11172
  background-color: var(--ids-comp-radio-input-unselected-color-bg-light-default);
10977
11173
  }
10978
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled):hover {
11174
+ .ids-radio-group .ids-radio-light input[type=radio]:not(:disabled):hover {
10979
11175
  border-color: var(--ids-comp-radio-input-unselected-color-border-light-hovered);
10980
11176
  background-color: var(--ids-comp-radio-input-unselected-color-bg-light-hovered);
10981
11177
  }
10982
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled):active {
11178
+ .ids-radio-group .ids-radio-light input[type=radio]:not(:disabled):active {
10983
11179
  border-color: var(--ids-comp-radio-input-unselected-color-border-light-pressed);
10984
11180
  background-color: var(--ids-comp-radio-input-unselected-color-bg-light-pressed);
10985
11181
  }
10986
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus-visible {
11182
+ .ids-radio-group .ids-radio-light input[type=radio]:not(:disabled):focus, .ids-radio-group .ids-radio-light input[type=radio]:not(:disabled):focus-visible {
10987
11183
  border-color: var(--ids-comp-radio-input-unselected-color-border-light-default);
10988
11184
  background-color: var(--ids-comp-radio-input-unselected-color-bg-light-default);
10989
11185
  outline-color: var(--ids-comp-radio-input-unselected-color-focused-outline-light-focused);
10990
11186
  }
10991
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:disabled {
11187
+ .ids-radio-group .ids-radio-light input[type=radio]:disabled {
10992
11188
  border-color: var(--ids-comp-radio-input-unselected-color-border-light-disabled);
10993
11189
  background-color: var(--ids-comp-radio-input-unselected-color-bg-light-disabled);
10994
11190
  }
10995
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) {
11191
+ .ids-radio-group .ids-radio-light input[type=radio]:checked:not(:disabled) {
10996
11192
  border-color: var(--ids-comp-radio-input-selected-color-border-light-default);
10997
11193
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-default);
10998
11194
  }
10999
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
11195
+ .ids-radio-group .ids-radio-light input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
11000
11196
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-default);
11001
11197
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-default);
11002
11198
  }
11003
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover {
11199
+ .ids-radio-group .ids-radio-light input[type=radio]:checked:not(:disabled):hover {
11004
11200
  border-color: var(--ids-comp-radio-input-selected-color-border-light-hovered);
11005
11201
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-hovered);
11006
11202
  }
11007
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
11203
+ .ids-radio-group .ids-radio-light input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
11008
11204
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-hovered);
11009
11205
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-hovered);
11010
11206
  }
11011
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active {
11207
+ .ids-radio-group .ids-radio-light input[type=radio]:checked:not(:disabled):active {
11012
11208
  border-color: var(--ids-comp-radio-input-selected-color-border-light-pressed);
11013
11209
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-pressed);
11014
11210
  }
11015
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
11211
+ .ids-radio-group .ids-radio-light input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
11016
11212
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-pressed);
11017
11213
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-pressed);
11018
11214
  }
11019
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible {
11215
+ .ids-radio-group .ids-radio-light input[type=radio]:checked:not(:disabled):focus, .ids-radio-group .ids-radio-light input[type=radio]:checked:not(:disabled):focus-visible {
11020
11216
  border-color: var(--ids-comp-radio-input-selected-color-border-light-default);
11021
11217
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-default);
11022
11218
  outline-color: var(--ids-comp-radio-input-selected-color-focused-outline-light-focused);
11023
11219
  }
11024
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio__inner-circle, .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio__inner-circle {
11220
+ .ids-radio-group .ids-radio-light input[type=radio]:checked:not(:disabled):focus + .ids-radio__inner-circle, .ids-radio-group .ids-radio-light input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio__inner-circle {
11025
11221
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-default);
11026
11222
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-default);
11027
11223
  }
11028
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:disabled {
11224
+ .ids-radio-group .ids-radio-light input[type=radio]:checked:disabled {
11029
11225
  border-color: var(--ids-comp-radio-input-selected-color-border-light-disabled);
11030
11226
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-disabled);
11031
11227
  }
11032
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:disabled + .ids-radio__inner-circle {
11228
+ .ids-radio-group .ids-radio-light input[type=radio]:checked:disabled + .ids-radio__inner-circle {
11033
11229
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-disabled);
11034
11230
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-disabled);
11035
11231
  }
11036
- .ids-radio-group .ids-radio-light:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
11232
+ .ids-radio-group .ids-radio-light:not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) input[type=radio]:not(:disabled), .ids-radio-group .ids-radio-light:not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) input[type=radio]:not(:disabled) {
11233
+ border-color: var(--ids-comp-radio-input-unselected-color-border-light-hovered);
11234
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-light-hovered);
11235
+ }
11236
+ .ids-radio-group .ids-radio-light:not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) .ids-radio__label, .ids-radio-group .ids-radio-light:not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) .ids-radio__label {
11237
+ color: var(--ids-comp-radio-label-color-fg-light-hovered);
11238
+ }
11239
+ .ids-radio-group .ids-radio-light:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) input[type=radio]:not(:disabled), .ids-radio-group .ids-radio-light:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) input[type=radio]:not(:disabled) {
11037
11240
  border-color: var(--ids-comp-radio-input-selected-color-border-light-hovered);
11038
11241
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-hovered);
11039
11242
  }
11040
- .ids-radio-group .ids-radio-light:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio__inner-circle {
11243
+ .ids-radio-group .ids-radio-light:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) input[type=radio]:not(:disabled) + .ids-radio__inner-circle, .ids-radio-group .ids-radio-light:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) input[type=radio]:not(:disabled) + .ids-radio__inner-circle {
11041
11244
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-hovered);
11042
11245
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-hovered);
11043
11246
  }
11247
+ .ids-radio-group .ids-radio-light:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) .ids-radio__label, .ids-radio-group .ids-radio-light:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) .ids-radio__label {
11248
+ color: var(--ids-comp-radio-label-color-fg-light-hovered);
11249
+ }
11044
11250
  .ids-radio-group .ids-radio-light .ids-radio__label {
11045
11251
  color: var(--ids-comp-radio-label-color-fg-light-default);
11046
11252
  }
11047
- .ids-radio-group .ids-radio-light .ids-radio__label:hover {
11048
- color: var(--ids-comp-radio-label-color-fg-light-hovered);
11049
- }
11050
11253
  .ids-radio-group .ids-radio-light .ids-radio__label:active {
11051
11254
  color: var(--ids-comp-radio-label-color-fg-light-pressed);
11052
11255
  }
@@ -11056,86 +11259,95 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
11056
11259
  .ids-radio-group .ids-radio-light.ids-radio-disabled .ids-radio__label {
11057
11260
  color: var(--ids-comp-radio-label-color-fg-light-disabled);
11058
11261
  }
11059
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
11060
- border-color: var(--ids-comp-radio-input-unselected-color-border-dark-hovered);
11061
- background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-hovered);
11262
+ .ids-radio-group.ids-radio-group-dark .ids-radio-group__legend-label {
11263
+ color: var(--ids-comp-radio-group-legend-color-fg-dark-default);
11264
+ }
11265
+ .ids-radio-group.ids-radio-group-dark.ids-radio-group-disabled .ids-radio-group__legend-label {
11266
+ color: var(--ids-comp-radio-group-legend-color-fg-dark-disabled);
11062
11267
  }
11063
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled) {
11268
+ .ids-radio-group .ids-radio-dark input[type=radio]:not(:disabled) {
11064
11269
  border-color: var(--ids-comp-radio-input-unselected-color-border-dark-default);
11065
11270
  background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-default);
11066
11271
  }
11067
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled):hover {
11272
+ .ids-radio-group .ids-radio-dark input[type=radio]:not(:disabled):hover {
11068
11273
  border-color: var(--ids-comp-radio-input-unselected-color-border-dark-hovered);
11069
11274
  background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-hovered);
11070
11275
  }
11071
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled):active {
11276
+ .ids-radio-group .ids-radio-dark input[type=radio]:not(:disabled):active {
11072
11277
  border-color: var(--ids-comp-radio-input-unselected-color-border-dark-pressed);
11073
11278
  background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-pressed);
11074
11279
  }
11075
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus-visible {
11280
+ .ids-radio-group .ids-radio-dark input[type=radio]:not(:disabled):focus, .ids-radio-group .ids-radio-dark input[type=radio]:not(:disabled):focus-visible {
11076
11281
  border-color: var(--ids-comp-radio-input-unselected-color-border-dark-default);
11077
11282
  background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-default);
11078
11283
  outline-color: var(--ids-comp-radio-input-unselected-color-focused-outline-dark-focused);
11079
11284
  }
11080
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:disabled {
11285
+ .ids-radio-group .ids-radio-dark input[type=radio]:disabled {
11081
11286
  border-color: var(--ids-comp-radio-input-unselected-color-border-dark-disabled);
11082
11287
  background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-disabled);
11083
11288
  }
11084
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) {
11289
+ .ids-radio-group .ids-radio-dark input[type=radio]:checked:not(:disabled) {
11085
11290
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-default);
11086
11291
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-default);
11087
11292
  }
11088
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
11293
+ .ids-radio-group .ids-radio-dark input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
11089
11294
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-default);
11090
11295
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-default);
11091
11296
  }
11092
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover {
11297
+ .ids-radio-group .ids-radio-dark input[type=radio]:checked:not(:disabled):hover {
11093
11298
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-hovered);
11094
11299
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-hovered);
11095
11300
  }
11096
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
11301
+ .ids-radio-group .ids-radio-dark input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
11097
11302
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-hovered);
11098
11303
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-hovered);
11099
11304
  }
11100
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active {
11305
+ .ids-radio-group .ids-radio-dark input[type=radio]:checked:not(:disabled):active {
11101
11306
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-pressed);
11102
11307
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-pressed);
11103
11308
  }
11104
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
11309
+ .ids-radio-group .ids-radio-dark input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
11105
11310
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-pressed);
11106
11311
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-pressed);
11107
11312
  }
11108
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible {
11313
+ .ids-radio-group .ids-radio-dark input[type=radio]:checked:not(:disabled):focus, .ids-radio-group .ids-radio-dark input[type=radio]:checked:not(:disabled):focus-visible {
11109
11314
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-default);
11110
11315
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-default);
11111
11316
  outline-color: var(--ids-comp-radio-input-selected-color-focused-outline-dark-focused);
11112
11317
  }
11113
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio__inner-circle, .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio__inner-circle {
11318
+ .ids-radio-group .ids-radio-dark input[type=radio]:checked:not(:disabled):focus + .ids-radio__inner-circle, .ids-radio-group .ids-radio-dark input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio__inner-circle {
11114
11319
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-default);
11115
11320
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-default);
11116
11321
  }
11117
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:disabled {
11322
+ .ids-radio-group .ids-radio-dark input[type=radio]:checked:disabled {
11118
11323
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-disabled);
11119
11324
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-disabled);
11120
11325
  }
11121
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:disabled + .ids-radio__inner-circle {
11326
+ .ids-radio-group .ids-radio-dark input[type=radio]:checked:disabled + .ids-radio__inner-circle {
11122
11327
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-disabled);
11123
11328
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-disabled);
11124
11329
  }
11125
- .ids-radio-group .ids-radio-dark:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
11330
+ .ids-radio-group .ids-radio-dark:not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) input[type=radio]:not(:disabled), .ids-radio-group .ids-radio-dark:not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) input[type=radio]:not(:disabled) {
11331
+ border-color: var(--ids-comp-radio-input-unselected-color-border-dark-hovered);
11332
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-hovered);
11333
+ }
11334
+ .ids-radio-group .ids-radio-dark:not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) .ids-radio__label, .ids-radio-group .ids-radio-dark:not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) .ids-radio__label {
11335
+ color: var(--ids-comp-radio-label-color-fg-dark-hovered);
11336
+ }
11337
+ .ids-radio-group .ids-radio-dark:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) input[type=radio]:not(:disabled), .ids-radio-group .ids-radio-dark:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) input[type=radio]:not(:disabled) {
11126
11338
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-hovered);
11127
11339
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-hovered);
11128
11340
  }
11129
- .ids-radio-group .ids-radio-dark:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio__inner-circle {
11341
+ .ids-radio-group .ids-radio-dark:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) input[type=radio]:not(:disabled) + .ids-radio__inner-circle, .ids-radio-group .ids-radio-dark:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) input[type=radio]:not(:disabled) + .ids-radio__inner-circle {
11130
11342
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-hovered);
11131
11343
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-hovered);
11132
11344
  }
11345
+ .ids-radio-group .ids-radio-dark:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) .ids-radio__label, .ids-radio-group .ids-radio-dark:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) .ids-radio__label {
11346
+ color: var(--ids-comp-radio-label-color-fg-dark-hovered);
11347
+ }
11133
11348
  .ids-radio-group .ids-radio-dark .ids-radio__label {
11134
11349
  color: var(--ids-comp-radio-label-color-fg-dark-default);
11135
11350
  }
11136
- .ids-radio-group .ids-radio-dark .ids-radio__label:hover {
11137
- color: var(--ids-comp-radio-label-color-fg-dark-hovered);
11138
- }
11139
11351
  .ids-radio-group .ids-radio-dark .ids-radio__label:active {
11140
11352
  color: var(--ids-comp-radio-label-color-fg-dark-pressed);
11141
11353
  }
@@ -11145,186 +11357,204 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
11145
11357
  .ids-radio-group .ids-radio-dark.ids-radio-disabled .ids-radio__label {
11146
11358
  color: var(--ids-comp-radio-label-color-fg-dark-disabled);
11147
11359
  }
11148
- .ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
11149
- border-color: var(--ids-comp-radio-input-unselected-color-border-surface-error-hovered);
11150
- background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-hovered);
11151
- }
11152
- .ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled) {
11360
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:not(:disabled) {
11153
11361
  border-color: var(--ids-comp-radio-input-unselected-color-border-surface-error-default);
11154
11362
  background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-default);
11155
11363
  }
11156
- .ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled):hover, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled):hover {
11364
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:not(:disabled):hover {
11157
11365
  border-color: var(--ids-comp-radio-input-unselected-color-border-surface-error-hovered);
11158
11366
  background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-hovered);
11159
11367
  }
11160
- .ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled):active, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled):active {
11368
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:not(:disabled):active {
11161
11369
  border-color: var(--ids-comp-radio-input-unselected-color-border-surface-error-pressed);
11162
11370
  background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-pressed);
11163
11371
  }
11164
- .ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus-visible, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus-visible {
11372
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:not(:disabled):focus-visible {
11165
11373
  border-color: var(--ids-comp-radio-input-unselected-color-border-surface-error-default);
11166
11374
  background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-default);
11167
11375
  }
11168
- .ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) {
11376
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:checked:not(:disabled) {
11169
11377
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-error-default);
11170
11378
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-default);
11171
11379
  }
11172
- .ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
11380
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
11173
11381
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-error-default);
11174
11382
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-error-default);
11175
11383
  }
11176
- .ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover {
11384
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:checked:not(:disabled):hover {
11177
11385
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-error-hovered);
11178
11386
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-hovered);
11179
11387
  }
11180
- .ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
11388
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
11181
11389
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-error-hovered);
11182
11390
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-error-hovered);
11183
11391
  }
11184
- .ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active {
11392
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:checked:not(:disabled):active {
11185
11393
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-error-pressed);
11186
11394
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-pressed);
11187
11395
  }
11188
- .ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
11396
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
11189
11397
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-error-pressed);
11190
11398
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-error-pressed);
11191
11399
  }
11192
- .ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible {
11400
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:checked:not(:disabled):focus-visible {
11193
11401
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-error-default);
11194
11402
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-default);
11195
11403
  }
11196
- .ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio__inner-circle, .ids-radio-group.ng-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio__inner-circle {
11404
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:checked:not(:disabled):focus + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio__inner-circle {
11197
11405
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-error-default);
11198
11406
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-error-default);
11199
11407
  }
11200
- .ids-radio-group.ng-invalid .ids-radio-surface:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-surface:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
11408
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface:not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-surface:not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) input[type=radio]:not(:disabled) {
11409
+ border-color: var(--ids-comp-radio-input-unselected-color-border-surface-error-hovered);
11410
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-hovered);
11411
+ }
11412
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface:not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) .ids-radio__label, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface:not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) .ids-radio__label {
11413
+ color: var(--ids-comp-radio-label-color-fg-surface-hovered);
11414
+ }
11415
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-surface:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) input[type=radio]:not(:disabled) {
11201
11416
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-error-hovered);
11202
11417
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-hovered);
11203
11418
  }
11204
- .ids-radio-group.ng-invalid .ids-radio-surface:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio__inner-circle {
11419
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) input[type=radio]:not(:disabled) + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) input[type=radio]:not(:disabled) + .ids-radio__inner-circle {
11205
11420
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-error-hovered);
11206
11421
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-error-hovered);
11207
11422
  }
11208
- .ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
11209
- border-color: var(--ids-comp-radio-input-unselected-color-border-light-error-hovered);
11210
- background-color: var(--ids-comp-radio-input-unselected-color-bg-light-hovered);
11423
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) .ids-radio__label, .ids-radio-group.ids-radio-group-invalid .ids-radio-surface:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) .ids-radio__label {
11424
+ color: var(--ids-comp-radio-label-color-fg-surface-hovered);
11211
11425
  }
11212
- .ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled) {
11426
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:not(:disabled) {
11213
11427
  border-color: var(--ids-comp-radio-input-unselected-color-border-light-error-default);
11214
11428
  background-color: var(--ids-comp-radio-input-unselected-color-bg-light-default);
11215
11429
  }
11216
- .ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled):hover, .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled):hover {
11430
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:not(:disabled):hover {
11217
11431
  border-color: var(--ids-comp-radio-input-unselected-color-border-light-error-hovered);
11218
11432
  background-color: var(--ids-comp-radio-input-unselected-color-bg-light-hovered);
11219
11433
  }
11220
- .ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled):active, .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled):active {
11434
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:not(:disabled):active {
11221
11435
  border-color: var(--ids-comp-radio-input-unselected-color-border-light-error-pressed);
11222
11436
  background-color: var(--ids-comp-radio-input-unselected-color-bg-light-pressed);
11223
11437
  }
11224
- .ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus-visible, .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus-visible {
11438
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:not(:disabled):focus-visible {
11225
11439
  border-color: var(--ids-comp-radio-input-unselected-color-border-light-error-default);
11226
11440
  background-color: var(--ids-comp-radio-input-unselected-color-bg-light-default);
11227
11441
  }
11228
- .ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) {
11442
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:checked:not(:disabled) {
11229
11443
  border-color: var(--ids-comp-radio-input-selected-color-border-light-error-default);
11230
11444
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-default);
11231
11445
  }
11232
- .ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
11446
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
11233
11447
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-error-default);
11234
11448
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-error-default);
11235
11449
  }
11236
- .ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover, .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover {
11450
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:checked:not(:disabled):hover {
11237
11451
  border-color: var(--ids-comp-radio-input-selected-color-border-light-error-hovered);
11238
11452
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-hovered);
11239
11453
  }
11240
- .ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
11454
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
11241
11455
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-error-hovered);
11242
11456
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-error-hovered);
11243
11457
  }
11244
- .ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active, .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active {
11458
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:checked:not(:disabled):active {
11245
11459
  border-color: var(--ids-comp-radio-input-selected-color-border-light-error-pressed);
11246
11460
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-pressed);
11247
11461
  }
11248
- .ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
11462
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
11249
11463
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-error-pressed);
11250
11464
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-error-pressed);
11251
11465
  }
11252
- .ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible, .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible {
11466
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:checked:not(:disabled):focus-visible {
11253
11467
  border-color: var(--ids-comp-radio-input-selected-color-border-light-error-default);
11254
11468
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-default);
11255
11469
  }
11256
- .ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio__inner-circle, .ids-radio-group.ng-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio__inner-circle {
11470
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:checked:not(:disabled):focus + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio__inner-circle {
11257
11471
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-error-default);
11258
11472
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-error-default);
11259
11473
  }
11260
- .ids-radio-group.ng-invalid .ids-radio-light:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-light:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
11474
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light:not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-light:not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) input[type=radio]:not(:disabled) {
11475
+ border-color: var(--ids-comp-radio-input-unselected-color-border-light-error-hovered);
11476
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-light-hovered);
11477
+ }
11478
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light:not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) .ids-radio__label, .ids-radio-group.ids-radio-group-invalid .ids-radio-light:not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) .ids-radio__label {
11479
+ color: var(--ids-comp-radio-label-color-fg-light-hovered);
11480
+ }
11481
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-light:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) input[type=radio]:not(:disabled) {
11261
11482
  border-color: var(--ids-comp-radio-input-selected-color-border-light-error-hovered);
11262
11483
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-hovered);
11263
11484
  }
11264
- .ids-radio-group.ng-invalid .ids-radio-light:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-light:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio__inner-circle {
11485
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) input[type=radio]:not(:disabled) + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-light:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) input[type=radio]:not(:disabled) + .ids-radio__inner-circle {
11265
11486
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-error-hovered);
11266
11487
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-error-hovered);
11267
11488
  }
11268
- .ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
11269
- border-color: var(--ids-comp-radio-input-unselected-color-border-dark-error-hovered);
11270
- background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-hovered);
11489
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) .ids-radio__label, .ids-radio-group.ids-radio-group-invalid .ids-radio-light:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) .ids-radio__label {
11490
+ color: var(--ids-comp-radio-label-color-fg-light-hovered);
11271
11491
  }
11272
- .ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled) {
11492
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:not(:disabled) {
11273
11493
  border-color: var(--ids-comp-radio-input-unselected-color-border-dark-error-default);
11274
11494
  background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-default);
11275
11495
  }
11276
- .ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled):hover, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled):hover {
11496
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:not(:disabled):hover {
11277
11497
  border-color: var(--ids-comp-radio-input-unselected-color-border-dark-error-hovered);
11278
11498
  background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-hovered);
11279
11499
  }
11280
- .ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled):active, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled):active {
11500
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:not(:disabled):active {
11281
11501
  border-color: var(--ids-comp-radio-input-unselected-color-border-dark-error-pressed);
11282
11502
  background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-pressed);
11283
11503
  }
11284
- .ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus-visible, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled):focus-visible {
11504
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:not(:disabled):focus-visible {
11285
11505
  border-color: var(--ids-comp-radio-input-unselected-color-border-dark-error-default);
11286
11506
  background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-default);
11287
11507
  }
11288
- .ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) {
11508
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:checked:not(:disabled) {
11289
11509
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-error-default);
11290
11510
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-default);
11291
11511
  }
11292
- .ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
11512
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
11293
11513
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-error-default);
11294
11514
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-error-default);
11295
11515
  }
11296
- .ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover {
11516
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:checked:not(:disabled):hover {
11297
11517
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-error-hovered);
11298
11518
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-hovered);
11299
11519
  }
11300
- .ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
11520
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
11301
11521
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-error-hovered);
11302
11522
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-error-hovered);
11303
11523
  }
11304
- .ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active {
11524
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:checked:not(:disabled):active {
11305
11525
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-error-pressed);
11306
11526
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-pressed);
11307
11527
  }
11308
- .ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
11528
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
11309
11529
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-error-pressed);
11310
11530
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-error-pressed);
11311
11531
  }
11312
- .ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible {
11532
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:checked:not(:disabled):focus-visible {
11313
11533
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-error-default);
11314
11534
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-default);
11315
11535
  }
11316
- .ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio__inner-circle, .ids-radio-group.ng-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio__inner-circle {
11536
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:checked:not(:disabled):focus + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio__inner-circle {
11317
11537
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-error-default);
11318
11538
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-error-default);
11319
11539
  }
11320
- .ids-radio-group.ng-invalid .ids-radio-dark:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-dark:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
11540
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark:not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-dark:not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) input[type=radio]:not(:disabled) {
11541
+ border-color: var(--ids-comp-radio-input-unselected-color-border-dark-error-hovered);
11542
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-hovered);
11543
+ }
11544
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark:not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) .ids-radio__label, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark:not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) .ids-radio__label {
11545
+ color: var(--ids-comp-radio-label-color-fg-dark-hovered);
11546
+ }
11547
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-dark:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) input[type=radio]:not(:disabled) {
11321
11548
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-error-hovered);
11322
11549
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-hovered);
11323
11550
  }
11324
- .ids-radio-group.ng-invalid .ids-radio-dark:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark:has(input[type=radio]:checked) .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio__inner-circle {
11551
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) input[type=radio]:not(:disabled) + .ids-radio__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) input[type=radio]:not(:disabled) + .ids-radio__inner-circle {
11325
11552
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-error-hovered);
11326
11553
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-error-hovered);
11327
11554
  }
11555
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__label-wrapper:hover) .ids-radio__label, .ids-radio-group.ids-radio-group-invalid .ids-radio-dark:has(input[type=radio]:checked):not(.ids-radio-disabled):has(.ids-radio__touch-target:hover) .ids-radio__label {
11556
+ color: var(--ids-comp-radio-label-color-fg-dark-hovered);
11557
+ }
11328
11558
 
11329
11559
  .ids-segmented-control {
11330
11560
  box-sizing: border-box;
@@ -13976,6 +14206,9 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
13976
14206
  font-style: normal;
13977
14207
  flex-grow: 1;
13978
14208
  }
14209
+ .ids-switch:not(.ids-switch-disabled) > .ids-switch__label {
14210
+ cursor: pointer;
14211
+ }
13979
14212
  .ids-switch.ids-switch-label-right {
13980
14213
  flex-direction: row;
13981
14214
  }
@@ -14197,21 +14430,6 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
14197
14430
  .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button + .ids-switch__label {
14198
14431
  color: var(--ids-comp-switch-label-color-fg-surface-default);
14199
14432
  }
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
14433
  .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button:active > .ids-switch__track {
14216
14434
  background-color: var(--ids-comp-switch-track-off-color-bg-surface-pressed);
14217
14435
  }
@@ -14245,6 +14463,21 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
14245
14463
  .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
14464
  color: var(--ids-comp-switch-label-color-fg-surface-focused);
14247
14465
  }
14466
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled):hover > .ids-switch__button > .ids-switch__track {
14467
+ background-color: var(--ids-comp-switch-track-off-color-bg-surface-hovered);
14468
+ }
14469
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled):hover > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
14470
+ color: var(--ids-comp-switch-track-off-color-fg-icon-surface-default);
14471
+ }
14472
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled):hover > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
14473
+ background-color: var(--ids-comp-switch-handle-off-color-bg-surface-default);
14474
+ }
14475
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled):hover > .ids-switch__button > .ids-switch__track > .ids-switch__handle > .ids-icon {
14476
+ color: var(--ids-comp-switch-handle-off-color-fg-icon-surface-default);
14477
+ }
14478
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled):hover > .ids-switch__label {
14479
+ color: var(--ids-comp-switch-label-color-fg-surface-hovered);
14480
+ }
14248
14481
  .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button > .ids-switch__track {
14249
14482
  background-color: var(--ids-comp-switch-track-on-color-bg-surface-default);
14250
14483
  }
@@ -14257,18 +14490,21 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
14257
14490
  .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__handle > .ids-icon {
14258
14491
  color: var(--ids-comp-switch-handle-on-color-fg-icon-surface-default);
14259
14492
  }
14260
- .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track {
14493
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on:hover > .ids-switch__button > .ids-switch__track {
14261
14494
  background-color: var(--ids-comp-switch-track-on-color-bg-surface-hovered);
14262
14495
  }
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 {
14496
+ .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
14497
  color: var(--ids-comp-switch-track-on-color-fg-icon-surface-default);
14265
14498
  }
14266
- .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track > .ids-switch__handle {
14499
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on:hover > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
14267
14500
  background-color: var(--ids-comp-switch-handle-on-color-bg-surface-default);
14268
14501
  }
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 {
14502
+ .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
14503
  color: var(--ids-comp-switch-handle-on-color-fg-icon-surface-default);
14271
14504
  }
14505
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on:hover > .ids-switch__label {
14506
+ color: var(--ids-comp-switch-label-color-fg-surface-hovered);
14507
+ }
14272
14508
  .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:active > .ids-switch__track {
14273
14509
  background-color: var(--ids-comp-switch-track-on-color-bg-surface-pressed);
14274
14510
  }
@@ -14335,21 +14571,6 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
14335
14571
  .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button + .ids-switch__label {
14336
14572
  color: var(--ids-comp-switch-label-color-fg-light-default);
14337
14573
  }
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
14574
  .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button:active > .ids-switch__track {
14354
14575
  background-color: var(--ids-comp-switch-track-off-color-bg-light-pressed);
14355
14576
  }
@@ -14383,6 +14604,21 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
14383
14604
  .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
14605
  color: var(--ids-comp-switch-label-color-fg-light-focused);
14385
14606
  }
14607
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled):hover > .ids-switch__button > .ids-switch__track {
14608
+ background-color: var(--ids-comp-switch-track-off-color-bg-light-hovered);
14609
+ }
14610
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled):hover > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
14611
+ color: var(--ids-comp-switch-track-off-color-fg-icon-light-default);
14612
+ }
14613
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled):hover > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
14614
+ background-color: var(--ids-comp-switch-handle-off-color-bg-light-default);
14615
+ }
14616
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled):hover > .ids-switch__button > .ids-switch__track > .ids-switch__handle > .ids-icon {
14617
+ color: var(--ids-comp-switch-handle-off-color-fg-icon-light-default);
14618
+ }
14619
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled):hover > .ids-switch__label {
14620
+ color: var(--ids-comp-switch-label-color-fg-light-hovered);
14621
+ }
14386
14622
  .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button > .ids-switch__track {
14387
14623
  background-color: var(--ids-comp-switch-track-on-color-bg-light-default);
14388
14624
  }
@@ -14395,18 +14631,21 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
14395
14631
  .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__handle > .ids-icon {
14396
14632
  color: var(--ids-comp-switch-handle-on-color-fg-icon-light-default);
14397
14633
  }
14398
- .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track {
14634
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on:hover > .ids-switch__button > .ids-switch__track {
14399
14635
  background-color: var(--ids-comp-switch-track-on-color-bg-light-hovered);
14400
14636
  }
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 {
14637
+ .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
14638
  color: var(--ids-comp-switch-track-on-color-fg-icon-light-default);
14403
14639
  }
14404
- .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track > .ids-switch__handle {
14640
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on:hover > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
14405
14641
  background-color: var(--ids-comp-switch-handle-on-color-bg-light-default);
14406
14642
  }
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 {
14643
+ .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
14644
  color: var(--ids-comp-switch-handle-on-color-fg-icon-light-default);
14409
14645
  }
14646
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on:hover > .ids-switch__label {
14647
+ color: var(--ids-comp-switch-label-color-fg-light-hovered);
14648
+ }
14410
14649
  .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:active > .ids-switch__track {
14411
14650
  background-color: var(--ids-comp-switch-track-on-color-bg-light-pressed);
14412
14651
  }
@@ -14473,21 +14712,6 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
14473
14712
  .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button + .ids-switch__label {
14474
14713
  color: var(--ids-comp-switch-label-color-fg-primary-default);
14475
14714
  }
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
14715
  .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button:active > .ids-switch__track {
14492
14716
  background-color: var(--ids-comp-switch-track-off-color-bg-primary-pressed);
14493
14717
  }
@@ -14521,6 +14745,21 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
14521
14745
  .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
14746
  color: var(--ids-comp-switch-label-color-fg-primary-focused);
14523
14747
  }
14748
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled):hover > .ids-switch__button > .ids-switch__track {
14749
+ background-color: var(--ids-comp-switch-track-off-color-bg-primary-hovered);
14750
+ }
14751
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled):hover > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
14752
+ color: var(--ids-comp-switch-track-off-color-fg-icon-primary-default);
14753
+ }
14754
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled):hover > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
14755
+ background-color: var(--ids-comp-switch-handle-off-color-bg-primary-default);
14756
+ }
14757
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled):hover > .ids-switch__button > .ids-switch__track > .ids-switch__handle > .ids-icon {
14758
+ color: var(--ids-comp-switch-handle-off-color-fg-icon-primary-default);
14759
+ }
14760
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled):hover > .ids-switch__label {
14761
+ color: var(--ids-comp-switch-label-color-fg-primary-hovered);
14762
+ }
14524
14763
  .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button > .ids-switch__track {
14525
14764
  background-color: var(--ids-comp-switch-track-on-color-bg-primary-default);
14526
14765
  }
@@ -14533,18 +14772,21 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
14533
14772
  .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__handle > .ids-icon {
14534
14773
  color: var(--ids-comp-switch-handle-on-color-fg-icon-primary-default);
14535
14774
  }
14536
- .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track {
14775
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on:hover > .ids-switch__button > .ids-switch__track {
14537
14776
  background-color: var(--ids-comp-switch-track-on-color-bg-primary-hovered);
14538
14777
  }
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 {
14778
+ .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
14779
  color: var(--ids-comp-switch-track-on-color-fg-icon-primary-default);
14541
14780
  }
14542
- .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track > .ids-switch__handle {
14781
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on:hover > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
14543
14782
  background-color: var(--ids-comp-switch-handle-on-color-bg-primary-default);
14544
14783
  }
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 {
14784
+ .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
14785
  color: var(--ids-comp-switch-handle-on-color-fg-icon-primary-default);
14547
14786
  }
14787
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on:hover > .ids-switch__label {
14788
+ color: var(--ids-comp-switch-label-color-fg-primary-hovered);
14789
+ }
14548
14790
  .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:active > .ids-switch__track {
14549
14791
  background-color: var(--ids-comp-switch-track-on-color-bg-primary-pressed);
14550
14792
  }
@@ -14599,6 +14841,9 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
14599
14841
  .ids-switch.ids-switch-disabled {
14600
14842
  cursor: not-allowed;
14601
14843
  }
14844
+ .ids-switch.ids-switch-disabled > .ids-switch__label {
14845
+ cursor: not-allowed;
14846
+ }
14602
14847
 
14603
14848
  .ids-tab-group {
14604
14849
  box-sizing: border-box;