@i-cell/ids-styles 0.0.69 → 0.0.71

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/dist/autocomplete/autocomplete.css +4 -2
  2. package/dist/autocomplete/autocomplete.min.css +1 -1
  3. package/dist/autocomplete/autocomplete.plugin.js +8 -1
  4. package/dist/checkbox/checkbox-group.css +40 -12
  5. package/dist/checkbox/checkbox-group.min.css +1 -1
  6. package/dist/checkbox/checkbox-group.plugin.js +40 -12
  7. package/dist/checkbox/checkbox.css +117 -99
  8. package/dist/checkbox/checkbox.min.css +1 -1
  9. package/dist/checkbox/checkbox.plugin.js +139 -124
  10. package/dist/components.css +519 -333
  11. package/dist/components.min.css +1 -1
  12. package/dist/components.plugin.js +634 -464
  13. package/dist/dialog/dialog.css +10 -6
  14. package/dist/dialog/dialog.min.css +1 -1
  15. package/dist/dialog/dialog.plugin.js +10 -4
  16. package/dist/option/option.css +1 -0
  17. package/dist/option/option.min.css +1 -1
  18. package/dist/option/option.plugin.js +8 -1
  19. package/dist/radio/radio.css +346 -213
  20. package/dist/radio/radio.min.css +1 -1
  21. package/dist/radio/radio.plugin.js +421 -321
  22. package/dist/side-sheet/side-sheet.css +1 -1
  23. package/dist/side-sheet/side-sheet.min.css +1 -1
  24. package/dist/side-sheet/side-sheet.plugin.js +8 -1
  25. package/package.json +1 -1
package/dist/components.css CHANGED
@@ -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__legend > .ids-checkbox-group__legend-label {
3538
+ .ids-checkbox-group > .ids-checkbox-group__legend-wrapper > .ids-checkbox-group__legend-label {
3537
3539
  font-style: normal;
3538
3540
  }
3539
3541
  .ids-checkbox-group > .ids-checkbox-group__list {
@@ -3551,10 +3553,17 @@ input[autocomplete] {
3551
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);
3552
3554
  gap: var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-compact);
3553
3555
  }
3554
- .ids-checkbox-group.ids-checkbox-group-compact > .ids-checkbox-group__legend {
3556
+ .ids-checkbox-group.ids-checkbox-group-compact > .ids-checkbox-group__legend-wrapper {
3557
+ display: flex;
3558
+ flex-direction: column;
3555
3559
  gap: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-compact);
3556
3560
  }
3557
- .ids-checkbox-group.ids-checkbox-group-compact > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
3561
+ .ids-checkbox-group.ids-checkbox-group-compact > .ids-checkbox-group__legend-wrapper > .ids-checkbox-group__legend-container {
3562
+ display: flex;
3563
+ flex-direction: row;
3564
+ gap: var(--ids-comp-checkbox-label-size-gap-compact);
3565
+ }
3566
+ .ids-checkbox-group.ids-checkbox-group-compact > .ids-checkbox-group__legend-wrapper > .ids-checkbox-group__legend-label {
3558
3567
  font-family: var(--ids-comp-checkbox-group-label-typography-font-family-compact);
3559
3568
  font-size: var(--ids-comp-checkbox-group-label-typography-font-size-compact);
3560
3569
  font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-compact);
@@ -3581,10 +3590,17 @@ input[autocomplete] {
3581
3590
  padding: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-comfortable);
3582
3591
  gap: var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-comfortable);
3583
3592
  }
3584
- .ids-checkbox-group.ids-checkbox-group-comfortable > .ids-checkbox-group__legend {
3593
+ .ids-checkbox-group.ids-checkbox-group-comfortable > .ids-checkbox-group__legend-wrapper {
3594
+ display: flex;
3595
+ flex-direction: column;
3585
3596
  gap: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-comfortable);
3586
3597
  }
3587
- .ids-checkbox-group.ids-checkbox-group-comfortable > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
3598
+ .ids-checkbox-group.ids-checkbox-group-comfortable > .ids-checkbox-group__legend-wrapper > .ids-checkbox-group__legend-container {
3599
+ display: flex;
3600
+ flex-direction: row;
3601
+ gap: var(--ids-comp-checkbox-label-size-gap-comfortable);
3602
+ }
3603
+ .ids-checkbox-group.ids-checkbox-group-comfortable > .ids-checkbox-group__legend-wrapper > .ids-checkbox-group__legend-label {
3588
3604
  font-family: var(--ids-comp-checkbox-group-label-typography-font-family-comfortable);
3589
3605
  font-size: var(--ids-comp-checkbox-group-label-typography-font-size-comfortable);
3590
3606
  font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-comfortable);
@@ -3611,10 +3627,17 @@ input[autocomplete] {
3611
3627
  padding: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-spacious);
3612
3628
  gap: var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-spacious);
3613
3629
  }
3614
- .ids-checkbox-group.ids-checkbox-group-spacious > .ids-checkbox-group__legend {
3630
+ .ids-checkbox-group.ids-checkbox-group-spacious > .ids-checkbox-group__legend-wrapper {
3631
+ display: flex;
3632
+ flex-direction: column;
3615
3633
  gap: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-spacious);
3616
3634
  }
3617
- .ids-checkbox-group.ids-checkbox-group-spacious > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
3635
+ .ids-checkbox-group.ids-checkbox-group-spacious > .ids-checkbox-group__legend-wrapper > .ids-checkbox-group__legend-container {
3636
+ display: flex;
3637
+ flex-direction: row;
3638
+ gap: var(--ids-comp-checkbox-label-size-gap-spacious);
3639
+ }
3640
+ .ids-checkbox-group.ids-checkbox-group-spacious > .ids-checkbox-group__legend-wrapper > .ids-checkbox-group__legend-label {
3618
3641
  font-family: var(--ids-comp-checkbox-group-label-typography-font-family-spacious);
3619
3642
  font-size: var(--ids-comp-checkbox-group-label-typography-font-size-spacious);
3620
3643
  font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-spacious);
@@ -3641,10 +3664,17 @@ input[autocomplete] {
3641
3664
  padding: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-dense);
3642
3665
  gap: var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-dense);
3643
3666
  }
3644
- .ids-checkbox-group.ids-checkbox-group-dense > .ids-checkbox-group__legend {
3667
+ .ids-checkbox-group.ids-checkbox-group-dense > .ids-checkbox-group__legend-wrapper {
3668
+ display: flex;
3669
+ flex-direction: column;
3645
3670
  gap: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-dense);
3646
3671
  }
3647
- .ids-checkbox-group.ids-checkbox-group-dense > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
3672
+ .ids-checkbox-group.ids-checkbox-group-dense > .ids-checkbox-group__legend-wrapper > .ids-checkbox-group__legend-container {
3673
+ display: flex;
3674
+ flex-direction: row;
3675
+ gap: var(--ids-comp-checkbox-label-size-gap-dense);
3676
+ }
3677
+ .ids-checkbox-group.ids-checkbox-group-dense > .ids-checkbox-group__legend-wrapper > .ids-checkbox-group__legend-label {
3648
3678
  font-family: var(--ids-comp-checkbox-group-label-typography-font-family-dense);
3649
3679
  font-size: var(--ids-comp-checkbox-group-label-typography-font-size-dense);
3650
3680
  font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-dense);
@@ -3667,13 +3697,13 @@ input[autocomplete] {
3667
3697
  padding: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-dense);
3668
3698
  gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-dense);
3669
3699
  }
3670
- .ids-checkbox-group.ids-checkbox-group-light > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
3700
+ .ids-checkbox-group.ids-checkbox-group-light > .ids-checkbox-group__legend-wrapper > .ids-checkbox-group__legend-label {
3671
3701
  color: var(--ids-comp-checkbox-label-color-fg-light-default);
3672
3702
  }
3673
- .ids-checkbox-group.ids-checkbox-group-dark > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
3703
+ .ids-checkbox-group.ids-checkbox-group-dark > .ids-checkbox-group__legend-wrapper > .ids-checkbox-group__legend-label {
3674
3704
  color: var(--ids-comp-checkbox-label-color-fg-dark-default);
3675
3705
  }
3676
- .ids-checkbox-group.ids-checkbox-group-surface > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
3706
+ .ids-checkbox-group.ids-checkbox-group-surface > .ids-checkbox-group__legend-wrapper > .ids-checkbox-group__legend-label {
3677
3707
  color: var(--ids-comp-checkbox-label-color-fg-surface-default);
3678
3708
  }
3679
3709
 
@@ -3728,6 +3758,8 @@ input[autocomplete] {
3728
3758
  }
3729
3759
  .ids-checkbox .ids-checkbox__label-wrapper .ids-checkbox__label-container {
3730
3760
  text-align: start;
3761
+ display: flex;
3762
+ flex-direction: row;
3731
3763
  }
3732
3764
  .ids-checkbox .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
3733
3765
  font-style: normal;
@@ -3776,6 +3808,7 @@ input[autocomplete] {
3776
3808
  letter-spacing: var(--ids-comp-checkbox-label-typography-letter-spacing-compact);
3777
3809
  font-size: var(--ids-comp-checkbox-label-typography-font-size-compact);
3778
3810
  line-height: var(--ids-comp-checkbox-label-typography-line-height-compact);
3811
+ gap: var(--ids-comp-checkbox-label-size-gap-compact);
3779
3812
  }
3780
3813
  .ids-checkbox.ids-checkbox-comfortable {
3781
3814
  padding: var(--ids-comp-checkbox-container-size-padding-y-comfortable) var(--ids-comp-checkbox-container-size-padding-x-comfortable);
@@ -3818,6 +3851,7 @@ input[autocomplete] {
3818
3851
  letter-spacing: var(--ids-comp-checkbox-label-typography-letter-spacing-comfortable);
3819
3852
  font-size: var(--ids-comp-checkbox-label-typography-font-size-comfortable);
3820
3853
  line-height: var(--ids-comp-checkbox-label-typography-line-height-comfortable);
3854
+ gap: var(--ids-comp-checkbox-label-size-gap-comfortable);
3821
3855
  }
3822
3856
  .ids-checkbox.ids-checkbox-spacious {
3823
3857
  padding: var(--ids-comp-checkbox-container-size-padding-y-spacious) var(--ids-comp-checkbox-container-size-padding-x-spacious);
@@ -3860,6 +3894,7 @@ input[autocomplete] {
3860
3894
  letter-spacing: var(--ids-comp-checkbox-label-typography-letter-spacing-spacious);
3861
3895
  font-size: var(--ids-comp-checkbox-label-typography-font-size-spacious);
3862
3896
  line-height: var(--ids-comp-checkbox-label-typography-line-height-spacious);
3897
+ gap: var(--ids-comp-checkbox-label-size-gap-spacious);
3863
3898
  }
3864
3899
  .ids-checkbox.ids-checkbox-dense {
3865
3900
  padding: var(--ids-comp-checkbox-container-size-padding-y-dense) var(--ids-comp-checkbox-container-size-padding-x-dense);
@@ -3902,84 +3937,85 @@ input[autocomplete] {
3902
3937
  letter-spacing: var(--ids-comp-checkbox-label-typography-letter-spacing-dense);
3903
3938
  font-size: var(--ids-comp-checkbox-label-typography-font-size-dense);
3904
3939
  line-height: var(--ids-comp-checkbox-label-typography-line-height-dense);
3940
+ gap: var(--ids-comp-checkbox-label-size-gap-dense);
3905
3941
  }
3906
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate) {
3942
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate):not([aria-readonly=true]) {
3907
3943
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-hovered);
3908
3944
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-hovered);
3909
3945
  }
