@i-cell/ids-styles 0.0.67 → 0.0.70

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) 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 +88 -28
  5. package/dist/checkbox/checkbox-group.min.css +1 -1
  6. package/dist/checkbox/checkbox-group.plugin.js +124 -36
  7. package/dist/checkbox/checkbox.css +111 -99
  8. package/dist/checkbox/checkbox.min.css +1 -1
  9. package/dist/checkbox/checkbox.plugin.js +130 -123
  10. package/dist/components.css +628 -383
  11. package/dist/components.min.css +1 -1
  12. package/dist/components.plugin.js +764 -520
  13. package/dist/dialog/dialog.css +2 -0
  14. package/dist/dialog/dialog.min.css +1 -1
  15. package/dist/dialog/dialog.plugin.js +8 -2
  16. package/dist/notification/notification.css +3 -1
  17. package/dist/notification/notification.min.css +1 -1
  18. package/dist/notification/notification.plugin.js +1 -1
  19. package/dist/option/option.css +6 -6
  20. package/dist/option/option.min.css +1 -1
  21. package/dist/option/option.plugin.js +13 -6
  22. package/dist/radio/radio.css +342 -190
  23. package/dist/radio/radio.min.css +1 -1
  24. package/dist/radio/radio.plugin.js +417 -299
  25. package/dist/switch/switch.css +72 -57
  26. package/dist/switch/switch.min.css +1 -1
  27. package/dist/switch/switch.plugin.js +63 -52
  28. package/package.json +2 -2
package/dist/radio/radio.css CHANGED
@@ -4,6 +4,10 @@
4
4
  border-style: none;
5
5
  border-color: transparent;
6
6
  line-height: 1.5;
7
+ display: flex;
8
+ flex-direction: column;
9
+ justify-content: center;
10
+ align-items: flex-start;
7
11
  }
8
12
  .ids-radio-group::before, .ids-radio-group::after, .ids-radio-group *, .ids-radio-group ::before, .ids-radio-group ::after {
9
13
  box-sizing: border-box;
@@ -11,22 +15,28 @@
11
15
  border-style: none;
12
16
  border-color: transparent;
13
17
  }
