@i-cell/ids-styles 0.0.25 → 0.0.26

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.
@@ -9379,61 +9379,9 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
9379
9379
  .ids-segmented-control.ids-segmented-control-primary .ids-segmented-control-item > button:focus, .ids-segmented-control.ids-segmented-control-primary .ids-segmented-control-item > button:focus-visible {
9380
9380
  outline-color: var(--ids-comp-segmented-control-focused-outline-color-dark-focused);
9381
9381
  }
9382
- .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled {
9383
- background-color: var(--ids-comp-segmented-control-container-filled-color-bg-primary-default);
9384
- border-color: var(--ids-comp-segmented-control-container-filled-color-border-primary-default);
9385
- }
9386
- .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button {
9387
- background-color: var(--ids-comp-segmented-control-button-filled-color-bg-primary-default);
9388
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-default);
9389
- border-color: var(--ids-comp-segmented-control-button-filled-color-border-primary-default);
9390
- }
9391
- .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button .ids-icon {
9392
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-default);
9393
- }
9394
- .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
9395
- background-color: var(--ids-comp-segmented-control-button-filled-color-bg-primary-active);
9396
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-active);
9397
- border-color: var(--ids-comp-segmented-control-button-filled-color-border-primary-active);
9398
- }
9399
- .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) .ids-icon {
9400
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-active);
9401
- }
9402
- .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:hover {
9403
- background-color: var(--ids-comp-segmented-control-button-filled-color-bg-primary-hovered);
9404
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-hovered);
9405
- border-color: var(--ids-comp-segmented-control-button-filled-color-border-primary-hovered);
9406
- }
9407
- .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:hover .ids-icon {
9408
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-hovered);
9409
- }
9410
- .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:active {
9411
- background-color: var(--ids-comp-segmented-control-button-filled-color-bg-primary-pressed);
9412
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-pressed);
9413
- border-color: var(--ids-comp-segmented-control-button-filled-color-border-primary-pressed);
9414
- }
9415
- .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:active .ids-icon {
9416
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-pressed);
9417
- }
9418
- .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:focus, .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:focus-visible {
9419
- background-color: var(--ids-comp-segmented-control-button-filled-color-bg-primary-focused);
9420
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-focused);
9421
- border-color: var(--ids-comp-segmented-control-button-filled-color-border-primary-focused);
9422
- }
9423
- .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:focus .ids-icon, .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:focus-visible .ids-icon {
9424
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-focused);
9425
- }
9426
- .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:disabled {
9427
- background-color: var(--ids-comp-segmented-control-button-filled-color-bg-primary-disabled);
9428
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-disabled);
9429
- border-color: var(--ids-comp-segmented-control-button-filled-color-border-primary-disabled);
9430
- }
9431
- .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:disabled .ids-icon {
9432
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-disabled);
9433
- }
9434
9382
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined {
9435
- background-color: var(--ids-comp-segmented-control-container-outlined-color-bg-primary-default);
9436
- border-color: var(--ids-comp-segmented-control-container-outlined-color-border-primary-default);
9383
+ background-color: var(--ids-comp-segmented-control-container-outlined-color-bg-surface-default);
9384
+ border-color: var(--ids-comp-segmented-control-container-outlined-color-border-surface-default);
9437
9385
  }
9438
9386
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button {
9439
9387
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-primary-default);
@@ -9486,58 +9434,6 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
9486
9434
  .ids-segmented-control.ids-segmented-control-surface .ids-segmented-control-item > button:focus, .ids-segmented-control.ids-segmented-control-surface .ids-segmented-control-item > button:focus-visible {
9487
9435
  outline-color: var(--ids-comp-segmented-control-focused-outline-color-dark-focused);
9488
9436
  }