3910
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):is(:checked, :indeterminate) {
3946
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):is(:checked, :indeterminate):not([aria-readonly=true]) {
3911
3947
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-hovered);
3912
3948
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-hovered);
3913
3949
  }
3914
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled) + .ids-checkbox__icon {
3950
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
3915
3951
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-hovered);
3916
3952
  }
3917
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate) {
3953
+ .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) {
3918
3954
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-pressed);
3919
3955
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-pressed);
3920
3956
  }
3921
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):is(:checked, :indeterminate) {
3957
+ .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) {
3922
3958
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-pressed);
3923
3959
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-pressed);
3924
3960
  }
3925
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled) + .ids-checkbox__icon {
3961
+ .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 {
3926
3962
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-pressed);
3927
3963
  }
3928
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
3964
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]) {
3929
3965
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-default);
3930
3966
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-default);
3931
3967
  }
3932
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
3968
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):hover {
3933
3969
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-hovered);
3934
3970
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-hovered);
3935
3971
  }
3936
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
3972
+ .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):active {
3937
3973
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-pressed);
3938
3974
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-pressed);
3939
3975
  }
3940
- .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 {
3976
+ .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 {
3941
3977
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-focused);
3942
3978
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-focused);
3943
3979
  outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-light-focused);
3944
3980
  }
3945
- .ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:disabled {
3981
+ .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] {
3946
3982
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-disabled);
3947
3983
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-disabled);
3948
3984
  }
3949
- .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) {
3985
+ .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]) {
3950
3986
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-default);
3951
3987
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-default);
3952
3988
  }
3953
- .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 {
3989
+ .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 {
3954
3990
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-hovered);
3955
3991
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-hovered);
3956
3992
  }
3957
- .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 {
3993
+ .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 {
3958
3994
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-pressed);
3959
3995
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-pressed);
3960
3996
  }
3961
- .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 {
3997
+ .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 {
3962
3998
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-focused);
3963
3999
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-focused);
3964
4000
  outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-light-focused);
3965
4001
  }
3966
- .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 {
4002
+ .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] {
3967
4003
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-disabled);
3968
4004
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-disabled);
3969
4005
  }
3970
- .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 {
4006
+ .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 {
3971
4007
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-default);
3972
4008
  }
3973
- .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 {
4009
+ .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 {
3974
4010
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-hovered);
3975
4011
  }
3976
- .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 {
4012
+ .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 {
3977
4013
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-pressed);
3978
4014
  }
3979
- .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 {
4015
+ .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 {
3980
4016
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-focused);
3981
4017
  }
3982
- .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 {
4018
+ .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 {
3983
4019
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-disabled);
3984
4020
  }
3985
4021
  .ids-checkbox.ids-checkbox-light .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
@@ -3997,83 +4033,83 @@ input[autocomplete] {
3997
4033
  .ids-checkbox.ids-checkbox-light.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
3998
4034
  color: var(--ids-comp-checkbox-label-color-fg-light-disabled);
3999
4035
  }
4000
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate) {
4036
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate):not([aria-readonly=true]) {
4001
4037
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-hovered);
4002
4038
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-hovered);
4003
4039
  }
4004
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):is(:checked, :indeterminate) {
4040
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):is(:checked, :indeterminate):not([aria-readonly=true]) {
4005
4041
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-hovered);
4006
4042
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-hovered);
4007
4043
  }
4008
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled) + .ids-checkbox__icon {
4044
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
4009
4045
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-hovered);
4010
4046
  }
4011
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate) {
4047
+ .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) {
4012
4048
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-pressed);
4013
4049
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-pressed);
4014
4050
  }
4015
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):is(:checked, :indeterminate) {
4051
+ .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) {
4016
4052
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-pressed);
4017
4053
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-pressed);
4018
4054
  }
4019
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled) + .ids-checkbox__icon {
4055
+ .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 {
4020
4056
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-pressed);
4021
4057
  }
4022
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
4058
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]) {
4023
4059
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-default);
4024
4060
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-default);
4025
4061
  }
4026
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
4062
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):hover {
4027
4063
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-hovered);
4028
4064
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-hovered);
4029
4065
  }
4030
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
4066
+ .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):active {
4031
4067
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-pressed);
4032
4068
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-pressed);
4033
4069
  }
4034
- .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 {
4070
+ .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 {
4035
4071
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-focused);
4036
4072
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-focused);
4037
4073
  outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-dark-focused);
4038
4074
  }
4039
- .ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:disabled {
4075
+ .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] {
4040
4076
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-disabled);
4041
4077
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-disabled);
4042
4078
  }
4043
- .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) {
4079
+ .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]) {
4044
4080
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-default);
4045
4081
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-default);
4046
4082
  }
4047
- .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 {
4083
+ .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 {
4048
4084
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-hovered);
4049
4085
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-hovered);
4050
4086
  }
4051
- .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 {
4087
+ .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 {
4052
4088
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-pressed);
4053
4089
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-pressed);
4054
4090
  }
4055
- .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 {
4091
+ .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 {
4056
4092
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-focused);
4057
4093
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-focused);
4058
4094
  outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-dark-focused);
4059
4095
  }
4060
- .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 {
4096
+ .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] {
4061
4097
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-disabled);
4062
4098
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-disabled);
4063
4099
  }
4064
- .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 {
4100
+ .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 {
4065
4101
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-default);
4066
4102
  }
4067
- .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 {
4103
+ .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 {
4068
4104
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-hovered);
4069
4105
  }
4070
- .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 {
4106
+ .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 {
4071
4107
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-pressed);
4072
4108
  }
4073
- .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 {
4109
+ .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 {
4074
4110
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-focused);
4075
4111
  }
4076
- .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 {
4112
+ .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 {
4077
4113
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-disabled);
4078
4114
  }
4079
4115
  .ids-checkbox.ids-checkbox-dark .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
@@ -4091,83 +4127,83 @@ input[autocomplete] {
4091
4127
  .ids-checkbox.ids-checkbox-dark.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
4092
4128
  color: var(--ids-comp-checkbox-label-color-fg-dark-disabled);
4093
4129
  }
4094
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate) {
4130
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate):not([aria-readonly=true]) {
4095
4131
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-hovered);
4096
4132
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-hovered);
4097
4133
  }
4098
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):is(:checked, :indeterminate) {
4134
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):is(:checked, :indeterminate):not([aria-readonly=true]) {
4099
4135
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-hovered);
4100
4136
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-hovered);
4101
4137
  }
4102
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled) + .ids-checkbox__icon {
4138
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:hover input[type=checkbox]:not(:disabled):not([aria-readonly=true]) + .ids-checkbox__icon {
4103
4139
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-hovered);
4104
4140
  }
4105
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):not(:checked):not(:indeterminate) {
4141
+ .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) {
4106
4142
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-pressed);
4107
4143
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-pressed);
4108
4144
  }
4109
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled):is(:checked, :indeterminate) {
4145
+ .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) {
4110
4146
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-pressed);
4111
4147
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-pressed);
4112
4148
  }
4113
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper:has(.ids-checkbox__touch-target:active) input[type=checkbox]:not(:disabled) + .ids-checkbox__icon {
4149
+ .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 {
4114
4150
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-pressed);
4115
4151
  }
4116
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
4152
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]) {
4117
4153
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-default);
4118
4154
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-default);
4119
4155
  }
4120
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
4156
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):hover {
4121
4157
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-hovered);
4122
4158
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-hovered);
4123
4159
  }
4124
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
4160
+ .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):not([aria-readonly=true]):active {
4125
4161
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-pressed);
4126
4162
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-pressed);
4127
4163
  }
4128
- .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 {
4164
+ .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 {
4129
4165
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-focused);
4130
4166
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-focused);
4131
4167
  outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-surface-focused);
4132
4168
  }
4133
- .ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:disabled {
4169
+ .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] {
4134
4170
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-disabled);
4135
4171
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-disabled);
4136
4172
  }
4137
- .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) {
4173
+ .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]) {
4138
4174
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-default);
4139
4175
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-default);
4140
4176
  }
4141
- .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 {
4177
+ .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 {
4142
4178
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-hovered);
4143
4179
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-hovered);
4144
4180
  }
4145
- .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 {
4181
+ .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 {
4146
4182
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-pressed);
4147
4183
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-pressed);
4148
4184
  }
4149
- .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 {
4185
+ .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 {
4150
4186
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-focused);
4151
4187
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-focused);
4152
4188
  outline-color: var(--ids-comp-checkbox-input-selected-color-focused-outline-surface-focused);
4153
4189
  }
4154
- .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 {
4190
+ .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] {
4155
4191
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-disabled);
4156
4192
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-disabled);
4157
4193
  }
4158
- .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 {
4194
+ .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 {
4159
4195
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-default);
4160
4196
  }
4161
- .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 {
4197
+ .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 {
4162
4198
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-hovered);
4163
4199
  }
4164
- .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 {
4200
+ .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 {
4165
4201
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-pressed);
4166
4202
  }
4167
- .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 {
4203
+ .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 {
4168
4204
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-focused);
4169
4205
  }
4170
- .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 {
4206
+ .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 {
4171
4207
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-disabled);
4172
4208
  }
4173
4209
  .ids-checkbox.ids-checkbox-surface .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
@@ -4185,6 +4221,9 @@ input[autocomplete] {
4185
4221
  .ids-checkbox.ids-checkbox-surface.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
4186
4222
  color: var(--ids-comp-checkbox-label-color-fg-surface-disabled);
4187
4223
  }
4224
+ .ids-checkbox.ids-checkbox-disabled .ids-checkbox__input-wrapper {
4225
+ cursor: not-allowed;
4226
+ }
4188
4227
  .ids-checkbox.ids-checkbox-disabled .ids-checkbox__input-wrapper .ids-checkbox__touch-target {
4189
4228
  cursor: not-allowed;
4190
4229
  }