14
-
15
- .ids-radio-group {
16
- display: inline-flex;
17
- align-items: flex-start;
18
- justify-content: start;
18
+ .ids-radio-group.ids-radio-group-left {
19
+ align-items: flex-end;
19
20
  }
20
- .ids-radio-group.ids-radio-group-horizontal {
21
- flex-direction: row;
21
+ .ids-radio-group.ids-radio-group-right {
22
+ align-items: flex-start;
22
23
  }
23
- .ids-radio-group.ids-radio-group-vertical {
24
+ .ids-radio-group > .ids-radio-group__legend {
25
+ display: flex;
24
26
  flex-direction: column;
25
27
  }
26
- .ids-radio-group.ids-radio-group-left {
27
- align-items: flex-end;
28
+ .ids-radio-group > .ids-radio-group__legend > .ids-radio-group__legend-container > .ids-radio-group__legend-label {
29
+ font-style: normal;
28
30
  }
29
- .ids-radio-group.ids-radio-group-right {
31
+ .ids-radio-group > .ids-radio-group__list {
32
+ display: flex;
33
+ }
34
+ .ids-radio-group.ids-radio-group-horizontal > .ids-radio-group__list {
35
+ flex-direction: row;
36
+ align-items: center;
37
+ }
38
+ .ids-radio-group.ids-radio-group-vertical > .ids-radio-group__list {
39
+ flex-direction: column;
30
40
  align-items: flex-start;
31
41
  }
32
42
  .ids-radio-group .ids-radio {
@@ -37,82 +47,110 @@
37
47
  flex-direction: row-reverse;
38
48
  justify-content: start;
39
49
  }
40
- .ids-radio-group .ids-radio.ids-radio-righ {
50
+ .ids-radio-group .ids-radio.ids-radio-right {
41
51
  flex-direction: row;
42
52
  justify-content: start;
43
53
  }
44
54
  .ids-radio-group .ids-radio.ids-radio-top {
45
55
  flex-direction: column-reverse;
56
+ justify-content: center;
46
57
  align-items: center;
47
58
  }
48
59
  .ids-radio-group .ids-radio.ids-radio-bottom {
49
60
  flex-direction: column;
50
61
  align-items: center;
51
62
  }
63
+ .ids-radio-group .ids-radio.ids-radio-top .ids-radio__label-wrapper, .ids-radio-group .ids-radio.ids-radio-bottom .ids-radio__label-wrapper {
64
+ align-items: center;
65
+ }
66
+ .ids-radio-group .ids-radio.ids-radio-top .ids-radio__label, .ids-radio-group .ids-radio.ids-radio-bottom .ids-radio__label {
67
+ justify-content: center;
68
+ }
69
+ .ids-radio-group .ids-radio.ids-radio-left .ids-radio__label-wrapper, .ids-radio-group .ids-radio.ids-radio-right .ids-radio__label-wrapper {
70
+ align-items: flex-start;
71
+ }
72
+ .ids-radio-group .ids-radio.ids-radio-left .ids-radio__label, .ids-radio-group .ids-radio.ids-radio-right .ids-radio__label {
73
+ justify-content: start;
74
+ }
52
75
  .ids-radio-group .ids-radio .ids-radio__input-wrapper {
53
76
  position: relative;
54
77
  display: flex;
55
78
  align-items: center;
56
79
  justify-content: center;
57
80
  }
58
- .ids-radio-group .ids-radio .ids-radio__input-wrapper .ids-radio__touch-target {
81
+ .ids-radio-group .ids-radio .ids-radio__touch-target {
59
82
  position: absolute;
60
83
  cursor: pointer;
61
84
  }
62
- .ids-radio-group .ids-radio .ids-radio__input-wrapper input[type=radio] {
85
+ .ids-radio-group .ids-radio input[type=radio] {
63
86
  appearance: none;
64
87
  -webkit-appearance: none;
65
- flex-shrink: 0;
66
- border-style: solid;
67
- margin: 0;
68
88
  display: flex;
69
- justify-content: center;
70
89
  align-items: center;
90
+ justify-content: center;
71
91
  flex-shrink: 0;
92
+ margin: 0;
93
+ border-style: solid;
72
94
  cursor: pointer;
73
95
  }
74
- .ids-radio-group .ids-radio .ids-radio__input-wrapper input[type=radio] + .ids-radio__inner-circle {
96
+ .ids-radio-group .ids-radio input[type=radio]:focus, .ids-radio-group .ids-radio input[type=radio]:focus-visible {
97
+ outline-offset: 2px;
98
+ outline-style: solid;
99
+ }
100
+ .ids-radio-group .ids-radio input[type=radio] + .ids-radio__inner-circle {
75
101
  position: absolute;
76
102
  flex-shrink: 0;
77
- border-style: solid;
78
- height: 0;
79
103
  width: 0;
104
+ height: 0;
80
105
  border-width: 0;
106
+ border-style: solid;
81
107
  cursor: pointer;
82
108
  }
83
- .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 {
84
- outline-offset: 2px;
85
- outline-style: solid;
109
+ .ids-radio-group .ids-radio .ids-radio__label-wrapper {
110
+ display: flex;
111
+ flex-direction: column;
112
+ cursor: pointer;
86
113
  }
87
114
  .ids-radio-group .ids-radio .ids-radio__label {
115
+ display: flex;
116
+ align-items: center;
117
+ flex: 1 0 0;
118
+ font-style: normal;
88
119
  cursor: pointer;
89
120
  }
90
- .ids-radio-group .ids-radio.ids-radio-disabled .ids-radio__input-wrapper .ids-radio__touch-target {
121
+ .ids-radio-group .ids-radio.ids-radio-disabled .ids-radio__touch-target,
122
+ .ids-radio-group .ids-radio.ids-radio-disabled input[type=radio],
123
+ .ids-radio-group .ids-radio.ids-radio-disabled input[type=radio] + .ids-radio__inner-circle,
124
+ .ids-radio-group .ids-radio.ids-radio-disabled .ids-radio__label-wrapper,
125
+ .ids-radio-group .ids-radio.ids-radio-disabled .ids-radio__label {
91
126
  cursor: not-allowed;
92
127
  }
93
- .ids-radio-group .ids-radio.ids-radio-disabled .ids-radio__input-wrapper input[type=radio] {
94
- cursor: not-allowed;
128
+ .ids-radio-group.ids-radio-group-compact {
129
+ padding: var(--ids-comp-radio-group-vertical-fieldset-legend-size-padding-y-compact) var(--ids-comp-radio-group-vertical-fieldset-legend-size-padding-x-compact);
130
+ gap: var(--ids-comp-radio-group-vertical-fieldset-size-gap-compact);
95
131
  }
96
- .ids-radio-group .ids-radio.ids-radio-disabled .ids-radio__input-wrapper input[type=radio] + .ids-radio__inner-circle {
97
- cursor: not-allowed;
132
+ .ids-radio-group.ids-radio-group-compact > .ids-radio-group__legend {
133
+ gap: var(--ids-comp-radio-group-vertical-fieldset-legend-size-gap-compact);
98
134
  }
99
- .ids-radio-group .ids-radio.ids-radio-disabled .ids-radio__label {
100
- cursor: not-allowed;
135
+ .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 {
136
+ font-family: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-family-compact);
137
+ font-size: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-size-compact);
138
+ font-weight: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-weight-compact);
139
+ line-height: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-line-height-compact);
140
+ letter-spacing: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-letter-spacing-compact);
101
141
  }
102
- .ids-radio-group .ids-radio .ids-radio__label {
103
- display: flex;
104
- justify-content: center;
105
- align-items: center;
106
- flex: 1 0 0;
107
- font-style: normal;
142
+ .ids-radio-group.ids-radio-group-compact.ids-radio-group-horizontal > .ids-radio-group__list {
143
+ 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);
108
144
  }
109
- .ids-radio-group.ids-radio-group-compact.ids-radio-group-horizontal {
110
- padding: var(--ids-comp-radio-group-horizontal-container-size-padding-y-compact) var(--ids-comp-radio-group-horizontal-container-size-padding-x-compact);
111
- gap: var(--ids-comp-radio-group-horizontal-container-size-gap-compact);
145
+ .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 {
146
+ font-family: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-family-compact);
147
+ font-size: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-size-compact);
148
+ font-weight: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-weight-compact);
149
+ line-height: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-line-height-compact);
150
+ letter-spacing: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-letter-spacing-compact);
112
151
  }
113
- .ids-radio-group.ids-radio-group-compact.ids-radio-group-vertical {
114
- padding: var(--ids-comp-radio-group-vertical-container-size-padding-y-compact) var(--ids-comp-radio-group-vertical-container-size-padding-x-compact);
115
- gap: var(--ids-comp-radio-group-vertical-container-size-gap-compact);
152
+ .ids-radio-group.ids-radio-group-compact.ids-radio-group-vertical > .ids-radio-group__list {
153
+ gap: var(--ids-comp-radio-group-vertical-fieldset-list-size-gap-compact);
116
154
  }
117
155
  .ids-radio-group.ids-radio-group-compact .ids-radio {
118
156
  padding: var(--ids-comp-radio-button-container-size-padding-y-compact) var(--ids-comp-radio-button-container-size-padding-x-compact);
@@ -121,8 +159,8 @@
121
159
  .ids-radio-group.ids-radio-group-compact .ids-radio .ids-radio__input-wrapper .ids-radio__touch-target {
122
160
  top: calc((var(--ids-comp-radio-button-input-size-height-compact) - var(--ids-comp-radio-button-input-size-touchtarget-height-compact)) / 2);
123
161
  left: calc((var(--ids-comp-radio-button-input-size-width-compact) - var(--ids-comp-radio-button-input-size-touchtarget-width-compact)) / 2);
124
- height: var(--ids-comp-radio-button-input-size-touchtarget-height-compact);
125
162
  width: var(--ids-comp-radio-button-input-size-touchtarget-width-compact);
163
+ height: var(--ids-comp-radio-button-input-size-touchtarget-height-compact);
126
164
  }
127
165
  .ids-radio-group.ids-radio-group-compact .ids-radio .ids-radio__input-wrapper input[type=radio] {
128
166
  width: var(--ids-comp-radio-button-input-size-width-compact);
@@ -139,21 +177,43 @@
139
177
  .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 {
140
178
  outline-width: var(--ids-comp-radio-focused-outline-outline-compact);
141
179
  }
180
+ .ids-radio-group.ids-radio-group-compact .ids-radio .ids-radio__label-wrapper {
181
+ gap: var(--ids-comp-radio-button-label-group-size-gap-compact);
182
+ }
142
183
  .ids-radio-group.ids-radio-group-compact .ids-radio .ids-radio__label {
143
- padding: var(--ids-comp-radio-button-label-size-padding-y-compact) 0px;
184
+ padding: var(--ids-comp-radio-button-label-size-padding-y-compact) 0;
144
185
  font-family: var(--ids-comp-radio-button-label-typography-font-family-compact);
145
186
  font-size: var(--ids-comp-radio-button-label-typography-font-size-compact);
146
187
  font-weight: var(--ids-comp-radio-button-label-typography-font-weight-compact);
147
188
  line-height: var(--ids-comp-radio-button-label-typography-line-height-compact);
148
189
  letter-spacing: var(--ids-comp-radio-button-label-typography-letter-spacing-compact);
149
190
  }
150
- .ids-radio-group.ids-radio-group-comfortable.ids-radio-group-horizontal {
151
- padding: var(--ids-comp-radio-group-horizontal-container-size-padding-y-comfortable) var(--ids-comp-radio-group-horizontal-container-size-padding-x-comfortable);
152
- gap: var(--ids-comp-radio-group-horizontal-container-size-gap-comfortable);
191
+ .ids-radio-group.ids-radio-group-comfortable {
192
+ padding: var(--ids-comp-radio-group-vertical-fieldset-legend-size-padding-y-comfortable) var(--ids-comp-radio-group-vertical-fieldset-legend-size-padding-x-comfortable);
193
+ gap: var(--ids-comp-radio-group-vertical-fieldset-size-gap-comfortable);
194
+ }
195
+ .ids-radio-group.ids-radio-group-comfortable > .ids-radio-group__legend {
196
+ gap: var(--ids-comp-radio-group-vertical-fieldset-legend-size-gap-comfortable);
197
+ }
198
+ .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 {
199
+ font-family: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-family-comfortable);
200
+ font-size: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-size-comfortable);
201
+ font-weight: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-weight-comfortable);
202
+ line-height: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-line-height-comfortable);
203
+ letter-spacing: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-letter-spacing-comfortable);
204
+ }
205
+ .ids-radio-group.ids-radio-group-comfortable.ids-radio-group-horizontal > .ids-radio-group__list {
206
+ 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);
153
207
  }
154
- .ids-radio-group.ids-radio-group-comfortable.ids-radio-group-vertical {
155
- padding: var(--ids-comp-radio-group-vertical-container-size-padding-y-comfortable) var(--ids-comp-radio-group-vertical-container-size-padding-x-comfortable);
156
- gap: var(--ids-comp-radio-group-vertical-container-size-gap-comfortable);
208
+ .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 {
209
+ font-family: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-family-comfortable);
210
+ font-size: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-size-comfortable);
211
+ font-weight: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-weight-comfortable);
212
+ line-height: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-line-height-comfortable);
213
+ letter-spacing: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-letter-spacing-comfortable);
214
+ }
215
+ .ids-radio-group.ids-radio-group-comfortable.ids-radio-group-vertical > .ids-radio-group__list {
216
+ gap: var(--ids-comp-radio-group-vertical-fieldset-list-size-gap-comfortable);
157
217
  }