9489
- .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled {
9490
- background-color: var(--ids-comp-segmented-control-container-filled-color-bg-surface-default);
9491
- border-color: var(--ids-comp-segmented-control-container-filled-color-border-surface-default);
9492
- }
9493
- .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button {
9494
- background-color: var(--ids-comp-segmented-control-button-filled-color-bg-surface-default);
9495
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-default);
9496
- border-color: var(--ids-comp-segmented-control-button-filled-color-border-surface-default);
9497
- }
9498
- .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button .ids-icon {
9499
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-default);
9500
- }
9501
- .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
9502
- background-color: var(--ids-comp-segmented-control-button-filled-color-bg-surface-active);
9503
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-active);
9504
- border-color: var(--ids-comp-segmented-control-button-filled-color-border-surface-active);
9505
- }
9506
- .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) .ids-icon {
9507
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-active);
9508
- }
9509
- .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:hover {
9510
- background-color: var(--ids-comp-segmented-control-button-filled-color-bg-surface-hovered);
9511
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-hovered);
9512
- border-color: var(--ids-comp-segmented-control-button-filled-color-border-surface-hovered);
9513
- }
9514
- .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:hover .ids-icon {
9515
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-hovered);
9516
- }
9517
- .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:active {
9518
- background-color: var(--ids-comp-segmented-control-button-filled-color-bg-surface-pressed);
9519
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-pressed);
9520
- border-color: var(--ids-comp-segmented-control-button-filled-color-border-surface-pressed);
9521
- }
9522
- .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:active .ids-icon {
9523
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-pressed);
9524
- }
9525
- .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:focus, .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:focus-visible {
9526
- background-color: var(--ids-comp-segmented-control-button-filled-color-bg-surface-focused);
9527
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-focused);
9528
- border-color: var(--ids-comp-segmented-control-button-filled-color-border-surface-focused);
9529
- }
9530
- .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:focus .ids-icon, .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:focus-visible .ids-icon {
9531
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-focused);
9532
- }
9533
- .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:disabled {
9534
- background-color: var(--ids-comp-segmented-control-button-filled-color-bg-surface-disabled);
9535
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-disabled);
9536
- border-color: var(--ids-comp-segmented-control-button-filled-color-border-surface-disabled);
9537
- }
9538
- .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:disabled .ids-icon {
9539
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-disabled);
9540
- }
9541
9437
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined {
9542
9438
  background-color: var(--ids-comp-segmented-control-container-outlined-color-bg-surface-default);
9543
9439
  border-color: var(--ids-comp-segmented-control-container-outlined-color-border-surface-default);
@@ -9593,61 +9489,9 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
9593
9489
  .ids-segmented-control.ids-segmented-control-light .ids-segmented-control-item > button:focus, .ids-segmented-control.ids-segmented-control-light .ids-segmented-control-item > button:focus-visible {
9594
9490
  outline-color: var(--ids-comp-segmented-control-focused-outline-color-light-focused);
9595
9491
  }
9596
- .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled {
9597
- background-color: var(--ids-comp-segmented-control-container-filled-color-bg-light-default);
9598
- border-color: var(--ids-comp-segmented-control-container-filled-color-border-light-default);
9599
- }
9600
- .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button {
9601
- background-color: var(--ids-comp-segmented-control-button-filled-color-bg-light-default);
9602
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-default);
9603
- border-color: var(--ids-comp-segmented-control-button-filled-color-border-light-default);
9604
- }
9605
- .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button .ids-icon {
9606
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-default);
9607
- }
9608
- .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
9609
- background-color: var(--ids-comp-segmented-control-button-filled-color-bg-light-active);
9610
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-active);
9611
- border-color: var(--ids-comp-segmented-control-button-filled-color-border-light-active);
9612
- }
9613
- .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) .ids-icon {
9614
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-active);
9615
- }
9616
- .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:hover {
9617
- background-color: var(--ids-comp-segmented-control-button-filled-color-bg-light-hovered);
9618
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-hovered);
9619
- border-color: var(--ids-comp-segmented-control-button-filled-color-border-light-hovered);
9620
- }
9621
- .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:hover .ids-icon {
9622
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-hovered);
9623
- }
9624
- .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:active {
9625
- background-color: var(--ids-comp-segmented-control-button-filled-color-bg-light-pressed);
9626
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-pressed);
9627
- border-color: var(--ids-comp-segmented-control-button-filled-color-border-light-pressed);
9628
- }
9629
- .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:active .ids-icon {
9630
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-pressed);
9631
- }
9632
- .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:focus, .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:focus-visible {
9633
- background-color: var(--ids-comp-segmented-control-button-filled-color-bg-light-focused);
9634
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-focused);
9635
- border-color: var(--ids-comp-segmented-control-button-filled-color-border-light-focused);
9636
- }
9637
- .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:focus .ids-icon, .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:focus-visible .ids-icon {
9638
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-focused);
9639
- }
9640
- .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:disabled {
9641
- background-color: var(--ids-comp-segmented-control-button-filled-color-bg-light-disabled);
9642
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-disabled);
9643
- border-color: var(--ids-comp-segmented-control-button-filled-color-border-light-disabled);
9644
- }
9645
- .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:disabled .ids-icon {
9646
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-disabled);
9647
- }
9648
9492
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined {
9649
- background-color: var(--ids-comp-segmented-control-container-outlined-color-bg-light-default);
9650
- border-color: var(--ids-comp-segmented-control-container-outlined-color-border-light-default);
9493
+ background-color: var(--ids-comp-segmented-control-container-outlined-color-bg-surface-default);
9494
+ border-color: var(--ids-comp-segmented-control-container-outlined-color-border-surface-default);
9651
9495
  }