@@ -4194,9 +4233,15 @@ input[autocomplete] {
4194
4233
  .ids-checkbox.ids-checkbox-disabled .ids-checkbox__input-wrapper input[type=checkbox] + .ids-checkbox__icon {
4195
4234
  cursor: not-allowed;
4196
4235
  }
4236
+ .ids-checkbox.ids-checkbox-disabled .ids-checkbox__label-wrapper {
4237
+ cursor: not-allowed;
4238
+ }
4197
4239
  .ids-checkbox.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
4198
4240
  cursor: not-allowed;
4199
4241
  }
4242
+ .ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__input-wrapper {
4243
+ cursor: pointer;
4244
+ }
4200
4245
  .ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__input-wrapper .ids-checkbox__touch-target {
4201
4246
  cursor: pointer;
4202
4247
  }
@@ -4206,139 +4251,142 @@ input[autocomplete] {
4206
4251
  .ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__input-wrapper input[type=checkbox] + .ids-checkbox__icon {
4207
4252
  cursor: pointer;
4208
4253
  }
4254
+ .ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__label-wrapper {
4255
+ cursor: pointer;
4256
+ }
4209
4257
  .ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label {
4210
4258
  cursor: pointer;
4211
4259
  }
4212
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
4260
+ .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]) {
4213
4261
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-error-default);
4214
4262
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-default);
4215
4263
  }
4216
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
4264
+ .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 {
4217
4265
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-error-hovered);
4218
4266
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-hovered);
4219
4267
  }
4220
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
4268
+ .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 {
4221
4269
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-error-pressed);
4222
4270
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-pressed);
4223
4271
  }
4224
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible {
4272
+ .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 {
4225
4273
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-light-error-focused);
4226
4274
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-light-focused);
4227
4275
  }
4228
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) {
4276
+ .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]) {
4229
4277
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-error-default);
4230
4278
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-default);
4231
4279
  }
4232
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover {
4280
+ .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 {
4233
4281
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-error-hovered);
4234
4282
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-hovered);
4235
4283
  }
4236
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active {
4284
+ .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 {
4237
4285
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-error-pressed);
4238
4286
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-pressed);
4239
4287
  }
4240
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible {
4288
+ .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 {
4241
4289
  border-color: var(--ids-comp-checkbox-input-selected-color-border-light-error-focused);
4242
4290
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-light-focused);
4243
4291
  }
4244
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon {
4292
+ .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 {
4245
4293
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-default);
4246
4294
  }
4247
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon {
4295
+ .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 {
4248
4296
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-hovered);
4249
4297
  }
4250
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon {
4298
+ .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 {
4251
4299
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-pressed);
4252
4300
  }
4253
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon {
4301
+ .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 {
4254
4302
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-focused);
4255
4303
  }
4256
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
4304
+ .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]) {
4257
4305
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-error-default);
4258
4306
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-default);
4259
4307
  }
4260
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
4308
+ .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 {
4261
4309
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-error-hovered);
4262
4310
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-hovered);
4263
4311
  }
4264
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
4312
+ .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 {
4265
4313
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-error-pressed);
4266
4314
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-pressed);
4267
4315
  }
4268
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible {
4316
+ .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 {
4269
4317
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-dark-error-focused);
4270
4318
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-dark-focused);
4271
4319
  }
4272
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) {
4320
+ .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]) {
4273
4321
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-error-default);
4274
4322
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-default);
4275
4323
  }
4276
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover {
4324
+ .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 {
4277
4325
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-error-hovered);
4278
4326
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-hovered);
4279
4327
  }
4280
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active {
4328
+ .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 {
4281
4329
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-error-pressed);
4282
4330
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-pressed);
4283
4331
  }
4284
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible {
4332
+ .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 {
4285
4333
  border-color: var(--ids-comp-checkbox-input-selected-color-border-dark-error-focused);
4286
4334
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-dark-focused);
4287
4335
  }
4288
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon {
4336
+ .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 {
4289
4337
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-default);
4290
4338
  }
4291
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon {
4339
+ .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 {
4292
4340
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-hovered);
4293
4341
  }
4294
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon {
4342
+ .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 {
4295
4343
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-pressed);
4296
4344
  }
4297
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon {
4345
+ .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 {
4298
4346
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-focused);
4299
4347
  }
4300
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled) {
4348
+ .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]) {
4301
4349
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-error-default);
4302
4350
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-default);
4303
4351
  }
4304
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover {
4352
+ .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 {
4305
4353
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-error-hovered);
4306
4354
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-hovered);
4307
4355
  }
4308
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active {
4356
+ .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 {
4309
4357
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-error-pressed);
4310
4358
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-pressed);
4311
4359
  }
4312
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus-visible {
4360
+ .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 {
4313
4361
  border-color: var(--ids-comp-checkbox-input-unselected-color-border-surface-error-focused);
4314
4362
  background-color: var(--ids-comp-checkbox-input-unselected-color-bg-surface-focused);
4315
4363
  }
4316
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled), .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) {
4364
+ .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]) {
4317
4365
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-error-default);
4318
4366
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-default);
4319
4367
  }
4320
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover {
4368
+ .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 {
4321
4369
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-error-hovered);
4322
4370
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-hovered);
4323
4371
  }
4324
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active {
4372
+ .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 {
4325
4373
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-error-pressed);
4326
4374
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-pressed);
4327
4375
  }
4328
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible {
4376
+ .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 {
4329
4377
  border-color: var(--ids-comp-checkbox-input-selected-color-border-surface-error-focused);
4330
4378
  background-color: var(--ids-comp-checkbox-input-selected-color-bg-surface-focused);
4331
4379
  }
4332
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled) + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled) + .ids-checkbox__icon {
4380
+ .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 {
4333
4381
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-default);
4334
4382
  }
4335
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover + .ids-checkbox__icon {
4383
+ .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 {
4336
4384
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-hovered);
4337
4385
  }
4338
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active + .ids-checkbox__icon {
4386
+ .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 {
4339
4387
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-pressed);
4340
4388
  }
4341
- .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ng-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus-visible + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus + .ids-checkbox__icon, .ids-checkbox.ng-touched.ids-checkbox-invalid.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus-visible + .ids-checkbox__icon {
4389
+ .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 {
4342
4390
  color: var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-focused);
4343
4391
  }
4344
4392
 
@@ -5793,6 +5841,14 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5793
5841
  grid-template-columns: repeat(7, 1fr);
5794
5842
  }
5795
5843
 
5844
+ .ids-dialog-backdrop {
5845
+ background-color: var(--ids-comp-dialog-backdrop-background);
5846
+ }
5847
+
5848
+ .ids-dialog-transparent-backdrop {
5849
+ background-color: transparent;
5850
+ }
5851
+
5796
5852
  .ids-dialog {
5797
5853
  box-sizing: border-box;
5798
5854
  border-width: 0;
@@ -5811,12 +5867,6 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5811
5867
  border-style: none;
5812
5868
  border-color: transparent;
5813
5869
  }
5814
- .ids-dialog::backdrop {
5815
- background-color: transparent;
5816
- }
5817
- .ids-dialog.ids-dialog-with-backdrop::backdrop {
5818
- background-color: var(--ids-comp-dialog-backdrop-background);
5819
- }
5820
5870
  .ids-dialog .ids-dialog-container {
5821
5871
  display: grid;
5822
5872
  grid-template-rows: auto 1fr auto;
@@ -5829,12 +5879,14 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
5829
5879
  }
5830
5880
  .ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-title {
5831
5881
  font-style: normal;
5882
+ color: var(--ids-comp-dialog-header-color-fg-title-default);
5832
5883
  }
5833
5884
  .ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-title.hidden {
5834
5885
  display: none;
5835
5886
  }
5836
5887
  .ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle {
5837
5888
  font-style: normal;
5889
+ color: var(--ids-comp-dialog-header-color-fg-subtitle-default);
5838
5890
  }
5839
5891
  .ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content {
5840
5892
  display: grid;
@@ -9744,6 +9796,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9744
9796
  align-self: stretch;
9745
9797
  box-sizing: border-box;
9746
9798
  user-select: none;
9799
+ flex-shrink: 0;
9747
9800
  }
9748
9801
  .ids-option > .ids-option__text {
9749
9802
  overflow-wrap: anywhere;
@@ -10673,6 +10726,10 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10673
10726
  border-style: none;
10674
10727
  border-color: transparent;
10675
10728
  line-height: 1.5;
10729
+ display: flex;
10730
+ flex-direction: column;
10731
+ justify-content: center;
10732
+ align-items: flex-start;
10676
10733
  }
10677
10734
  .ids-radio-group::before, .ids-radio-group::after, .ids-radio-group *, .ids-radio-group ::before, .ids-radio-group ::after {
10678
10735
  box-sizing: border-box;
@@ -10680,22 +10737,40 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10680
10737
  border-style: none;
10681
10738
  border-color: transparent;
10682
10739
  }