158
218
  .ids-radio-group.ids-radio-group-comfortable .ids-radio {
159
219
  padding: var(--ids-comp-radio-button-container-size-padding-y-comfortable) var(--ids-comp-radio-button-container-size-padding-x-comfortable);
@@ -162,8 +222,8 @@
162
222
  .ids-radio-group.ids-radio-group-comfortable .ids-radio .ids-radio__input-wrapper .ids-radio__touch-target {
163
223
  top: calc((var(--ids-comp-radio-button-input-size-height-comfortable) - var(--ids-comp-radio-button-input-size-touchtarget-height-comfortable)) / 2);
164
224
  left: calc((var(--ids-comp-radio-button-input-size-width-comfortable) - var(--ids-comp-radio-button-input-size-touchtarget-width-comfortable)) / 2);
165
- height: var(--ids-comp-radio-button-input-size-touchtarget-height-comfortable);
166
225
  width: var(--ids-comp-radio-button-input-size-touchtarget-width-comfortable);
226
+ height: var(--ids-comp-radio-button-input-size-touchtarget-height-comfortable);
167
227
  }
168
228
  .ids-radio-group.ids-radio-group-comfortable .ids-radio .ids-radio__input-wrapper input[type=radio] {
169
229
  width: var(--ids-comp-radio-button-input-size-width-comfortable);
@@ -180,21 +240,43 @@
180
240
  .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 {
181
241
  outline-width: var(--ids-comp-radio-focused-outline-outline-comfortable);
182
242
  }
243
+ .ids-radio-group.ids-radio-group-comfortable .ids-radio .ids-radio__label-wrapper {
244
+ gap: var(--ids-comp-radio-button-label-group-size-gap-comfortable);
245
+ }
183
246
  .ids-radio-group.ids-radio-group-comfortable .ids-radio .ids-radio__label {
184
- padding: var(--ids-comp-radio-button-label-size-padding-y-comfortable) 0px;
247
+ padding: var(--ids-comp-radio-button-label-size-padding-y-comfortable) 0;
185
248
  font-family: var(--ids-comp-radio-button-label-typography-font-family-comfortable);
186
249
  font-size: var(--ids-comp-radio-button-label-typography-font-size-comfortable);
187
250
  font-weight: var(--ids-comp-radio-button-label-typography-font-weight-comfortable);
188
251
  line-height: var(--ids-comp-radio-button-label-typography-line-height-comfortable);
189
252
  letter-spacing: var(--ids-comp-radio-button-label-typography-letter-spacing-comfortable);
190
253
  }
191
- .ids-radio-group.ids-radio-group-spacious.ids-radio-group-horizontal {
192
- padding: var(--ids-comp-radio-group-horizontal-container-size-padding-y-spacious) var(--ids-comp-radio-group-horizontal-container-size-padding-x-spacious);
193
- gap: var(--ids-comp-radio-group-horizontal-container-size-gap-spacious);
254
+ .ids-radio-group.ids-radio-group-spacious {
255
+ padding: var(--ids-comp-radio-group-vertical-fieldset-legend-size-padding-y-spacious) var(--ids-comp-radio-group-vertical-fieldset-legend-size-padding-x-spacious);
256
+ gap: var(--ids-comp-radio-group-vertical-fieldset-size-gap-spacious);
194
257
  }
195
- .ids-radio-group.ids-radio-group-spacious.ids-radio-group-vertical {
196
- padding: var(--ids-comp-radio-group-vertical-container-size-padding-y-spacious) var(--ids-comp-radio-group-vertical-container-size-padding-x-spacious);
197
- gap: var(--ids-comp-radio-group-vertical-container-size-gap-spacious);
258
+ .ids-radio-group.ids-radio-group-spacious > .ids-radio-group__legend {
259
+ gap: var(--ids-comp-radio-group-vertical-fieldset-legend-size-gap-spacious);
260
+ }
261
+ .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 {
262
+ font-family: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-family-spacious);
263
+ font-size: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-size-spacious);
264
+ font-weight: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-weight-spacious);
265
+ line-height: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-line-height-spacious);
266
+ letter-spacing: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-letter-spacing-spacious);
267
+ }
268
+ .ids-radio-group.ids-radio-group-spacious.ids-radio-group-horizontal > .ids-radio-group__list {
269
+ 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);
270
+ }
271
+ .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 {
272
+ font-family: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-family-spacious);
273
+ font-size: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-size-spacious);
274
+ font-weight: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-weight-spacious);
275
+ line-height: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-line-height-spacious);
276
+ letter-spacing: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-letter-spacing-spacious);
277
+ }
278
+ .ids-radio-group.ids-radio-group-spacious.ids-radio-group-vertical > .ids-radio-group__list {
279
+ gap: var(--ids-comp-radio-group-vertical-fieldset-list-size-gap-spacious);
198
280
  }