9652
9496
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button {
9653
9497
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-light-default);
@@ -9697,113 +9541,6 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
9697
9541
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled .ids-icon {
9698
9542
  color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-light-disabled);
9699
9543
  }
9700
- .ids-segmented-control.ids-segmented-control-dark .ids-segmented-control-item > button:focus, .ids-segmented-control.ids-segmented-control-dark .ids-segmented-control-item > button:focus-visible {
9701
- outline-color: var(--ids-comp-segmented-control-focused-outline-color-dark-focused);
9702
- }
9703
- .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled {
9704
- background-color: var(--ids-comp-segmented-control-container-filled-color-bg-dark-default);
9705
- border-color: var(--ids-comp-segmented-control-container-filled-color-border-dark-default);
9706
- }
9707
- .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button {
9708
- background-color: var(--ids-comp-segmented-control-button-filled-color-bg-dark-default);
9709
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-default);
9710
- border-color: var(--ids-comp-segmented-control-button-filled-color-border-dark-default);
9711
- }
9712
- .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button .ids-icon {
9713
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-default);
9714
- }
9715
- .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
9716
- background-color: var(--ids-comp-segmented-control-button-filled-color-bg-dark-active);
9717
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-active);
9718
- border-color: var(--ids-comp-segmented-control-button-filled-color-border-dark-active);
9719
- }
9720
- .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) .ids-icon {
9721
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-active);
9722
- }
9723
- .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:hover {
9724
- background-color: var(--ids-comp-segmented-control-button-filled-color-bg-dark-hovered);
9725
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-hovered);
9726
- border-color: var(--ids-comp-segmented-control-button-filled-color-border-dark-hovered);
9727
- }
9728
- .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:hover .ids-icon {
9729
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-hovered);
9730
- }
9731
- .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:active {
9732
- background-color: var(--ids-comp-segmented-control-button-filled-color-bg-dark-pressed);
9733
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-pressed);
9734
- border-color: var(--ids-comp-segmented-control-button-filled-color-border-dark-pressed);
9735
- }
9736
- .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:active .ids-icon {
9737
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-pressed);
9738
- }
9739
- .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:focus, .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:focus-visible {
9740
- background-color: var(--ids-comp-segmented-control-button-filled-color-bg-dark-focused);
9741
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-focused);
9742
- border-color: var(--ids-comp-segmented-control-button-filled-color-border-dark-focused);
9743
- }
9744
- .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:focus .ids-icon, .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:focus-visible .ids-icon {
9745
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-focused);
9746
- }
9747
- .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:disabled {
9748
- background-color: var(--ids-comp-segmented-control-button-filled-color-bg-dark-disabled);
9749
- color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-disabled);
9750
- border-color: var(--ids-comp-segmented-control-button-filled-color-border-dark-disabled);
9751
- }
9752
- .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:disabled .ids-icon {
9753
- color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-disabled);
9754
- }
9755
- .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined {
9756
- background-color: var(--ids-comp-segmented-control-container-outlined-color-bg-dark-default);
9757
- border-color: var(--ids-comp-segmented-control-container-outlined-color-border-dark-default);
9758
- }
9759
- .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button {
9760
- background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-dark-default);
9761
- color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-dark-default);
9762
- border-color: var(--ids-comp-segmented-control-button-outlined-color-border-dark-default);
9763
- }
9764
- .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button .ids-icon {
9765
- color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-dark-default);
9766
- }
9767
- .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
9768
- background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-dark-active);
9769
- color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-dark-active);
9770
- border-color: var(--ids-comp-segmented-control-button-outlined-color-border-dark-active);
9771
- }
9772
- .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) .ids-icon {
9773
- color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-dark-active);
9774
- }
9775
- .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:hover {
9776
- background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-dark-hovered);
9777
- color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-dark-hovered);
9778
- border-color: var(--ids-comp-segmented-control-button-outlined-color-border-dark-hovered);
9779
- }
9780
- .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:hover .ids-icon {
9781
- color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-dark-hovered);
9782
- }
9783
- .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:active {
9784
- background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-dark-pressed);
9785
- color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-dark-pressed);
9786
- border-color: var(--ids-comp-segmented-control-button-outlined-color-border-dark-pressed);
9787
- }
9788
- .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:active .ids-icon {
9789
- color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-dark-pressed);
9790
- }
9791
- .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:focus, .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:focus-visible {
9792
- background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-dark-focused);
9793
- color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-dark-focused);
9794
- border-color: var(--ids-comp-segmented-control-button-outlined-color-border-dark-focused);
9795
- }
9796
- .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:focus .ids-icon, .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:focus-visible .ids-icon {
9797
- color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-dark-focused);
9798
- }
9799
- .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled {
9800
- background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-dark-disabled);
9801
- color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-dark-disabled);
9802
- border-color: var(--ids-comp-segmented-control-button-outlined-color-border-dark-disabled);
9803
- }
9804
- .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled .ids-icon {
9805
- color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-dark-disabled);
9806
- }
9807
9544
 