10683
-
10684
- .ids-radio-group {
10685
- display: inline-flex;
10740
+ .ids-radio-group.ids-radio-group-left {
10686
10741
  align-items: flex-start;
10687
- justify-content: start;
10688
10742
  }
10689
- .ids-radio-group.ids-radio-group-horizontal {
10743
+ .ids-radio-group.ids-radio-group-right {
10744
+ align-items: flex-start;
10745
+ }
10746
+ .ids-radio-group > .ids-radio-group__legend {
10747
+ display: flex;
10748
+ flex-direction: column;
10749
+ }
10750
+ .ids-radio-group > .ids-radio-group__legend > .ids-radio-group__legend-container > .ids-radio-group__legend-label {
10751
+ font-style: normal;
10752
+ }
10753
+ .ids-radio-group > .ids-radio-group__list {
10754
+ display: flex;
10755
+ }
10756
+ .ids-radio-group.ids-radio-group-horizontal > .ids-radio-group__list {
10690
10757
  flex-direction: row;
10758
+ align-items: center;
10759
+ }
10760
+ .ids-radio-group.ids-radio-group-horizontal.ids-radio-group-top > .ids-radio-group__list {
10761
+ align-items: flex-end;
10691
10762
  }
10692
- .ids-radio-group.ids-radio-group-vertical {
10763
+ .ids-radio-group.ids-radio-group-horizontal.ids-radio-group-bottom > .ids-radio-group__list {
10764
+ align-items: flex-start;
10765
+ }
10766
+ .ids-radio-group.ids-radio-group-vertical > .ids-radio-group__list {
10693
10767
  flex-direction: column;
10768
+ align-items: center;
10694
10769
  }
10695
- .ids-radio-group.ids-radio-group-left {
10770
+ .ids-radio-group.ids-radio-group-vertical.ids-radio-group-left > .ids-radio-group__list {
10696
10771
  align-items: flex-end;
10697
10772
  }
10698
- .ids-radio-group.ids-radio-group-right {
10773
+ .ids-radio-group.ids-radio-group-vertical.ids-radio-group-right > .ids-radio-group__list {
10699
10774
  align-items: flex-start;
10700
10775
  }
10701
10776
  .ids-radio-group .ids-radio {
@@ -10706,50 +10781,31 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10706
10781
  flex-direction: row-reverse;
10707
10782
  justify-content: start;
10708
10783
  }
10709
- .ids-radio-group .ids-radio.ids-radio-left .ids-radio__label-wrapper {
10710
- display: flex;
10711
- flex-direction: column;
10712
- align-items: flex-start;
10713
- }
10714
- .ids-radio-group .ids-radio.ids-radio-left .ids-radio__label-wrapper .ids-radio__label {
10715
- justify-content: start;
10716
- }
10717
10784
  .ids-radio-group .ids-radio.ids-radio-right {
10718
10785
  flex-direction: row;
10719
10786
  justify-content: start;
10720
10787
  }
10721
- .ids-radio-group .ids-radio.ids-radio-right .ids-radio__label-wrapper {
10722
- display: flex;
10723
- flex-direction: column;
10724
- align-items: flex-start;
10725
- }
10726
- .ids-radio-group .ids-radio.ids-radio-right .ids-radio__label-wrapper .ids-radio__label {
10727
- justify-content: start;
10728
- }
10729
10788
  .ids-radio-group .ids-radio.ids-radio-top {
10730
10789
  flex-direction: column-reverse;
10731
- align-items: center;
10732
10790
  justify-content: center;
10733
- }
10734
- .ids-radio-group .ids-radio.ids-radio-top .ids-radio__label-wrapper {
10735
- display: flex;
10736
- flex-direction: column;
10737
10791
  align-items: center;
10738
10792
  }
10739
- .ids-radio-group .ids-radio.ids-radio-top .ids-radio__label-wrapper .ids-radio__label {
10740
- justify-content: center;
10741
- }
10742
10793
  .ids-radio-group .ids-radio.ids-radio-bottom {
10743
10794
  flex-direction: column;
10744
10795
  align-items: center;
10745
10796
  }
10746
- .ids-radio-group .ids-radio.ids-radio-bottom .ids-radio__label-wrapper {
10747
- display: flex;
10748
- flex-direction: column;
10797
+ .ids-radio-group .ids-radio.ids-radio-top .ids-radio__label-wrapper, .ids-radio-group .ids-radio.ids-radio-bottom .ids-radio__label-wrapper {
10749
10798
  align-items: center;
10750
10799
  }
10751
- .ids-radio-group .ids-radio.ids-radio-bottom .ids-radio__label-wrapper .ids-radio__label {
10800
+ .ids-radio-group .ids-radio.ids-radio-top .ids-radio__label, .ids-radio-group .ids-radio.ids-radio-bottom .ids-radio__label {
10752
10801
  justify-content: center;
10802
+ text-align: center;
10803
+ }
10804
+ .ids-radio-group .ids-radio.ids-radio-left .ids-radio__label-wrapper, .ids-radio-group .ids-radio.ids-radio-right .ids-radio__label-wrapper {
10805
+ align-items: flex-start;
10806
+ }
10807
+ .ids-radio-group .ids-radio.ids-radio-left .ids-radio__label, .ids-radio-group .ids-radio.ids-radio-right .ids-radio__label {
10808
+ justify-content: start;
10753
10809
  }
10754
10810
  .ids-radio-group .ids-radio .ids-radio__input-wrapper {
10755
10811
  position: relative;
@@ -10757,63 +10813,79 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10757
10813
  align-items: center;
10758
10814
  justify-content: center;
10759
10815
  }
10760
- .ids-radio-group .ids-radio .ids-radio__input-wrapper .ids-radio__touch-target {
10816
+ .ids-radio-group .ids-radio .ids-radio__touch-target {
10761
10817
  position: absolute;
10762
10818
  cursor: pointer;
10763
10819
  }
10764
- .ids-radio-group .ids-radio .ids-radio__input-wrapper input[type=radio] {
10820
+ .ids-radio-group .ids-radio input[type=radio] {
10765
10821
  appearance: none;
10766
10822
  -webkit-appearance: none;
10767
- flex-shrink: 0;
10768
- border-style: solid;
10769
- margin: 0;
10770
10823
  display: flex;
10771
- justify-content: center;
10772
10824
  align-items: center;
10825
+ justify-content: center;
10773
10826
  flex-shrink: 0;
10827
+ margin: 0;
10828
+ border-style: solid;
10774
10829
  cursor: pointer;
10775
10830
  }
10776
- .ids-radio-group .ids-radio .ids-radio__input-wrapper input[type=radio] + .ids-radio__inner-circle {
10831
+ .ids-radio-group .ids-radio input[type=radio]:focus, .ids-radio-group .ids-radio input[type=radio]:focus-visible {
10832
+ outline-offset: 2px;
10833
+ outline-style: solid;
10834
+ }
10835
+ .ids-radio-group .ids-radio input[type=radio] + .ids-radio__inner-circle {
10777
10836
  position: absolute;
10778
10837
  flex-shrink: 0;
10779
- border-style: solid;
10780
- height: 0;
10781
10838
  width: 0;
10839
+ height: 0;
10782
10840
  border-width: 0;
10841
+ border-style: solid;
10783
10842
  cursor: pointer;
10784
10843
  }
10785
- .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 {
10786
- outline-offset: 2px;
10787
- outline-style: solid;
10844
+ .ids-radio-group .ids-radio .ids-radio__label-wrapper {
10845
+ display: flex;
10846
+ flex-direction: column;
10847
+ cursor: pointer;
10788
10848
  }
10789
10849
  .ids-radio-group .ids-radio .ids-radio__label {
10850
+ display: flex;
10851
+ align-items: center;
10852
+ flex: 1 0 0;
10853
+ font-style: normal;
10790
10854
  cursor: pointer;
10791
10855
  }
10792
- .ids-radio-group .ids-radio.ids-radio-disabled .ids-radio__input-wrapper .ids-radio__touch-target {
10856
+ .ids-radio-group .ids-radio.ids-radio-disabled .ids-radio__touch-target,
10857
+ .ids-radio-group .ids-radio.ids-radio-disabled input[type=radio],
10858
+ .ids-radio-group .ids-radio.ids-radio-disabled input[type=radio] + .ids-radio__inner-circle,
10859
+ .ids-radio-group .ids-radio.ids-radio-disabled .ids-radio__label-wrapper,
10860
+ .ids-radio-group .ids-radio.ids-radio-disabled .ids-radio__label {
10793
10861
  cursor: not-allowed;
10794
10862
  }
10795
- .ids-radio-group .ids-radio.ids-radio-disabled .ids-radio__input-wrapper input[type=radio] {
10796
- cursor: not-allowed;
10863
+ .ids-radio-group.ids-radio-group-compact {
10864
+ padding: var(--ids-comp-radio-group-vertical-fieldset-size-padding-y-compact) var(--ids-comp-radio-group-vertical-fieldset-size-padding-x-compact);
10865
+ gap: var(--ids-comp-radio-group-vertical-fieldset-size-gap-compact);
10797
10866
  }
10798
- .ids-radio-group .ids-radio.ids-radio-disabled .ids-radio__input-wrapper input[type=radio] + .ids-radio__inner-circle {
10799
- cursor: not-allowed;
10867
+ .ids-radio-group.ids-radio-group-compact > .ids-radio-group__legend {
10868
+ gap: var(--ids-comp-radio-group-vertical-fieldset-legend-size-gap-compact);
10800
10869
  }
10801
- .ids-radio-group .ids-radio.ids-radio-disabled .ids-radio__label {
10802
- cursor: not-allowed;
10870
+ .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 {
10871
+ font-family: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-family-compact);
10872
+ font-size: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-size-compact);
10873
+ font-weight: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-weight-compact);
10874
+ line-height: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-line-height-compact);
10875
+ letter-spacing: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-letter-spacing-compact);
10803
10876
  }
10804
- .ids-radio-group .ids-radio .ids-radio__label {
10805
- display: flex;
10806
- align-items: center;
10807
- flex: 1 0 0;
10808
- font-style: normal;
10877
+ .ids-radio-group.ids-radio-group-compact.ids-radio-group-horizontal > .ids-radio-group__list {
10878
+ 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);
10809
10879
  }
10810
- .ids-radio-group.ids-radio-group-compact.ids-radio-group-horizontal {
10811
- padding: var(--ids-comp-radio-group-horizontal-container-size-padding-y-compact) var(--ids-comp-radio-group-horizontal-container-size-padding-x-compact);
10812
- gap: var(--ids-comp-radio-group-horizontal-container-size-gap-compact);
10880
+ .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 {
10881
+ font-family: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-family-compact);
10882
+ font-size: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-size-compact);
10883
+ font-weight: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-weight-compact);
10884
+ line-height: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-line-height-compact);
10885
+ letter-spacing: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-letter-spacing-compact);
10813
10886
  }
10814
- .ids-radio-group.ids-radio-group-compact.ids-radio-group-vertical {
10815
- padding: var(--ids-comp-radio-group-vertical-container-size-padding-y-compact) var(--ids-comp-radio-group-vertical-container-size-padding-x-compact);
10816
- gap: var(--ids-comp-radio-group-vertical-container-size-gap-compact);
10887
+ .ids-radio-group.ids-radio-group-compact.ids-radio-group-vertical > .ids-radio-group__list {
10888
+ gap: var(--ids-comp-radio-group-vertical-fieldset-list-size-gap-compact);
10817
10889
  }
10818
10890
  .ids-radio-group.ids-radio-group-compact .ids-radio {
10819
10891
  padding: var(--ids-comp-radio-button-container-size-padding-y-compact) var(--ids-comp-radio-button-container-size-padding-x-compact);
@@ -10822,8 +10894,8 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10822
10894
  .ids-radio-group.ids-radio-group-compact .ids-radio .ids-radio__input-wrapper .ids-radio__touch-target {
10823
10895
  top: calc((var(--ids-comp-radio-button-input-size-height-compact) - var(--ids-comp-radio-button-input-size-touchtarget-height-compact)) / 2);
10824
10896
  left: calc((var(--ids-comp-radio-button-input-size-width-compact) - var(--ids-comp-radio-button-input-size-touchtarget-width-compact)) / 2);
10825
- height: var(--ids-comp-radio-button-input-size-touchtarget-height-compact);
10826
10897
  width: var(--ids-comp-radio-button-input-size-touchtarget-width-compact);
10898
+ height: var(--ids-comp-radio-button-input-size-touchtarget-height-compact);
10827
10899
  }
10828
10900
  .ids-radio-group.ids-radio-group-compact .ids-radio .ids-radio__input-wrapper input[type=radio] {
10829
10901
  width: var(--ids-comp-radio-button-input-size-width-compact);
@@ -10840,21 +10912,43 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10840
10912
  .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 {
10841
10913
  outline-width: var(--ids-comp-radio-focused-outline-outline-compact);
10842
10914
  }
10915
+ .ids-radio-group.ids-radio-group-compact .ids-radio .ids-radio__label-wrapper {
10916
+ gap: var(--ids-comp-radio-button-label-group-size-gap-compact);
10917
+ }
10843
10918
  .ids-radio-group.ids-radio-group-compact .ids-radio .ids-radio__label {
10844
- padding: var(--ids-comp-radio-button-label-size-padding-y-compact) 0px;
10919
+ padding: var(--ids-comp-radio-button-label-size-padding-y-compact) 0;
10845
10920
  font-family: var(--ids-comp-radio-button-label-typography-font-family-compact);
10846
10921
  font-size: var(--ids-comp-radio-button-label-typography-font-size-compact);
10847
10922
  font-weight: var(--ids-comp-radio-button-label-typography-font-weight-compact);
10848
10923
  line-height: var(--ids-comp-radio-button-label-typography-line-height-compact);
10849
10924
  letter-spacing: var(--ids-comp-radio-button-label-typography-letter-spacing-compact);
10850
10925
  }
10851
- .ids-radio-group.ids-radio-group-comfortable.ids-radio-group-horizontal {
10852
- padding: var(--ids-comp-radio-group-horizontal-container-size-padding-y-comfortable) var(--ids-comp-radio-group-horizontal-container-size-padding-x-comfortable);
10853
- gap: var(--ids-comp-radio-group-horizontal-container-size-gap-comfortable);
10926
+ .ids-radio-group.ids-radio-group-comfortable {
10927
+ padding: var(--ids-comp-radio-group-vertical-fieldset-size-padding-y-comfortable) var(--ids-comp-radio-group-vertical-fieldset-size-padding-x-comfortable);
10928
+ gap: var(--ids-comp-radio-group-vertical-fieldset-size-gap-comfortable);
10929
+ }
10930
+ .ids-radio-group.ids-radio-group-comfortable > .ids-radio-group__legend {
10931
+ gap: var(--ids-comp-radio-group-vertical-fieldset-legend-size-gap-comfortable);
10932
+ }
10933
+ .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 {
10934
+ font-family: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-family-comfortable);
10935
+ font-size: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-size-comfortable);
10936
+ font-weight: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-weight-comfortable);
10937
+ line-height: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-line-height-comfortable);
10938
+ letter-spacing: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-letter-spacing-comfortable);
10939
+ }
10940
+ .ids-radio-group.ids-radio-group-comfortable.ids-radio-group-horizontal > .ids-radio-group__list {
10941
+ 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);
10854
10942
  }
10855
- .ids-radio-group.ids-radio-group-comfortable.ids-radio-group-vertical {
10856
- padding: var(--ids-comp-radio-group-vertical-container-size-padding-y-comfortable) var(--ids-comp-radio-group-vertical-container-size-padding-x-comfortable);
10857
- gap: var(--ids-comp-radio-group-vertical-container-size-gap-comfortable);
10943
+ .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 {
10944
+ font-family: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-family-comfortable);
10945
+ font-size: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-size-comfortable);
10946
+ font-weight: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-weight-comfortable);
10947
+ line-height: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-line-height-comfortable);
10948
+ letter-spacing: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-letter-spacing-comfortable);
10949
+ }
10950
+ .ids-radio-group.ids-radio-group-comfortable.ids-radio-group-vertical > .ids-radio-group__list {
10951
+ gap: var(--ids-comp-radio-group-vertical-fieldset-list-size-gap-comfortable);
10858
10952
  }
