@i-cell/ids-styles 0.0.13 → 0.0.15-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/components.css +1160 -148
  2. package/dist/components.min.css +1 -1
  3. package/dist/components.plugin.js +980 -64
  4. package/dist/form-elements/form-field/form-field.css +58 -148
  5. package/dist/form-elements/form-field/form-field.min.css +1 -1
  6. package/dist/form-elements/form-field/form-field.plugin.js +62 -64
  7. package/dist/option/option.css +273 -0
  8. package/dist/option/option.min.css +1 -0
  9. package/dist/option/option.plugin.js +252 -0
  10. package/dist/select/select.css +131 -0
  11. package/dist/select/select.min.css +1 -0
  12. package/dist/select/select.plugin.js +103 -0
  13. package/dist/switch/switch.css +695 -0
  14. package/dist/switch/switch.min.css +1 -0
  15. package/dist/switch/switch.plugin.js +590 -0
  16. package/package.json +2 -2
package/dist/components.css CHANGED
@@ -3136,6 +3136,7 @@
3136
3136
  display: flex;
3137
3137
  align-items: center;
3138
3138
  flex: 1 0 0;
3139
+ overflow-x: hidden;
3139
3140
  }
3140
3141
  .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__leading-icon, .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix, .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__duffix, .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__trailing-icon {
3141
3142
  display: flex;
@@ -3145,6 +3146,7 @@
3145
3146
  display: flex;
3146
3147
  align-items: center;
3147
3148
  flex: 1 0 0;
3149
+ overflow-x: hidden;
3148
3150
  }
3149
3151
  .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3150
3152
  .ids-form-field > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
@@ -3207,17 +3209,13 @@
3207
3209
  }
3208
3210
  .ids-form-field.ids-form-field-compact > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
3209
3211
  padding: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-size-padding-y-compact) 0;
3210
- }
3211
- .ids-form-field.ids-form-field-compact > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3212
- .ids-form-field.ids-form-field-compact > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3213
3212
  font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-font-family-compact);
3214
3213
  font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-font-size-compact);
3215
3214
  font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-font-weight-compact);
3216
3215
  letter-spacing: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-letter-spacing-compact);
3217
3216
  line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-line-height-compact);
3218
3217
  }
3219
- .ids-form-field.ids-form-field-compact > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3220
- .ids-form-field.ids-form-field-compact > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3218
+ .ids-form-field.ids-form-field-compact > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
3221
3219
  font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-family-compact);
3222
3220
  font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-size-compact);
3223
3221
  font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-weight-compact);
@@ -3277,17 +3275,13 @@
3277
3275
  }
3278
3276
  .ids-form-field.ids-form-field-comfortable > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
3279
3277
  padding: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-size-padding-y-comfortable) 0;
3280
- }
3281
- .ids-form-field.ids-form-field-comfortable > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3282
- .ids-form-field.ids-form-field-comfortable > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3283
3278
  font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-font-family-comfortable);
3284
3279
  font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-font-size-comfortable);
3285
3280
  font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-font-weight-comfortable);
3286
3281
  letter-spacing: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-letter-spacing-comfortable);
3287
3282
  line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-line-height-comfortable);
3288
3283
  }
3289
- .ids-form-field.ids-form-field-comfortable > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3290
- .ids-form-field.ids-form-field-comfortable > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3284
+ .ids-form-field.ids-form-field-comfortable > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
3291
3285
  font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-family-comfortable);
3292
3286
  font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-size-comfortable);
3293
3287
  font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-weight-comfortable);
@@ -3347,17 +3341,13 @@
3347
3341
  }
3348
3342
  .ids-form-field.ids-form-field-spacious > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
3349
3343
  padding: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-size-padding-y-spacious) 0;
3350
- }
3351
- .ids-form-field.ids-form-field-spacious > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3352
- .ids-form-field.ids-form-field-spacious > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3353
3344
  font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-font-family-spacious);
3354
3345
  font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-font-size-spacious);
3355
3346
  font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-font-weight-spacious);
3356
3347
  letter-spacing: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-letter-spacing-spacious);
3357
3348
  line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-line-height-spacious);
3358
3349
  }
3359
- .ids-form-field.ids-form-field-spacious > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3360
- .ids-form-field.ids-form-field-spacious > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3350
+ .ids-form-field.ids-form-field-spacious > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
3361
3351
  font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-family-spacious);
3362
3352
  font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-size-spacious);
3363
3353
  font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-weight-spacious);
@@ -3417,17 +3407,13 @@
3417
3407
  }
3418
3408
  .ids-form-field.ids-form-field-dense > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
3419
3409
  padding: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-size-padding-y-dense) 0;
3420
- }
3421
- .ids-form-field.ids-form-field-dense > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3422
- .ids-form-field.ids-form-field-dense > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3423
3410
  font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-font-family-dense);
3424
3411
  font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-font-size-dense);
3425
3412
  font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-font-weight-dense);
3426
3413
  letter-spacing: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-letter-spacing-dense);
3427
3414
  line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-filled-line-height-dense);
3428
3415
  }
3429
- .ids-form-field.ids-form-field-dense > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3430
- .ids-form-field.ids-form-field-dense > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3416
+ .ids-form-field.ids-form-field-dense > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
3431
3417
  font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-family-dense);
3432
3418
  font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-size-dense);
3433
3419
  font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-weight-dense);
@@ -3462,12 +3448,10 @@
3462
3448
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3463
3449
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-default);
3464
3450
  }
3465
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3466
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3451
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
3467
3452
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-default);
3468
3453
  }
3469
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3470
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3454
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
3471
3455
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-default);
3472
3456
  }
3473
3457
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
@@ -3493,12 +3477,10 @@
3493
3477
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3494
3478
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-hovered);
3495
3479
  }
3496
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3497
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3480
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
3498
3481
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-hovered);
3499
3482
  }
3500
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3501
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3483
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
3502
3484
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-hovered);
3503
3485
  }
3504
3486
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
@@ -3524,14 +3506,10 @@
3524
3506
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3525
3507
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-focused);
3526
3508
  }
3527
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3528
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3529
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3509
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
3530
3510
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-focused);
3531
3511
  }
3532
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3533
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3534
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3512
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
3535
3513
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-focused);
3536
3514
  }
3537
3515
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
@@ -3557,14 +3535,10 @@
3557
3535
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3558
3536
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-pressed);
3559
3537
  }
3560
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3561
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3562
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3538
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
3563
3539
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-pressed);
3564
3540
  }
3565
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3566
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3567
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3541
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
3568
3542
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-pressed);
3569
3543
  }
3570
3544
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
@@ -3593,12 +3567,10 @@
3593
3567
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3594
3568
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-default);
3595
3569
  }
3596
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3597
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3570
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
3598
3571
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-default);
3599
3572
  }
3600
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3601
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3573
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
3602
3574
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-default);
3603
3575
  }
3604
3576
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
@@ -3624,12 +3596,10 @@
3624
3596
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3625
3597
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-hovered);
3626
3598
  }
3627
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3628
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3599
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
3629
3600
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-hovered);
3630
3601
  }
3631
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3632
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3602
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
3633
3603
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-hovered);
3634
3604
  }
3635
3605
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
@@ -3655,14 +3625,10 @@
3655
3625
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3656
3626
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-focused);
3657
3627
  }
3658
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3659
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3660
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3628
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
3661
3629
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-focused);
3662
3630
  }
3663
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3664
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3665
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3631
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
3666
3632
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-focused);
3667
3633
  }
3668
3634
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
@@ -3688,14 +3654,10 @@
3688
3654
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3689
3655
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-pressed);
3690
3656
  }
3691
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3692
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3693
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3657
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
3694
3658
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-pressed);
3695
3659
  }
3696
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3697
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3698
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3660
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
3699
3661
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-pressed);
3700
3662
  }
3701
3663
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
@@ -3724,12 +3686,10 @@
3724
3686
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3725
3687
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-default);
3726
3688
  }
3727
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3728
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3689
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
3729
3690
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-default);
3730
3691
  }
3731
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3732
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3692
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
3733
3693
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-default);
3734
3694
  }
3735
3695
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
@@ -3755,12 +3715,10 @@
3755
3715
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3756
3716
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-hovered);
3757
3717
  }
3758
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3759
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3718
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
3760
3719
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-hovered);
3761
3720
  }
3762
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3763
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3721
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
3764
3722
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-hovered);
3765
3723
  }
3766
3724
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
@@ -3786,14 +3744,10 @@
3786
3744
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3787
3745
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-focused);
3788
3746
  }
3789
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3790
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3791
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3747
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
3792
3748
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-focused);
3793
3749
  }
3794
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3795
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3796
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3750
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
3797
3751
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-focused);
3798
3752
  }
3799
3753
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
@@ -3819,14 +3773,10 @@
3819
3773
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3820
3774
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-pressed);
3821
3775
  }
3822
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3823
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3824
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3776
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
3825
3777
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-pressed);
3826
3778
  }
3827
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3828
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3829
- .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3779
+ .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
3830
3780
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-pressed);
3831
3781
  }
3832
3782
  .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix, .ids-form-field.ids-form-field-surface:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
@@ -3855,12 +3805,10 @@
3855
3805
  .ids-form-field.ids-form-field-surface.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3856
3806
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-surface-disabled);
3857
3807
  }
3858
- .ids-form-field.ids-form-field-surface.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3859
- .ids-form-field.ids-form-field-surface.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3808
+ .ids-form-field.ids-form-field-surface.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
3860
3809
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-surface-disabled);
3861
3810
  }
3862
- .ids-form-field.ids-form-field-surface.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3863
- .ids-form-field.ids-form-field-surface.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3811
+ .ids-form-field.ids-form-field-surface.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
3864
3812
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-disabled);
3865
3813
  }
3866
3814
  .ids-form-field.ids-form-field-surface.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
@@ -3889,12 +3837,10 @@
3889
3837
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3890
3838
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-default);
3891
3839
  }
3892
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3893
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3840
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
3894
3841
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-default);
3895
3842
  }
3896
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3897
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3843
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
3898
3844
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-default);
3899
3845
  }
3900
3846
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
@@ -3920,12 +3866,10 @@
3920
3866
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3921
3867
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-hovered);
3922
3868
  }
3923
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3924
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3869
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
3925
3870
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-hovered);
3926
3871
  }
3927
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3928
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3872
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
3929
3873
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-hovered);
3930
3874
  }
3931
3875
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
@@ -3951,14 +3895,10 @@
3951
3895
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3952
3896
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-focused);
3953
3897
  }
3954
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3955
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3956
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3898
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
3957
3899
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-focused);
3958
3900
  }