199
281
  .ids-radio-group.ids-radio-group-spacious .ids-radio {
200
282
  padding: var(--ids-comp-radio-button-container-size-padding-y-spacious) var(--ids-comp-radio-button-container-size-padding-x-spacious);
@@ -203,8 +285,8 @@
203
285
  .ids-radio-group.ids-radio-group-spacious .ids-radio .ids-radio__input-wrapper .ids-radio__touch-target {
204
286
  top: calc((var(--ids-comp-radio-button-input-size-height-spacious) - var(--ids-comp-radio-button-input-size-touchtarget-height-spacious)) / 2);
205
287
  left: calc((var(--ids-comp-radio-button-input-size-width-spacious) - var(--ids-comp-radio-button-input-size-touchtarget-width-spacious)) / 2);
206
- height: var(--ids-comp-radio-button-input-size-touchtarget-height-spacious);
207
288
  width: var(--ids-comp-radio-button-input-size-touchtarget-width-spacious);
289
+ height: var(--ids-comp-radio-button-input-size-touchtarget-height-spacious);
208
290
  }
209
291
  .ids-radio-group.ids-radio-group-spacious .ids-radio .ids-radio__input-wrapper input[type=radio] {
210
292
  width: var(--ids-comp-radio-button-input-size-width-spacious);
@@ -221,21 +303,43 @@
221
303
  .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 {
222
304
  outline-width: var(--ids-comp-radio-focused-outline-outline-spacious);
223
305
  }
306
+ .ids-radio-group.ids-radio-group-spacious .ids-radio .ids-radio__label-wrapper {
307
+ gap: var(--ids-comp-radio-button-label-group-size-gap-spacious);
308
+ }
224
309
  .ids-radio-group.ids-radio-group-spacious .ids-radio .ids-radio__label {
225
- padding: var(--ids-comp-radio-button-label-size-padding-y-spacious) 0px;
310
+ padding: var(--ids-comp-radio-button-label-size-padding-y-spacious) 0;
226
311
  font-family: var(--ids-comp-radio-button-label-typography-font-family-spacious);
227
312
  font-size: var(--ids-comp-radio-button-label-typography-font-size-spacious);
228
313
  font-weight: var(--ids-comp-radio-button-label-typography-font-weight-spacious);
229
314
  line-height: var(--ids-comp-radio-button-label-typography-line-height-spacious);
230
315
  letter-spacing: var(--ids-comp-radio-button-label-typography-letter-spacing-spacious);
231
316
  }
232
- .ids-radio-group.ids-radio-group-dense.ids-radio-group-horizontal {
233
- padding: var(--ids-comp-radio-group-horizontal-container-size-padding-y-dense) var(--ids-comp-radio-group-horizontal-container-size-padding-x-dense);
234
- gap: var(--ids-comp-radio-group-horizontal-container-size-gap-dense);
317
+ .ids-radio-group.ids-radio-group-dense {
318
+ padding: var(--ids-comp-radio-group-vertical-fieldset-legend-size-padding-y-dense) var(--ids-comp-radio-group-vertical-fieldset-legend-size-padding-x-dense);
319
+ gap: var(--ids-comp-radio-group-vertical-fieldset-size-gap-dense);
320
+ }
321
+ .ids-radio-group.ids-radio-group-dense > .ids-radio-group__legend {
322
+ gap: var(--ids-comp-radio-group-vertical-fieldset-legend-size-gap-dense);
323
+ }
324
+ .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 {
325
+ font-family: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-family-dense);
326
+ font-size: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-size-dense);
327
+ font-weight: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-font-weight-dense);
328
+ line-height: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-line-height-dense);
329
+ letter-spacing: var(--ids-comp-radio-group-horizontal-fieldset-legend-typography-letter-spacing-dense);
330
+ }
331
+ .ids-radio-group.ids-radio-group-dense.ids-radio-group-horizontal > .ids-radio-group__list {
332
+ 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);
235
333
  }
236
- .ids-radio-group.ids-radio-group-dense.ids-radio-group-vertical {
237
- padding: var(--ids-comp-radio-group-vertical-container-size-padding-y-dense) var(--ids-comp-radio-group-vertical-container-size-padding-x-dense);
238
- gap: var(--ids-comp-radio-group-vertical-container-size-gap-dense);
334
+ .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 {
335
+ font-family: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-family-dense);
336
+ font-size: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-size-dense);
337
+ font-weight: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-font-weight-dense);
338
+ line-height: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-line-height-dense);
339
+ letter-spacing: var(--ids-comp-radio-group-vertical-fieldset-legend-typography-letter-spacing-dense);
340
+ }
341
+ .ids-radio-group.ids-radio-group-dense.ids-radio-group-vertical > .ids-radio-group__list {
342
+ gap: var(--ids-comp-radio-group-vertical-fieldset-list-size-gap-dense);
239
343
  }