9808
9545
  .ids-segmented-control-toggle {
9809
9546
  display: inline-flex;
@@ -9948,426 +9685,315 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
9948
9685
  font-weight: var(--ids-comp-segmented-control-toggle-button-icon-typography-font-weight-dense);
9949
9686
  line-height: var(--ids-comp-segmented-control-toggle-button-icon-typography-line-height-dense);
9950
9687
  }
9951
- .ids-segmented-control-toggle.ids-segmented-control-toggle-primary .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-primary .ids-segmented-control-toggle-item > button:focus-visible {
9952
- outline-color: var(--ids-comp-segmented-control-toggle-focused-outline-color-dark-focused);
9688
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled {
9689
+ background-color: var(--ids-comp-segmented-control-toggle-container-filled-color-bg-surface-default);
9690
+ }
9691
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined {
9692
+ background-color: var(--ids-comp-segmented-control-toggle-container-outlined-color-bg-surface-default);
9693
+ }
9694
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled {
9695
+ background-color: var(--ids-comp-segmented-control-toggle-container-filled-color-bg-light-default);
9953
9696
  }
9954
- .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled {
9955
- background-color: var(--ids-comp-segmented-control-toggle-container-filled-color-bg-primary-default);
9697
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined {
9698
+ background-color: var(--ids-comp-segmented-control-toggle-container-outlined-color-bg-light-default);
9699
+ }
9700
+ .ids-segmented-control-toggle .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle .ids-segmented-control-toggle-item > button:focus-visible {
9701
+ outline-color: var(--ids-comp-segmented-control-toggle-focused-outline-color-dark-focused);
9956
9702
  }
9957
- .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button {
9703
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button {
9958
9704
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-default);
9959
9705
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-default);
9960
9706
  border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-default);
9961
9707
  }