3959
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3960
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3961
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3901
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
3962
3902
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-focused);
3963
3903
  }
3964
3904
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
@@ -3984,14 +3924,10 @@
3984
3924
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
3985
3925
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-pressed);
3986
3926
  }
3987
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3988
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
3989
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3927
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
3990
3928
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-pressed);
3991
3929
  }
3992
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3993
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
3994
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3930
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
3995
3931
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-pressed);
3996
3932
  }
3997
3933
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled) > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
@@ -4020,12 +3956,10 @@
4020
3956
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4021
3957
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-default);
4022
3958
  }
4023
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
4024
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3959
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
4025
3960
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-default);
4026
3961
  }
4027
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
4028
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3962
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
4029
3963
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-default);
4030
3964
  }
4031
3965
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
@@ -4051,12 +3985,10 @@
4051
3985
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4052
3986
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-hovered);
4053
3987
  }
4054
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
4055
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
3988
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
4056
3989
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-hovered);
4057
3990
  }
4058
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
4059
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
3991
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
4060
3992
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-hovered);
4061
3993
  }
4062
3994
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
@@ -4082,14 +4014,10 @@
4082
4014
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4083
4015
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-focused);
4084
4016
  }
4085
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
4086
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
4087
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
4017
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
4088
4018
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-focused);
4089
4019
  }
4090
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
4091
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
4092
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
4020
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
4093
4021
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-focused);
4094
4022
  }
4095
4023
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
@@ -4115,14 +4043,10 @@
4115
4043
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4116
4044
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-pressed);
4117
4045
  }
4118
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
4119
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
4120
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
4046
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
4121
4047
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-pressed);
4122
4048
  }
4123
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
4124
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
4125
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
4049
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
4126
4050
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-pressed);
4127
4051
  }
4128
4052
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-invalid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
@@ -4151,12 +4075,10 @@
4151
4075
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4152
4076
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-default);
4153
4077
  }
4154
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
4155
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
4078
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
4156
4079
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-default);
4157
4080
  }
4158
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
4159
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
4081
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
4160
4082
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-default);
4161
4083
  }
4162
4084
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
@@ -4182,12 +4104,10 @@
4182
4104
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4183
4105
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-hovered);
4184
4106
  }
4185
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
4186
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
4107
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
4187
4108
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-hovered);
4188
4109
  }
4189
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
4190
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
4110
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
4191
4111
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-hovered);
4192
4112
  }
4193
4113
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:hover > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
@@ -4213,14 +4133,10 @@
4213
4133
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4214
4134
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-focused);
4215
4135
  }
4216
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
4217
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
4218
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
4136
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
4219
4137
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-focused);
4220
4138
  }
4221
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
4222
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
4223
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
4139
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
4224
4140
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-focused);
4225
4141
  }
4226
4142
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:focus) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
@@ -4246,14 +4162,10 @@
4246
4162
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4247
4163
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-pressed);
4248
4164
  }
4249
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
4250
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
4251
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
4165
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
4252
4166
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-pressed);
4253
4167
  }
4254
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
4255
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
4256
- .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
4168
+ .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
4257
4169
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-pressed);
4258
4170
  }
4259
4171
  .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(input:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix, .ids-form-field.ids-form-field-light:not(.ids-form-field-disabled).ids-form-field-valid > .ids-form-field__field-wrapper:has(textarea:active) > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
@@ -4282,12 +4194,10 @@
4282
4194
  .ids-form-field.ids-form-field-light.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__prefix {
4283
4195
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-prefix-color-fg-light-disabled);
4284
4196
  }
4285
- .ids-form-field.ids-form-field-light.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input,
4286
- .ids-form-field.ids-form-field-light.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea {
4197
+ .ids-form-field.ids-form-field-light.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix {
4287
4198
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-filled-color-fg-text-light-disabled);
4288
4199
  }
4289
- .ids-form-field.ids-form-field-light.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix input::placeholder,
4290
- .ids-form-field.ids-form-field-light.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix textarea::placeholder {
4200
+ .ids-form-field.ids-form-field-light.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__infix ::placeholder {
4291
4201
  color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-disabled);
4292
4202
  }
4293
4203
  .ids-form-field.ids-form-field-light.ids-form-field-disabled > .ids-form-field__field-wrapper > .ids-form-field__field-wrapper__container > .ids-form-field__suffix {
@@ -5142,6 +5052,280 @@
5142
5052
  color: var(--ids-comp-icon-button-standard-color-fg-surface-disabled);
5143
5053
  }
5144
5054
 