10859
10953
  .ids-radio-group.ids-radio-group-comfortable .ids-radio {
10860
10954
  padding: var(--ids-comp-radio-button-container-size-padding-y-comfortable) var(--ids-comp-radio-button-container-size-padding-x-comfortable);
@@ -10863,8 +10957,8 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10863
10957
  .ids-radio-group.ids-radio-group-comfortable .ids-radio .ids-radio__input-wrapper .ids-radio__touch-target {
10864
10958
  top: calc((var(--ids-comp-radio-button-input-size-height-comfortable) - var(--ids-comp-radio-button-input-size-touchtarget-height-comfortable)) / 2);
10865
10959
  left: calc((var(--ids-comp-radio-button-input-size-width-comfortable) - var(--ids-comp-radio-button-input-size-touchtarget-width-comfortable)) / 2);
10866
- height: var(--ids-comp-radio-button-input-size-touchtarget-height-comfortable);
10867
10960
  width: var(--ids-comp-radio-button-input-size-touchtarget-width-comfortable);
10961
+ height: var(--ids-comp-radio-button-input-size-touchtarget-height-comfortable);
10868
10962
  }
10869
10963
  .ids-radio-group.ids-radio-group-comfortable .ids-radio .ids-radio__input-wrapper input[type=radio] {
10870
10964
  width: var(--ids-comp-radio-button-input-size-width-comfortable);
@@ -10881,21 +10975,43 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10881
10975
  .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 {
10882
10976
  outline-width: var(--ids-comp-radio-focused-outline-outline-comfortable);
10883
10977
  }
10978
+ .ids-radio-group.ids-radio-group-comfortable .ids-radio .ids-radio__label-wrapper {
10979
+ gap: var(--ids-comp-radio-button-label-group-size-gap-comfortable);
10980
+ }
10884
10981
  .ids-radio-group.ids-radio-group-comfortable .ids-radio .ids-radio__label {
10885
- padding: var(--ids-comp-radio-button-label-size-padding-y-comfortable) 0px;
10982
+ padding: var(--ids-comp-radio-button-label-size-padding-y-comfortable) 0;
10886
10983
  font-family: var(--ids-comp-radio-button-label-typography-font-family-comfortable);
10887
10984
  font-size: var(--ids-comp-radio-button-label-typography-font-size-comfortable);
10888
10985
  font-weight: var(--ids-comp-radio-button-label-typography-font-weight-comfortable);
10889
10986
  line-height: var(--ids-comp-radio-button-label-typography-line-height-comfortable);
10890
10987
  letter-spacing: var(--ids-comp-radio-button-label-typography-letter-spacing-comfortable);
10891
10988
  }
10892
- .ids-radio-group.ids-radio-group-spacious.ids-radio-group-horizontal {
10893
- padding: var(--ids-comp-radio-group-horizontal-container-size-padding-y-spacious) var(--ids-comp-radio-group-horizontal-container-size-padding-x-spacious);
10894
- gap: var(--ids-comp-radio-group-horizontal-container-size-gap-spacious);
10989
+ .ids-radio-group.ids-radio-group-spacious {
10990
+ padding: var(--ids-comp-radio-group-vertical-fieldset-size-padding-y-spacious) var(--ids-comp-radio-group-vertical-fieldset-size-padding-x-spacious);
10991
+ gap: var(--ids-comp-radio-group-vertical-fieldset-size-gap-spacious);
10992
+ }
10993
+ .ids-radio-group.ids-radio-group-spacious > .ids-radio-group__legend {
10994
+ gap: var(--ids-comp-radio-group-vertical-fieldset-legend-size-gap-spacious);
10995
+ }
10996
+ .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 {
10997
+ font-family: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-family-spacious);
10998
+ font-size: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-size-spacious);
10999
+ font-weight: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-weight-spacious);
11000
+ line-height: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-line-height-spacious);
11001
+ letter-spacing: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-letter-spacing-spacious);
11002
+ }
11003
+ .ids-radio-group.ids-radio-group-spacious.ids-radio-group-horizontal > .ids-radio-group__list {
11004
+ 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);
10895
11005
  }
10896
- .ids-radio-group.ids-radio-group-spacious.ids-radio-group-vertical {
10897
- padding: var(--ids-comp-radio-group-vertical-container-size-padding-y-spacious) var(--ids-comp-radio-group-vertical-container-size-padding-x-spacious);
10898
- gap: var(--ids-comp-radio-group-vertical-container-size-gap-spacious);
11006
+ .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 {
11007
+ font-family: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-family-spacious);
11008
+ font-size: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-size-spacious);
11009
+ font-weight: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-weight-spacious);
11010
+ line-height: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-line-height-spacious);
11011
+ letter-spacing: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-letter-spacing-spacious);
11012
+ }
11013
+ .ids-radio-group.ids-radio-group-spacious.ids-radio-group-vertical > .ids-radio-group__list {
11014
+ gap: var(--ids-comp-radio-group-vertical-fieldset-list-size-gap-spacious);
10899
11015
  }