9962
- .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button .ids-icon {
9708
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button .ids-icon {
9963
9709
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-default);
9964
9710
  }
9965
- .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
9711
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
9966
9712
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-active);
9967
9713
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-active);
9968
- border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-default);
9714
+ border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-active);
9969
9715
  }
9970
- .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon {
9716
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon {
9971
9717
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-active);
9972
9718
  }
9973
- .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:hover {
9719
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:hover {
9974
9720
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-hovered);
9975
9721
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-hovered);
9976
- border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-default);
9722
+ border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-hovered);
9977
9723
  }
9978
- .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:hover .ids-icon {
9724
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:hover .ids-icon {
9979
9725
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-hovered);
9980
9726
  }
9981
- .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:active {
9727
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:active {
9982
9728
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-pressed);
9983
9729
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-pressed);
9984
- border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-default);
9730
+ border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-pressed);
9985
9731
  }
9986
- .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:active .ids-icon {
9732
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:active .ids-icon {
9987
9733
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-pressed);
9988
9734
  }
9989
- .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus-visible {
9735
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:focus-visible {
9990
9736
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-focused);
9991
9737
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-focused);
9992
- border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-default);
9738
+ border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-focused);
9993
9739
  }
9994
- .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus-visible .ids-icon {
9740
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:focus-visible .ids-icon {
9995
9741
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-focused);
9996
9742
  }
9997
- .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:disabled {
9743
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:disabled {
9998
9744
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-disabled);
9999
9745
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-disabled);
10000
- border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-default);
9746
+ border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-disabled);
10001
9747
  }
10002
- .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:disabled .ids-icon {
9748
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:disabled .ids-icon {
10003
9749
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-disabled);
10004
9750
  }
10005
- .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined {
10006
- background-color: var(--ids-comp-segmented-control-toggle-container-outlined-color-bg-primary-default);
10007
- }
10008
- .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button {
9751
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button {
10009
9752
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-default);
10010
9753
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-default);
10011
9754
  border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-default);
10012
9755
  }
10013
- .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button .ids-icon {
9756
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button .ids-icon {
10014
9757
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-default);
10015
9758
  }
10016
- .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
9759
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
10017
9760
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-active);
10018
9761
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-active);
10019
- border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-default);
9762
+ border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-active);
10020
9763
  }
10021
- .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon {
9764
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon {
10022
9765
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-active);
10023
9766
  }
10024
- .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:hover {
9767
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:hover {
10025
9768
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-hovered);
10026
9769
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-hovered);
10027
- border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-default);
9770
+ border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-hovered);
10028
9771
  }
10029
- .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:hover .ids-icon {
9772
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:hover .ids-icon {
10030
9773
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-hovered);
10031
9774
  }
10032
- .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:active {
9775
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:active {
10033
9776
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-pressed);
10034
9777
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-pressed);
10035
- border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-default);
9778
+ border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-pressed);
10036
9779
  }
10037
- .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:active .ids-icon {
9780
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:active .ids-icon {
10038
9781
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-pressed);
10039
9782
  }
10040
- .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus-visible {
9783
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:focus-visible {
10041
9784
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-focused);
10042
9785
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-focused);
10043
- border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-default);
9786
+ border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-focused);
10044
9787
  }
10045
- .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus-visible .ids-icon {
9788
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:focus-visible .ids-icon {
10046
9789
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-focused);
10047
9790
  }
10048
- .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:disabled {
9791
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:disabled {
10049
9792
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-disabled);
10050
9793
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-disabled);
10051
- border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-default);
9794
+ border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-disabled);
10052
9795
  }
10053
- .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:disabled .ids-icon {
9796
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:disabled .ids-icon {
10054
9797
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-disabled);
10055
9798
  }