5055
+ .ids-option {
5056
+ display: flex;
5057
+ align-items: center;
5058
+ align-self: stretch;
5059
+ user-select: none;
5060
+ }
5061
+ .ids-option > .ids-option__text {
5062
+ overflow: hidden;
5063
+ text-overflow: ellipsis;
5064
+ font-style: normal;
5065
+ }
5066
+ .ids-option:not(.ids-option-disabled) {
5067
+ cursor: pointer;
5068
+ }
5069
+ .ids-option.ids-option-disabled {
5070
+ cursor: not-allowed;
5071
+ }
5072
+ .ids-option:not(.ids-option-multiselect) {
5073
+ justify-content: space-between;
5074
+ }
5075
+ .ids-option.ids-option-active {
5076
+ outline-style: solid;
5077
+ }
5078
+ .ids-option .ids-option-compact {
5079
+ height: var(--ids-comp-forms-option-item-size-min-height-compact);
5080
+ padding: var(--ids-comp-forms-option-item-size-padding-y-compact) var(--ids-comp-forms-option-item-size-padding-x-compact);
5081
+ gap: var(--ids-comp-forms-option-container-size-gap-compact);
5082
+ border-radius: var(--ids-comp-forms-option-item-size-border-radius-compact);
5083
+ }
5084
+ .ids-option .ids-option-compact > .ids-option__text {
5085
+ font-family: var(--ids-comp-forms-option-item-typography-font-family-compact);
5086
+ font-size: var(--ids-comp-forms-option-item-typography-font-size-compact);
5087
+ font-weight: var(--ids-comp-forms-option-item-typography-font-weight-compact);
5088
+ line-height: var(--ids-comp-forms-option-item-typography-line-height-compact);
5089
+ letter-spacing: var(--ids-comp-forms-option-item-typography-letter-spacing-compact);
5090
+ }
5091
+ .ids-option .ids-option-compact > .ids-icon {
5092
+ height: var(--ids-comp-forms-option-item-icon-size-height-compact);
5093
+ width: var(--ids-comp-forms-option-item-icon-size-width-compact);
5094
+ }
5095
+ .ids-option .ids-option-compact.ids-option-active {
5096
+ outline-width: var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact);
5097
+ }
5098
+ .ids-option .ids-option-comfortable {
5099
+ height: var(--ids-comp-forms-option-item-size-min-height-comfortable);
5100
+ padding: var(--ids-comp-forms-option-item-size-padding-y-comfortable) var(--ids-comp-forms-option-item-size-padding-x-comfortable);
5101
+ gap: var(--ids-comp-forms-option-container-size-gap-comfortable);
5102
+ border-radius: var(--ids-comp-forms-option-item-size-border-radius-comfortable);
5103
+ }
5104
+ .ids-option .ids-option-comfortable > .ids-option__text {
5105
+ font-family: var(--ids-comp-forms-option-item-typography-font-family-comfortable);
5106
+ font-size: var(--ids-comp-forms-option-item-typography-font-size-comfortable);
5107
+ font-weight: var(--ids-comp-forms-option-item-typography-font-weight-comfortable);
5108
+ line-height: var(--ids-comp-forms-option-item-typography-line-height-comfortable);
5109
+ letter-spacing: var(--ids-comp-forms-option-item-typography-letter-spacing-comfortable);
5110
+ }
5111
+ .ids-option .ids-option-comfortable > .ids-icon {
5112
+ height: var(--ids-comp-forms-option-item-icon-size-height-comfortable);
5113
+ width: var(--ids-comp-forms-option-item-icon-size-width-comfortable);
5114
+ }
5115
+ .ids-option .ids-option-comfortable.ids-option-active {
5116
+ outline-width: var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-comfortable);
5117
+ }
5118
+ .ids-option .ids-option-spacious {
5119
+ height: var(--ids-comp-forms-option-item-size-min-height-spacious);
5120
+ padding: var(--ids-comp-forms-option-item-size-padding-y-spacious) var(--ids-comp-forms-option-item-size-padding-x-spacious);
5121
+ gap: var(--ids-comp-forms-option-container-size-gap-spacious);
5122
+ border-radius: var(--ids-comp-forms-option-item-size-border-radius-spacious);
5123
+ }
5124
+ .ids-option .ids-option-spacious > .ids-option__text {
5125
+ font-family: var(--ids-comp-forms-option-item-typography-font-family-spacious);
5126
+ font-size: var(--ids-comp-forms-option-item-typography-font-size-spacious);
5127
+ font-weight: var(--ids-comp-forms-option-item-typography-font-weight-spacious);
5128
+ line-height: var(--ids-comp-forms-option-item-typography-line-height-spacious);
5129
+ letter-spacing: var(--ids-comp-forms-option-item-typography-letter-spacing-spacious);
5130
+ }
5131
+ .ids-option .ids-option-spacious > .ids-icon {
5132
+ height: var(--ids-comp-forms-option-item-icon-size-height-spacious);
5133
+ width: var(--ids-comp-forms-option-item-icon-size-width-spacious);
5134
+ }
5135
+ .ids-option .ids-option-spacious.ids-option-active {
5136
+ outline-width: var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-spacious);
5137
+ }
5138
+ .ids-option .ids-option-dense {
5139
+ height: var(--ids-comp-forms-option-item-size-min-height-dense);
5140
+ padding: var(--ids-comp-forms-option-item-size-padding-y-dense) var(--ids-comp-forms-option-item-size-padding-x-dense);
5141
+ gap: var(--ids-comp-forms-option-container-size-gap-dense);
5142
+ border-radius: var(--ids-comp-forms-option-item-size-border-radius-dense);
5143
+ }
5144
+ .ids-option .ids-option-dense > .ids-option__text {
5145
+ font-family: var(--ids-comp-forms-option-item-typography-font-family-dense);
5146
+ font-size: var(--ids-comp-forms-option-item-typography-font-size-dense);
5147
+ font-weight: var(--ids-comp-forms-option-item-typography-font-weight-dense);
5148
+ line-height: var(--ids-comp-forms-option-item-typography-line-height-dense);
5149
+ letter-spacing: var(--ids-comp-forms-option-item-typography-letter-spacing-dense);
5150
+ }
5151
+ .ids-option .ids-option-dense > .ids-icon {
5152
+ height: var(--ids-comp-forms-option-item-icon-size-height-dense);
5153
+ width: var(--ids-comp-forms-option-item-icon-size-width-dense);
5154
+ }
5155
+ .ids-option .ids-option-dense.ids-option-active {
5156
+ outline-width: var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-dense);
5157
+ }
5158
+ .ids-option.ids-option-surface:not(.ids-option-disabled) {
5159
+ background: var(--ids-comp-forms-option-color-bg-surface-default);
5160
+ }
5161
+ .ids-option.ids-option-surface:not(.ids-option-disabled) > .ids-option__text {
5162
+ color: var(--ids-comp-forms-option-color-fg-text-surface-default);
5163
+ }
5164
+ .ids-option.ids-option-surface:not(.ids-option-disabled) > .ids-icon {
5165
+ color: var(--ids-comp-forms-option-color-fg-icon-surface-default);
5166
+ }
5167
+ .ids-option.ids-option-surface:not(.ids-option-disabled):hover {
5168
+ background: var(--ids-comp-forms-option-color-bg-surface-hovered);
5169
+ }
5170
+ .ids-option.ids-option-surface:not(.ids-option-disabled):hover > .ids-option__text {
5171
+ color: var(--ids-comp-forms-option-color-fg-text-surface-hovered);
5172
+ }
5173
+ .ids-option.ids-option-surface:not(.ids-option-disabled):hover > .ids-icon {
5174
+ color: var(--ids-comp-forms-option-color-fg-icon-surface-hovered);
5175
+ }
5176
+ .ids-option.ids-option-surface:not(.ids-option-disabled):active {
5177
+ background: var(--ids-comp-forms-option-color-bg-surface-pressed);
5178
+ }
5179
+ .ids-option.ids-option-surface:not(.ids-option-disabled):active > .ids-option__text {
5180
+ color: var(--ids-comp-forms-option-color-fg-text-surface-pressed);
5181
+ }
5182
+ .ids-option.ids-option-surface:not(.ids-option-disabled):active > .ids-icon {
5183
+ color: var(--ids-comp-forms-option-color-fg-icon-surface-pressed);
5184
+ }
5185
+ .ids-option.ids-option-surface:not(.ids-option-disabled).ids-option-active {
5186
+ background: var(--ids-comp-forms-option-color-bg-surface-active);
5187
+ outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused);
5188
+ }
5189
+ .ids-option.ids-option-surface:not(.ids-option-disabled).ids-option-active > .ids-option__text {
5190
+ color: var(--ids-comp-forms-option-color-fg-text-surface-active);
5191
+ }
5192
+ .ids-option.ids-option-surface:not(.ids-option-disabled).ids-option-active > .ids-icon {
5193
+ color: var(--ids-comp-forms-option-color-fg-icon-surface-active);
5194
+ }
5195
+ .ids-option.ids-option-surface.ids-option-disabled {
5196
+ background: var(--ids-comp-forms-option-color-bg-surface-disabled);
5197
+ }
5198
+ .ids-option.ids-option-surface.ids-option-disabled > .ids-option__text {
5199
+ color: var(--ids-comp-forms-option-color-fg-text-surface-disabled);
5200
+ }
5201
+ .ids-option.ids-option-surface.ids-option-disabled > .ids-icon {
5202
+ color: var(--ids-comp-forms-option-color-fg-icon-surface-disabled);
5203
+ }
5204
+ .ids-option.ids-option-light:not(.ids-option-disabled) {
5205
+ background: var(--ids-comp-forms-option-color-bg-light-default);
5206
+ }
5207
+ .ids-option.ids-option-light:not(.ids-option-disabled) > .ids-option__text {
5208
+ color: var(--ids-comp-forms-option-color-fg-text-light-default);
5209
+ }
5210
+ .ids-option.ids-option-light:not(.ids-option-disabled) > .ids-icon {
5211
+ color: var(--ids-comp-forms-option-color-fg-icon-light-default);
5212
+ }
5213
+ .ids-option.ids-option-light:not(.ids-option-disabled):hover {
5214
+ background: var(--ids-comp-forms-option-color-bg-light-hovered);
5215
+ }
5216
+ .ids-option.ids-option-light:not(.ids-option-disabled):hover > .ids-option__text {
5217
+ color: var(--ids-comp-forms-option-color-fg-text-light-hovered);
5218
+ }
5219
+ .ids-option.ids-option-light:not(.ids-option-disabled):hover > .ids-icon {
5220
+ color: var(--ids-comp-forms-option-color-fg-icon-light-hovered);
5221
+ }
5222
+ .ids-option.ids-option-light:not(.ids-option-disabled):active {
5223
+ background: var(--ids-comp-forms-option-color-bg-light-pressed);
5224
+ }
5225
+ .ids-option.ids-option-light:not(.ids-option-disabled):active > .ids-option__text {
5226
+ color: var(--ids-comp-forms-option-color-fg-text-light-pressed);
5227
+ }
5228
+ .ids-option.ids-option-light:not(.ids-option-disabled):active > .ids-icon {
5229
+ color: var(--ids-comp-forms-option-color-fg-icon-light-pressed);
5230
+ }
5231
+ .ids-option.ids-option-light:not(.ids-option-disabled).ids-option-active {
5232
+ background: var(--ids-comp-forms-option-color-bg-light-active);
5233
+ outline-color: var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused);
5234
+ }
5235
+ .ids-option.ids-option-light:not(.ids-option-disabled).ids-option-active > .ids-option__text {
5236
+ color: var(--ids-comp-forms-option-color-fg-text-light-active);
5237
+ }
5238
+ .ids-option.ids-option-light:not(.ids-option-disabled).ids-option-active > .ids-icon {
5239
+ color: var(--ids-comp-forms-option-color-fg-icon-light-active);
5240
+ }
5241
+ .ids-option.ids-option-light.ids-option-disabled {
5242
+ background: var(--ids-comp-forms-option-color-bg-light-disabled);
5243
+ }
5244
+ .ids-option.ids-option-light.ids-option-disabled > .ids-option__text {
5245
+ color: var(--ids-comp-forms-option-color-fg-text-light-disabled);
5246
+ }
5247
+ .ids-option.ids-option-light.ids-option-disabled > .ids-icon {
5248
+ color: var(--ids-comp-forms-option-color-fg-icon-light-disabled);
5249
+ }
5250
+
5251
+ .ids-option-group {
5252
+ width: 100%;
5253
+ }
5254
+ .ids-option-group > .ids-option-group__label {
5255
+ display: flex;
5256
+ flex-direction: column;
5257
+ align-items: flex-start;
5258
+ width: 100%;
5259
+ }
5260
+ .ids-option-group > .ids-option-group__label > .ids-option-group__text {
5261
+ display: flex;
5262
+ align-items: center;
5263
+ align-self: stretch;
5264
+ font-style: normal;
5265
+ }
5266
+ .ids-option-group.ids-option-group-compact > .ids-option-group__label {
5267
+ gap: var(--ids-comp-forms-option-container-size-gap-compact);
5268
+ }
5269
+ .ids-option-group.ids-option-group-compact > .ids-option-group__label > .ids-option-group__text {
5270
+ padding: var(--ids-comp-forms-option-group-title-size-padding-y-compact) var(--ids-comp-forms-option-group-title-size-padding-x-compact);
5271
+ font-family: var(--ids-comp-forms-option-group-title-typography-font-family-compact);
5272
+ font-size: var(--ids-comp-forms-option-group-title-typography-font-size-compact);
5273
+ font-weight: var(--ids-comp-forms-option-group-title-typography-font-weight-compact);
5274
+ line-height: var(--ids-comp-forms-option-group-title-typography-line-height-compact);
5275
+ letter-spacing: var(--ids-comp-forms-option-group-title-typography-letter-spacing-compact);
5276
+ }
5277
+ .ids-option-group.ids-option-group-compact > .ids-option {
5278
+ padding: var(--ids-comp-forms-option-item-size-padding-y-compact) var(--ids-comp-forms-option-group-item-size-padding-right-compact) var(--ids-comp-forms-option-item-size-padding-y-compact) var(--ids-comp-forms-option-group-item-size-padding-left-compact);
5279
+ }
5280
+ .ids-option-group.ids-option-group-comfortable > .ids-option-group__label {
5281
+ gap: var(--ids-comp-forms-option-container-size-gap-comfortable);
5282
+ }
5283
+ .ids-option-group.ids-option-group-comfortable > .ids-option-group__label > .ids-option-group__text {
5284
+ padding: var(--ids-comp-forms-option-group-title-size-padding-y-comfortable) var(--ids-comp-forms-option-group-title-size-padding-x-comfortable);
5285
+ font-family: var(--ids-comp-forms-option-group-title-typography-font-family-comfortable);
5286
+ font-size: var(--ids-comp-forms-option-group-title-typography-font-size-comfortable);
5287
+ font-weight: var(--ids-comp-forms-option-group-title-typography-font-weight-comfortable);
5288
+ line-height: var(--ids-comp-forms-option-group-title-typography-line-height-comfortable);
5289
+ letter-spacing: var(--ids-comp-forms-option-group-title-typography-letter-spacing-comfortable);
5290
+ }
5291
+ .ids-option-group.ids-option-group-comfortable > .ids-option {
5292
+ padding: var(--ids-comp-forms-option-item-size-padding-y-comfortable) var(--ids-comp-forms-option-group-item-size-padding-right-comfortable) var(--ids-comp-forms-option-item-size-padding-y-comfortable) var(--ids-comp-forms-option-group-item-size-padding-left-comfortable);
5293
+ }
5294
+ .ids-option-group.ids-option-group-spacious > .ids-option-group__label {
5295
+ gap: var(--ids-comp-forms-option-container-size-gap-spacious);
5296
+ }
5297
+ .ids-option-group.ids-option-group-spacious > .ids-option-group__label > .ids-option-group__text {
5298
+ padding: var(--ids-comp-forms-option-group-title-size-padding-y-spacious) var(--ids-comp-forms-option-group-title-size-padding-x-spacious);
5299
+ font-family: var(--ids-comp-forms-option-group-title-typography-font-family-spacious);
5300
+ font-size: var(--ids-comp-forms-option-group-title-typography-font-size-spacious);
5301
+ font-weight: var(--ids-comp-forms-option-group-title-typography-font-weight-spacious);
5302
+ line-height: var(--ids-comp-forms-option-group-title-typography-line-height-spacious);
5303
+ letter-spacing: var(--ids-comp-forms-option-group-title-typography-letter-spacing-spacious);
5304
+ }
5305
+ .ids-option-group.ids-option-group-spacious > .ids-option {
5306
+ padding: var(--ids-comp-forms-option-item-size-padding-y-spacious) var(--ids-comp-forms-option-group-item-size-padding-right-spacious) var(--ids-comp-forms-option-item-size-padding-y-spacious) var(--ids-comp-forms-option-group-item-size-padding-left-spacious);
5307
+ }
5308
+ .ids-option-group.ids-option-group-dense > .ids-option-group__label {
5309
+ gap: var(--ids-comp-forms-option-container-size-gap-dense);
5310
+ }
5311
+ .ids-option-group.ids-option-group-dense > .ids-option-group__label > .ids-option-group__text {
5312
+ padding: var(--ids-comp-forms-option-group-title-size-padding-y-dense) var(--ids-comp-forms-option-group-title-size-padding-x-dense);
5313
+ font-family: var(--ids-comp-forms-option-group-title-typography-font-family-dense);
5314
+ font-size: var(--ids-comp-forms-option-group-title-typography-font-size-dense);
5315
+ font-weight: var(--ids-comp-forms-option-group-title-typography-font-weight-dense);
5316
+ line-height: var(--ids-comp-forms-option-group-title-typography-line-height-dense);
5317
+ letter-spacing: var(--ids-comp-forms-option-group-title-typography-letter-spacing-dense);
5318
+ }
5319
+ .ids-option-group.ids-option-group-dense > .ids-option {
5320
+ padding: var(--ids-comp-forms-option-item-size-padding-y-dense) var(--ids-comp-forms-option-group-item-size-padding-right-dense) var(--ids-comp-forms-option-item-size-padding-y-dense) var(--ids-comp-forms-option-group-item-size-padding-left-dense);
5321
+ }
5322
+ .ids-option-group .ids-option-groupsurface > .ids-option-group__label > .ids-option-group__text {
5323
+ color: var(--ids-comp-forms-option-color-group-title-color-fg-text-default);
5324
+ }
5325
+ .ids-option-group .ids-option-grouplight > .ids-option-group__label > .ids-option-group__text {
5326
+ color: var(--ids-comp-forms-option-color-group-title-color-fg-text-default);
5327
+ }
5328
+
5145
5329
  .ids-paginator {
5146
5330
  display: inline-flex;
5147
5331
  }