240
344
  .ids-radio-group.ids-radio-group-dense .ids-radio {
241
345
  padding: var(--ids-comp-radio-button-container-size-padding-y-dense) var(--ids-comp-radio-button-container-size-padding-x-dense);
@@ -244,8 +348,8 @@
244
348
  .ids-radio-group.ids-radio-group-dense .ids-radio .ids-radio__input-wrapper .ids-radio__touch-target {
245
349
  top: calc((var(--ids-comp-radio-button-input-size-height-dense) - var(--ids-comp-radio-button-input-size-touchtarget-height-dense)) / 2);
246
350
  left: calc((var(--ids-comp-radio-button-input-size-width-dense) - var(--ids-comp-radio-button-input-size-touchtarget-width-dense)) / 2);
247
- height: var(--ids-comp-radio-button-input-size-touchtarget-height-dense);
248
351
  width: var(--ids-comp-radio-button-input-size-touchtarget-width-dense);
352
+ height: var(--ids-comp-radio-button-input-size-touchtarget-height-dense);
249
353
  }
250
354
  .ids-radio-group.ids-radio-group-dense .ids-radio .ids-radio__input-wrapper input[type=radio] {
251
355
  width: var(--ids-comp-radio-button-input-size-width-dense);
@@ -262,94 +366,106 @@
262
366
  .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 {
263
367
  outline-width: var(--ids-comp-radio-focused-outline-outline-dense);
264
368
  }
369
+ .ids-radio-group.ids-radio-group-dense .ids-radio .ids-radio__label-wrapper {
370
+ gap: var(--ids-comp-radio-button-label-group-size-gap-dense);
371
+ }
265
372
  .ids-radio-group.ids-radio-group-dense .ids-radio .ids-radio__label {
266
- padding: var(--ids-comp-radio-button-label-size-padding-y-dense) 0px;
373
+ padding: var(--ids-comp-radio-button-label-size-padding-y-dense) 0;
267
374
  font-family: var(--ids-comp-radio-button-label-typography-font-family-dense);
268
375
  font-size: var(--ids-comp-radio-button-label-typography-font-size-dense);
269
376
  font-weight: var(--ids-comp-radio-button-label-typography-font-weight-dense);
270
377
  line-height: var(--ids-comp-radio-button-label-typography-line-height-dense);
271
378
  letter-spacing: var(--ids-comp-radio-button-label-typography-letter-spacing-dense);
272
379
  }
273
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
274
- border-color: var(--ids-comp-radio-input-unselected-color-border-surface-hovered);
275
- background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-hovered);
380
+ .ids-radio-group.ids-radio-group-surface .ids-radio-group__legend-label {
381
+ color: var(--ids-comp-radio-group-legend-color-fg-surface-default);
382
+ }
383
+ .ids-radio-group.ids-radio-group-surface.ids-radio-group-disabled .ids-radio-group__legend-label {
384
+ color: var(--ids-comp-radio-group-legend-color-fg-surface-disabled);
276
385
  }
277
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled) {
386
+ .ids-radio-group .ids-radio-surface input[type=radio]:not(:disabled) {
278
387
  border-color: var(--ids-comp-radio-input-unselected-color-border-surface-default);
279
388
  background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-default);
280
389
  }
281
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled):hover {
390
+ .ids-radio-group .ids-radio-surface input[type=radio]:not(:disabled):hover {
282
391
  border-color: var(--ids-comp-radio-input-unselected-color-border-surface-hovered);
283
392
  background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-hovered);
284
393
  }
285
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:not(:disabled):active {
394
+ .ids-radio-group .ids-radio-surface input[type=radio]:not(:disabled):active {
286
395
  border-color: var(--ids-comp-radio-input-unselected-color-border-surface-pressed);
287
396
  background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-pressed);
288
397
  }
289
- .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 {
398
+ .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 {
290
399
  border-color: var(--ids-comp-radio-input-unselected-color-border-surface-default);
291
400
  background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-default);
292
401
  outline-color: var(--ids-comp-radio-input-unselected-color-focused-outline-surface-focused);
293
402
  }
294
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:disabled {
403
+ .ids-radio-group .ids-radio-surface input[type=radio]:disabled {
295
404
  border-color: var(--ids-comp-radio-input-unselected-color-border-surface-disabled);
296
405
  background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-disabled);
297
406
  }
298
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) {
407
+ .ids-radio-group .ids-radio-surface input[type=radio]:checked:not(:disabled) {
299
408
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-default);
300
409
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-default);
301
410
  }
302
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
411
+ .ids-radio-group .ids-radio-surface input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
303
412
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-default);
304
413
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-default);
305
414
  }
306
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover {
415
+ .ids-radio-group .ids-radio-surface input[type=radio]:checked:not(:disabled):hover {
307
416
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-hovered);
308
417
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-hovered);
309
418
  }
310
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
419
+ .ids-radio-group .ids-radio-surface input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
311
420
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-hovered);
312
421
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-hovered);
313
422
  }
314
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active {
423
+ .ids-radio-group .ids-radio-surface input[type=radio]:checked:not(:disabled):active {
315
424
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-pressed);
316
425
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-pressed);
317
426
  }
318
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
427
+ .ids-radio-group .ids-radio-surface input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
319
428
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-pressed);
320
429
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-pressed);
321
430
  }
322
- .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 {
431
+ .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 {
323
432
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-default);
324
433
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-default);
325
434
  outline-color: var(--ids-comp-radio-input-selected-color-focused-outline-surface-focused);
326
435
  }
327
- .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 {
436
+ .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 {
328
437
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-default);
329
438
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-default);
330
439
  }
331
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:disabled {
440
+ .ids-radio-group .ids-radio-surface input[type=radio]:checked:disabled {
332
441
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-disabled);
333
442
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-disabled);
334
443
  }
335
- .ids-radio-group .ids-radio-surface .ids-radio__input-wrapper input[type=radio]:checked:disabled + .ids-radio__inner-circle {
444
+ .ids-radio-group .ids-radio-surface input[type=radio]:checked:disabled + .ids-radio__inner-circle {
336
445
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-disabled);
337
446
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-disabled);
338
447
  }
339
- .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) {
448
+ .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) {
449
+ border-color: var(--ids-comp-radio-input-unselected-color-border-surface-hovered);
450
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-hovered);
451
+ }
452
+ .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 {
453
+ color: var(--ids-comp-radio-label-color-fg-surface-hovered);
454
+ }
455
+ .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) {
340
456
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-hovered);
341
457
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-hovered);
342
458
  }
343
- .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 {
459
+ .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 {
344
460
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-hovered);
345
461
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-hovered);
346
462
  }
463
+ .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 {
464
+ color: var(--ids-comp-radio-label-color-fg-surface-hovered);
465
+ }
347
466
  .ids-radio-group .ids-radio-surface .ids-radio__label {
348
467
  color: var(--ids-comp-radio-label-color-fg-surface-default);
349
468
  }
350
- .ids-radio-group .ids-radio-surface .ids-radio__label:hover {
351
- color: var(--ids-comp-radio-label-color-fg-surface-hovered);
352
- }
353
469
  .ids-radio-group .ids-radio-surface .ids-radio__label:active {
354
470
  color: var(--ids-comp-radio-label-color-fg-surface-pressed);
355
471
  }
@@ -359,86 +475,95 @@
359
475
  .ids-radio-group .ids-radio-surface.ids-radio-disabled .ids-radio__label {
360
476
  color: var(--ids-comp-radio-label-color-fg-surface-disabled);
361
477
  }