10056
- .ids-segmented-control-toggle.ids-segmented-control-toggle-surface .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-surface .ids-segmented-control-toggle-item > button:focus-visible {
9799
+ .ids-segmented-control-toggle .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle .ids-segmented-control-toggle-item > button:focus-visible {
10057
9800
  outline-color: var(--ids-comp-segmented-control-toggle-focused-outline-color-dark-focused);
10058
9801
  }
10059
- .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled {
10060
- background-color: var(--ids-comp-segmented-control-toggle-container-filled-color-bg-surface-default);
10061
- }
10062
- .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button {
9802
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button {
10063
9803
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-default);
10064
9804
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-default);
10065
9805
  border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-default);
10066
9806
  }
10067
- .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button .ids-icon {
9807
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button .ids-icon {
10068
9808
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-default);
10069
9809
  }
10070
- .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
9810
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
10071
9811
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-active);
10072
9812
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-active);
10073
- border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-default);
9813
+ border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-active);
10074
9814
  }
10075
- .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon {
9815
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon {
10076
9816
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-active);
10077
9817
  }
10078
- .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:hover {
9818
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:hover {
10079
9819
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-hovered);
10080
9820
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-hovered);
10081
- border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-default);
9821
+ border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-hovered);
10082
9822
  }
10083
- .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:hover .ids-icon {
9823
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:hover .ids-icon {
10084
9824
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-hovered);
10085
9825
  }
10086
- .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:active {
9826
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:active {
10087
9827
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-pressed);
10088
9828
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-pressed);
10089
- border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-default);
9829
+ border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-pressed);
10090
9830
  }
10091
- .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:active .ids-icon {
9831
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:active .ids-icon {
10092
9832
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-pressed);
10093
9833
  }
10094
- .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus-visible {
9834
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:focus-visible {
10095
9835
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-focused);
10096
9836
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-focused);
10097
- border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-default);
9837
+ border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-focused);
10098
9838
  }
10099
- .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus-visible .ids-icon {
9839
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:focus-visible .ids-icon {
10100
9840
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-focused);
10101
9841
  }
10102
- .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:disabled {
9842
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:disabled {
10103
9843
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-disabled);
10104
9844
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-disabled);
10105
- border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-default);
9845
+ border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-disabled);
10106
9846
  }
10107
- .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:disabled .ids-icon {
9847
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:disabled .ids-icon {
10108
9848
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-disabled);
10109
9849
  }
10110
- .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined {
10111
- background-color: var(--ids-comp-segmented-control-toggle-container-outlined-color-bg-surface-default);
10112
- }
10113
- .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button {
9850
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button {
10114
9851
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-default);
10115
9852
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-default);
10116
9853
  border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-default);
10117
9854
  }
10118
- .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button .ids-icon {
9855
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button .ids-icon {
10119
9856
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-default);
10120
9857
  }
10121
- .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
9858
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
10122
9859
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-active);
10123
9860
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-active);
10124
- border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-default);
9861
+ border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-active);
10125
9862
  }
10126
- .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon {
9863
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon {
10127
9864
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-active);
10128
9865
  }
10129
- .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:hover {
9866
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:hover {
10130
9867
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-hovered);
10131
9868
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-hovered);
10132
- border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-default);
9869
+ border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-hovered);
10133
9870
  }
10134
- .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:hover .ids-icon {
9871
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:hover .ids-icon {
10135
9872
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-hovered);
10136
9873
  }
10137
- .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:active {
9874
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:active {
10138
9875
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-pressed);
10139
9876
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-pressed);
10140
- border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-default);
9877
+ border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-pressed);
10141
9878
  }
10142
- .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:active .ids-icon {
9879
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:active .ids-icon {
10143
9880
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-pressed);
10144
9881
  }
10145
- .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus-visible {
9882
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:focus-visible {
10146
9883
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-focused);
10147
9884
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-focused);
10148
- border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-default);
9885
+ border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-focused);
10149
9886
  }
10150
- .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus-visible .ids-icon {
9887
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:focus-visible .ids-icon {
10151
9888
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-focused);
10152
9889
  }
10153
- .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:disabled {
9890
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:disabled {
10154
9891
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-disabled);
10155
9892
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-disabled);
10156
- border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-default);
9893
+ border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-disabled);
10157
9894
  }