@@ -7357,6 +7541,138 @@
7357
7541
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-dark-disabled);
7358
7542
  }
7359
7543
 
7544
+ .ids-select {
7545
+ width: 100%;
7546
+ }
7547
+ .ids-select > .ids-select__trigger {
7548
+ display: flex;
7549
+ justify-content: space-between;
7550
+ align-items: center;
7551
+ }
7552
+ .ids-select > .ids-select__trigger > .ids-select__value {
7553
+ flex-grow: 1;
7554
+ overflow: hidden;
7555
+ }
7556
+ .ids-select > .ids-select__trigger > .ids-select__value > .ids-select__placeholder {
7557
+ user-select: none;
7558
+ }
7559
+ .ids-select > .ids-select__trigger > .ids-select__value > .ids-select__value-text {
7560
+ text-overflow: ellipsis;
7561
+ overflow: hidden;
7562
+ white-space: nowrap;
7563
+ display: block;
7564
+ }
7565
+ .ids-select > .ids-select__trigger > .ids-select__arrow {
7566
+ flex-shrink: 0;
7567
+ }
7568
+ .ids-select.ids-select-compact > .ids-select__trigger {
7569
+ gap: var(--ids-comp-forms-select-size-gap-compact);
7570
+ }
7571
+ .ids-select.ids-select-compact > .ids-select__trigger > .ids-select__value > .ids-select__placeholder {
7572
+ font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-family-compact);
7573
+ font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-size-compact);
7574
+ font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-weight-compact);
7575
+ letter-spacing: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-letter-spacing-compact);
7576
+ line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-line-height-compact);
7577
+ }
7578
+ .ids-select.ids-select-comfortable > .ids-select__trigger {
7579
+ gap: var(--ids-comp-forms-select-size-gap-comfortable);
7580
+ }
7581
+ .ids-select.ids-select-comfortable > .ids-select__trigger > .ids-select__value > .ids-select__placeholder {
7582
+ font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-family-comfortable);
7583
+ font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-size-comfortable);
7584
+ font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-weight-comfortable);
7585
+ letter-spacing: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-letter-spacing-comfortable);
7586
+ line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-line-height-comfortable);
7587
+ }
7588
+ .ids-select.ids-select-spacious > .ids-select__trigger {
7589
+ gap: var(--ids-comp-forms-select-size-gap-spacious);
7590
+ }
7591
+ .ids-select.ids-select-spacious > .ids-select__trigger > .ids-select__value > .ids-select__placeholder {
7592
+ font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-family-spacious);
7593
+ font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-size-spacious);
7594
+ font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-weight-spacious);
7595
+ letter-spacing: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-letter-spacing-spacious);
7596
+ line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-line-height-spacious);
7597
+ }
7598
+ .ids-select.ids-select-dense > .ids-select__trigger {
7599
+ gap: var(--ids-comp-forms-select-size-gap-dense);
7600
+ }
7601
+ .ids-select.ids-select-dense > .ids-select__trigger > .ids-select__value > .ids-select__placeholder {
7602
+ font-family: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-family-dense);
7603
+ font-size: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-size-dense);
7604
+ font-weight: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-font-weight-dense);
7605
+ letter-spacing: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-letter-spacing-dense);
7606
+ line-height: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-typography-empty-line-height-dense);
7607
+ }
7608
+
7609
+ .ids-select-panel {
7610
+ display: flex;
7611
+ flex-direction: column;
7612
+ align-items: flex-start;
7613
+ flex-shrink: 0;
7614
+ width: 100%;
7615
+ box-sizing: border-box;
7616
+ overflow-y: auto;
7617
+ box-shadow: var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxl) var(--ids-smc-reference-container-effects-shadow-blur-xxxl) var(--ids-smc-reference-container-effects-shadow-spread-xxs) var(--ids-smc-reference-container-effects-shadow-color-dark-default);
7618
+ }
7619
+ .ids-select-panel.ids-select-panel-compact {
7620
+ padding: var(--ids-comp-forms-select-panel-size-padding-y-compact) var(--ids-comp-forms-select-panel-size-padding-x-compact);
7621
+ gap: var(--ids-comp-forms-select-panel-size-gap-compact);
7622
+ border-radius: var(--ids-comp-forms-select-panel-size-border-radius-compact);
7623
+ }
7624
+ .ids-select-panel.ids-select-panel-comfortable {
7625
+ padding: var(--ids-comp-forms-select-panel-size-padding-y-comfortable) var(--ids-comp-forms-select-panel-size-padding-x-comfortable);
7626
+ gap: var(--ids-comp-forms-select-panel-size-gap-comfortable);
7627
+ border-radius: var(--ids-comp-forms-select-panel-size-border-radius-comfortable);
7628
+ }
7629
+ .ids-select-panel.ids-select-panel-spacious {
7630
+ padding: var(--ids-comp-forms-select-panel-size-padding-y-spacious) var(--ids-comp-forms-select-panel-size-padding-x-spacious);
7631
+ gap: var(--ids-comp-forms-select-panel-size-gap-spacious);
7632
+ border-radius: var(--ids-comp-forms-select-panel-size-border-radius-spacious);
7633
+ }
7634
+ .ids-select-panel.ids-select-panel-dense {
7635
+ padding: var(--ids-comp-forms-select-panel-size-padding-y-dense) var(--ids-comp-forms-select-panel-size-padding-x-dense);
7636
+ gap: var(--ids-comp-forms-select-panel-size-gap-dense);
7637
+ border-radius: var(--ids-comp-forms-select-panel-size-border-radius-dense);
7638
+ }
7639
+ .ids-select-panel.ids-select-panel-surface {
7640
+ background: var(--ids-comp-forms-select-panel-color-bg-surface-default);
7641
+ }
7642
+ .ids-select-panel.ids-select-panel-light {
7643
+ background: var(--ids-comp-forms-select-panel-color-bg-light-default);
7644
+ }
7645
+
7646
+ .ids-form-field > .ids-form-field__field-wrapper:has(.ids-select) {
7647
+ cursor: pointer;
7648
+ }
7649
+
7650
+ .ids-form-field > .ids-form-field__field-wrapper .ids-select.ids-select-surface > .ids-select__trigger > .ids-select__value > .ids-select__placeholder {
7651
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-default);
7652
+ }
7653
+ .ids-form-field > .ids-form-field__field-wrapper:hover .ids-select.ids-select-surface > .ids-select__trigger > .ids-select__value > .ids-select__placeholder {
7654
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-hovered);
7655
+ }
7656
+ .ids-form-field > .ids-form-field__field-wrapper:focus .ids-select.ids-select-surface > .ids-select__trigger > .ids-select__value > .ids-select__placeholder, .ids-form-field > .ids-form-field__field-wrapper:focus-visible .ids-select.ids-select-surface > .ids-select__trigger > .ids-select__value > .ids-select__placeholder {
7657
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-focused);
7658
+ }
7659
+ .ids-form-field > .ids-form-field__field-wrapper:active .ids-select.ids-select-surface > .ids-select__trigger > .ids-select__value > .ids-select__placeholder {
7660
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-surface-pressed);
7661
+ }
7662
+
7663
+ .ids-form-field > .ids-form-field__field-wrapper .ids-select.ids-select-light > .ids-select__trigger > .ids-select__value > .ids-select__placeholder {
7664
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-default);
7665
+ }
7666
+ .ids-form-field > .ids-form-field__field-wrapper:hover .ids-select.ids-select-light > .ids-select__trigger > .ids-select__value > .ids-select__placeholder {
7667
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-hovered);
7668
+ }
7669
+ .ids-form-field > .ids-form-field__field-wrapper:focus .ids-select.ids-select-light > .ids-select__trigger > .ids-select__value > .ids-select__placeholder, .ids-form-field > .ids-form-field__field-wrapper:focus-visible .ids-select.ids-select-light > .ids-select__trigger > .ids-select__value > .ids-select__placeholder {
7670
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-focused);
7671
+ }
7672
+ .ids-form-field > .ids-form-field__field-wrapper:active .ids-select.ids-select-light > .ids-select__trigger > .ids-select__value > .ids-select__placeholder {
7673
+ color: var(--ids-comp-forms-form-field-standard-field-wrapper-infix-empty-color-fg-text-light-pressed);
7674
+ }
7675
+
7360
7676
  .ids-snackbar-group {
7361
7677
  display: flex;
7362
7678
  }
@@ -7669,6 +7985,702 @@
7669
7985
  padding-right: var(--ids-comp-snackbar-message-action-size-padding-right-dense);