10900
11016
  .ids-radio-group.ids-radio-group-spacious .ids-radio {
10901
11017
  padding: var(--ids-comp-radio-button-container-size-padding-y-spacious) var(--ids-comp-radio-button-container-size-padding-x-spacious);
@@ -10904,8 +11020,8 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10904
11020
  .ids-radio-group.ids-radio-group-spacious .ids-radio .ids-radio__input-wrapper .ids-radio__touch-target {
10905
11021
  top: calc((var(--ids-comp-radio-button-input-size-height-spacious) - var(--ids-comp-radio-button-input-size-touchtarget-height-spacious)) / 2);
10906
11022
  left: calc((var(--ids-comp-radio-button-input-size-width-spacious) - var(--ids-comp-radio-button-input-size-touchtarget-width-spacious)) / 2);
10907
- height: var(--ids-comp-radio-button-input-size-touchtarget-height-spacious);
10908
11023
  width: var(--ids-comp-radio-button-input-size-touchtarget-width-spacious);
11024
+ height: var(--ids-comp-radio-button-input-size-touchtarget-height-spacious);
10909
11025
  }
10910
11026
  .ids-radio-group.ids-radio-group-spacious .ids-radio .ids-radio__input-wrapper input[type=radio] {
10911
11027
  width: var(--ids-comp-radio-button-input-size-width-spacious);
@@ -10922,21 +11038,43 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10922
11038
  .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 {
10923
11039
  outline-width: var(--ids-comp-radio-focused-outline-outline-spacious);
10924
11040
  }
11041
+ .ids-radio-group.ids-radio-group-spacious .ids-radio .ids-radio__label-wrapper {
11042
+ gap: var(--ids-comp-radio-button-label-group-size-gap-spacious);
11043
+ }
10925
11044
  .ids-radio-group.ids-radio-group-spacious .ids-radio .ids-radio__label {
10926
- padding: var(--ids-comp-radio-button-label-size-padding-y-spacious) 0px;
11045
+ padding: var(--ids-comp-radio-button-label-size-padding-y-spacious) 0;
10927
11046
  font-family: var(--ids-comp-radio-button-label-typography-font-family-spacious);
10928
11047
  font-size: var(--ids-comp-radio-button-label-typography-font-size-spacious);
10929
11048
  font-weight: var(--ids-comp-radio-button-label-typography-font-weight-spacious);
10930
11049
  line-height: var(--ids-comp-radio-button-label-typography-line-height-spacious);
10931
11050
  letter-spacing: var(--ids-comp-radio-button-label-typography-letter-spacing-spacious);
10932
11051
  }
10933
- .ids-radio-group.ids-radio-group-dense.ids-radio-group-horizontal {
10934
- padding: var(--ids-comp-radio-group-horizontal-container-size-padding-y-dense) var(--ids-comp-radio-group-horizontal-container-size-padding-x-dense);
10935
- gap: var(--ids-comp-radio-group-horizontal-container-size-gap-dense);
11052
+ .ids-radio-group.ids-radio-group-dense {
11053
+ padding: var(--ids-comp-radio-group-vertical-fieldset-size-padding-y-dense) var(--ids-comp-radio-group-vertical-fieldset-size-padding-x-dense);
11054
+ gap: var(--ids-comp-radio-group-vertical-fieldset-size-gap-dense);
11055
+ }
11056
+ .ids-radio-group.ids-radio-group-dense > .ids-radio-group__legend {
11057
+ gap: var(--ids-comp-radio-group-vertical-fieldset-legend-size-gap-dense);
11058
+ }
11059
+ .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 {
11060
+ font-family: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-family-dense);
11061
+ font-size: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-size-dense);
11062
+ font-weight: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-weight-dense);
11063
+ line-height: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-line-height-dense);
11064
+ letter-spacing: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-letter-spacing-dense);
11065
+ }
11066
+ .ids-radio-group.ids-radio-group-dense.ids-radio-group-horizontal > .ids-radio-group__list {
11067
+ 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);
10936
11068
  }
10937
- .ids-radio-group.ids-radio-group-dense.ids-radio-group-vertical {
10938
- padding: var(--ids-comp-radio-group-vertical-container-size-padding-y-dense) var(--ids-comp-radio-group-vertical-container-size-padding-x-dense);
10939
- gap: var(--ids-comp-radio-group-vertical-container-size-gap-dense);
11069
+ .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 {
11070
+ font-family: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-family-dense);
11071
+ font-size: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-size-dense);
11072
+ font-weight: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-weight-dense);
11073
+ line-height: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-line-height-dense);
11074
+ letter-spacing: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-letter-spacing-dense);
11075
+ }
11076
+ .ids-radio-group.ids-radio-group-dense.ids-radio-group-vertical > .ids-radio-group__list {
11077
+ gap: var(--ids-comp-radio-group-vertical-fieldset-list-size-gap-dense);
10940
11078
  }
10941
11079
  .ids-radio-group.ids-radio-group-dense .ids-radio {
10942
11080
  padding: var(--ids-comp-radio-button-container-size-padding-y-dense) var(--ids-comp-radio-button-container-size-padding-x-dense);
@@ -10945,8 +11083,8 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10945
11083
  .ids-radio-group.ids-radio-group-dense .ids-radio .ids-radio__input-wrapper .ids-radio__touch-target {
10946
11084
  top: calc((var(--ids-comp-radio-button-input-size-height-dense) - var(--ids-comp-radio-button-input-size-touchtarget-height-dense)) / 2);
10947
11085
  left: calc((var(--ids-comp-radio-button-input-size-width-dense) - var(--ids-comp-radio-button-input-size-touchtarget-width-dense)) / 2);
10948
- height: var(--ids-comp-radio-button-input-size-touchtarget-height-dense);
10949
11086
  width: var(--ids-comp-radio-button-input-size-touchtarget-width-dense);
11087
+ height: var(--ids-comp-radio-button-input-size-touchtarget-height-dense);
10950
11088
  }
10951
11089
  .ids-radio-group.ids-radio-group-dense .ids-radio .ids-radio__input-wrapper input[type=radio] {
10952
11090
  width: var(--ids-comp-radio-button-input-size-width-dense);
@@ -10963,94 +11101,106 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10963
11101
  .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 {
10964
11102
  outline-width: var(--ids-comp-radio-focused-outline-outline-dense);
10965
11103
  }
11104
+ .ids-radio-group.ids-radio-group-dense .ids-radio .ids-radio__label-wrapper {
11105
+ gap: var(--ids-comp-radio-button-label-group-size-gap-dense);
11106
+ }
10966
11107
  .ids-radio-group.ids-radio-group-dense .ids-radio .ids-radio__label {
10967
- padding: var(--ids-comp-radio-button-label-size-padding-y-dense) 0px;
11108
+ padding: var(--ids-comp-radio-button-label-size-padding-y-dense) 0;
10968
11109
  font-family: var(--ids-comp-radio-button-label-typography-font-family-dense);
10969
11110
  font-size: var(--ids-comp-radio-button-label-typography-font-size-dense);
10970
11111
  font-weight: var(--ids-comp-radio-button-label-typography-font-weight-dense);
10971
11112
  line-height: var(--ids-comp-radio-button-label-typography-line-height-dense);
10972
11113
  letter-spacing: var(--ids-comp-radio-button-label-typography-letter-spacing-dense);
10973
11114
  }
10974
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
10975
- border-color: var(--ids-comp-radio-input-unselected-color-border-surface-hovered);
10976
- background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-hovered);
11115
+ .ids-radio-group.ids-radio-group-surface .ids-radio-group__legend-label {
11116
+ color: var(--ids-comp-radio-group-legend-color-fg-surface-default);
11117
+ }
11118
+ .ids-radio-group.ids-radio-group-surface.ids-radio-group-disabled .ids-radio-group__legend-label {
11119
+ color: var(--ids-comp-radio-group-legend-color-fg-surface-disabled);
10977
11120
  }
10978
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled) {
11121
+ .ids-radio-group .ids-radio-surface input[type=radio]:not(:disabled) {
10979
11122
  border-color: var(--ids-comp-radio-input-unselected-color-border-surface-default);
10980
11123
  background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-default);
10981
11124
  }
10982
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled):hover {
11125
+ .ids-radio-group .ids-radio-surface input[type=radio]:not(:disabled):hover {
10983
11126
  border-color: var(--ids-comp-radio-input-unselected-color-border-surface-hovered);
10984
11127
  background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-hovered);
10985
11128
  }
10986
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled):active {
11129
+ .ids-radio-group .ids-radio-surface input[type=radio]:not(:disabled):active {
10987
11130
  border-color: var(--ids-comp-radio-input-unselected-color-border-surface-pressed);
10988
11131
  background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-pressed);
10989
11132
  }
10990
- .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 {
11133
+ .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 {
10991
11134
  border-color: var(--ids-comp-radio-input-unselected-color-border-surface-default);
10992
11135
  background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-default);
10993
11136
  outline-color: var(--ids-comp-radio-input-unselected-color-focused-outline-surface-focused);
10994
11137
  }
10995
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:disabled {
11138
+ .ids-radio-group .ids-radio-surface input[type=radio]:disabled {
10996
11139
  border-color: var(--ids-comp-radio-input-unselected-color-border-surface-disabled);
10997
11140
  background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-disabled);
10998
11141
  }
10999
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) {
11142
+ .ids-radio-group .ids-radio-surface input[type=radio]:checked:not(:disabled) {
11000
11143
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-default);
11001
11144
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-default);
11002
11145
  }
11003
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
11146
+ .ids-radio-group .ids-radio-surface input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
11004
11147
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-default);
11005
11148
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-default);
11006
11149
  }
11007
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover {
11150
+ .ids-radio-group .ids-radio-surface input[type=radio]:checked:not(:disabled):hover {
11008
11151
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-hovered);
11009
11152
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-hovered);
11010
11153
  }
11011
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
11154
+ .ids-radio-group .ids-radio-surface input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
11012
11155
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-hovered);
11013
11156
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-hovered);
11014
11157
  }
11015
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active {
11158
+ .ids-radio-group .ids-radio-surface input[type=radio]:checked:not(:disabled):active {
11016
11159
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-pressed);
11017
11160
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-pressed);
11018
11161
  }
11019
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
11162
+ .ids-radio-group .ids-radio-surface input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
11020
11163
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-pressed);
11021
11164
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-pressed);
11022
11165
  }
11023
- .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 {
11166
+ .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 {
11024
11167
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-default);
11025
11168
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-default);
11026
11169
  outline-color: var(--ids-comp-radio-input-selected-color-focused-outline-surface-focused);
11027
11170
  }
11028
- .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 {
11171
+ .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 {
11029
11172
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-default);
11030
11173
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-default);
11031
11174
  }
11032
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:disabled {
11175
+ .ids-radio-group .ids-radio-surface input[type=radio]:checked:disabled {
11033
11176
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-disabled);
11034
11177
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-disabled);
11035
11178
  }
11036
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:disabled + .ids-radio__inner-circle {
11179
+ .ids-radio-group .ids-radio-surface input[type=radio]:checked:disabled + .ids-radio__inner-circle {
11037
11180
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-disabled);
11038
11181
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-disabled);
11039
11182
  }
11040
- .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) {
11183
+ .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) {
11184
+ border-color: var(--ids-comp-radio-input-unselected-color-border-surface-hovered);
11185
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-hovered);
11186
+ }
11187
+ .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 {
11188
+ color: var(--ids-comp-radio-label-color-fg-surface-hovered);
11189
+ }
11190
+ .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) {
11041
11191
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-hovered);
11042
11192
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-hovered);
11043
11193
  }
11044
- .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 {
11194
+ .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 {
11045
11195
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-hovered);
11046
11196
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-hovered);
11047
11197
  }
11198
+ .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 {
11199
+ color: var(--ids-comp-radio-label-color-fg-surface-hovered);
11200
+ }
11048
11201
  .ids-radio-group .ids-radio-surface .ids-radio__label {
11049
11202
  color: var(--ids-comp-radio-label-color-fg-surface-default);
11050
11203
  }
11051
- .ids-radio-group .ids-radio-surface .ids-radio__label:hover {
11052
- color: var(--ids-comp-radio-label-color-fg-surface-hovered);
11053
- }
11054
11204
  .ids-radio-group .ids-radio-surface .ids-radio__label:active {
11055
11205
  color: var(--ids-comp-radio-label-color-fg-surface-pressed);
11056
11206
  }
@@ -11060,86 +11210,95 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
11060
11210
  .ids-radio-group .ids-radio-surface.ids-radio-disabled .ids-radio__label {
11061
11211
  color: var(--ids-comp-radio-label-color-fg-surface-disabled);
11062
11212
  }
