@i-cell/ids-styles 0.0.69 → 0.0.71

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