10158
- .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:disabled .ids-icon {
9895
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:disabled .ids-icon {
10159
9896
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-disabled);
10160
9897
  }
10161
- .ids-segmented-control-toggle.ids-segmented-control-toggle-light .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-light .ids-segmented-control-toggle-item > button:focus-visible {
9898
+ .ids-segmented-control-toggle .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle .ids-segmented-control-toggle-item > button:focus-visible {
10162
9899
  outline-color: var(--ids-comp-segmented-control-toggle-focused-outline-color-light-focused);
10163
9900
  }
10164
- .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled {
10165
- background-color: var(--ids-comp-segmented-control-toggle-container-filled-color-bg-light-default);
10166
- }
10167
- .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button {
9901
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button {
10168
9902
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-default);
10169
9903
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-default);
10170
9904
  border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-default);
10171
9905
  }
10172
- .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button .ids-icon {
9906
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button .ids-icon {
10173
9907
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-default);
10174
9908
  }
10175
- .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
9909
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
10176
9910
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-active);
10177
9911
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-active);
10178
- border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-default);
9912
+ border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-active);
10179
9913
  }
10180
- .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon {
9914
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon {
10181
9915
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-active);
10182
9916
  }
10183
- .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:hover {
9917
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:hover {
10184
9918
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-hovered);
10185
9919
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-hovered);
10186
- border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-default);
9920
+ border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-hovered);
10187
9921
  }
10188
- .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:hover .ids-icon {
9922
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:hover .ids-icon {
10189
9923
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-hovered);
10190
9924
  }
10191
- .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:active {
9925
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:active {
10192
9926
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-pressed);
10193
9927
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-pressed);
10194
- border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-default);
9928
+ border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-pressed);
10195
9929
  }
10196
- .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:active .ids-icon {
9930
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:active .ids-icon {
10197
9931
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-pressed);
10198
9932
  }
10199
- .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus-visible {
9933
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:focus-visible {
10200
9934
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-focused);
10201
9935
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-focused);
10202
- border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-default);
9936
+ border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-focused);
10203
9937
  }
10204
- .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus-visible .ids-icon {
9938
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:focus-visible .ids-icon {
10205
9939
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-focused);
10206
9940
  }
10207
- .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:disabled {
9941
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:disabled {
10208
9942
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-disabled);
10209
9943
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-disabled);
10210
- border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-default);
9944
+ border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-disabled);
10211
9945
  }
10212
- .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:disabled .ids-icon {
9946
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:disabled .ids-icon {
10213
9947
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-disabled);
10214
9948
  }
10215
- .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined {
10216
- background-color: var(--ids-comp-segmented-control-toggle-container-outlined-color-bg-light-default);
10217
- }
10218
- .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button {
9949
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button {
10219
9950
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-default);
10220
9951
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-default);
10221
9952
  border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-default);
10222
9953
  }
10223
- .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button .ids-icon {
9954
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button .ids-icon {
10224
9955
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-default);
10225
9956
  }
10226
- .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
9957
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
10227
9958
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-active);
10228
9959
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-active);
10229
- border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-default);
9960
+ border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-active);
10230
9961
  }
10231
- .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon {
9962
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon {
10232
9963
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-active);
10233
9964
  }
10234
- .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:hover {
9965
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:hover {
10235
9966
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-hovered);
10236
9967
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-hovered);
10237
- border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-default);
9968
+ border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-hovered);
10238
9969
  }
10239
- .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:hover .ids-icon {
9970
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:hover .ids-icon {
10240
9971
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-hovered);
10241
9972
  }
10242
- .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:active {
9973
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:active {
10243
9974
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-pressed);
10244
9975
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-pressed);
10245
- border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-default);
9976
+ border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-pressed);
10246
9977
  }
10247
- .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:active .ids-icon {
9978
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:active .ids-icon {
10248
9979
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-pressed);
10249
9980
  }
10250
- .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus-visible {
9981
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:focus-visible {
10251
9982
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-focused);
10252
9983
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-focused);
10253
- border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-default);
9984
+ border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-focused);
10254
9985
  }