11063
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
11064
- border-color: var(--ids-comp-radio-input-unselected-color-border-light-hovered);
11065
- background-color: var(--ids-comp-radio-input-unselected-color-bg-light-hovered);
11213
+ .ids-radio-group.ids-radio-group-light .ids-radio-group__legend-label {
11214
+ color: var(--ids-comp-radio-group-legend-color-fg-light-default);
11215
+ }
11216
+ .ids-radio-group.ids-radio-group-light.ids-radio-group-disabled .ids-radio-group__legend-label {
11217
+ color: var(--ids-comp-radio-group-legend-color-fg-light-disabled);
11066
11218
  }
11067
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled) {
11219
+ .ids-radio-group .ids-radio-light input[type=radio]:not(:disabled) {
11068
11220
  border-color: var(--ids-comp-radio-input-unselected-color-border-light-default);
11069
11221
  background-color: var(--ids-comp-radio-input-unselected-color-bg-light-default);
11070
11222
  }
11071
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled):hover {
11223
+ .ids-radio-group .ids-radio-light input[type=radio]:not(:disabled):hover {
11072
11224
  border-color: var(--ids-comp-radio-input-unselected-color-border-light-hovered);
11073
11225
  background-color: var(--ids-comp-radio-input-unselected-color-bg-light-hovered);
11074
11226
  }
11075
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled):active {
11227
+ .ids-radio-group .ids-radio-light input[type=radio]:not(:disabled):active {
11076
11228
  border-color: var(--ids-comp-radio-input-unselected-color-border-light-pressed);
11077
11229
  background-color: var(--ids-comp-radio-input-unselected-color-bg-light-pressed);
11078
11230
  }
11079
- .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 {
11231
+ .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 {
11080
11232
  border-color: var(--ids-comp-radio-input-unselected-color-border-light-default);
11081
11233
  background-color: var(--ids-comp-radio-input-unselected-color-bg-light-default);
11082
11234
  outline-color: var(--ids-comp-radio-input-unselected-color-focused-outline-light-focused);
11083
11235
  }
11084
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:disabled {
11236
+ .ids-radio-group .ids-radio-light input[type=radio]:disabled {
11085
11237
  border-color: var(--ids-comp-radio-input-unselected-color-border-light-disabled);
11086
11238
  background-color: var(--ids-comp-radio-input-unselected-color-bg-light-disabled);
11087
11239
  }
11088
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) {
11240
+ .ids-radio-group .ids-radio-light input[type=radio]:checked:not(:disabled) {
11089
11241
  border-color: var(--ids-comp-radio-input-selected-color-border-light-default);
11090
11242
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-default);
11091
11243
  }
11092
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
11244
+ .ids-radio-group .ids-radio-light input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
11093
11245
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-default);
11094
11246
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-default);
11095
11247
  }
11096
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover {
11248
+ .ids-radio-group .ids-radio-light input[type=radio]:checked:not(:disabled):hover {
11097
11249
  border-color: var(--ids-comp-radio-input-selected-color-border-light-hovered);
11098
11250
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-hovered);
11099
11251
  }
11100
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
11252
+ .ids-radio-group .ids-radio-light input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
11101
11253
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-hovered);
11102
11254
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-hovered);
11103
11255
  }
11104
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active {
11256
+ .ids-radio-group .ids-radio-light input[type=radio]:checked:not(:disabled):active {
11105
11257
  border-color: var(--ids-comp-radio-input-selected-color-border-light-pressed);
11106
11258
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-pressed);
11107
11259
  }
11108
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
11260
+ .ids-radio-group .ids-radio-light input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
11109
11261
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-pressed);
11110
11262
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-pressed);
11111
11263
  }
11112
- .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 {
11264
+ .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 {
11113
11265
  border-color: var(--ids-comp-radio-input-selected-color-border-light-default);
11114
11266
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-default);
11115
11267
  outline-color: var(--ids-comp-radio-input-selected-color-focused-outline-light-focused);
11116
11268
  }
11117
- .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 {
11269
+ .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 {
11118
11270
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-default);
11119
11271
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-default);
11120
11272
  }
11121
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:disabled {
11273
+ .ids-radio-group .ids-radio-light input[type=radio]:checked:disabled {
11122
11274
  border-color: var(--ids-comp-radio-input-selected-color-border-light-disabled);
11123
11275
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-disabled);
11124
11276
  }
11125
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:disabled + .ids-radio__inner-circle {
11277
+ .ids-radio-group .ids-radio-light input[type=radio]:checked:disabled + .ids-radio__inner-circle {
11126
11278
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-disabled);
11127
11279
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-disabled);
11128
11280
  }
11129
- .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) {
11281
+ .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) {
11282
+ border-color: var(--ids-comp-radio-input-unselected-color-border-light-hovered);
11283
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-light-hovered);
11284
+ }
11285
+ .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 {
11286
+ color: var(--ids-comp-radio-label-color-fg-light-hovered);
11287
+ }
11288
+ .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) {
11130
11289
  border-color: var(--ids-comp-radio-input-selected-color-border-light-hovered);
11131
11290
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-hovered);
11132
11291
  }
11133
- .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 {
11292
+ .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 {
11134
11293
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-hovered);
11135
11294
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-hovered);
11136
11295
  }
11296
+ .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 {
11297
+ color: var(--ids-comp-radio-label-color-fg-light-hovered);
11298
+ }
11137
11299
  .ids-radio-group .ids-radio-light .ids-radio__label {
11138
11300
  color: var(--ids-comp-radio-label-color-fg-light-default);
11139
11301
  }
11140
- .ids-radio-group .ids-radio-light .ids-radio__label:hover {
11141
- color: var(--ids-comp-radio-label-color-fg-light-hovered);
11142
- }
11143
11302
  .ids-radio-group .ids-radio-light .ids-radio__label:active {
11144
11303
  color: var(--ids-comp-radio-label-color-fg-light-pressed);
11145
11304
  }
@@ -11149,86 +11308,95 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
11149
11308
  .ids-radio-group .ids-radio-light.ids-radio-disabled .ids-radio__label {
11150
11309
  color: var(--ids-comp-radio-label-color-fg-light-disabled);
11151
11310
  }
11152
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
11153
- border-color: var(--ids-comp-radio-input-unselected-color-border-dark-hovered);
11154
- background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-hovered);
11311
+ .ids-radio-group.ids-radio-group-dark .ids-radio-group__legend-label {
11312
+ color: var(--ids-comp-radio-group-legend-color-fg-dark-default);
11313
+ }
11314
+ .ids-radio-group.ids-radio-group-dark.ids-radio-group-disabled .ids-radio-group__legend-label {
11315
+ color: var(--ids-comp-radio-group-legend-color-fg-dark-disabled);
11155
11316
  }
11156
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled) {
11317
+ .ids-radio-group .ids-radio-dark input[type=radio]:not(:disabled) {
11157
11318
  border-color: var(--ids-comp-radio-input-unselected-color-border-dark-default);
11158
11319
  background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-default);
11159
11320
  }
11160
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled):hover {
11321
+ .ids-radio-group .ids-radio-dark input[type=radio]:not(:disabled):hover {
11161
11322
  border-color: var(--ids-comp-radio-input-unselected-color-border-dark-hovered);
11162
11323
  background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-hovered);
11163
11324
  }
11164
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled):active {
11325
+ .ids-radio-group .ids-radio-dark input[type=radio]:not(:disabled):active {
11165
11326
  border-color: var(--ids-comp-radio-input-unselected-color-border-dark-pressed);
11166
11327
  background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-pressed);
11167
11328
  }
11168
- .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 {
11329
+ .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 {
11169
11330
  border-color: var(--ids-comp-radio-input-unselected-color-border-dark-default);
11170
11331
  background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-default);
11171
11332
  outline-color: var(--ids-comp-radio-input-unselected-color-focused-outline-dark-focused);
11172
11333
  }
11173
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:disabled {
11334
+ .ids-radio-group .ids-radio-dark input[type=radio]:disabled {
11174
11335
  border-color: var(--ids-comp-radio-input-unselected-color-border-dark-disabled);
11175
11336
  background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-disabled);
11176
11337
  }
11177
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) {
11338
+ .ids-radio-group .ids-radio-dark input[type=radio]:checked:not(:disabled) {
11178
11339
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-default);
11179
11340
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-default);
11180
11341
  }
11181
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
11342
+ .ids-radio-group .ids-radio-dark input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
11182
11343
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-default);
11183
11344
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-default);
11184
11345
  }
11185
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover {
11346
+ .ids-radio-group .ids-radio-dark input[type=radio]:checked:not(:disabled):hover {
11186
11347
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-hovered);
11187
11348
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-hovered);
11188
11349
  }
11189
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
11350
+ .ids-radio-group .ids-radio-dark input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
11190
11351
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-hovered);
11191
11352
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-hovered);
11192
11353
  }
11193
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active {
11354
+ .ids-radio-group .ids-radio-dark input[type=radio]:checked:not(:disabled):active {
11194
11355
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-pressed);
11195
11356
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-pressed);
11196
11357
  }
11197
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
11358
+ .ids-radio-group .ids-radio-dark input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
11198
11359
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-pressed);
11199
11360
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-pressed);
11200
11361
  }
11201
- .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 {
11362
+ .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 {
11202
11363
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-default);
11203
11364
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-default);
11204
11365
  outline-color: var(--ids-comp-radio-input-selected-color-focused-outline-dark-focused);
11205
11366
  }
11206
- .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 {
11367
+ .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 {
11207
11368
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-default);
11208
11369
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-default);
11209
11370
  }
11210
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:disabled {
11371
+ .ids-radio-group .ids-radio-dark input[type=radio]:checked:disabled {
11211
11372
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-disabled);
11212
11373
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-disabled);
11213
11374
  }
11214
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:disabled + .ids-radio__inner-circle {
11375
+ .ids-radio-group .ids-radio-dark input[type=radio]:checked:disabled + .ids-radio__inner-circle {
11215
11376
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-disabled);
11216
11377
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-disabled);
11217
11378
  }
11218
- .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) {
11379
+ .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) {
11380
+ border-color: var(--ids-comp-radio-input-unselected-color-border-dark-hovered);
11381
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-hovered);
11382
+ }
11383
+ .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 {
11384
+ color: var(--ids-comp-radio-label-color-fg-dark-hovered);
11385
+ }
11386
+ .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) {
11219
11387
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-hovered);
11220
11388
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-hovered);
11221
11389
  }
11222
- .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 {
11390
+ .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 {
11223
11391
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-hovered);
11224
11392
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-hovered);
11225
11393
  }
