@i-cell/ids-styles 0.0.7 → 0.0.9

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.
@@ -0,0 +1,705 @@
1
+ .ids-radio-group {
2
+ display: inline-flex;
3
+ align-items: flex-start;
4
+ justify-content: start;
5
+ }
6
+ .ids-radio-group.ids-radio-group-horizontal {
7
+ flex-direction: row;
8
+ }
9
+ .ids-radio-group.ids-radio-group-vertical {
10
+ flex-direction: column;
11
+ }
12
+ .ids-radio-group.ids-radio-group-left {
13
+ align-items: flex-end;
14
+ }
15
+ .ids-radio-group.ids-radio-group-right {
16
+ align-items: flex-start;
17
+ }
18
+ .ids-radio-group .ids-radio-item {
19
+ display: flex;
20
+ align-items: center;
21
+ }
22
+ .ids-radio-group .ids-radio-item.ids-radio-item-left {
23
+ flex-direction: row-reverse;
24
+ justify-content: start;
25
+ }
26
+ .ids-radio-group .ids-radio-item.ids-radio-item-righ {
27
+ flex-direction: row;
28
+ justify-content: start;
29
+ }
30
+ .ids-radio-group .ids-radio-item.ids-radio-item-top {
31
+ flex-direction: column-reverse;
32
+ align-items: center;
33
+ }
34
+ .ids-radio-group .ids-radio-item.ids-radio-item-bottom {
35
+ flex-direction: column;
36
+ align-items: center;
37
+ }
38
+ .ids-radio-group .ids-radio-item .ids-radio-item__input-wrapper {
39
+ position: relative;
40
+ display: flex;
41
+ align-items: center;
42
+ justify-content: center;
43
+ }
44
+ .ids-radio-group .ids-radio-item .ids-radio-item__input-wrapper .ids-radio-item__touch-target {
45
+ position: absolute;
46
+ cursor: pointer;
47
+ }
48
+ .ids-radio-group .ids-radio-item .ids-radio-item__input-wrapper input[type=radio] {
49
+ appearance: none;
50
+ -webkit-appearance: none;
51
+ flex-shrink: 0;
52
+ border-style: solid;
53
+ margin: 0;
54
+ display: flex;
55
+ justify-content: center;
56
+ align-items: center;
57
+ flex-shrink: 0;
58
+ cursor: pointer;
59
+ }
60
+ .ids-radio-group .ids-radio-item .ids-radio-item__input-wrapper input[type=radio] + .ids-radio-item__inner-circle {
61
+ position: absolute;
62
+ flex-shrink: 0;
63
+ border-style: solid;
64
+ height: 0;
65
+ width: 0;
66
+ border-width: 0;
67
+ cursor: pointer;
68
+ }
69
+ .ids-radio-group .ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:focus, .ids-radio-group .ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:focus-visible {
70
+ outline-offset: 2px;
71
+ outline-style: solid;
72
+ }
73
+ .ids-radio-group .ids-radio-item .ids-radio-item__label {
74
+ cursor: pointer;
75
+ }
76
+ .ids-radio-group .ids-radio-item.ids-radio-item-disabled .ids-radio-item__input-wrapper .ids-radio-item__touch-target {
77
+ cursor: not-allowed;
78
+ }
79
+ .ids-radio-group .ids-radio-item.ids-radio-item-disabled .ids-radio-item__input-wrapper input[type=radio] {
80
+ cursor: not-allowed;
81
+ }
82
+ .ids-radio-group .ids-radio-item.ids-radio-item-disabled .ids-radio-item__input-wrapper input[type=radio] + .ids-radio-item__inner-circle {
83
+ cursor: not-allowed;
84
+ }
85
+ .ids-radio-group .ids-radio-item.ids-radio-item-disabled .ids-radio-item__label {
86
+ cursor: not-allowed;
87
+ }
88
+ .ids-radio-group .ids-radio-item .ids-radio-item__label {
89
+ display: flex;
90
+ justify-content: center;
91
+ align-items: center;
92
+ flex: 1 0 0;
93
+ font-style: normal;
94
+ }
95
+ .ids-radio-group.ids-radio-group-compact.ids-radio-group-horizontal {
96
+ padding: var(--ids-comp-radio-group-horizontal-container-size-padding-y-compact) var(--ids-comp-radio-group-horizontal-container-size-padding-x-compact);
97
+ gap: var(--ids-comp-radio-group-horizontal-container-size-gap-compact);
98
+ }
99
+ .ids-radio-group.ids-radio-group-compact.ids-radio-group-vertical {
100
+ padding: var(--ids-comp-radio-group-vertical-container-size-padding-y-compact) var(--ids-comp-radio-group-vertical-container-size-padding-x-compact);
101
+ gap: var(--ids-comp-radio-group-vertical-container-size-gap-compact);
102
+ }
103
+ .ids-radio-group.ids-radio-group-compact > .ids-radio-item {
104
+ padding: var(--ids-comp-radio-button-container-size-padding-y-compact) var(--ids-comp-radio-button-container-size-padding-x-compact);
105
+ gap: var(--ids-comp-radio-button-container-size-gap-compact);
106
+ }
107
+ .ids-radio-group.ids-radio-group-compact > .ids-radio-item .ids-radio-item__input-wrapper .ids-radio-item__touch-target {
108
+ top: calc((var(--ids-comp-radio-button-input-size-height-compact) - var(--ids-comp-radio-button-input-size-touchtarget-height-compact)) / 2);
109
+ left: calc((var(--ids-comp-radio-button-input-size-width-compact) - var(--ids-comp-radio-button-input-size-touchtarget-width-compact)) / 2);
110
+ height: var(--ids-comp-radio-button-input-size-touchtarget-height-compact);
111
+ width: var(--ids-comp-radio-button-input-size-touchtarget-width-compact);
112
+ }
113
+ .ids-radio-group.ids-radio-group-compact > .ids-radio-item .ids-radio-item__input-wrapper input[type=radio] {
114
+ width: var(--ids-comp-radio-button-input-size-width-compact);
115
+ height: var(--ids-comp-radio-button-input-size-height-compact);
116
+ border-radius: var(--ids-comp-radio-button-input-size-border-radius-compact);
117
+ border-width: var(--ids-comp-radio-button-input-size-border-width-compact);
118
+ }
119
+ .ids-radio-group.ids-radio-group-compact > .ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:checked + .ids-radio-item__inner-circle {
120
+ width: var(--ids-comp-radio-button-input-inner-circle-size-width-compact);
121
+ height: var(--ids-comp-radio-button-input-inner-circle-size-height-compact);
122
+ border-radius: var(--ids-comp-radio-button-input-inner-circle-size-border-radius-compact);
123
+ border-width: var(--ids-comp-radio-button-input-inner-circle-size-border-width-compact);
124
+ }
125
+ .ids-radio-group.ids-radio-group-compact > .ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:focus {
126
+ outline-width: var(--ids-comp-radio-focused-outline-outline-compact);
127
+ }
128
+ .ids-radio-group.ids-radio-group-compact > .ids-radio-item .ids-radio-item__label {
129
+ padding: var(--ids-comp-radio-button-label-size-padding-y-compact) 0px;
130
+ font-family: var(--ids-comp-radio-button-label-typography-font-family-compact);
131
+ font-size: var(--ids-comp-radio-button-label-typography-font-size-compact);
132
+ font-weight: var(--ids-comp-radio-button-label-typography-font-weight-compact);
133
+ line-height: var(--ids-comp-radio-button-label-typography-line-height-compact);
134
+ letter-spacing: var(--ids-comp-radio-button-label-typography-letter-spacing-compact);
135
+ }
136
+ .ids-radio-group.ids-radio-group-comfortable.ids-radio-group-horizontal {
137
+ padding: var(--ids-comp-radio-group-horizontal-container-size-padding-y-comfortable) var(--ids-comp-radio-group-horizontal-container-size-padding-x-comfortable);
138
+ gap: var(--ids-comp-radio-group-horizontal-container-size-gap-comfortable);
139
+ }
140
+ .ids-radio-group.ids-radio-group-comfortable.ids-radio-group-vertical {
141
+ padding: var(--ids-comp-radio-group-vertical-container-size-padding-y-comfortable) var(--ids-comp-radio-group-vertical-container-size-padding-x-comfortable);
142
+ gap: var(--ids-comp-radio-group-vertical-container-size-gap-comfortable);
143
+ }
144
+ .ids-radio-group.ids-radio-group-comfortable > .ids-radio-item {
145
+ padding: var(--ids-comp-radio-button-container-size-padding-y-comfortable) var(--ids-comp-radio-button-container-size-padding-x-comfortable);
146
+ gap: var(--ids-comp-radio-button-container-size-gap-comfortable);
147
+ }
148
+ .ids-radio-group.ids-radio-group-comfortable > .ids-radio-item .ids-radio-item__input-wrapper .ids-radio-item__touch-target {
149
+ top: calc((var(--ids-comp-radio-button-input-size-height-comfortable) - var(--ids-comp-radio-button-input-size-touchtarget-height-comfortable)) / 2);
150
+ left: calc((var(--ids-comp-radio-button-input-size-width-comfortable) - var(--ids-comp-radio-button-input-size-touchtarget-width-comfortable)) / 2);
151
+ height: var(--ids-comp-radio-button-input-size-touchtarget-height-comfortable);
152
+ width: var(--ids-comp-radio-button-input-size-touchtarget-width-comfortable);
153
+ }
154
+ .ids-radio-group.ids-radio-group-comfortable > .ids-radio-item .ids-radio-item__input-wrapper input[type=radio] {
155
+ width: var(--ids-comp-radio-button-input-size-width-comfortable);
156
+ height: var(--ids-comp-radio-button-input-size-height-comfortable);
157
+ border-radius: var(--ids-comp-radio-button-input-size-border-radius-comfortable);
158
+ border-width: var(--ids-comp-radio-button-input-size-border-width-comfortable);
159
+ }
160
+ .ids-radio-group.ids-radio-group-comfortable > .ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:checked + .ids-radio-item__inner-circle {
161
+ width: var(--ids-comp-radio-button-input-inner-circle-size-width-comfortable);
162
+ height: var(--ids-comp-radio-button-input-inner-circle-size-height-comfortable);
163
+ border-radius: var(--ids-comp-radio-button-input-inner-circle-size-border-radius-comfortable);
164
+ border-width: var(--ids-comp-radio-button-input-inner-circle-size-border-width-comfortable);
165
+ }
166
+ .ids-radio-group.ids-radio-group-comfortable > .ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:focus {
167
+ outline-width: var(--ids-comp-radio-focused-outline-outline-comfortable);
168
+ }
169
+ .ids-radio-group.ids-radio-group-comfortable > .ids-radio-item .ids-radio-item__label {
170
+ padding: var(--ids-comp-radio-button-label-size-padding-y-comfortable) 0px;
171
+ font-family: var(--ids-comp-radio-button-label-typography-font-family-comfortable);
172
+ font-size: var(--ids-comp-radio-button-label-typography-font-size-comfortable);
173
+ font-weight: var(--ids-comp-radio-button-label-typography-font-weight-comfortable);
174
+ line-height: var(--ids-comp-radio-button-label-typography-line-height-comfortable);
175
+ letter-spacing: var(--ids-comp-radio-button-label-typography-letter-spacing-comfortable);
176
+ }
177
+ .ids-radio-group.ids-radio-group-spacious.ids-radio-group-horizontal {
178
+ padding: var(--ids-comp-radio-group-horizontal-container-size-padding-y-spacious) var(--ids-comp-radio-group-horizontal-container-size-padding-x-spacious);
179
+ gap: var(--ids-comp-radio-group-horizontal-container-size-gap-spacious);
180
+ }
181
+ .ids-radio-group.ids-radio-group-spacious.ids-radio-group-vertical {
182
+ padding: var(--ids-comp-radio-group-vertical-container-size-padding-y-spacious) var(--ids-comp-radio-group-vertical-container-size-padding-x-spacious);
183
+ gap: var(--ids-comp-radio-group-vertical-container-size-gap-spacious);
184
+ }
185
+ .ids-radio-group.ids-radio-group-spacious > .ids-radio-item {
186
+ padding: var(--ids-comp-radio-button-container-size-padding-y-spacious) var(--ids-comp-radio-button-container-size-padding-x-spacious);
187
+ gap: var(--ids-comp-radio-button-container-size-gap-spacious);
188
+ }
189
+ .ids-radio-group.ids-radio-group-spacious > .ids-radio-item .ids-radio-item__input-wrapper .ids-radio-item__touch-target {
190
+ top: calc((var(--ids-comp-radio-button-input-size-height-spacious) - var(--ids-comp-radio-button-input-size-touchtarget-height-spacious)) / 2);
191
+ left: calc((var(--ids-comp-radio-button-input-size-width-spacious) - var(--ids-comp-radio-button-input-size-touchtarget-width-spacious)) / 2);
192
+ height: var(--ids-comp-radio-button-input-size-touchtarget-height-spacious);
193
+ width: var(--ids-comp-radio-button-input-size-touchtarget-width-spacious);
194
+ }
195
+ .ids-radio-group.ids-radio-group-spacious > .ids-radio-item .ids-radio-item__input-wrapper input[type=radio] {
196
+ width: var(--ids-comp-radio-button-input-size-width-spacious);
197
+ height: var(--ids-comp-radio-button-input-size-height-spacious);
198
+ border-radius: var(--ids-comp-radio-button-input-size-border-radius-spacious);
199
+ border-width: var(--ids-comp-radio-button-input-size-border-width-spacious);
200
+ }
201
+ .ids-radio-group.ids-radio-group-spacious > .ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:checked + .ids-radio-item__inner-circle {
202
+ width: var(--ids-comp-radio-button-input-inner-circle-size-width-spacious);
203
+ height: var(--ids-comp-radio-button-input-inner-circle-size-height-spacious);
204
+ border-radius: var(--ids-comp-radio-button-input-inner-circle-size-border-radius-spacious);
205
+ border-width: var(--ids-comp-radio-button-input-inner-circle-size-border-width-spacious);
206
+ }
207
+ .ids-radio-group.ids-radio-group-spacious > .ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:focus {
208
+ outline-width: var(--ids-comp-radio-focused-outline-outline-spacious);
209
+ }
210
+ .ids-radio-group.ids-radio-group-spacious > .ids-radio-item .ids-radio-item__label {
211
+ padding: var(--ids-comp-radio-button-label-size-padding-y-spacious) 0px;
212
+ font-family: var(--ids-comp-radio-button-label-typography-font-family-spacious);
213
+ font-size: var(--ids-comp-radio-button-label-typography-font-size-spacious);
214
+ font-weight: var(--ids-comp-radio-button-label-typography-font-weight-spacious);
215
+ line-height: var(--ids-comp-radio-button-label-typography-line-height-spacious);
216
+ letter-spacing: var(--ids-comp-radio-button-label-typography-letter-spacing-spacious);
217
+ }
218
+ .ids-radio-group.ids-radio-group-dense.ids-radio-group-horizontal {
219
+ padding: var(--ids-comp-radio-group-horizontal-container-size-padding-y-dense) var(--ids-comp-radio-group-horizontal-container-size-padding-x-dense);
220
+ gap: var(--ids-comp-radio-group-horizontal-container-size-gap-dense);
221
+ }
222
+ .ids-radio-group.ids-radio-group-dense.ids-radio-group-vertical {
223
+ padding: var(--ids-comp-radio-group-vertical-container-size-padding-y-dense) var(--ids-comp-radio-group-vertical-container-size-padding-x-dense);
224
+ gap: var(--ids-comp-radio-group-vertical-container-size-gap-dense);
225
+ }
226
+ .ids-radio-group.ids-radio-group-dense > .ids-radio-item {
227
+ padding: var(--ids-comp-radio-button-container-size-padding-y-dense) var(--ids-comp-radio-button-container-size-padding-x-dense);
228
+ gap: var(--ids-comp-radio-button-container-size-gap-dense);
229
+ }
230
+ .ids-radio-group.ids-radio-group-dense > .ids-radio-item .ids-radio-item__input-wrapper .ids-radio-item__touch-target {
231
+ top: calc((var(--ids-comp-radio-button-input-size-height-dense) - var(--ids-comp-radio-button-input-size-touchtarget-height-dense)) / 2);
232
+ left: calc((var(--ids-comp-radio-button-input-size-width-dense) - var(--ids-comp-radio-button-input-size-touchtarget-width-dense)) / 2);
233
+ height: var(--ids-comp-radio-button-input-size-touchtarget-height-dense);
234
+ width: var(--ids-comp-radio-button-input-size-touchtarget-width-dense);
235
+ }
236
+ .ids-radio-group.ids-radio-group-dense > .ids-radio-item .ids-radio-item__input-wrapper input[type=radio] {
237
+ width: var(--ids-comp-radio-button-input-size-width-dense);
238
+ height: var(--ids-comp-radio-button-input-size-height-dense);
239
+ border-radius: var(--ids-comp-radio-button-input-size-border-radius-dense);
240
+ border-width: var(--ids-comp-radio-button-input-size-border-width-dense);
241
+ }
242
+ .ids-radio-group.ids-radio-group-dense > .ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:checked + .ids-radio-item__inner-circle {
243
+ width: var(--ids-comp-radio-button-input-inner-circle-size-width-dense);
244
+ height: var(--ids-comp-radio-button-input-inner-circle-size-height-dense);
245
+ border-radius: var(--ids-comp-radio-button-input-inner-circle-size-border-radius-dense);
246
+ border-width: var(--ids-comp-radio-button-input-inner-circle-size-border-width-dense);
247
+ }
248
+ .ids-radio-group.ids-radio-group-dense > .ids-radio-item .ids-radio-item__input-wrapper input[type=radio]:focus {
249
+ outline-width: var(--ids-comp-radio-focused-outline-outline-dense);
250
+ }
251
+ .ids-radio-group.ids-radio-group-dense > .ids-radio-item .ids-radio-item__label {
252
+ padding: var(--ids-comp-radio-button-label-size-padding-y-dense) 0px;
253
+ font-family: var(--ids-comp-radio-button-label-typography-font-family-dense);
254
+ font-size: var(--ids-comp-radio-button-label-typography-font-size-dense);
255
+ font-weight: var(--ids-comp-radio-button-label-typography-font-weight-dense);
256
+ line-height: var(--ids-comp-radio-button-label-typography-line-height-dense);
257
+ letter-spacing: var(--ids-comp-radio-button-label-typography-letter-spacing-dense);
258
+ }
259
+ .ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) {
260
+ border-color: var(--ids-comp-radio-input-unselected-color-border-surface-hovered);
261
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-hovered);
262
+ }
263
+ .ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled) {
264
+ border-color: var(--ids-comp-radio-input-unselected-color-border-surface-default);
265
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-default);
266
+ }
267
+ .ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):hover {
268
+ border-color: var(--ids-comp-radio-input-unselected-color-border-surface-hovered);
269
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-hovered);
270
+ }
271
+ .ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):active {
272
+ border-color: var(--ids-comp-radio-input-unselected-color-border-surface-pressed);
273
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-pressed);
274
+ }
275
+ .ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus-visible {
276
+ border-color: var(--ids-comp-radio-input-unselected-color-border-surface-focused);
277
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-focused);
278
+ outline-color: var(--ids-comp-radio-input-unselected-color-focused-outline-surface-focused);
279
+ }
280
+ .ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:disabled {
281
+ border-color: var(--ids-comp-forms-form-field-standard-container-color-border-surface-disabled);
282
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-disabled);
283
+ }
284
+ .ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) {
285
+ border-color: var(--ids-comp-radio-input-selected-color-border-surface-default);
286
+ background-color: var(--ids-comp-radio-input-selected-color-bg-surface-default);
287
+ }
288
+ .ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio-item__inner-circle {
289
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-default);
290
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-default);
291
+ }
292
+ .ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover {
293
+ border-color: var(--ids-comp-radio-input-selected-color-border-surface-hovered);
294
+ background-color: var(--ids-comp-radio-input-selected-color-bg-surface-hovered);
295
+ }
296
+ .ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio-item__inner-circle {
297
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-hovered);
298
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-hovered);
299
+ }
300
+ .ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active {
301
+ border-color: var(--ids-comp-radio-input-selected-color-border-surface-pressed);
302
+ background-color: var(--ids-comp-radio-input-selected-color-bg-surface-pressed);
303
+ }
304
+ .ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio-item__inner-circle {
305
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-pressed);
306
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-pressed);
307
+ }
308
+ .ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible {
309
+ border-color: var(--ids-comp-radio-input-selected-color-border-surface-focused);
310
+ background-color: var(--ids-comp-radio-input-selected-color-bg-surface-focused);
311
+ outline-color: var(--ids-comp-radio-input-selected-color-focused-outline-surface-focused);
312
+ }
313
+ .ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio-item__inner-circle, .ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio-item__inner-circle {
314
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-focused);
315
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-focused);
316
+ }
317
+ .ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:disabled {
318
+ border-color: var(--ids-comp-forms-form-field-standard-container-color-border-surface-disabled);
319
+ background-color: var(--ids-comp-radio-input-selected-color-bg-surface-disabled);
320
+ }
321
+ .ids-radio-group .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:disabled + .ids-radio-item__inner-circle {
322
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-disabled);
323
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-disabled);
324
+ }
325
+ .ids-radio-group .ids-radio-item-surface:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) {
326
+ border-color: var(--ids-comp-radio-input-selected-color-border-surface-hovered);
327
+ background-color: var(--ids-comp-radio-input-selected-color-bg-surface-hovered);
328
+ }
329
+ .ids-radio-group .ids-radio-item-surface:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio-item__inner-circle {
330
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-hovered);
331
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-hovered);
332
+ }
333
+ .ids-radio-group .ids-radio-item-surface .ids-radio-item__label {
334
+ color: var(--ids-comp-radio-label-color-fg-surface-default);
335
+ }
336
+ .ids-radio-group .ids-radio-item-surface .ids-radio-item__label:hover {
337
+ color: var(--ids-comp-radio-label-color-fg-surface-hovered);
338
+ }
339
+ .ids-radio-group .ids-radio-item-surface .ids-radio-item__label:active {
340
+ color: var(--ids-comp-radio-label-color-fg-surface-pressed);
341
+ }
342
+ .ids-radio-group .ids-radio-item-surface .ids-radio-item__label:focus {
343
+ color: var(--ids-comp-radio-label-color-fg-surface-focused);
344
+ }
345
+ .ids-radio-group .ids-radio-item-surface.ids-radio-item-disabled .ids-radio-item__label {
346
+ color: var(--ids-comp-radio-label-color-fg-surface-disabled);
347
+ }
348
+ .ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) {
349
+ border-color: var(--ids-comp-radio-input-unselected-color-border-light-hovered);
350
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-light-hovered);
351
+ }
352
+ .ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled) {
353
+ border-color: var(--ids-comp-radio-input-unselected-color-border-light-default);
354
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-light-default);
355
+ }
356
+ .ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):hover {
357
+ border-color: var(--ids-comp-radio-input-unselected-color-border-light-hovered);
358
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-light-hovered);
359
+ }
360
+ .ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):active {
361
+ border-color: var(--ids-comp-radio-input-unselected-color-border-light-pressed);
362
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-light-pressed);
363
+ }
364
+ .ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus-visible {
365
+ border-color: var(--ids-comp-radio-input-unselected-color-border-light-focused);
366
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-light-focused);
367
+ outline-color: var(--ids-comp-radio-input-unselected-color-focused-outline-light-focused);
368
+ }
369
+ .ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:disabled {
370
+ border-color: var(--ids-comp-forms-form-field-standard-container-color-border-light-disabled);
371
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-light-disabled);
372
+ }
373
+ .ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) {
374
+ border-color: var(--ids-comp-radio-input-selected-color-border-light-default);
375
+ background-color: var(--ids-comp-radio-input-selected-color-bg-light-default);
376
+ }
377
+ .ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio-item__inner-circle {
378
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-default);
379
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-default);
380
+ }
381
+ .ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover {
382
+ border-color: var(--ids-comp-radio-input-selected-color-border-light-hovered);
383
+ background-color: var(--ids-comp-radio-input-selected-color-bg-light-hovered);
384
+ }
385
+ .ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio-item__inner-circle {
386
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-hovered);
387
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-hovered);
388
+ }
389
+ .ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active {
390
+ border-color: var(--ids-comp-radio-input-selected-color-border-light-pressed);
391
+ background-color: var(--ids-comp-radio-input-selected-color-bg-light-pressed);
392
+ }
393
+ .ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio-item__inner-circle {
394
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-pressed);
395
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-pressed);
396
+ }
397
+ .ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible {
398
+ border-color: var(--ids-comp-radio-input-selected-color-border-light-focused);
399
+ background-color: var(--ids-comp-radio-input-selected-color-bg-light-focused);
400
+ outline-color: var(--ids-comp-radio-input-selected-color-focused-outline-light-focused);
401
+ }
402
+ .ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio-item__inner-circle, .ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio-item__inner-circle {
403
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-focused);
404
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-focused);
405
+ }
406
+ .ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:disabled {
407
+ border-color: var(--ids-comp-forms-form-field-standard-container-color-border-light-disabled);
408
+ background-color: var(--ids-comp-radio-input-selected-color-bg-light-disabled);
409
+ }
410
+ .ids-radio-group .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:disabled + .ids-radio-item__inner-circle {
411
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-disabled);
412
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-disabled);
413
+ }
414
+ .ids-radio-group .ids-radio-item-light:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) {
415
+ border-color: var(--ids-comp-radio-input-selected-color-border-light-hovered);
416
+ background-color: var(--ids-comp-radio-input-selected-color-bg-light-hovered);
417
+ }
418
+ .ids-radio-group .ids-radio-item-light:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio-item__inner-circle {
419
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-hovered);
420
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-hovered);
421
+ }
422
+ .ids-radio-group .ids-radio-item-light .ids-radio-item__label {
423
+ color: var(--ids-comp-radio-label-color-fg-light-default);
424
+ }
425
+ .ids-radio-group .ids-radio-item-light .ids-radio-item__label:hover {
426
+ color: var(--ids-comp-radio-label-color-fg-light-hovered);
427
+ }
428
+ .ids-radio-group .ids-radio-item-light .ids-radio-item__label:active {
429
+ color: var(--ids-comp-radio-label-color-fg-light-pressed);
430
+ }
431
+ .ids-radio-group .ids-radio-item-light .ids-radio-item__label:focus {
432
+ color: var(--ids-comp-radio-label-color-fg-light-focused);
433
+ }
434
+ .ids-radio-group .ids-radio-item-light.ids-radio-item-disabled .ids-radio-item__label {
435
+ color: var(--ids-comp-radio-label-color-fg-light-disabled);
436
+ }
437
+ .ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) {
438
+ border-color: var(--ids-comp-radio-input-unselected-color-border-dark-hovered);
439
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-hovered);
440
+ }
441
+ .ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled) {
442
+ border-color: var(--ids-comp-radio-input-unselected-color-border-dark-default);
443
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-default);
444
+ }
445
+ .ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):hover {
446
+ border-color: var(--ids-comp-radio-input-unselected-color-border-dark-hovered);
447
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-hovered);
448
+ }
449
+ .ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):active {
450
+ border-color: var(--ids-comp-radio-input-unselected-color-border-dark-pressed);
451
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-pressed);
452
+ }
453
+ .ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus-visible {
454
+ border-color: var(--ids-comp-radio-input-unselected-color-border-dark-focused);
455
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-focused);
456
+ outline-color: var(--ids-comp-radio-input-unselected-color-focused-outline-dark-focused);
457
+ }
458
+ .ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:disabled {
459
+ border-color: var(--ids-comp-forms-form-field-standard-container-color-border-dark-disabled);
460
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-disabled);
461
+ }
462
+ .ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) {
463
+ border-color: var(--ids-comp-radio-input-selected-color-border-dark-default);
464
+ background-color: var(--ids-comp-radio-input-selected-color-bg-dark-default);
465
+ }
466
+ .ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio-item__inner-circle {
467
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-default);
468
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-default);
469
+ }
470
+ .ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover {
471
+ border-color: var(--ids-comp-radio-input-selected-color-border-dark-hovered);
472
+ background-color: var(--ids-comp-radio-input-selected-color-bg-dark-hovered);
473
+ }
474
+ .ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio-item__inner-circle {
475
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-hovered);
476
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-hovered);
477
+ }
478
+ .ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active {
479
+ border-color: var(--ids-comp-radio-input-selected-color-border-dark-pressed);
480
+ background-color: var(--ids-comp-radio-input-selected-color-bg-dark-pressed);
481
+ }
482
+ .ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio-item__inner-circle {
483
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-pressed);
484
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-pressed);
485
+ }
486
+ .ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible {
487
+ border-color: var(--ids-comp-radio-input-selected-color-border-dark-focused);
488
+ background-color: var(--ids-comp-radio-input-selected-color-bg-dark-focused);
489
+ outline-color: var(--ids-comp-radio-input-selected-color-focused-outline-dark-focused);
490
+ }
491
+ .ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio-item__inner-circle, .ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio-item__inner-circle {
492
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-focused);
493
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-focused);
494
+ }
495
+ .ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:disabled {
496
+ border-color: var(--ids-comp-forms-form-field-standard-container-color-border-dark-disabled);
497
+ background-color: var(--ids-comp-radio-input-selected-color-bg-dark-disabled);
498
+ }
499
+ .ids-radio-group .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:disabled + .ids-radio-item__inner-circle {
500
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-disabled);
501
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-disabled);
502
+ }
503
+ .ids-radio-group .ids-radio-item-dark:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) {
504
+ border-color: var(--ids-comp-radio-input-selected-color-border-dark-hovered);
505
+ background-color: var(--ids-comp-radio-input-selected-color-bg-dark-hovered);
506
+ }
507
+ .ids-radio-group .ids-radio-item-dark:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio-item__inner-circle {
508
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-hovered);
509
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-hovered);
510
+ }
511
+ .ids-radio-group .ids-radio-item-dark .ids-radio-item__label {
512
+ color: var(--ids-comp-radio-label-color-fg-dark-default);
513
+ }
514
+ .ids-radio-group .ids-radio-item-dark .ids-radio-item__label:hover {
515
+ color: var(--ids-comp-radio-label-color-fg-dark-hovered);
516
+ }
517
+ .ids-radio-group .ids-radio-item-dark .ids-radio-item__label:active {
518
+ color: var(--ids-comp-radio-label-color-fg-dark-pressed);
519
+ }
520
+ .ids-radio-group .ids-radio-item-dark .ids-radio-item__label:focus {
521
+ color: var(--ids-comp-radio-label-color-fg-dark-focused);
522
+ }
523
+ .ids-radio-group .ids-radio-item-dark.ids-radio-item-disabled .ids-radio-item__label {
524
+ color: var(--ids-comp-radio-label-color-fg-dark-disabled);
525
+ }
526
+ .ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) {
527
+ border-color: var(--ids-comp-radio-input-unselected-color-border-surface-error-hovered);
528
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-hovered);
529
+ }
530
+ .ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled) {
531
+ border-color: var(--ids-comp-radio-input-unselected-color-border-surface-error-default);
532
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-default);
533
+ }
534
+ .ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):hover, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):hover {
535
+ border-color: var(--ids-comp-radio-input-unselected-color-border-surface-error-hovered);
536
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-hovered);
537
+ }
538
+ .ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):active, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):active {
539
+ border-color: var(--ids-comp-radio-input-unselected-color-border-surface-error-pressed);
540
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-pressed);
541
+ }
542
+ .ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus-visible, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus-visible {
543
+ border-color: var(--ids-comp-radio-input-unselected-color-border-surface-error-focused);
544
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-surface-focused);
545
+ }
546
+ .ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) {
547
+ border-color: var(--ids-comp-radio-input-selected-color-border-surface-error-default);
548
+ background-color: var(--ids-comp-radio-input-selected-color-bg-surface-default);
549
+ }
550
+ .ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio-item__inner-circle {
551
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-error-default);
552
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-error-default);
553
+ }
554
+ .ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover {
555
+ border-color: var(--ids-comp-radio-input-selected-color-border-surface-error-hovered);
556
+ background-color: var(--ids-comp-radio-input-selected-color-bg-surface-hovered);
557
+ }
558
+ .ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio-item__inner-circle {
559
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-error-hovered);
560
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-error-hovered);
561
+ }
562
+ .ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active {
563
+ border-color: var(--ids-comp-radio-input-selected-color-border-surface-error-pressed);
564
+ background-color: var(--ids-comp-radio-input-selected-color-bg-surface-pressed);
565
+ }
566
+ .ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio-item__inner-circle {
567
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-error-pressed);
568
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-error-pressed);
569
+ }
570
+ .ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible {
571
+ border-color: var(--ids-comp-radio-input-selected-color-border-surface-error-focused);
572
+ background-color: var(--ids-comp-radio-input-selected-color-bg-surface-focused);
573
+ }
574
+ .ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio-item__inner-circle, .ids-radio-group.ng-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio-item__inner-circle {
575
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-error-focused);
576
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-error-focused);
577
+ }
578
+ .ids-radio-group.ng-invalid .ids-radio-item-surface:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) {
579
+ border-color: var(--ids-comp-radio-input-selected-color-border-surface-error-hovered);
580
+ background-color: var(--ids-comp-radio-input-selected-color-bg-surface-hovered);
581
+ }
582
+ .ids-radio-group.ng-invalid .ids-radio-item-surface:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-surface:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio-item__inner-circle {
583
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-surface-error-hovered);
584
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-surface-error-hovered);
585
+ }
586
+ .ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) {
587
+ border-color: var(--ids-comp-radio-input-unselected-color-border-light-error-hovered);
588
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-light-hovered);
589
+ }
590
+ .ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled) {
591
+ border-color: var(--ids-comp-radio-input-unselected-color-border-light-error-default);
592
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-light-default);
593
+ }
594
+ .ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):hover, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):hover {
595
+ border-color: var(--ids-comp-radio-input-unselected-color-border-light-error-hovered);
596
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-light-hovered);
597
+ }
598
+ .ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):active, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):active {
599
+ border-color: var(--ids-comp-radio-input-unselected-color-border-light-error-pressed);
600
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-light-pressed);
601
+ }
602
+ .ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus-visible, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus-visible {
603
+ border-color: var(--ids-comp-radio-input-unselected-color-border-light-error-focused);
604
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-light-focused);
605
+ }
606
+ .ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) {
607
+ border-color: var(--ids-comp-radio-input-selected-color-border-light-error-default);
608
+ background-color: var(--ids-comp-radio-input-selected-color-bg-light-default);
609
+ }
610
+ .ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio-item__inner-circle {
611
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-error-default);
612
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-error-default);
613
+ }
614
+ .ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover {
615
+ border-color: var(--ids-comp-radio-input-selected-color-border-light-error-hovered);
616
+ background-color: var(--ids-comp-radio-input-selected-color-bg-light-hovered);
617
+ }
618
+ .ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio-item__inner-circle {
619
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-error-hovered);
620
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-error-hovered);
621
+ }
622
+ .ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active {
623
+ border-color: var(--ids-comp-radio-input-selected-color-border-light-error-pressed);
624
+ background-color: var(--ids-comp-radio-input-selected-color-bg-light-pressed);
625
+ }
626
+ .ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio-item__inner-circle {
627
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-error-pressed);
628
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-error-pressed);
629
+ }
630
+ .ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible {
631
+ border-color: var(--ids-comp-radio-input-selected-color-border-light-error-focused);
632
+ background-color: var(--ids-comp-radio-input-selected-color-bg-light-focused);
633
+ }
634
+ .ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio-item__inner-circle, .ids-radio-group.ng-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio-item__inner-circle {
635
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-error-focused);
636
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-error-focused);
637
+ }
638
+ .ids-radio-group.ng-invalid .ids-radio-item-light:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) {
639
+ border-color: var(--ids-comp-radio-input-selected-color-border-light-error-hovered);
640
+ background-color: var(--ids-comp-radio-input-selected-color-bg-light-hovered);
641
+ }
642
+ .ids-radio-group.ng-invalid .ids-radio-item-light:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-light:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio-item__inner-circle {
643
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-light-error-hovered);
644
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-light-error-hovered);
645
+ }
646
+ .ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) {
647
+ border-color: var(--ids-comp-radio-input-unselected-color-border-dark-error-hovered);
648
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-hovered);
649
+ }
650
+ .ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled) {
651
+ border-color: var(--ids-comp-radio-input-unselected-color-border-dark-error-default);
652
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-default);
653
+ }
654
+ .ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):hover, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):hover {
655
+ border-color: var(--ids-comp-radio-input-unselected-color-border-dark-error-hovered);
656
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-hovered);
657
+ }
658
+ .ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):active, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):active {
659
+ border-color: var(--ids-comp-radio-input-unselected-color-border-dark-error-pressed);
660
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-pressed);
661
+ }
662
+ .ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus-visible, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:not(:disabled):focus-visible {
663
+ border-color: var(--ids-comp-radio-input-unselected-color-border-dark-error-focused);
664
+ background-color: var(--ids-comp-radio-input-unselected-color-bg-dark-focused);
665
+ }
666
+ .ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) {
667
+ border-color: var(--ids-comp-radio-input-selected-color-border-dark-error-default);
668
+ background-color: var(--ids-comp-radio-input-selected-color-bg-dark-default);
669
+ }
670
+ .ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled) + .ids-radio-item__inner-circle {
671
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-error-default);
672
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-error-default);
673
+ }
674
+ .ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover {
675
+ border-color: var(--ids-comp-radio-input-selected-color-border-dark-error-hovered);
676
+ background-color: var(--ids-comp-radio-input-selected-color-bg-dark-hovered);
677
+ }
678
+ .ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):hover + .ids-radio-item__inner-circle {
679
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-error-hovered);
680
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-error-hovered);
681
+ }
682
+ .ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active {
683
+ border-color: var(--ids-comp-radio-input-selected-color-border-dark-error-pressed);
684
+ background-color: var(--ids-comp-radio-input-selected-color-bg-dark-pressed);
685
+ }
686
+ .ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):active + .ids-radio-item__inner-circle {
687
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-error-pressed);
688
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-error-pressed);
689
+ }
690
+ .ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible {
691
+ border-color: var(--ids-comp-radio-input-selected-color-border-dark-error-focused);
692
+ background-color: var(--ids-comp-radio-input-selected-color-bg-dark-focused);
693
+ }
694
+ .ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio-item__inner-circle, .ids-radio-group.ng-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark .ids-radio-item__input-wrapper input[type=radio]:checked:not(:disabled):focus-visible + .ids-radio-item__inner-circle {
695
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-error-focused);
696
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-error-focused);
697
+ }
698
+ .ids-radio-group.ng-invalid .ids-radio-item-dark:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled), .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) {
699
+ border-color: var(--ids-comp-radio-input-selected-color-border-dark-error-hovered);
700
+ background-color: var(--ids-comp-radio-input-selected-color-bg-dark-hovered);
701
+ }
702
+ .ids-radio-group.ng-invalid .ids-radio-item-dark:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio-item__inner-circle, .ids-radio-group.ids-radio-group-invalid .ids-radio-item-dark:has(input[type=radio]:checked) .ids-radio-item__input-wrapper .ids-radio-item__touch-target:hover + input[type=radio]:not(:disabled) + .ids-radio-item__inner-circle {
703
+ border-color: var(--ids-comp-radio-input-selected-inner-circle-color-border-dark-error-hovered);
704
+ background: var(--ids-comp-radio-input-selected-inner-circle-color-bg-dark-error-hovered);
705
+ }