10255
- .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus-visible .ids-icon {
9986
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:focus-visible .ids-icon {
10256
9987
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-focused);
10257
9988
  }
10258
- .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:disabled {
9989
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:disabled {
10259
9990
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-disabled);
10260
9991
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-disabled);
10261
- border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-default);
9992
+ border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-disabled);
10262
9993
  }
10263
- .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:disabled .ids-icon {
9994
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:disabled .ids-icon {
10264
9995
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-disabled);
10265
9996
  }
10266
- .ids-segmented-control-toggle.ids-segmented-control-toggle-dark .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-dark .ids-segmented-control-toggle-item > button:focus-visible {
10267
- outline-color: var(--ids-comp-segmented-control-toggle-focused-outline-color-dark-focused);
10268
- }
10269
- .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled {
10270
- background-color: var(--ids-comp-segmented-control-toggle-container-filled-color-bg-dark-default);
10271
- }
10272
- .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button {
10273
- background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-dark-default);
10274
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-dark-default);
10275
- border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-dark-default);
10276
- }
10277
- .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button .ids-icon {
10278
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-dark-default);
10279
- }
10280
- .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
10281
- background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-dark-active);
10282
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-dark-active);
10283
- border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-dark-default);
10284
- }
10285
- .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon {
10286
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-dark-active);
10287
- }
10288
- .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:hover {
10289
- background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-dark-hovered);
10290
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-dark-hovered);
10291
- border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-dark-default);
10292
- }
10293
- .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:hover .ids-icon {
10294
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-dark-hovered);
10295
- }
10296
- .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:active {
10297
- background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-dark-pressed);
10298
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-dark-pressed);
10299
- border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-dark-default);
10300
- }
10301
- .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:active .ids-icon {
10302
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-dark-pressed);
10303
- }
10304
- .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus-visible {
10305
- background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-dark-focused);
10306
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-dark-focused);
10307
- border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-dark-default);
10308
- }
10309
- .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:focus-visible .ids-icon {
10310
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-dark-focused);
10311
- }
10312
- .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:disabled {
10313
- background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-dark-disabled);
10314
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-dark-disabled);
10315
- border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-dark-default);
10316
- }
10317
- .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button:disabled .ids-icon {
10318
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-dark-disabled);
10319
- }
10320
- .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined {
10321
- background-color: var(--ids-comp-segmented-control-toggle-container-outlined-color-bg-dark-default);
10322
- }
10323
- .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button {
10324
- background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-dark-default);
10325
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-dark-default);
10326
- border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-dark-default);
10327
- }
10328
- .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button .ids-icon {
10329
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-dark-default);
10330
- }
10331
- .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
10332
- background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-dark-active);
10333
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-dark-active);
10334
- border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-dark-default);
10335
- }
10336
- .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon {
10337
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-dark-active);
10338
- }
10339
- .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:hover {
10340
- background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-dark-hovered);
10341
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-dark-hovered);
10342
- border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-dark-default);
10343
- }
10344
- .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:hover .ids-icon {
10345
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-dark-hovered);
10346
- }
10347
- .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:active {
10348
- background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-dark-pressed);
10349
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-dark-pressed);
10350
- border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-dark-default);
10351
- }
10352
- .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:active .ids-icon {
10353
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-dark-pressed);
10354
- }
10355
- .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus-visible {
10356
- background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-dark-focused);
10357
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-dark-focused);
10358
- border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-dark-default);
10359
- }
10360
- .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:focus-visible .ids-icon {
10361
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-dark-focused);
10362
- }
10363
- .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:disabled {
10364
- background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-dark-disabled);
10365
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-dark-disabled);
10366
- border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-dark-default);
10367
- }
10368
- .ids-segmented-control-toggle.ids-segmented-control-toggle-dark.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item > button:disabled .ids-icon {
10369
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-dark-disabled);
10370
- }
10371
9997
 
10372
9998
  .ids-select {
10373
9999
  width: 100%;