11394
+ .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 {
11395
+ color: var(--ids-comp-radio-label-color-fg-dark-hovered);
11396
+ }
11226
11397
  .ids-radio-group .ids-radio-dark .ids-radio__label {
11227
11398
  color: var(--ids-comp-radio-label-color-fg-dark-default);
11228
11399
  }
11229
- .ids-radio-group .ids-radio-dark .ids-radio__label:hover {
11230
- color: var(--ids-comp-radio-label-color-fg-dark-hovered);
11231
- }
11232
11400
  .ids-radio-group .ids-radio-dark .ids-radio__label:active {
11233
11401
  color: var(--ids-comp-radio-label-color-fg-dark-pressed);
11234
11402
  }
@@ -11238,186 +11406,204 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
11238
11406
  .ids-radio-group .ids-radio-dark.ids-radio-disabled .ids-radio__label {
11239
11407
  color: var(--ids-comp-radio-label-color-fg-dark-disabled);
11240
11408
  }
11241
- .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) {
11242
- border-color: var(--ids-comp-radio-input-unselected-color-border-surface-error-hovered);
11243
- background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-hovered);
11244
- }
11245
- .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) {
11409
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:not(:disabled) {
11246
11410
  border-color: var(--ids-comp-radio-input-unselected-color-border-surface-error-default);
11247
11411
  background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-default);
11248
11412
  }
11249
- .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 {
11413
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:not(:disabled):hover {
11250
11414
  border-color: var(--ids-comp-radio-input-unselected-color-border-surface-error-hovered);
11251
11415
  background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-hovered);
11252
11416
  }
11253
- .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 {
11417
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:not(:disabled):active {
11254
11418
  border-color: var(--ids-comp-radio-input-unselected-color-border-surface-error-pressed);
11255
11419
  background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-pressed);
11256
11420
  }
11257
- .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 {
11421
+ .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 {
11258
11422
  border-color: var(--ids-comp-radio-input-unselected-color-border-surface-error-default);
11259
11423
  background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-default);
11260
11424
  }
11261
- .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) {
11425
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:checked:not(:disabled) {
11262
11426
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-error-default);
11263
11427
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-default);
11264
11428
  }
11265
- .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 {
11429
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
11266
11430
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-error-default);
11267
11431
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-error-default);
11268
11432
  }
11269
- .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 {
11433
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:checked:not(:disabled):hover {
11270
11434
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-error-hovered);
11271
11435
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-hovered);
11272
11436
  }
11273
- .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 {
11437
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
11274
11438
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-error-hovered);
11275
11439
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-error-hovered);
11276
11440
  }
11277
- .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 {
11441
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:checked:not(:disabled):active {
11278
11442
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-error-pressed);
11279
11443
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-pressed);
11280
11444
  }
11281
- .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 {
11445
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
11282
11446
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-error-pressed);
11283
11447
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-error-pressed);
11284
11448
  }
11285
- .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 {
11449
+ .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 {
11286
11450
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-error-default);
11287
11451
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-default);
11288
11452
  }
11289
- .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 {
11453
+ .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 {
11290
11454
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-error-default);
11291
11455
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-error-default);
11292
11456
  }
11293
- .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) {
11457
+ .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) {
11458
+ border-color: var(--ids-comp-radio-input-unselected-color-border-surface-error-hovered);
11459
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-hovered);
11460
+ }
11461
+ .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 {
11462
+ color: var(--ids-comp-radio-label-color-fg-surface-hovered);
11463
+ }
11464
+ .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) {
11294
11465
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-error-hovered);
11295
11466
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-hovered);
11296
11467
  }
11297
- .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 {
11468
+ .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 {
11298
11469
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-error-hovered);
11299
11470
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-error-hovered);
11300
11471
  }
11301
- .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) {
11302
- border-color: var(--ids-comp-radio-input-unselected-color-border-light-error-hovered);
11303
- background-color: var(--ids-comp-radio-input-unselected-color-bg-light-hovered);
11472
+ .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 {
11473
+ color: var(--ids-comp-radio-label-color-fg-surface-hovered);
11304
11474
  }
11305
- .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) {
11475
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:not(:disabled) {
11306
11476
  border-color: var(--ids-comp-radio-input-unselected-color-border-light-error-default);
11307
11477
  background-color: var(--ids-comp-radio-input-unselected-color-bg-light-default);
11308
11478
  }
11309
- .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 {
11479
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:not(:disabled):hover {
11310
11480
  border-color: var(--ids-comp-radio-input-unselected-color-border-light-error-hovered);
11311
11481
  background-color: var(--ids-comp-radio-input-unselected-color-bg-light-hovered);
11312
11482
  }
11313
- .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 {
11483
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:not(:disabled):active {
11314
11484
  border-color: var(--ids-comp-radio-input-unselected-color-border-light-error-pressed);
11315
11485
  background-color: var(--ids-comp-radio-input-unselected-color-bg-light-pressed);
11316
11486
  }
11317
- .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 {
11487
+ .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 {
11318
11488
  border-color: var(--ids-comp-radio-input-unselected-color-border-light-error-default);
11319
11489
  background-color: var(--ids-comp-radio-input-unselected-color-bg-light-default);
11320
11490
  }
11321
- .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) {
11491
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:checked:not(:disabled) {
11322
11492
  border-color: var(--ids-comp-radio-input-selected-color-border-light-error-default);
11323
11493
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-default);
11324
11494
  }
11325
- .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 {
11495
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
11326
11496
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-error-default);
11327
11497
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-error-default);
11328
11498
  }
11329
- .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 {
11499
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:checked:not(:disabled):hover {
11330
11500
  border-color: var(--ids-comp-radio-input-selected-color-border-light-error-hovered);
11331
11501
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-hovered);
11332
11502
  }
11333
- .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 {
11503
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
11334
11504
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-error-hovered);
11335
11505
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-error-hovered);
11336
11506
  }
11337
- .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 {
11507
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:checked:not(:disabled):active {
11338
11508
  border-color: var(--ids-comp-radio-input-selected-color-border-light-error-pressed);
11339
11509
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-pressed);
11340
11510
  }
11341
- .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 {
11511
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
11342
11512
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-error-pressed);
11343
11513
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-error-pressed);
11344
11514
  }
11345
- .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 {
11515
+ .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 {
11346
11516
  border-color: var(--ids-comp-radio-input-selected-color-border-light-error-default);
11347
11517
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-default);
11348
11518
  }
11349
- .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 {
11519
+ .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 {
11350
11520
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-error-default);
11351
11521
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-error-default);
11352
11522
  }
11353
- .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) {
11523
+ .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) {
11524
+ border-color: var(--ids-comp-radio-input-unselected-color-border-light-error-hovered);
11525
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-light-hovered);
11526
+ }
11527
+ .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 {
11528
+ color: var(--ids-comp-radio-label-color-fg-light-hovered);
11529
+ }
11530
+ .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) {
11354
11531
  border-color: var(--ids-comp-radio-input-selected-color-border-light-error-hovered);
11355
11532
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-hovered);
11356
11533
  }
11357
- .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 {
11534
+ .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 {
11358
11535
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-error-hovered);
11359
11536
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-error-hovered);
11360
11537
  }
11361
- .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) {
11362
- border-color: var(--ids-comp-radio-input-unselected-color-border-dark-error-hovered);
11363
- background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-hovered);
11538
+ .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 {
11539
+ color: var(--ids-comp-radio-label-color-fg-light-hovered);
11364
11540
  }
11365
- .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) {
11541
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:not(:disabled) {
11366
11542
  border-color: var(--ids-comp-radio-input-unselected-color-border-dark-error-default);
11367
11543
  background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-default);
11368
11544
  }
11369
- .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 {
11545
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:not(:disabled):hover {
11370
11546
  border-color: var(--ids-comp-radio-input-unselected-color-border-dark-error-hovered);
11371
11547
  background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-hovered);
11372
11548
  }
11373
- .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 {
11549
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:not(:disabled):active {
11374
11550
  border-color: var(--ids-comp-radio-input-unselected-color-border-dark-error-pressed);
11375
11551
  background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-pressed);
11376
11552
  }
11377
- .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 {
11553
+ .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 {
11378
11554
  border-color: var(--ids-comp-radio-input-unselected-color-border-dark-error-default);
11379
11555
  background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-default);
11380
11556
  }
11381
- .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) {
11557
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:checked:not(:disabled) {
11382
11558
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-error-default);
11383
11559
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-default);
11384
11560
  }
11385
- .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 {
11561
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
11386
11562
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-error-default);
11387
11563
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-error-default);
11388
11564
  }
11389
- .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 {
11565
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:checked:not(:disabled):hover {
11390
11566
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-error-hovered);
11391
11567
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-hovered);
11392
11568
  }
11393
- .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 {
11569
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
11394
11570
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-error-hovered);
11395
11571
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-error-hovered);
11396
11572
  }
11397
- .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 {
11573
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:checked:not(:disabled):active {
11398
11574
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-error-pressed);
11399
11575
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-pressed);
11400
11576
  }
11401
- .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 {
11577
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
11402
11578
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-error-pressed);
11403
11579
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-error-pressed);
11404
11580
  }
11405
- .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 {
11581
+ .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 {
11406
11582
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-error-default);
11407
11583
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-default);
11408
11584
  }
11409
- .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 {
11585
+ .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 {
11410
11586
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-error-default);
11411
11587
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-error-default);
11412
11588
  }
11413
- .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) {
11589
+ .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) {
11590
+ border-color: var(--ids-comp-radio-input-unselected-color-border-dark-error-hovered);
11591
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-hovered);
11592
+ }
11593
+ .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 {
11594
+ color: var(--ids-comp-radio-label-color-fg-dark-hovered);
11595
+ }
11596
+ .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) {
11414
11597
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-error-hovered);
11415
11598
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-hovered);
11416
11599
  }
11417
- .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 {
11600
+ .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 {
11418
11601
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-error-hovered);
11419
11602
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-error-hovered);
11420
11603
  }
11604
+ .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 {
11605
+ color: var(--ids-comp-radio-label-color-fg-dark-hovered);
11606
+ }
11421
11607
 
11422
11608
  .ids-segmented-control {
11423
11609
  box-sizing: border-box;
@@ -13205,7 +13391,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
13205
13391
  left: 0;
13206
13392
  width: 100vw;
13207
13393
  height: 100vh;
13208
- z-index: 999;
13394
+ z-index: 1000;
13209
13395
  }
13210
13396
  .ids-side-sheet .ids-side-sheet__container, .ids-side-sheet .ids-side-sheet__container--inline {
13211
13397
  box-shadow: var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxl) var(--ids-smc-reference-container-effects-shadow-blur-xxxl) var(--ids-smc-reference-container-effects-shadow-spread-xxs) var(--ids-smc-reference-container-effects-shadow-color-dark-default);