7670
7986
  }
7671
7987
 
7988
+ .ids-switch-group {
7989
+ display: flex;
7990
+ flex-direction: column;
7991
+ }
7992
+ .ids-switch-group.ids-switch-group-compact {
7993
+ gap: var(--ids-comp-switch-group-container-size-gap-compact);
7994
+ padding: var(--ids-comp-switch-group-container-size-padding-y-compact) var(--ids-comp-switch-group-container-size-padding-x-compact);
7995
+ }
7996
+ .ids-switch-group.ids-switch-group-comfortable {
7997
+ gap: var(--ids-comp-switch-group-container-size-gap-comfortable);
7998
+ padding: var(--ids-comp-switch-group-container-size-padding-y-comfortable) var(--ids-comp-switch-group-container-size-padding-x-comfortable);
7999
+ }
8000
+ .ids-switch-group.ids-switch-group-spacious {
8001
+ gap: var(--ids-comp-switch-group-container-size-gap-spacious);
8002
+ padding: var(--ids-comp-switch-group-container-size-padding-y-spacious) var(--ids-comp-switch-group-container-size-padding-x-spacious);
8003
+ }
8004
+ .ids-switch-group.ids-switch-group-dense {
8005
+ gap: var(--ids-comp-switch-group-container-size-gap-dense);
8006
+ padding: var(--ids-comp-switch-group-container-size-padding-y-dense) var(--ids-comp-switch-group-container-size-padding-x-dense);
8007
+ }
8008
+
8009
+ .ids-switch {
8010
+ display: inline-flex;
8011
+ align-items: center;
8012
+ }
8013
+ .ids-switch > .ids-switch__button {
8014
+ background: none;
8015
+ border: none;
8016
+ margin: 0;
8017
+ padding: 0;
8018
+ cursor: pointer;
8019
+ }
8020
+ .ids-switch > .ids-switch__button:disabled {
8021
+ pointer-events: none;
8022
+ }
8023
+ .ids-switch > .ids-switch__button:focus, .ids-switch > .ids-switch__button:focus-visible {
8024
+ outline-offset: 2px;
8025
+ outline-style: solid;
8026
+ }
8027
+ .ids-switch > .ids-switch__button > .ids-switch__track {
8028
+ position: relative;
8029
+ display: flex;
8030
+ align-items: center;
8031
+ justify-content: space-between;
8032
+ }
8033
+ .ids-switch > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon {
8034
+ position: absolute;
8035
+ display: flex;
8036
+ align-items: center;
8037
+ justify-content: center;
8038
+ top: auto;
8039
+ bottom: auto;
8040
+ }
8041
+ .ids-switch > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
8042
+ position: relative;
8043
+ display: flex;
8044
+ justify-content: center;
8045
+ align-items: center;
8046
+ flex-shrink: 0;
8047
+ }
8048
+ .ids-switch > .ids-switch__button > .ids-switch__track > .ids-switch__handle > .ids-icon {
8049
+ position: absolute;
8050
+ }
8051
+ .ids-switch > .ids-switch__label {
8052
+ font-style: normal;
8053
+ }
8054
+ .ids-switch.ids-switch-compact {
8055
+ gap: var(--ids-comp-switch-container-size-gap-compact);
8056
+ }
8057
+ .ids-switch.ids-switch-compact > .ids-switch__button {
8058
+ border-radius: var(--ids-comp-switch-handle-size-border-radius-compact);
8059
+ }
8060
+ .ids-switch.ids-switch-compact > .ids-switch__button:focus, .ids-switch.ids-switch-compact > .ids-switch__button:focus-visible {
8061
+ outline-width: var(--ids-comp-switch-focused-outline-outline-compact);
8062
+ }
8063
+ .ids-switch.ids-switch-compact > .ids-switch__button > .ids-switch__track {
8064
+ width: var(--ids-comp-switch-track-size-width-compact);
8065
+ height: var(--ids-comp-switch-handle-size-height-compact);
8066
+ padding: var(--ids-comp-switch-track-size-padding-y-compact) var(--ids-comp-switch-track-size-padding-x-compact);
8067
+ border-radius: var(--ids-comp-switch-track-size-border-radius-compact);
8068
+ box-sizing: content-box;
8069
+ }
8070
+ .ids-switch.ids-switch-compact > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon {
8071
+ width: var(--ids-comp-switch-handle-size-width-compact);
8072
+ height: var(--ids-comp-switch-handle-size-height-compact);
8073
+ }
8074
+ .ids-switch.ids-switch-compact > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
8075
+ width: var(--ids-comp-switch-icon-size-width-compact);
8076
+ height: var(--ids-comp-switch-icon-size-height-compact);
8077
+ }
8078
+ .ids-switch.ids-switch-compact > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon:nth-child(1) {
8079
+ left: var(--ids-comp-switch-track-size-padding-x-compact);
8080
+ }
8081
+ .ids-switch.ids-switch-compact > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon:nth-child(2) {
8082
+ right: var(--ids-comp-switch-track-size-padding-x-compact);
8083
+ }
8084
+ .ids-switch.ids-switch-compact > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
8085
+ width: var(--ids-comp-switch-handle-size-width-compact);
8086
+ height: var(--ids-comp-switch-handle-size-height-compact);
8087
+ border-radius: var(--ids-comp-switch-handle-size-border-radius-compact);
8088
+ transition: left 100ms ease-in-out;
8089
+ }
8090
+ .ids-switch.ids-switch-compact > .ids-switch__button > .ids-switch__track > .ids-switch__handle > .ids-icon {
8091
+ width: var(--ids-comp-switch-icon-size-width-compact);
8092
+ height: var(--ids-comp-switch-icon-size-height-compact);
8093
+ }
8094
+ .ids-switch.ids-switch-compact > .ids-switch__label {
8095
+ font-family: var(--ids-comp-switch-label-typography-font-family-compact);
8096
+ font-size: var(--ids-comp-switch-label-typography-font-size-compact);
8097
+ font-weight: var(--ids-comp-switch-label-typography-font-weight-compact);
8098
+ line-height: var(--ids-comp-switch-label-typography-line-height-compact);
8099
+ letter-spacing: var(--ids-comp-switch-label-typography-letter-spacing-compact);
8100
+ }
8101
+ .ids-switch.ids-switch-compact:not(.ids-switch-on) > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
8102
+ left: 0;
8103
+ }
8104
+ .ids-switch.ids-switch-compact.ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
8105
+ left: calc(var(--ids-comp-switch-track-size-width-compact) - var(--ids-comp-switch-handle-size-width-compact));
8106
+ }
8107
+ .ids-switch.ids-switch-comfortable {
8108
+ gap: var(--ids-comp-switch-container-size-gap-comfortable);
8109
+ }
8110
+ .ids-switch.ids-switch-comfortable > .ids-switch__button {
8111
+ border-radius: var(--ids-comp-switch-handle-size-border-radius-comfortable);
8112
+ }
8113
+ .ids-switch.ids-switch-comfortable > .ids-switch__button:focus, .ids-switch.ids-switch-comfortable > .ids-switch__button:focus-visible {
8114
+ outline-width: var(--ids-comp-switch-focused-outline-outline-comfortable);
8115
+ }
8116
+ .ids-switch.ids-switch-comfortable > .ids-switch__button > .ids-switch__track {
8117
+ width: var(--ids-comp-switch-track-size-width-comfortable);
8118
+ height: var(--ids-comp-switch-handle-size-height-comfortable);
8119
+ padding: var(--ids-comp-switch-track-size-padding-y-comfortable) var(--ids-comp-switch-track-size-padding-x-comfortable);
8120
+ border-radius: var(--ids-comp-switch-track-size-border-radius-comfortable);
8121
+ box-sizing: content-box;
8122
+ }
8123
+ .ids-switch.ids-switch-comfortable > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon {
8124
+ width: var(--ids-comp-switch-handle-size-width-comfortable);
8125
+ height: var(--ids-comp-switch-handle-size-height-comfortable);
8126
+ }
8127
+ .ids-switch.ids-switch-comfortable > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
8128
+ width: var(--ids-comp-switch-icon-size-width-comfortable);
8129
+ height: var(--ids-comp-switch-icon-size-height-comfortable);
8130
+ }
8131
+ .ids-switch.ids-switch-comfortable > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon:nth-child(1) {
8132
+ left: var(--ids-comp-switch-track-size-padding-x-comfortable);
8133
+ }
8134
+ .ids-switch.ids-switch-comfortable > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon:nth-child(2) {
8135
+ right: var(--ids-comp-switch-track-size-padding-x-comfortable);
8136
+ }
8137
+ .ids-switch.ids-switch-comfortable > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
8138
+ width: var(--ids-comp-switch-handle-size-width-comfortable);
8139
+ height: var(--ids-comp-switch-handle-size-height-comfortable);
8140
+ border-radius: var(--ids-comp-switch-handle-size-border-radius-comfortable);
8141
+ transition: left 100ms ease-in-out;
8142
+ }
8143
+ .ids-switch.ids-switch-comfortable > .ids-switch__button > .ids-switch__track > .ids-switch__handle > .ids-icon {
8144
+ width: var(--ids-comp-switch-icon-size-width-comfortable);
8145
+ height: var(--ids-comp-switch-icon-size-height-comfortable);
8146
+ }
8147
+ .ids-switch.ids-switch-comfortable > .ids-switch__label {
8148
+ font-family: var(--ids-comp-switch-label-typography-font-family-comfortable);
8149
+ font-size: var(--ids-comp-switch-label-typography-font-size-comfortable);
8150
+ font-weight: var(--ids-comp-switch-label-typography-font-weight-comfortable);
8151
+ line-height: var(--ids-comp-switch-label-typography-line-height-comfortable);
8152
+ letter-spacing: var(--ids-comp-switch-label-typography-letter-spacing-comfortable);
8153
+ }
8154
+ .ids-switch.ids-switch-comfortable:not(.ids-switch-on) > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
8155
+ left: 0;
8156
+ }
8157
+ .ids-switch.ids-switch-comfortable.ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
8158
+ left: calc(var(--ids-comp-switch-track-size-width-comfortable) - var(--ids-comp-switch-handle-size-width-comfortable));
8159
+ }
8160
+ .ids-switch.ids-switch-spacious {
8161
+ gap: var(--ids-comp-switch-container-size-gap-spacious);
8162
+ }
8163
+ .ids-switch.ids-switch-spacious > .ids-switch__button {
8164
+ border-radius: var(--ids-comp-switch-handle-size-border-radius-spacious);
8165
+ }
8166
+ .ids-switch.ids-switch-spacious > .ids-switch__button:focus, .ids-switch.ids-switch-spacious > .ids-switch__button:focus-visible {
8167
+ outline-width: var(--ids-comp-switch-focused-outline-outline-spacious);
8168
+ }
8169
+ .ids-switch.ids-switch-spacious > .ids-switch__button > .ids-switch__track {
8170
+ width: var(--ids-comp-switch-track-size-width-spacious);
8171
+ height: var(--ids-comp-switch-handle-size-height-spacious);
8172
+ padding: var(--ids-comp-switch-track-size-padding-y-spacious) var(--ids-comp-switch-track-size-padding-x-spacious);
8173
+ border-radius: var(--ids-comp-switch-track-size-border-radius-spacious);
8174
+ box-sizing: content-box;
8175
+ }
8176
+ .ids-switch.ids-switch-spacious > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon {
8177
+ width: var(--ids-comp-switch-handle-size-width-spacious);
8178
+ height: var(--ids-comp-switch-handle-size-height-spacious);
8179
+ }
8180
+ .ids-switch.ids-switch-spacious > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
8181
+ width: var(--ids-comp-switch-icon-size-width-spacious);
8182
+ height: var(--ids-comp-switch-icon-size-height-spacious);
8183
+ }
8184
+ .ids-switch.ids-switch-spacious > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon:nth-child(1) {
8185
+ left: var(--ids-comp-switch-track-size-padding-x-spacious);
8186
+ }
8187
+ .ids-switch.ids-switch-spacious > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon:nth-child(2) {
8188
+ right: var(--ids-comp-switch-track-size-padding-x-spacious);
8189
+ }
8190
+ .ids-switch.ids-switch-spacious > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
8191
+ width: var(--ids-comp-switch-handle-size-width-spacious);
8192
+ height: var(--ids-comp-switch-handle-size-height-spacious);
8193
+ border-radius: var(--ids-comp-switch-handle-size-border-radius-spacious);
8194
+ transition: left 100ms ease-in-out;
8195
+ }
8196
+ .ids-switch.ids-switch-spacious > .ids-switch__button > .ids-switch__track > .ids-switch__handle > .ids-icon {
8197
+ width: var(--ids-comp-switch-icon-size-width-spacious);
8198
+ height: var(--ids-comp-switch-icon-size-height-spacious);
8199
+ }
8200
+ .ids-switch.ids-switch-spacious > .ids-switch__label {
8201
+ font-family: var(--ids-comp-switch-label-typography-font-family-spacious);
8202
+ font-size: var(--ids-comp-switch-label-typography-font-size-spacious);
8203
+ font-weight: var(--ids-comp-switch-label-typography-font-weight-spacious);
8204
+ line-height: var(--ids-comp-switch-label-typography-line-height-spacious);
8205
+ letter-spacing: var(--ids-comp-switch-label-typography-letter-spacing-spacious);
8206
+ }
8207
+ .ids-switch.ids-switch-spacious:not(.ids-switch-on) > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
8208
+ left: 0;
8209
+ }
8210
+ .ids-switch.ids-switch-spacious.ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
8211
+ left: calc(var(--ids-comp-switch-track-size-width-spacious) - var(--ids-comp-switch-handle-size-width-spacious));
8212
+ }
8213
+ .ids-switch.ids-switch-dense {
8214
+ gap: var(--ids-comp-switch-container-size-gap-dense);
8215
+ }
8216
+ .ids-switch.ids-switch-dense > .ids-switch__button {
8217
+ border-radius: var(--ids-comp-switch-handle-size-border-radius-dense);
8218
+ }
8219
+ .ids-switch.ids-switch-dense > .ids-switch__button:focus, .ids-switch.ids-switch-dense > .ids-switch__button:focus-visible {
8220
+ outline-width: var(--ids-comp-switch-focused-outline-outline-dense);
8221
+ }
8222
+ .ids-switch.ids-switch-dense > .ids-switch__button > .ids-switch__track {
8223
+ width: var(--ids-comp-switch-track-size-width-dense);
8224
+ height: var(--ids-comp-switch-handle-size-height-dense);
8225
+ padding: var(--ids-comp-switch-track-size-padding-y-dense) var(--ids-comp-switch-track-size-padding-x-dense);
8226
+ border-radius: var(--ids-comp-switch-track-size-border-radius-dense);
8227
+ box-sizing: content-box;
8228
+ }
8229
+ .ids-switch.ids-switch-dense > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon {
8230
+ width: var(--ids-comp-switch-handle-size-width-dense);
8231
+ height: var(--ids-comp-switch-handle-size-height-dense);
8232
+ }
8233
+ .ids-switch.ids-switch-dense > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
8234
+ width: var(--ids-comp-switch-icon-size-width-dense);
8235
+ height: var(--ids-comp-switch-icon-size-height-dense);
8236
+ }
8237
+ .ids-switch.ids-switch-dense > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon:nth-child(1) {
8238
+ left: var(--ids-comp-switch-track-size-padding-x-dense);
8239
+ }
8240
+ .ids-switch.ids-switch-dense > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon:nth-child(2) {
8241
+ right: var(--ids-comp-switch-track-size-padding-x-dense);
8242
+ }
8243
+ .ids-switch.ids-switch-dense > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
8244
+ width: var(--ids-comp-switch-handle-size-width-dense);
8245
+ height: var(--ids-comp-switch-handle-size-height-dense);
8246
+ border-radius: var(--ids-comp-switch-handle-size-border-radius-dense);
8247
+ transition: left 100ms ease-in-out;
8248
+ }
8249
+ .ids-switch.ids-switch-dense > .ids-switch__button > .ids-switch__track > .ids-switch__handle > .ids-icon {
8250
+ width: var(--ids-comp-switch-icon-size-width-dense);
8251
+ height: var(--ids-comp-switch-icon-size-height-dense);
8252
+ }
8253
+ .ids-switch.ids-switch-dense > .ids-switch__label {
8254
+ font-family: var(--ids-comp-switch-label-typography-font-family-dense);
8255
+ font-size: var(--ids-comp-switch-label-typography-font-size-dense);
8256
+ font-weight: var(--ids-comp-switch-label-typography-font-weight-dense);
8257
+ line-height: var(--ids-comp-switch-label-typography-line-height-dense);
8258
+ letter-spacing: var(--ids-comp-switch-label-typography-letter-spacing-dense);
8259
+ }
8260
+ .ids-switch.ids-switch-dense:not(.ids-switch-on) > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
8261
+ left: 0;
8262
+ }
8263
+ .ids-switch.ids-switch-dense.ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
8264
+ left: calc(var(--ids-comp-switch-track-size-width-dense) - var(--ids-comp-switch-handle-size-width-dense));
8265
+ }
8266
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button > .ids-switch__track {
8267
+ background-color: var(--ids-comp-switch-track-off-color-bg-surface-default);
8268
+ }
8269
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
8270
+ color: var(--ids-comp-switch-track-off-color-fg-icon-surface-default);
8271
+ }
8272
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
8273
+ background-color: var(--ids-comp-switch-handle-off-color-bg-surface-default);
8274
+ }
8275
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button > .ids-switch__track > .ids-switch__handle > .ids-icon {
8276
+ color: var(--ids-comp-switch-handle-off-color-fg-icon-surface-default);
8277
+ }
8278
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button + .ids-switch__label {
8279
+ color: var(--ids-comp-switch-label-color-fg-surface-default);
8280
+ }
8281
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button:hover > .ids-switch__track {
8282
+ background-color: var(--ids-comp-switch-track-off-color-bg-surface-hovered);
8283
+ }
8284
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button:hover > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
8285
+ color: var(--ids-comp-switch-track-off-color-fg-icon-surface-default);
8286
+ }
8287
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button:hover > .ids-switch__track > .ids-switch__handle {
8288
+ background-color: var(--ids-comp-switch-handle-off-color-bg-surface-default);
8289
+ }
8290
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button:hover > .ids-switch__track > .ids-switch__handle > .ids-icon {
8291
+ color: var(--ids-comp-switch-handle-off-color-fg-icon-surface-default);
8292
+ }
8293
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button:hover + .ids-switch__label {
8294
+ color: var(--ids-comp-switch-label-color-fg-surface-hovered);
8295
+ }
8296
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button:active > .ids-switch__track {
8297
+ background-color: var(--ids-comp-switch-track-off-color-bg-surface-pressed);
8298
+ }
8299
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button:active > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
8300
+ color: var(--ids-comp-switch-track-off-color-fg-icon-surface-default);
8301
+ }
8302
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button:active > .ids-switch__track > .ids-switch__handle {
8303
+ background-color: var(--ids-comp-switch-handle-off-color-bg-surface-default);
8304
+ }
8305
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button:active > .ids-switch__track > .ids-switch__handle > .ids-icon {
8306
+ color: var(--ids-comp-switch-handle-off-color-fg-icon-surface-default);
8307
+ }
8308
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button:active + .ids-switch__label {
8309
+ color: var(--ids-comp-switch-label-color-fg-surface-pressed);
8310
+ }
8311
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button:focus, .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button:focus-visible {
8312
+ outline-color: var(--ids-comp-switch-focused-outline-color-surface-focused);
8313
+ }
8314
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button:focus > .ids-switch__track, .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button:focus-visible > .ids-switch__track {
8315
+ background-color: var(--ids-comp-switch-track-off-color-bg-surface-focused);
8316
+ }
8317
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button:focus > .ids-switch__track > .ids-switch__track-icon > .ids-icon, .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button:focus-visible > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
8318
+ color: var(--ids-comp-switch-track-off-color-fg-icon-surface-default);
8319
+ }
8320
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button:focus > .ids-switch__track > .ids-switch__handle, .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button:focus-visible > .ids-switch__track > .ids-switch__handle {
8321
+ background-color: var(--ids-comp-switch-handle-off-color-bg-surface-default);
8322
+ }
8323
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button:focus > .ids-switch__track > .ids-switch__handle > .ids-icon, .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button:focus-visible > .ids-switch__track > .ids-switch__handle > .ids-icon {
8324
+ color: var(--ids-comp-switch-handle-off-color-fg-icon-surface-default);
8325
+ }
8326
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button:focus + .ids-switch__label, .ids-switch.ids-switch-surface:not(.ids-switch-disabled) > .ids-switch__button:focus-visible + .ids-switch__label {
8327
+ color: var(--ids-comp-switch-label-color-fg-surface-focused);
8328
+ }
8329
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button > .ids-switch__track {
8330
+ background-color: var(--ids-comp-switch-track-on-color-bg-surface-default);
8331
+ }
8332
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
8333
+ color: var(--ids-comp-switch-track-on-color-fg-icon-surface-default);
8334
+ }
8335
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
8336
+ background-color: var(--ids-comp-switch-handle-on-color-bg-surface-default);
8337
+ }
8338
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__handle > .ids-icon {
8339
+ color: var(--ids-comp-switch-handle-on-color-fg-icon-surface-default);
8340
+ }
8341
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track {
8342
+ background-color: var(--ids-comp-switch-track-on-color-bg-surface-hovered);
8343
+ }
8344
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
8345
+ color: var(--ids-comp-switch-track-on-color-fg-icon-surface-default);
8346
+ }
8347
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track > .ids-switch__handle {
8348
+ background-color: var(--ids-comp-switch-handle-on-color-bg-surface-default);
8349
+ }
8350
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track > .ids-switch__handle > .ids-icon {
8351
+ color: var(--ids-comp-switch-handle-on-color-fg-icon-surface-default);
8352
+ }
8353
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:active > .ids-switch__track {
8354
+ background-color: var(--ids-comp-switch-track-on-color-bg-surface-pressed);
8355
+ }
8356
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:active > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
8357
+ color: var(--ids-comp-switch-track-on-color-fg-icon-surface-default);
8358
+ }
8359
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:active > .ids-switch__track > .ids-switch__handle {
8360
+ background-color: var(--ids-comp-switch-handle-on-color-bg-surface-default);
8361
+ }
8362
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:active > .ids-switch__track > .ids-switch__handle > .ids-icon {
8363
+ color: var(--ids-comp-switch-handle-on-color-fg-icon-surface-default);
8364
+ }
8365
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:focus > .ids-switch__track {
8366
+ background-color: var(--ids-comp-switch-track-on-color-bg-surface-focused);
8367
+ }
8368
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:focus > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
8369
+ color: var(--ids-comp-switch-track-on-color-fg-icon-surface-default);
8370
+ }
8371
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:focus > .ids-switch__track > .ids-switch__handle {
8372
+ background-color: var(--ids-comp-switch-handle-on-color-bg-surface-default);
8373
+ }
8374
+ .ids-switch.ids-switch-surface:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:focus > .ids-switch__track > .ids-switch__handle > .ids-icon {
8375
+ color: var(--ids-comp-switch-handle-on-color-fg-icon-surface-default);
8376
+ }
8377
+ .ids-switch.ids-switch-surface.ids-switch-disabled > .ids-switch__button + .ids-switch__label {
8378
+ color: var(--ids-comp-switch-label-color-fg-surface-disabled);
8379
+ }
8380
+ .ids-switch.ids-switch-surface.ids-switch-disabled:not(.ids-switch-on) > .ids-switch__button > .ids-switch__track {
8381
+ background-color: var(--ids-comp-switch-track-off-color-bg-surface-disabled);
8382
+ }
8383
+ .ids-switch.ids-switch-surface.ids-switch-disabled:not(.ids-switch-on) > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
8384
+ color: var(--ids-comp-switch-track-off-color-fg-icon-surface-disabled);
8385
+ }
8386
+ .ids-switch.ids-switch-surface.ids-switch-disabled:not(.ids-switch-on) > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
8387
+ background-color: var(--ids-comp-switch-handle-off-color-bg-surface-disabled);
8388
+ }
8389
+ .ids-switch.ids-switch-surface.ids-switch-disabled:not(.ids-switch-on) > .ids-switch__button > .ids-switch__track > .ids-switch__handle > .ids-icon {
8390
+ color: var(--ids-comp-switch-handle-off-color-fg-icon-surface-disabled);
8391
+ }
8392
+ .ids-switch.ids-switch-surface.ids-switch-disabled.ids-switch-on > .ids-switch__button > .ids-switch__track {
8393
+ background-color: var(--ids-comp-switch-track-on-color-bg-surface-disabled);
8394
+ }
8395
+ .ids-switch.ids-switch-surface.ids-switch-disabled.ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
8396
+ color: var(--ids-comp-switch-track-on-color-fg-icon-surface-disabled);
8397
+ }
8398
+ .ids-switch.ids-switch-surface.ids-switch-disabled.ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
8399
+ background-color: var(--ids-comp-switch-handle-on-color-bg-surface-disabled);
8400
+ }
8401
+ .ids-switch.ids-switch-surface.ids-switch-disabled.ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__handle > .ids-icon {
8402
+ color: var(--ids-comp-switch-handle-on-color-fg-icon-surface-disabled);
8403
+ }
8404
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button > .ids-switch__track {
8405
+ background-color: var(--ids-comp-switch-track-off-color-bg-light-default);
8406
+ }
8407
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
8408
+ color: var(--ids-comp-switch-track-off-color-fg-icon-light-default);
8409
+ }
8410
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
8411
+ background-color: var(--ids-comp-switch-handle-off-color-bg-light-default);
8412
+ }
8413
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button > .ids-switch__track > .ids-switch__handle > .ids-icon {
8414
+ color: var(--ids-comp-switch-handle-off-color-fg-icon-light-default);
8415
+ }
8416
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button + .ids-switch__label {
8417
+ color: var(--ids-comp-switch-label-color-fg-light-default);
8418
+ }
8419
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button:hover > .ids-switch__track {
8420
+ background-color: var(--ids-comp-switch-track-off-color-bg-light-hovered);
8421
+ }
8422
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button:hover > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
8423
+ color: var(--ids-comp-switch-track-off-color-fg-icon-light-default);
8424
+ }
8425
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button:hover > .ids-switch__track > .ids-switch__handle {
8426
+ background-color: var(--ids-comp-switch-handle-off-color-bg-light-default);
8427
+ }
8428
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button:hover > .ids-switch__track > .ids-switch__handle > .ids-icon {
8429
+ color: var(--ids-comp-switch-handle-off-color-fg-icon-light-default);
8430
+ }
8431
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button:hover + .ids-switch__label {
8432
+ color: var(--ids-comp-switch-label-color-fg-light-hovered);
8433
+ }
8434
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button:active > .ids-switch__track {
8435
+ background-color: var(--ids-comp-switch-track-off-color-bg-light-pressed);
8436
+ }
8437
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button:active > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
8438
+ color: var(--ids-comp-switch-track-off-color-fg-icon-light-default);
8439
+ }
8440
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button:active > .ids-switch__track > .ids-switch__handle {
8441
+ background-color: var(--ids-comp-switch-handle-off-color-bg-light-default);
8442
+ }
8443
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button:active > .ids-switch__track > .ids-switch__handle > .ids-icon {
8444
+ color: var(--ids-comp-switch-handle-off-color-fg-icon-light-default);
8445
+ }
8446
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button:active + .ids-switch__label {
8447
+ color: var(--ids-comp-switch-label-color-fg-light-pressed);
8448
+ }
8449
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button:focus, .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button:focus-visible {
8450
+ outline-color: var(--ids-comp-switch-focused-outline-color-light-focused);
8451
+ }
8452
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button:focus > .ids-switch__track, .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button:focus-visible > .ids-switch__track {
8453
+ background-color: var(--ids-comp-switch-track-off-color-bg-light-focused);
8454
+ }
8455
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button:focus > .ids-switch__track > .ids-switch__track-icon > .ids-icon, .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button:focus-visible > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
8456
+ color: var(--ids-comp-switch-track-off-color-fg-icon-light-default);
8457
+ }
8458
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button:focus > .ids-switch__track > .ids-switch__handle, .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button:focus-visible > .ids-switch__track > .ids-switch__handle {
8459
+ background-color: var(--ids-comp-switch-handle-off-color-bg-light-default);
8460
+ }
8461
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button:focus > .ids-switch__track > .ids-switch__handle > .ids-icon, .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button:focus-visible > .ids-switch__track > .ids-switch__handle > .ids-icon {
8462
+ color: var(--ids-comp-switch-handle-off-color-fg-icon-light-default);
8463
+ }
8464
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button:focus + .ids-switch__label, .ids-switch.ids-switch-light:not(.ids-switch-disabled) > .ids-switch__button:focus-visible + .ids-switch__label {
8465
+ color: var(--ids-comp-switch-label-color-fg-light-focused);
8466
+ }
8467
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button > .ids-switch__track {
8468
+ background-color: var(--ids-comp-switch-track-on-color-bg-light-default);
8469
+ }
8470
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
8471
+ color: var(--ids-comp-switch-track-on-color-fg-icon-light-default);
8472
+ }
8473
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
8474
+ background-color: var(--ids-comp-switch-handle-on-color-bg-light-default);
8475
+ }
8476
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__handle > .ids-icon {
8477
+ color: var(--ids-comp-switch-handle-on-color-fg-icon-light-default);
8478
+ }
8479
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track {
8480
+ background-color: var(--ids-comp-switch-track-on-color-bg-light-hovered);
8481
+ }
8482
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
8483
+ color: var(--ids-comp-switch-track-on-color-fg-icon-light-default);
8484
+ }
8485
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track > .ids-switch__handle {
8486
+ background-color: var(--ids-comp-switch-handle-on-color-bg-light-default);
8487
+ }
8488
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track > .ids-switch__handle > .ids-icon {
8489
+ color: var(--ids-comp-switch-handle-on-color-fg-icon-light-default);
8490
+ }
8491
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:active > .ids-switch__track {
8492
+ background-color: var(--ids-comp-switch-track-on-color-bg-light-pressed);
8493
+ }
8494
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:active > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
8495
+ color: var(--ids-comp-switch-track-on-color-fg-icon-light-default);
8496
+ }
8497
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:active > .ids-switch__track > .ids-switch__handle {
8498
+ background-color: var(--ids-comp-switch-handle-on-color-bg-light-default);
8499
+ }
8500
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:active > .ids-switch__track > .ids-switch__handle > .ids-icon {
8501
+ color: var(--ids-comp-switch-handle-on-color-fg-icon-light-default);
8502
+ }
8503
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:focus > .ids-switch__track {
8504
+ background-color: var(--ids-comp-switch-track-on-color-bg-light-focused);
8505
+ }
8506
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:focus > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
8507
+ color: var(--ids-comp-switch-track-on-color-fg-icon-light-default);
8508
+ }
8509
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:focus > .ids-switch__track > .ids-switch__handle {
8510
+ background-color: var(--ids-comp-switch-handle-on-color-bg-light-default);
8511
+ }
8512
+ .ids-switch.ids-switch-light:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:focus > .ids-switch__track > .ids-switch__handle > .ids-icon {
8513
+ color: var(--ids-comp-switch-handle-on-color-fg-icon-light-default);
8514
+ }
8515
+ .ids-switch.ids-switch-light.ids-switch-disabled > .ids-switch__button + .ids-switch__label {
8516
+ color: var(--ids-comp-switch-label-color-fg-light-disabled);
8517
+ }
8518
+ .ids-switch.ids-switch-light.ids-switch-disabled:not(.ids-switch-on) > .ids-switch__button > .ids-switch__track {
8519
+ background-color: var(--ids-comp-switch-track-off-color-bg-light-disabled);
8520
+ }
8521
+ .ids-switch.ids-switch-light.ids-switch-disabled:not(.ids-switch-on) > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
8522
+ color: var(--ids-comp-switch-track-off-color-fg-icon-light-disabled);
8523
+ }
8524
+ .ids-switch.ids-switch-light.ids-switch-disabled:not(.ids-switch-on) > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
8525
+ background-color: var(--ids-comp-switch-handle-off-color-bg-light-disabled);
8526
+ }
8527
+ .ids-switch.ids-switch-light.ids-switch-disabled:not(.ids-switch-on) > .ids-switch__button > .ids-switch__track > .ids-switch__handle > .ids-icon {
8528
+ color: var(--ids-comp-switch-handle-off-color-fg-icon-light-disabled);
8529
+ }
8530
+ .ids-switch.ids-switch-light.ids-switch-disabled.ids-switch-on > .ids-switch__button > .ids-switch__track {
8531
+ background-color: var(--ids-comp-switch-track-on-color-bg-light-disabled);
8532
+ }
8533
+ .ids-switch.ids-switch-light.ids-switch-disabled.ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
8534
+ color: var(--ids-comp-switch-track-on-color-fg-icon-light-disabled);
8535
+ }
8536
+ .ids-switch.ids-switch-light.ids-switch-disabled.ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
8537
+ background-color: var(--ids-comp-switch-handle-on-color-bg-light-disabled);
8538
+ }
8539
+ .ids-switch.ids-switch-light.ids-switch-disabled.ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__handle > .ids-icon {
8540
+ color: var(--ids-comp-switch-handle-on-color-fg-icon-light-disabled);
8541
+ }
8542
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button > .ids-switch__track {
8543
+ background-color: var(--ids-comp-switch-track-off-color-bg-primary-default);
8544
+ }
8545
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
8546
+ color: var(--ids-comp-switch-track-off-color-fg-icon-primary-default);
8547
+ }
8548
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
8549
+ background-color: var(--ids-comp-switch-handle-off-color-bg-primary-default);
8550
+ }
8551
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button > .ids-switch__track > .ids-switch__handle > .ids-icon {
8552
+ color: var(--ids-comp-switch-handle-off-color-fg-icon-primary-default);
8553
+ }
8554
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button + .ids-switch__label {
8555
+ color: var(--ids-comp-switch-label-color-fg-primary-default);
8556
+ }
8557
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button:hover > .ids-switch__track {
8558
+ background-color: var(--ids-comp-switch-track-off-color-bg-primary-hovered);
8559
+ }
8560
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button:hover > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
8561
+ color: var(--ids-comp-switch-track-off-color-fg-icon-primary-default);
8562
+ }
8563
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button:hover > .ids-switch__track > .ids-switch__handle {
8564
+ background-color: var(--ids-comp-switch-handle-off-color-bg-primary-default);
8565
+ }
8566
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button:hover > .ids-switch__track > .ids-switch__handle > .ids-icon {
8567
+ color: var(--ids-comp-switch-handle-off-color-fg-icon-primary-default);
8568
+ }
8569
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button:hover + .ids-switch__label {
8570
+ color: var(--ids-comp-switch-label-color-fg-primary-hovered);
8571
+ }
8572
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button:active > .ids-switch__track {
8573
+ background-color: var(--ids-comp-switch-track-off-color-bg-primary-pressed);
8574
+ }
8575
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button:active > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
8576
+ color: var(--ids-comp-switch-track-off-color-fg-icon-primary-default);
8577
+ }
8578
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button:active > .ids-switch__track > .ids-switch__handle {
8579
+ background-color: var(--ids-comp-switch-handle-off-color-bg-primary-default);
8580
+ }
8581
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button:active > .ids-switch__track > .ids-switch__handle > .ids-icon {
8582
+ color: var(--ids-comp-switch-handle-off-color-fg-icon-primary-default);
8583
+ }
8584
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button:active + .ids-switch__label {
8585
+ color: var(--ids-comp-switch-label-color-fg-primary-pressed);
8586
+ }
8587
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button:focus, .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button:focus-visible {
8588
+ outline-color: var(--ids-comp-switch-focused-outline-color-primary-focused);
8589
+ }
8590
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button:focus > .ids-switch__track, .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button:focus-visible > .ids-switch__track {
8591
+ background-color: var(--ids-comp-switch-track-off-color-bg-primary-focused);
8592
+ }
8593
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button:focus > .ids-switch__track > .ids-switch__track-icon > .ids-icon, .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button:focus-visible > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
8594
+ color: var(--ids-comp-switch-track-off-color-fg-icon-primary-default);
8595
+ }
8596
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button:focus > .ids-switch__track > .ids-switch__handle, .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button:focus-visible > .ids-switch__track > .ids-switch__handle {
8597
+ background-color: var(--ids-comp-switch-handle-off-color-bg-primary-default);
8598
+ }
8599
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button:focus > .ids-switch__track > .ids-switch__handle > .ids-icon, .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button:focus-visible > .ids-switch__track > .ids-switch__handle > .ids-icon {
8600
+ color: var(--ids-comp-switch-handle-off-color-fg-icon-primary-default);
8601
+ }
8602
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button:focus + .ids-switch__label, .ids-switch.ids-switch-primary:not(.ids-switch-disabled) > .ids-switch__button:focus-visible + .ids-switch__label {
8603
+ color: var(--ids-comp-switch-label-color-fg-primary-focused);
8604
+ }
8605
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button > .ids-switch__track {
8606
+ background-color: var(--ids-comp-switch-track-on-color-bg-primary-default);
8607
+ }
8608
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
8609
+ color: var(--ids-comp-switch-track-on-color-fg-icon-primary-default);
8610
+ }
8611
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
8612
+ background-color: var(--ids-comp-switch-handle-on-color-bg-primary-default);
8613
+ }
8614
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__handle > .ids-icon {
8615
+ color: var(--ids-comp-switch-handle-on-color-fg-icon-primary-default);
8616
+ }
8617
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track {
8618
+ background-color: var(--ids-comp-switch-track-on-color-bg-primary-hovered);
8619
+ }
8620
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
8621
+ color: var(--ids-comp-switch-track-on-color-fg-icon-primary-default);
8622
+ }
8623
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track > .ids-switch__handle {
8624
+ background-color: var(--ids-comp-switch-handle-on-color-bg-primary-default);
8625
+ }
8626
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:hover > .ids-switch__track > .ids-switch__handle > .ids-icon {
8627
+ color: var(--ids-comp-switch-handle-on-color-fg-icon-primary-default);
8628
+ }
8629
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:active > .ids-switch__track {
8630
+ background-color: var(--ids-comp-switch-track-on-color-bg-primary-pressed);
8631
+ }
8632
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:active > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
8633
+ color: var(--ids-comp-switch-track-on-color-fg-icon-primary-default);
8634
+ }
8635
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:active > .ids-switch__track > .ids-switch__handle {
8636
+ background-color: var(--ids-comp-switch-handle-on-color-bg-primary-default);
8637
+ }
8638
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:active > .ids-switch__track > .ids-switch__handle > .ids-icon {
8639
+ color: var(--ids-comp-switch-handle-on-color-fg-icon-primary-default);
8640
+ }
8641
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:focus > .ids-switch__track {
8642
+ background-color: var(--ids-comp-switch-track-on-color-bg-primary-focused);
8643
+ }
8644
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:focus > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
8645
+ color: var(--ids-comp-switch-track-on-color-fg-icon-primary-default);
8646
+ }
8647
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:focus > .ids-switch__track > .ids-switch__handle {
8648
+ background-color: var(--ids-comp-switch-handle-on-color-bg-primary-default);
8649
+ }
8650
+ .ids-switch.ids-switch-primary:not(.ids-switch-disabled).ids-switch-on > .ids-switch__button:focus > .ids-switch__track > .ids-switch__handle > .ids-icon {
8651
+ color: var(--ids-comp-switch-handle-on-color-fg-icon-primary-default);
8652
+ }
8653
+ .ids-switch.ids-switch-primary.ids-switch-disabled > .ids-switch__button + .ids-switch__label {
8654
+ color: var(--ids-comp-switch-label-color-fg-primary-disabled);
8655
+ }
8656
+ .ids-switch.ids-switch-primary.ids-switch-disabled:not(.ids-switch-on) > .ids-switch__button > .ids-switch__track {
8657
+ background-color: var(--ids-comp-switch-track-off-color-bg-primary-disabled);
8658
+ }
8659
+ .ids-switch.ids-switch-primary.ids-switch-disabled:not(.ids-switch-on) > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
8660
+ color: var(--ids-comp-switch-track-off-color-fg-icon-primary-disabled);
8661
+ }
8662
+ .ids-switch.ids-switch-primary.ids-switch-disabled:not(.ids-switch-on) > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
8663
+ background-color: var(--ids-comp-switch-handle-off-color-bg-primary-disabled);
8664
+ }
8665
+ .ids-switch.ids-switch-primary.ids-switch-disabled:not(.ids-switch-on) > .ids-switch__button > .ids-switch__track > .ids-switch__handle > .ids-icon {
8666
+ color: var(--ids-comp-switch-handle-off-color-fg-icon-primary-disabled);
8667
+ }
8668
+ .ids-switch.ids-switch-primary.ids-switch-disabled.ids-switch-on > .ids-switch__button > .ids-switch__track {
8669
+ background-color: var(--ids-comp-switch-track-on-color-bg-primary-disabled);
8670
+ }
8671
+ .ids-switch.ids-switch-primary.ids-switch-disabled.ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__track-icon > .ids-icon {
8672
+ color: var(--ids-comp-switch-track-on-color-fg-icon-primary-disabled);
8673
+ }
8674
+ .ids-switch.ids-switch-primary.ids-switch-disabled.ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__handle {
8675
+ background-color: var(--ids-comp-switch-handle-on-color-bg-primary-disabled);
8676
+ }
8677
+ .ids-switch.ids-switch-primary.ids-switch-disabled.ids-switch-on > .ids-switch__button > .ids-switch__track > .ids-switch__handle > .ids-icon {
8678
+ color: var(--ids-comp-switch-handle-on-color-fg-icon-primary-disabled);
8679
+ }
8680
+ .ids-switch.ids-switch-disabled {
8681
+ cursor: not-allowed;
8682
+ }
8683
+
7672
8684
  .ids-tag {
7673
8685
  flex-shrink: 0;
7674
8686
  width: fit-content;