362
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
363
- border-color: var(--ids-comp-radio-input-unselected-color-border-light-hovered);
364
- background-color: var(--ids-comp-radio-input-unselected-color-bg-light-hovered);
478
+ .ids-radio-group.ids-radio-group-light .ids-radio-group__legend-label {
479
+ color: var(--ids-comp-radio-group-legend-color-fg-light-default);
480
+ }
481
+ .ids-radio-group.ids-radio-group-light.ids-radio-group-disabled .ids-radio-group__legend-label {
482
+ color: var(--ids-comp-radio-group-legend-color-fg-light-disabled);
365
483
  }
366
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled) {
484
+ .ids-radio-group .ids-radio-light input[type=radio]:not(:disabled) {
367
485
  border-color: var(--ids-comp-radio-input-unselected-color-border-light-default);
368
486
  background-color: var(--ids-comp-radio-input-unselected-color-bg-light-default);
369
487
  }
370
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled):hover {
488
+ .ids-radio-group .ids-radio-light input[type=radio]:not(:disabled):hover {
371
489
  border-color: var(--ids-comp-radio-input-unselected-color-border-light-hovered);
372
490
  background-color: var(--ids-comp-radio-input-unselected-color-bg-light-hovered);
373
491
  }
374
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:not(:disabled):active {
492
+ .ids-radio-group .ids-radio-light input[type=radio]:not(:disabled):active {
375
493
  border-color: var(--ids-comp-radio-input-unselected-color-border-light-pressed);
376
494
  background-color: var(--ids-comp-radio-input-unselected-color-bg-light-pressed);
377
495
  }
378
- .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 {
496
+ .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 {
379
497
  border-color: var(--ids-comp-radio-input-unselected-color-border-light-default);
380
498
  background-color: var(--ids-comp-radio-input-unselected-color-bg-light-default);
381
499
  outline-color: var(--ids-comp-radio-input-unselected-color-focused-outline-light-focused);
382
500
  }
383
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:disabled {
501
+ .ids-radio-group .ids-radio-light input[type=radio]:disabled {
384
502
  border-color: var(--ids-comp-radio-input-unselected-color-border-light-disabled);
385
503
  background-color: var(--ids-comp-radio-input-unselected-color-bg-light-disabled);
386
504
  }
387
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) {
505
+ .ids-radio-group .ids-radio-light input[type=radio]:checked:not(:disabled) {
388
506
  border-color: var(--ids-comp-radio-input-selected-color-border-light-default);
389
507
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-default);
390
508
  }
391
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
509
+ .ids-radio-group .ids-radio-light input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
392
510
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-default);
393
511
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-default);
394
512
  }
395
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover {
513
+ .ids-radio-group .ids-radio-light input[type=radio]:checked:not(:disabled):hover {
396
514
  border-color: var(--ids-comp-radio-input-selected-color-border-light-hovered);
397
515
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-hovered);
398
516
  }
399
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
517
+ .ids-radio-group .ids-radio-light input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
400
518
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-hovered);
401
519
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-hovered);
402
520
  }
403
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active {
521
+ .ids-radio-group .ids-radio-light input[type=radio]:checked:not(:disabled):active {
404
522
  border-color: var(--ids-comp-radio-input-selected-color-border-light-pressed);
405
523
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-pressed);
406
524
  }
407
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
525
+ .ids-radio-group .ids-radio-light input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
408
526
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-pressed);
409
527
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-pressed);
410
528
  }
411
- .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 {
529
+ .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 {
412
530
  border-color: var(--ids-comp-radio-input-selected-color-border-light-default);
413
531
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-default);
414
532
  outline-color: var(--ids-comp-radio-input-selected-color-focused-outline-light-focused);
415
533
  }
416
- .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 {
534
+ .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 {
417
535
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-default);
418
536
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-default);
419
537
  }
420
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:disabled {
538
+ .ids-radio-group .ids-radio-light input[type=radio]:checked:disabled {
421
539
  border-color: var(--ids-comp-radio-input-selected-color-border-light-disabled);
422
540
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-disabled);
423
541
  }
424
- .ids-radio-group .ids-radio-light .ids-radio__input-wrapper input[type=radio]:checked:disabled + .ids-radio__inner-circle {
542
+ .ids-radio-group .ids-radio-light input[type=radio]:checked:disabled + .ids-radio__inner-circle {
425
543
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-disabled);
426
544
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-disabled);
427
545
  }
428
- .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) {
546
+ .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) {
547
+ border-color: var(--ids-comp-radio-input-unselected-color-border-light-hovered);
548
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-light-hovered);
549
+ }
550
+ .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 {
551
+ color: var(--ids-comp-radio-label-color-fg-light-hovered);
552
+ }
553
+ .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) {
429
554
  border-color: var(--ids-comp-radio-input-selected-color-border-light-hovered);
430
555
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-hovered);
431
556
  }
432
- .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 {
557
+ .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 {
433
558
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-hovered);
434
559
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-hovered);
435
560
  }
561
+ .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 {
562
+ color: var(--ids-comp-radio-label-color-fg-light-hovered);
563
+ }
436
564
  .ids-radio-group .ids-radio-light .ids-radio__label {
437
565
  color: var(--ids-comp-radio-label-color-fg-light-default);
438
566
  }
439
- .ids-radio-group .ids-radio-light .ids-radio__label:hover {
440
- color: var(--ids-comp-radio-label-color-fg-light-hovered);
441
- }
442
567
  .ids-radio-group .ids-radio-light .ids-radio__label:active {
443
568
  color: var(--ids-comp-radio-label-color-fg-light-pressed);
444
569
  }
@@ -448,86 +573,95 @@
448
573
  .ids-radio-group .ids-radio-light.ids-radio-disabled .ids-radio__label {
449
574
  color: var(--ids-comp-radio-label-color-fg-light-disabled);
450
575
  }
451
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper .ids-radio__touch-target:hover + input[type=radio]:not(:disabled) {
452
- border-color: var(--ids-comp-radio-input-unselected-color-border-dark-hovered);
453
- background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-hovered);
576
+ .ids-radio-group.ids-radio-group-dark .ids-radio-group__legend-label {
577
+ color: var(--ids-comp-radio-group-legend-color-fg-dark-default);
578
+ }
579
+ .ids-radio-group.ids-radio-group-dark.ids-radio-group-disabled .ids-radio-group__legend-label {
580
+ color: var(--ids-comp-radio-group-legend-color-fg-dark-disabled);
454
581
  }
455
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled) {
582
+ .ids-radio-group .ids-radio-dark input[type=radio]:not(:disabled) {
456
583
  border-color: var(--ids-comp-radio-input-unselected-color-border-dark-default);
457
584
  background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-default);
458
585
  }
