@i-cell/ids-styles 0.0.69 → 0.0.70

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