459
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled):hover {
586
+ .ids-radio-group .ids-radio-dark input[type=radio]:not(:disabled):hover {
460
587
  border-color: var(--ids-comp-radio-input-unselected-color-border-dark-hovered);
461
588
  background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-hovered);
462
589
  }
463
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:not(:disabled):active {
590
+ .ids-radio-group .ids-radio-dark input[type=radio]:not(:disabled):active {
464
591
  border-color: var(--ids-comp-radio-input-unselected-color-border-dark-pressed);
465
592
  background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-pressed);
466
593
  }
467
- .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 {
594
+ .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 {
468
595
  border-color: var(--ids-comp-radio-input-unselected-color-border-dark-default);
469
596
  background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-default);
470
597
  outline-color: var(--ids-comp-radio-input-unselected-color-focused-outline-dark-focused);
471
598
  }
472
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:disabled {
599
+ .ids-radio-group .ids-radio-dark input[type=radio]:disabled {
473
600
  border-color: var(--ids-comp-radio-input-unselected-color-border-dark-disabled);
474
601
  background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-disabled);
475
602
  }
476
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) {
603
+ .ids-radio-group .ids-radio-dark input[type=radio]:checked:not(:disabled) {
477
604
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-default);
478
605
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-default);
479
606
  }
480
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
607
+ .ids-radio-group .ids-radio-dark input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
481
608
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-default);
482
609
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-default);
483
610
  }
484
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover {
611
+ .ids-radio-group .ids-radio-dark input[type=radio]:checked:not(:disabled):hover {
485
612
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-hovered);
486
613
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-hovered);
487
614
  }
488
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
615
+ .ids-radio-group .ids-radio-dark input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
489
616
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-hovered);
490
617
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-hovered);
491
618
  }
492
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active {
619
+ .ids-radio-group .ids-radio-dark input[type=radio]:checked:not(:disabled):active {
493
620
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-pressed);
494
621
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-pressed);
495
622
  }
496
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
623
+ .ids-radio-group .ids-radio-dark input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
497
624
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-pressed);
498
625
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-pressed);
499
626
  }
500
- .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 {
627
+ .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 {
501
628
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-default);
502
629
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-default);
503
630
  outline-color: var(--ids-comp-radio-input-selected-color-focused-outline-dark-focused);
504
631
  }
505
- .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 {
632
+ .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 {
506
633
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-default);
507
634
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-default);
508
635
  }
509
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:disabled {
636
+ .ids-radio-group .ids-radio-dark input[type=radio]:checked:disabled {
510
637
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-disabled);
511
638
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-disabled);
512
639
  }
513
- .ids-radio-group .ids-radio-dark .ids-radio__input-wrapper input[type=radio]:checked:disabled + .ids-radio__inner-circle {
640
+ .ids-radio-group .ids-radio-dark input[type=radio]:checked:disabled + .ids-radio__inner-circle {
514
641
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-disabled);
515
642
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-disabled);
516
643
  }
517
- .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) {
644
+ .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) {
645
+ border-color: var(--ids-comp-radio-input-unselected-color-border-dark-hovered);
646
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-hovered);
647
+ }
648
+ .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 {
649
+ color: var(--ids-comp-radio-label-color-fg-dark-hovered);
650
+ }
651
+ .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) {
518
652
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-hovered);
519
653
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-hovered);
520
654
  }
521
- .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 {
655
+ .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 {
522
656
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-hovered);
523
657
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-hovered);
524
658
  }
659
+ .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 {
660
+ color: var(--ids-comp-radio-label-color-fg-dark-hovered);
661
+ }
525
662
  .ids-radio-group .ids-radio-dark .ids-radio__label {
526
663
  color: var(--ids-comp-radio-label-color-fg-dark-default);
527
664
  }
528
- .ids-radio-group .ids-radio-dark .ids-radio__label:hover {
529
- color: var(--ids-comp-radio-label-color-fg-dark-hovered);
530
- }
531
665
  .ids-radio-group .ids-radio-dark .ids-radio__label:active {
532
666
  color: var(--ids-comp-radio-label-color-fg-dark-pressed);
533
667
  }
@@ -537,183 +671,201 @@
537
671
  .ids-radio-group .ids-radio-dark.ids-radio-disabled .ids-radio__label {
538
672
  color: var(--ids-comp-radio-label-color-fg-dark-disabled);
539
673
  }
540
- .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) {
541
- border-color: var(--ids-comp-radio-input-unselected-color-border-surface-error-hovered);
542
- background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-hovered);
543
- }
544
- .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) {
674
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:not(:disabled) {
545
675
  border-color: var(--ids-comp-radio-input-unselected-color-border-surface-error-default);
546
676
  background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-default);
547
677
  }
548
- .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 {
678
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:not(:disabled):hover {
549
679
  border-color: var(--ids-comp-radio-input-unselected-color-border-surface-error-hovered);
550
680
  background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-hovered);
551
681
  }
552
- .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 {
682
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:not(:disabled):active {
553
683
  border-color: var(--ids-comp-radio-input-unselected-color-border-surface-error-pressed);
554
684
  background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-pressed);
555
685
  }
556
- .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 {
686
+ .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 {
557
687
  border-color: var(--ids-comp-radio-input-unselected-color-border-surface-error-default);
558
688
  background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-default);
559
689
  }
560
- .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) {
690
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:checked:not(:disabled) {
561
691
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-error-default);
562
692
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-default);
563
693
  }
564
- .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 {
694
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
565
695
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-error-default);
566
696
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-error-default);
567
697
  }
568
- .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 {
698
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:checked:not(:disabled):hover {
569
699
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-error-hovered);
570
700
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-hovered);
571
701
  }
572
- .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 {
702
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
573
703
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-error-hovered);
574
704
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-error-hovered);
575
705
  }
576
- .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 {
706
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:checked:not(:disabled):active {
577
707
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-error-pressed);
578
708
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-pressed);
579
709
  }
580
- .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 {
710
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-surface input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
581
711
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-error-pressed);
582
712
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-error-pressed);
583
713
  }
584
- .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 {
714
+ .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 {
585
715
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-error-default);
586
716
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-default);
587
717
  }
588
- .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 {
718
+ .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 {
589
719
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-error-default);
590
720
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-error-default);
591
721
  }
592
- .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) {
722
+ .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) {
723
+ border-color: var(--ids-comp-radio-input-unselected-color-border-surface-error-hovered);
724
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-hovered);
725
+ }
726
+ .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 {
727
+ color: var(--ids-comp-radio-label-color-fg-surface-hovered);
728
+ }
729
+ .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) {
593
730
  border-color: var(--ids-comp-radio-input-selected-color-border-surface-error-hovered);
594
731
  background-color: var(--ids-comp-radio-input-selected-color-bg-surface-hovered);
595
732
  }
596
- .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 {
733
+ .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 {
597
734
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-error-hovered);
598
735
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-error-hovered);
599
736
  }
600
- .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) {
601
- border-color: var(--ids-comp-radio-input-unselected-color-border-light-error-hovered);
602
- background-color: var(--ids-comp-radio-input-unselected-color-bg-light-hovered);
737
+ .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 {
738
+ color: var(--ids-comp-radio-label-color-fg-surface-hovered);
603
739
  }
604
- .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) {
740
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:not(:disabled) {
605
741
  border-color: var(--ids-comp-radio-input-unselected-color-border-light-error-default);
606
742
  background-color: var(--ids-comp-radio-input-unselected-color-bg-light-default);
607
743
  }
608
- .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 {
744
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:not(:disabled):hover {
609
745
  border-color: var(--ids-comp-radio-input-unselected-color-border-light-error-hovered);
610
746
  background-color: var(--ids-comp-radio-input-unselected-color-bg-light-hovered);
611
747
  }
612
- .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 {
748
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:not(:disabled):active {
613
749
  border-color: var(--ids-comp-radio-input-unselected-color-border-light-error-pressed);
614
750
  background-color: var(--ids-comp-radio-input-unselected-color-bg-light-pressed);
615
751
  }
616
- .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 {
752
+ .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 {
617
753
  border-color: var(--ids-comp-radio-input-unselected-color-border-light-error-default);
618
754
  background-color: var(--ids-comp-radio-input-unselected-color-bg-light-default);
619
755
  }
620
- .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) {
756
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:checked:not(:disabled) {
621
757
  border-color: var(--ids-comp-radio-input-selected-color-border-light-error-default);
622
758
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-default);
623
759
  }
624
- .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 {
760
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
625
761
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-error-default);
626
762
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-error-default);
627
763
  }
628
- .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 {
764
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:checked:not(:disabled):hover {
629
765
  border-color: var(--ids-comp-radio-input-selected-color-border-light-error-hovered);
630
766
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-hovered);
631
767
  }
632
- .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 {
768
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
633
769
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-error-hovered);
634
770
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-error-hovered);
635
771
  }
636
- .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 {
772
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:checked:not(:disabled):active {
637
773
  border-color: var(--ids-comp-radio-input-selected-color-border-light-error-pressed);
638
774
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-pressed);
639
775
  }
640
- .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 {
776
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-light input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
641
777
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-error-pressed);
642
778
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-error-pressed);
643
779
  }
644
- .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 {
780
+ .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 {
645
781
  border-color: var(--ids-comp-radio-input-selected-color-border-light-error-default);
646
782
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-default);
647
783
  }
648
- .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 {
784
+ .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 {
649
785
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-error-default);
650
786
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-error-default);
651
787
  }
652
- .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) {
788
+ .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) {
789
+ border-color: var(--ids-comp-radio-input-unselected-color-border-light-error-hovered);
790
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-light-hovered);
791
+ }
792
+ .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 {
793
+ color: var(--ids-comp-radio-label-color-fg-light-hovered);
794
+ }
795
+ .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) {
653
796
  border-color: var(--ids-comp-radio-input-selected-color-border-light-error-hovered);
654
797
  background-color: var(--ids-comp-radio-input-selected-color-bg-light-hovered);
655
798
  }
656
- .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 {
799
+ .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 {
657
800
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-error-hovered);
658
801
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-error-hovered);
659
802
  }
660
- .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) {
661
- border-color: var(--ids-comp-radio-input-unselected-color-border-dark-error-hovered);
662
- background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-hovered);
803
+ .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 {
804
+ color: var(--ids-comp-radio-label-color-fg-light-hovered);
663
805
  }
664
- .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) {
806
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:not(:disabled) {
665
807
  border-color: var(--ids-comp-radio-input-unselected-color-border-dark-error-default);
666
808
  background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-default);
667
809
  }
668
- .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 {
810
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:not(:disabled):hover {
669
811
  border-color: var(--ids-comp-radio-input-unselected-color-border-dark-error-hovered);
670
812
  background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-hovered);
671
813
  }
672
- .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 {
814
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:not(:disabled):active {
673
815
  border-color: var(--ids-comp-radio-input-unselected-color-border-dark-error-pressed);
674
816
  background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-pressed);
675
817
  }
676
- .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 {
818
+ .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 {
677
819
  border-color: var(--ids-comp-radio-input-unselected-color-border-dark-error-default);
678
820
  background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-default);
679
821
  }
680
- .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) {
822
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:checked:not(:disabled) {
681
823
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-error-default);
682
824
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-default);
683
825
  }
684
- .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 {
826
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:checked:not(:disabled) + .ids-radio__inner-circle {
685
827
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-error-default);
686
828
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-error-default);
687
829
  }
688
- .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 {
830
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:checked:not(:disabled):hover {
689
831
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-error-hovered);
690
832
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-hovered);
691
833
  }
692
- .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 {
834
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:checked:not(:disabled):hover + .ids-radio__inner-circle {
693
835
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-error-hovered);
694
836
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-error-hovered);
695
837
  }
696
- .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 {
838
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:checked:not(:disabled):active {
697
839
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-error-pressed);
698
840
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-pressed);
699
841
  }
700
- .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 {
842
+ .ids-radio-group.ids-radio-group-invalid .ids-radio-dark input[type=radio]:checked:not(:disabled):active + .ids-radio__inner-circle {
701
843
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-error-pressed);
702
844
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-error-pressed);
703
845
  }
704
- .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 {
846
+ .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 {
705
847
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-error-default);
706
848
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-default);
707
849
  }
708
- .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 {
850
+ .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 {
709
851
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-error-default);
710
852
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-error-default);
711
853
  }
712
- .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) {
854
+ .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) {
855
+ border-color: var(--ids-comp-radio-input-unselected-color-border-dark-error-hovered);
856
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-hovered);
857
+ }
858
+ .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 {
859
+ color: var(--ids-comp-radio-label-color-fg-dark-hovered);
860
+ }
861
+ .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) {
713
862
  border-color: var(--ids-comp-radio-input-selected-color-border-dark-error-hovered);
714
863
  background-color: var(--ids-comp-radio-input-selected-color-bg-dark-hovered);
715
864
  }
716
- .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 {
865
+ .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 {
717
866
  border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-error-hovered);
718
867
  background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-error-hovered);
868
+ }
869
+ .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 {
870
+ color: var(--ids-comp-radio-label-color-fg-dark-hovered);
719
871
  }