@i-cell/ids-styles 0.0.24 → 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);
9956
9699
  }
9957
- .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item > button {
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);
9702
+ }
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%;
@@ -12893,7 +12519,6 @@ a.ids-tag.ids-tag-outlined.ids-tag-surface:active {
12893
12519
  }
12894
12520
 
12895
12521
  .ids-tooltip {
12896
- position: fixed;
12897
12522
  display: block;
12898
12523
  }
12899
12524
  .ids-tooltip > .ids-tooltip__content {
@@ -12903,11 +12528,6 @@ a.ids-tag.ids-tag-outlined.ids-tag-surface:active {
12903
12528
  align-items: center;
12904
12529
  width: max-content;
12905
12530
  }
12906
- .ids-tooltip > .ids-tooltip__content::after {
12907
- position: absolute;
12908
- content: " ";
12909
- transform: rotate(-45deg);
12910
- }
12911
12531
  .ids-tooltip.ids-tooltip-compact > .ids-tooltip__content {
12912
12532
  max-width: var(--ids-comp-tooltip-size-max-width-compact);
12913
12533
  padding: var(--ids-comp-tooltip-size-padding-y-compact) var(--ids-comp-tooltip-size-padding-x-compact);
@@ -12918,61 +12538,29 @@ a.ids-tag.ids-tag-outlined.ids-tag-surface:active {
12918
12538
  letter-spacing: var(--ids-comp-tooltip-label-typography-letter-spacing-compact);
12919
12539
  line-height: var(--ids-comp-tooltip-label-typography-line-height-compact);
12920
12540
  }
12921
- .ids-tooltip.ids-tooltip-compact > .ids-tooltip__content::after {
12922
- width: var(--ids-comp-tooltip-size-caret-size-compact);
12923
- height: var(--ids-comp-tooltip-size-caret-size-compact);
12924
- }
12925
12541
  .ids-tooltip.ids-tooltip-compact.ids-tooltip-position-north {
12926
12542
  padding-bottom: calc(var(--ids-comp-tooltip-size-caret-size-compact)/1.4142135624);
12927
12543
  }
12928
- .ids-tooltip.ids-tooltip-compact.ids-tooltip-position-north > .ids-tooltip__content::after {
12929
- bottom: calc(0px - var(--ids-comp-tooltip-size-caret-size-compact) / 2);
12930
- }
12931
12544
  .ids-tooltip.ids-tooltip-compact.ids-tooltip-position-northeast {
12932
- margin-left: calc(-10px - (var(--ids-comp-tooltip-size-caret-size-compact)/1.4142135624));
12933
12545
  padding-bottom: calc(var(--ids-comp-tooltip-size-caret-size-compact)/1.4142135624);
12934
12546
  }
12935
- .ids-tooltip.ids-tooltip-compact.ids-tooltip-position-northeast > .ids-tooltip__content::after {
12936
- bottom: calc(0px - var(--ids-comp-tooltip-size-caret-size-compact) / 2);
12937
- }
12938
12547
  .ids-tooltip.ids-tooltip-compact.ids-tooltip-position-east {
12939
12548
  padding-left: calc(var(--ids-comp-tooltip-size-caret-size-compact)/1.4142135624);
12940
12549
  }
12941
- .ids-tooltip.ids-tooltip-compact.ids-tooltip-position-east > .ids-tooltip__content::after {
12942
- left: calc(0px - var(--ids-comp-tooltip-size-caret-size-compact) / 2);
12943
- }
12944
12550
  .ids-tooltip.ids-tooltip-compact.ids-tooltip-position-southeast {
12945
12551
  padding-top: calc(var(--ids-comp-tooltip-size-caret-size-compact)/1.4142135624);
12946
- margin-left: calc(-10px - var(--ids-comp-tooltip-size-caret-size-compact)/1.4142135624);
12947
- }
12948
- .ids-tooltip.ids-tooltip-compact.ids-tooltip-position-southeast > .ids-tooltip__content::after {
12949
- top: calc(0px - var(--ids-comp-tooltip-size-caret-size-compact) / 2);
12950
12552
  }
12951
12553
  .ids-tooltip.ids-tooltip-compact.ids-tooltip-position-south {
12952
12554
  padding-top: calc(var(--ids-comp-tooltip-size-caret-size-compact)/1.4142135624);
12953
12555
  }
12954
- .ids-tooltip.ids-tooltip-compact.ids-tooltip-position-south > .ids-tooltip__content::after {
12955
- top: calc(0px - var(--ids-comp-tooltip-size-caret-size-compact) / 2);
12956
- }
12957
12556
  .ids-tooltip.ids-tooltip-compact.ids-tooltip-position-southwest {
12958
12557
  padding-top: calc(var(--ids-comp-tooltip-size-caret-size-compact)/1.4142135624);
12959
- margin-left: calc(10px + var(--ids-comp-tooltip-size-caret-size-compact)/1.4142135624);
12960
- }
12961
- .ids-tooltip.ids-tooltip-compact.ids-tooltip-position-southwest > .ids-tooltip__content::after {
12962
- top: calc(0px - var(--ids-comp-tooltip-size-caret-size-compact) / 2);
12963
12558
  }
12964
12559
  .ids-tooltip.ids-tooltip-compact.ids-tooltip-position-west {
12965
12560
  padding-right: calc(var(--ids-comp-tooltip-size-caret-size-compact) / 1.4142135624);
12966
12561
  }
12967
- .ids-tooltip.ids-tooltip-compact.ids-tooltip-position-west > .ids-tooltip__content::after {
12968
- right: calc(0px - var(--ids-comp-tooltip-size-caret-size-compact) / 2);
12969
- }
12970
12562
  .ids-tooltip.ids-tooltip-compact.ids-tooltip-position-northwest {
12971
12563
  padding-bottom: calc(var(--ids-comp-tooltip-size-caret-size-compact)/1.4142135624);
12972
- margin-left: calc(10px + var(--ids-comp-tooltip-size-caret-size-compact)/1.4142135624);
12973
- }
12974
- .ids-tooltip.ids-tooltip-compact.ids-tooltip-position-northwest > .ids-tooltip__content::after {
12975
- bottom: calc(0px - var(--ids-comp-tooltip-size-caret-size-compact) / 2);
12976
12564
  }
12977
12565
  .ids-tooltip.ids-tooltip-comfortable > .ids-tooltip__content {
12978
12566
  max-width: var(--ids-comp-tooltip-size-max-width-comfortable);
@@ -12984,61 +12572,29 @@ a.ids-tag.ids-tag-outlined.ids-tag-surface:active {
12984
12572
  letter-spacing: var(--ids-comp-tooltip-label-typography-letter-spacing-comfortable);
12985
12573
  line-height: var(--ids-comp-tooltip-label-typography-line-height-comfortable);
12986
12574
  }
12987
- .ids-tooltip.ids-tooltip-comfortable > .ids-tooltip__content::after {
12988
- width: var(--ids-comp-tooltip-size-caret-size-comfortable);
12989
- height: var(--ids-comp-tooltip-size-caret-size-comfortable);
12990
- }
12991
12575
  .ids-tooltip.ids-tooltip-comfortable.ids-tooltip-position-north {
12992
12576
  padding-bottom: calc(var(--ids-comp-tooltip-size-caret-size-comfortable)/1.4142135624);
12993
12577
  }
12994
- .ids-tooltip.ids-tooltip-comfortable.ids-tooltip-position-north > .ids-tooltip__content::after {
12995
- bottom: calc(0px - var(--ids-comp-tooltip-size-caret-size-comfortable) / 2);
12996
- }
12997
12578
  .ids-tooltip.ids-tooltip-comfortable.ids-tooltip-position-northeast {
12998
- margin-left: calc(-10px - (var(--ids-comp-tooltip-size-caret-size-comfortable)/1.4142135624));
12999
12579
  padding-bottom: calc(var(--ids-comp-tooltip-size-caret-size-comfortable)/1.4142135624);
13000
12580
  }
13001
- .ids-tooltip.ids-tooltip-comfortable.ids-tooltip-position-northeast > .ids-tooltip__content::after {
13002
- bottom: calc(0px - var(--ids-comp-tooltip-size-caret-size-comfortable) / 2);
13003
- }
13004
12581
  .ids-tooltip.ids-tooltip-comfortable.ids-tooltip-position-east {
13005
12582
  padding-left: calc(var(--ids-comp-tooltip-size-caret-size-comfortable)/1.4142135624);
13006
12583
  }
13007
- .ids-tooltip.ids-tooltip-comfortable.ids-tooltip-position-east > .ids-tooltip__content::after {
13008
- left: calc(0px - var(--ids-comp-tooltip-size-caret-size-comfortable) / 2);
13009
- }
13010
12584
  .ids-tooltip.ids-tooltip-comfortable.ids-tooltip-position-southeast {
13011
12585
  padding-top: calc(var(--ids-comp-tooltip-size-caret-size-comfortable)/1.4142135624);
13012
- margin-left: calc(-10px - var(--ids-comp-tooltip-size-caret-size-comfortable)/1.4142135624);
13013
- }
13014
- .ids-tooltip.ids-tooltip-comfortable.ids-tooltip-position-southeast > .ids-tooltip__content::after {
13015
- top: calc(0px - var(--ids-comp-tooltip-size-caret-size-comfortable) / 2);
13016
12586
  }
13017
12587
  .ids-tooltip.ids-tooltip-comfortable.ids-tooltip-position-south {
13018
12588
  padding-top: calc(var(--ids-comp-tooltip-size-caret-size-comfortable)/1.4142135624);
13019
12589
  }
13020
- .ids-tooltip.ids-tooltip-comfortable.ids-tooltip-position-south > .ids-tooltip__content::after {
13021
- top: calc(0px - var(--ids-comp-tooltip-size-caret-size-comfortable) / 2);
13022
- }
13023
12590
  .ids-tooltip.ids-tooltip-comfortable.ids-tooltip-position-southwest {
13024
12591
  padding-top: calc(var(--ids-comp-tooltip-size-caret-size-comfortable)/1.4142135624);
13025
- margin-left: calc(10px + var(--ids-comp-tooltip-size-caret-size-comfortable)/1.4142135624);
13026
- }
13027
- .ids-tooltip.ids-tooltip-comfortable.ids-tooltip-position-southwest > .ids-tooltip__content::after {
13028
- top: calc(0px - var(--ids-comp-tooltip-size-caret-size-comfortable) / 2);
13029
12592
  }
13030
12593
  .ids-tooltip.ids-tooltip-comfortable.ids-tooltip-position-west {
13031
12594
  padding-right: calc(var(--ids-comp-tooltip-size-caret-size-comfortable) / 1.4142135624);
13032
12595
  }
13033
- .ids-tooltip.ids-tooltip-comfortable.ids-tooltip-position-west > .ids-tooltip__content::after {
13034
- right: calc(0px - var(--ids-comp-tooltip-size-caret-size-comfortable) / 2);
13035
- }
13036
12596
  .ids-tooltip.ids-tooltip-comfortable.ids-tooltip-position-northwest {
13037
12597
  padding-bottom: calc(var(--ids-comp-tooltip-size-caret-size-comfortable)/1.4142135624);
13038
- margin-left: calc(10px + var(--ids-comp-tooltip-size-caret-size-comfortable)/1.4142135624);
13039
- }
13040
- .ids-tooltip.ids-tooltip-comfortable.ids-tooltip-position-northwest > .ids-tooltip__content::after {
13041
- bottom: calc(0px - var(--ids-comp-tooltip-size-caret-size-comfortable) / 2);
13042
12598
  }
13043
12599
  .ids-tooltip.ids-tooltip-spacious > .ids-tooltip__content {
13044
12600
  max-width: var(--ids-comp-tooltip-size-max-width-spacious);
@@ -13050,61 +12606,29 @@ a.ids-tag.ids-tag-outlined.ids-tag-surface:active {
13050
12606
  letter-spacing: var(--ids-comp-tooltip-label-typography-letter-spacing-spacious);
13051
12607
  line-height: var(--ids-comp-tooltip-label-typography-line-height-spacious);
13052
12608
  }
13053
- .ids-tooltip.ids-tooltip-spacious > .ids-tooltip__content::after {
13054
- width: var(--ids-comp-tooltip-size-caret-size-spacious);
13055
- height: var(--ids-comp-tooltip-size-caret-size-spacious);
13056
- }
13057
12609
  .ids-tooltip.ids-tooltip-spacious.ids-tooltip-position-north {
13058
12610
  padding-bottom: calc(var(--ids-comp-tooltip-size-caret-size-spacious)/1.4142135624);
13059
12611
  }
13060
- .ids-tooltip.ids-tooltip-spacious.ids-tooltip-position-north > .ids-tooltip__content::after {
13061
- bottom: calc(0px - var(--ids-comp-tooltip-size-caret-size-spacious) / 2);
13062
- }
13063
12612
  .ids-tooltip.ids-tooltip-spacious.ids-tooltip-position-northeast {
13064
- margin-left: calc(-10px - (var(--ids-comp-tooltip-size-caret-size-spacious)/1.4142135624));
13065
12613
  padding-bottom: calc(var(--ids-comp-tooltip-size-caret-size-spacious)/1.4142135624);
13066
12614
  }
13067
- .ids-tooltip.ids-tooltip-spacious.ids-tooltip-position-northeast > .ids-tooltip__content::after {
13068
- bottom: calc(0px - var(--ids-comp-tooltip-size-caret-size-spacious) / 2);
13069
- }
13070
12615
  .ids-tooltip.ids-tooltip-spacious.ids-tooltip-position-east {
13071
12616
  padding-left: calc(var(--ids-comp-tooltip-size-caret-size-spacious)/1.4142135624);
13072
12617
  }
13073
- .ids-tooltip.ids-tooltip-spacious.ids-tooltip-position-east > .ids-tooltip__content::after {
13074
- left: calc(0px - var(--ids-comp-tooltip-size-caret-size-spacious) / 2);
13075
- }
13076
12618
  .ids-tooltip.ids-tooltip-spacious.ids-tooltip-position-southeast {
13077
12619
  padding-top: calc(var(--ids-comp-tooltip-size-caret-size-spacious)/1.4142135624);
13078
- margin-left: calc(-10px - var(--ids-comp-tooltip-size-caret-size-spacious)/1.4142135624);
13079
- }
13080
- .ids-tooltip.ids-tooltip-spacious.ids-tooltip-position-southeast > .ids-tooltip__content::after {
13081
- top: calc(0px - var(--ids-comp-tooltip-size-caret-size-spacious) / 2);
13082
12620
  }
13083
12621
  .ids-tooltip.ids-tooltip-spacious.ids-tooltip-position-south {
13084
12622
  padding-top: calc(var(--ids-comp-tooltip-size-caret-size-spacious)/1.4142135624);
13085
12623
  }
13086
- .ids-tooltip.ids-tooltip-spacious.ids-tooltip-position-south > .ids-tooltip__content::after {
13087
- top: calc(0px - var(--ids-comp-tooltip-size-caret-size-spacious) / 2);
13088
- }
13089
12624
  .ids-tooltip.ids-tooltip-spacious.ids-tooltip-position-southwest {
13090
12625
  padding-top: calc(var(--ids-comp-tooltip-size-caret-size-spacious)/1.4142135624);
13091
- margin-left: calc(10px + var(--ids-comp-tooltip-size-caret-size-spacious)/1.4142135624);
13092
- }
13093
- .ids-tooltip.ids-tooltip-spacious.ids-tooltip-position-southwest > .ids-tooltip__content::after {
13094
- top: calc(0px - var(--ids-comp-tooltip-size-caret-size-spacious) / 2);
13095
12626
  }
13096
12627
  .ids-tooltip.ids-tooltip-spacious.ids-tooltip-position-west {
13097
12628
  padding-right: calc(var(--ids-comp-tooltip-size-caret-size-spacious) / 1.4142135624);
13098
12629
  }
13099
- .ids-tooltip.ids-tooltip-spacious.ids-tooltip-position-west > .ids-tooltip__content::after {
13100
- right: calc(0px - var(--ids-comp-tooltip-size-caret-size-spacious) / 2);
13101
- }
13102
12630
  .ids-tooltip.ids-tooltip-spacious.ids-tooltip-position-northwest {
13103
12631
  padding-bottom: calc(var(--ids-comp-tooltip-size-caret-size-spacious)/1.4142135624);
13104
- margin-left: calc(10px + var(--ids-comp-tooltip-size-caret-size-spacious)/1.4142135624);
13105
- }
13106
- .ids-tooltip.ids-tooltip-spacious.ids-tooltip-position-northwest > .ids-tooltip__content::after {
13107
- bottom: calc(0px - var(--ids-comp-tooltip-size-caret-size-spacious) / 2);
13108
12632
  }
13109
12633
  .ids-tooltip.ids-tooltip-dense > .ids-tooltip__content {
13110
12634
  max-width: var(--ids-comp-tooltip-size-max-width-dense);
@@ -13116,111 +12640,250 @@ a.ids-tag.ids-tag-outlined.ids-tag-surface:active {
13116
12640
  letter-spacing: var(--ids-comp-tooltip-label-typography-letter-spacing-dense);
13117
12641
  line-height: var(--ids-comp-tooltip-label-typography-line-height-dense);
13118
12642
  }
13119
- .ids-tooltip.ids-tooltip-dense > .ids-tooltip__content::after {
13120
- width: var(--ids-comp-tooltip-size-caret-size-dense);
13121
- height: var(--ids-comp-tooltip-size-caret-size-dense);
13122
- }
13123
12643
  .ids-tooltip.ids-tooltip-dense.ids-tooltip-position-north {
13124
12644
  padding-bottom: calc(var(--ids-comp-tooltip-size-caret-size-dense)/1.4142135624);
13125
12645
  }
13126
- .ids-tooltip.ids-tooltip-dense.ids-tooltip-position-north > .ids-tooltip__content::after {
13127
- bottom: calc(0px - var(--ids-comp-tooltip-size-caret-size-dense) / 2);
13128
- }
13129
12646
  .ids-tooltip.ids-tooltip-dense.ids-tooltip-position-northeast {
13130
- margin-left: calc(-10px - (var(--ids-comp-tooltip-size-caret-size-dense)/1.4142135624));
13131
12647
  padding-bottom: calc(var(--ids-comp-tooltip-size-caret-size-dense)/1.4142135624);
13132
12648
  }
13133
- .ids-tooltip.ids-tooltip-dense.ids-tooltip-position-northeast > .ids-tooltip__content::after {
13134
- bottom: calc(0px - var(--ids-comp-tooltip-size-caret-size-dense) / 2);
13135
- }
13136
12649
  .ids-tooltip.ids-tooltip-dense.ids-tooltip-position-east {
13137
12650
  padding-left: calc(var(--ids-comp-tooltip-size-caret-size-dense)/1.4142135624);
13138
12651
  }
13139
- .ids-tooltip.ids-tooltip-dense.ids-tooltip-position-east > .ids-tooltip__content::after {
13140
- left: calc(0px - var(--ids-comp-tooltip-size-caret-size-dense) / 2);
13141
- }
13142
12652
  .ids-tooltip.ids-tooltip-dense.ids-tooltip-position-southeast {
13143
12653
  padding-top: calc(var(--ids-comp-tooltip-size-caret-size-dense)/1.4142135624);
13144
- margin-left: calc(-10px - var(--ids-comp-tooltip-size-caret-size-dense)/1.4142135624);
13145
- }
13146
- .ids-tooltip.ids-tooltip-dense.ids-tooltip-position-southeast > .ids-tooltip__content::after {
13147
- top: calc(0px - var(--ids-comp-tooltip-size-caret-size-dense) / 2);
13148
12654
  }
13149
12655
  .ids-tooltip.ids-tooltip-dense.ids-tooltip-position-south {
13150
12656
  padding-top: calc(var(--ids-comp-tooltip-size-caret-size-dense)/1.4142135624);
13151
12657
  }
13152
- .ids-tooltip.ids-tooltip-dense.ids-tooltip-position-south > .ids-tooltip__content::after {
13153
- top: calc(0px - var(--ids-comp-tooltip-size-caret-size-dense) / 2);
13154
- }
13155
12658
  .ids-tooltip.ids-tooltip-dense.ids-tooltip-position-southwest {
13156
12659
  padding-top: calc(var(--ids-comp-tooltip-size-caret-size-dense)/1.4142135624);
13157
- margin-left: calc(10px + var(--ids-comp-tooltip-size-caret-size-dense)/1.4142135624);
13158
- }
13159
- .ids-tooltip.ids-tooltip-dense.ids-tooltip-position-southwest > .ids-tooltip__content::after {
13160
- top: calc(0px - var(--ids-comp-tooltip-size-caret-size-dense) / 2);
13161
12660
  }
13162
12661
  .ids-tooltip.ids-tooltip-dense.ids-tooltip-position-west {
13163
12662
  padding-right: calc(var(--ids-comp-tooltip-size-caret-size-dense) / 1.4142135624);
13164
12663
  }
13165
- .ids-tooltip.ids-tooltip-dense.ids-tooltip-position-west > .ids-tooltip__content::after {
13166
- right: calc(0px - var(--ids-comp-tooltip-size-caret-size-dense) / 2);
13167
- }
13168
12664
  .ids-tooltip.ids-tooltip-dense.ids-tooltip-position-northwest {
13169
12665
  padding-bottom: calc(var(--ids-comp-tooltip-size-caret-size-dense)/1.4142135624);
13170
- margin-left: calc(10px + var(--ids-comp-tooltip-size-caret-size-dense)/1.4142135624);
13171
- }
13172
- .ids-tooltip.ids-tooltip-dense.ids-tooltip-position-northwest > .ids-tooltip__content::after {
13173
- bottom: calc(0px - var(--ids-comp-tooltip-size-caret-size-dense) / 2);
13174
12666
  }
13175
12667
  .ids-tooltip.ids-tooltip-light > .ids-tooltip__content {
13176
12668
  background-color: var(--ids-comp-tooltip-color-bg-light-default);
13177
12669
  color: var(--ids-comp-tooltip-color-fg-light-default);
13178
12670
  }
13179
- .ids-tooltip.ids-tooltip-light > .ids-tooltip__content::after {
13180
- background: var(--ids-comp-tooltip-color-bg-light-default);
13181
- }
13182
12671
  .ids-tooltip.ids-tooltip-dark > .ids-tooltip__content {
13183
12672
  background-color: var(--ids-comp-tooltip-color-bg-dark-default);
13184
12673
  color: var(--ids-comp-tooltip-color-fg-dark-default);
13185
12674
  }
13186
- .ids-tooltip.ids-tooltip-dark > .ids-tooltip__content::after {
13187
- background: var(--ids-comp-tooltip-color-bg-dark-default);
12675
+ .ids-tooltip.ids-tooltip-text-align-center > .ids-tooltip__content {
12676
+ text-align: center;
12677
+ }
12678
+ .ids-tooltip.ids-tooltip-text-align-right > .ids-tooltip__content {
12679
+ text-align: right;
13188
12680
  }
13189
- .ids-tooltip.ids-tooltip-position-north, .ids-tooltip.ids-tooltip-position-south {
12681
+ .ids-tooltip.ids-tooltip-text-align-left > .ids-tooltip__content {
12682
+ text-align: left;
12683
+ }
12684
+ .ids-tooltip.ids-tooltip-text-align-auto.ids-tooltip-position-north, .ids-tooltip.ids-tooltip-text-align-auto.ids-tooltip-position-south {
13190
12685
  text-align: center;
13191
12686
  }
13192
- .ids-tooltip.ids-tooltip-position-north > .ids-tooltip__content::after, .ids-tooltip.ids-tooltip-position-south > .ids-tooltip__content::after {
12687
+ .ids-tooltip.ids-tooltip-text-align-auto.ids-tooltip-position-east, .ids-tooltip.ids-tooltip-text-align-auto.ids-tooltip-position-northeast, .ids-tooltip.ids-tooltip-text-align-auto.ids-tooltip-position-southeast {
12688
+ text-align: left;
12689
+ }
12690
+ .ids-tooltip.ids-tooltip-text-align-auto.ids-tooltip-position-west .ids-tooltip.ids-tooltip-text-align-auto.ids-tooltip-position-northwest, .ids-tooltip.ids-tooltip-text-align-auto.ids-tooltip-position-southwest {
12691
+ text-align: right;
12692
+ }
12693
+ .ids-tooltip.ids-tooltip-pointered > .ids-tooltip__content::after {
12694
+ position: absolute;
12695
+ content: " ";
12696
+ transform: rotate(-45deg);
12697
+ }
12698
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-position-north > .ids-tooltip__content::after, .ids-tooltip.ids-tooltip-pointered.ids-tooltip-position-south > .ids-tooltip__content::after {
13193
12699
  left: auto;
13194
12700
  right: auto;
13195
12701
  }
13196
- .ids-tooltip.ids-tooltip-position-east > .ids-tooltip__content::after, .ids-tooltip.ids-tooltip-position-west > .ids-tooltip__content::after {
12702
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-position-east > .ids-tooltip__content::after, .ids-tooltip.ids-tooltip-pointered.ids-tooltip-position-west > .ids-tooltip__content::after {
13197
12703
  top: auto;
13198
12704
  bottom: auto;
13199
12705
  }
13200
- .ids-tooltip.ids-tooltip-position-northeast, .ids-tooltip.ids-tooltip-position-southeast {
13201
- text-align: left;
13202
- }
13203
- .ids-tooltip.ids-tooltip-position-northeast > .ids-tooltip__content::after, .ids-tooltip.ids-tooltip-position-southeast > .ids-tooltip__content::after {
12706
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-position-northeast > .ids-tooltip__content::after, .ids-tooltip.ids-tooltip-pointered.ids-tooltip-position-southeast > .ids-tooltip__content::after {
13204
12707
  left: 10px;
13205
12708
  }
13206
- .ids-tooltip.ids-tooltip-position-northwest, .ids-tooltip.ids-tooltip-position-southwest {
13207
- text-align: right;
13208
- }
13209
- .ids-tooltip.ids-tooltip-position-northwest > .ids-tooltip__content::after, .ids-tooltip.ids-tooltip-position-southwest > .ids-tooltip__content::after {
12709
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-position-northwest > .ids-tooltip__content::after, .ids-tooltip.ids-tooltip-pointered.ids-tooltip-position-southwest > .ids-tooltip__content::after {
13210
12710
  right: 10px;
13211
12711
  }
13212
- .ids-tooltip.ids-tooltip-position-east {
13213
- text-align: left;
12712
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-compact > .ids-tooltip__content::after {
12713
+ width: var(--ids-comp-tooltip-size-caret-size-compact);
12714
+ height: var(--ids-comp-tooltip-size-caret-size-compact);
13214
12715
  }
13215
- .ids-tooltip.ids-tooltip-position-west {
13216
- text-align: right;
12716
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-compact.ids-tooltip-position-north > .ids-tooltip__content::after {
12717
+ bottom: calc(0px - var(--ids-comp-tooltip-size-caret-size-compact) / 2);
13217
12718
  }
13218
- .ids-tooltip.ids-tooltip-text-align > .ids-tooltip__content-center {
13219
- text-align: center;
12719
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-compact.ids-tooltip-position-northeast {
12720
+ margin-left: calc(-10px - (var(--ids-comp-tooltip-size-caret-size-compact)/1.4142135624));
13220
12721
  }
13221
- .ids-tooltip.ids-tooltip-text-align > .ids-tooltip__content-right {
13222
- text-align: right;
12722
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-compact.ids-tooltip-position-northeast > .ids-tooltip__content::after {
12723
+ bottom: calc(0px - var(--ids-comp-tooltip-size-caret-size-compact) / 2);
13223
12724
  }
13224
- .ids-tooltip.ids-tooltip-text-align > .ids-tooltip__content-left {
13225
- text-align: left;
12725
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-compact.ids-tooltip-position-east > .ids-tooltip__content::after {
12726
+ left: calc(0px - var(--ids-comp-tooltip-size-caret-size-compact) / 2);
12727
+ }
12728
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-compact.ids-tooltip-position-southeast {
12729
+ margin-left: calc(-10px - var(--ids-comp-tooltip-size-caret-size-compact)/1.4142135624);
12730
+ }
12731
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-compact.ids-tooltip-position-southeast > .ids-tooltip__content::after {
12732
+ top: calc(0px - var(--ids-comp-tooltip-size-caret-size-compact) / 2);
12733
+ }
12734
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-compact.ids-tooltip-position-south > .ids-tooltip__content::after {
12735
+ top: calc(0px - var(--ids-comp-tooltip-size-caret-size-compact) / 2);
12736
+ }
12737
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-compact.ids-tooltip-position-southwest {
12738
+ margin-right: calc(-10px - var(--ids-comp-tooltip-size-caret-size-compact)/1.4142135624);
12739
+ }
12740
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-compact.ids-tooltip-position-southwest > .ids-tooltip__content::after {
12741
+ top: calc(0px - var(--ids-comp-tooltip-size-caret-size-compact) / 2);
12742
+ }
12743
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-compact.ids-tooltip-position-west {
12744
+ padding-right: calc(var(--ids-comp-tooltip-size-caret-size-compact) / 1.4142135624);
12745
+ }
12746
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-compact.ids-tooltip-position-west > .ids-tooltip__content::after {
12747
+ right: calc(0px - var(--ids-comp-tooltip-size-caret-size-compact) / 2);
12748
+ }
12749
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-compact.ids-tooltip-position-northwest {
12750
+ margin-right: calc(-10px - var(--ids-comp-tooltip-size-caret-size-compact)/1.4142135624);
12751
+ }
12752
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-compact.ids-tooltip-position-northwest > .ids-tooltip__content::after {
12753
+ bottom: calc(0px - var(--ids-comp-tooltip-size-caret-size-compact) / 2);
12754
+ }
12755
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-comfortable > .ids-tooltip__content::after {
12756
+ width: var(--ids-comp-tooltip-size-caret-size-comfortable);
12757
+ height: var(--ids-comp-tooltip-size-caret-size-comfortable);
12758
+ }
12759
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-comfortable.ids-tooltip-position-north > .ids-tooltip__content::after {
12760
+ bottom: calc(0px - var(--ids-comp-tooltip-size-caret-size-comfortable) / 2);
12761
+ }
12762
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-comfortable.ids-tooltip-position-northeast {
12763
+ margin-left: calc(-10px - (var(--ids-comp-tooltip-size-caret-size-comfortable)/1.4142135624));
12764
+ }
12765
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-comfortable.ids-tooltip-position-northeast > .ids-tooltip__content::after {
12766
+ bottom: calc(0px - var(--ids-comp-tooltip-size-caret-size-comfortable) / 2);
12767
+ }
12768
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-comfortable.ids-tooltip-position-east > .ids-tooltip__content::after {
12769
+ left: calc(0px - var(--ids-comp-tooltip-size-caret-size-comfortable) / 2);
12770
+ }
12771
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-comfortable.ids-tooltip-position-southeast {
12772
+ margin-left: calc(-10px - var(--ids-comp-tooltip-size-caret-size-comfortable)/1.4142135624);
12773
+ }
12774
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-comfortable.ids-tooltip-position-southeast > .ids-tooltip__content::after {
12775
+ top: calc(0px - var(--ids-comp-tooltip-size-caret-size-comfortable) / 2);
12776
+ }
12777
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-comfortable.ids-tooltip-position-south > .ids-tooltip__content::after {
12778
+ top: calc(0px - var(--ids-comp-tooltip-size-caret-size-comfortable) / 2);
12779
+ }
12780
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-comfortable.ids-tooltip-position-southwest {
12781
+ margin-right: calc(-10px - var(--ids-comp-tooltip-size-caret-size-comfortable)/1.4142135624);
12782
+ }
12783
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-comfortable.ids-tooltip-position-southwest > .ids-tooltip__content::after {
12784
+ top: calc(0px - var(--ids-comp-tooltip-size-caret-size-comfortable) / 2);
12785
+ }
12786
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-comfortable.ids-tooltip-position-west {
12787
+ padding-right: calc(var(--ids-comp-tooltip-size-caret-size-comfortable) / 1.4142135624);
12788
+ }
12789
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-comfortable.ids-tooltip-position-west > .ids-tooltip__content::after {
12790
+ right: calc(0px - var(--ids-comp-tooltip-size-caret-size-comfortable) / 2);
12791
+ }
12792
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-comfortable.ids-tooltip-position-northwest {
12793
+ margin-right: calc(-10px - var(--ids-comp-tooltip-size-caret-size-comfortable)/1.4142135624);
12794
+ }
12795
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-comfortable.ids-tooltip-position-northwest > .ids-tooltip__content::after {
12796
+ bottom: calc(0px - var(--ids-comp-tooltip-size-caret-size-comfortable) / 2);
12797
+ }
12798
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-spacious > .ids-tooltip__content::after {
12799
+ width: var(--ids-comp-tooltip-size-caret-size-spacious);
12800
+ height: var(--ids-comp-tooltip-size-caret-size-spacious);
12801
+ }
12802
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-spacious.ids-tooltip-position-north > .ids-tooltip__content::after {
12803
+ bottom: calc(0px - var(--ids-comp-tooltip-size-caret-size-spacious) / 2);
12804
+ }
12805
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-spacious.ids-tooltip-position-northeast {
12806
+ margin-left: calc(-10px - (var(--ids-comp-tooltip-size-caret-size-spacious)/1.4142135624));
12807
+ }
12808
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-spacious.ids-tooltip-position-northeast > .ids-tooltip__content::after {
12809
+ bottom: calc(0px - var(--ids-comp-tooltip-size-caret-size-spacious) / 2);
12810
+ }
12811
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-spacious.ids-tooltip-position-east > .ids-tooltip__content::after {
12812
+ left: calc(0px - var(--ids-comp-tooltip-size-caret-size-spacious) / 2);
12813
+ }
12814
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-spacious.ids-tooltip-position-southeast {
12815
+ margin-left: calc(-10px - var(--ids-comp-tooltip-size-caret-size-spacious)/1.4142135624);
12816
+ }
12817
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-spacious.ids-tooltip-position-southeast > .ids-tooltip__content::after {
12818
+ top: calc(0px - var(--ids-comp-tooltip-size-caret-size-spacious) / 2);
12819
+ }
12820
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-spacious.ids-tooltip-position-south > .ids-tooltip__content::after {
12821
+ top: calc(0px - var(--ids-comp-tooltip-size-caret-size-spacious) / 2);
12822
+ }
12823
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-spacious.ids-tooltip-position-southwest {
12824
+ margin-right: calc(-10px - var(--ids-comp-tooltip-size-caret-size-spacious)/1.4142135624);
12825
+ }
12826
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-spacious.ids-tooltip-position-southwest > .ids-tooltip__content::after {
12827
+ top: calc(0px - var(--ids-comp-tooltip-size-caret-size-spacious) / 2);
12828
+ }
12829
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-spacious.ids-tooltip-position-west {
12830
+ padding-right: calc(var(--ids-comp-tooltip-size-caret-size-spacious) / 1.4142135624);
12831
+ }
12832
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-spacious.ids-tooltip-position-west > .ids-tooltip__content::after {
12833
+ right: calc(0px - var(--ids-comp-tooltip-size-caret-size-spacious) / 2);
12834
+ }
12835
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-spacious.ids-tooltip-position-northwest {
12836
+ margin-right: calc(-10px - var(--ids-comp-tooltip-size-caret-size-spacious)/1.4142135624);
12837
+ }
12838
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-spacious.ids-tooltip-position-northwest > .ids-tooltip__content::after {
12839
+ bottom: calc(0px - var(--ids-comp-tooltip-size-caret-size-spacious) / 2);
12840
+ }
12841
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-dense > .ids-tooltip__content::after {
12842
+ width: var(--ids-comp-tooltip-size-caret-size-dense);
12843
+ height: var(--ids-comp-tooltip-size-caret-size-dense);
12844
+ }
12845
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-dense.ids-tooltip-position-north > .ids-tooltip__content::after {
12846
+ bottom: calc(0px - var(--ids-comp-tooltip-size-caret-size-dense) / 2);
12847
+ }
12848
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-dense.ids-tooltip-position-northeast {
12849
+ margin-left: calc(-10px - (var(--ids-comp-tooltip-size-caret-size-dense)/1.4142135624));
12850
+ }
12851
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-dense.ids-tooltip-position-northeast > .ids-tooltip__content::after {
12852
+ bottom: calc(0px - var(--ids-comp-tooltip-size-caret-size-dense) / 2);
12853
+ }
12854
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-dense.ids-tooltip-position-east > .ids-tooltip__content::after {
12855
+ left: calc(0px - var(--ids-comp-tooltip-size-caret-size-dense) / 2);
12856
+ }
12857
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-dense.ids-tooltip-position-southeast {
12858
+ margin-left: calc(-10px - var(--ids-comp-tooltip-size-caret-size-dense)/1.4142135624);
12859
+ }
12860
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-dense.ids-tooltip-position-southeast > .ids-tooltip__content::after {
12861
+ top: calc(0px - var(--ids-comp-tooltip-size-caret-size-dense) / 2);
12862
+ }
12863
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-dense.ids-tooltip-position-south > .ids-tooltip__content::after {
12864
+ top: calc(0px - var(--ids-comp-tooltip-size-caret-size-dense) / 2);
12865
+ }
12866
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-dense.ids-tooltip-position-southwest {
12867
+ margin-right: calc(-10px - var(--ids-comp-tooltip-size-caret-size-dense)/1.4142135624);
12868
+ }
12869
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-dense.ids-tooltip-position-southwest > .ids-tooltip__content::after {
12870
+ top: calc(0px - var(--ids-comp-tooltip-size-caret-size-dense) / 2);
12871
+ }
12872
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-dense.ids-tooltip-position-west {
12873
+ padding-right: calc(var(--ids-comp-tooltip-size-caret-size-dense) / 1.4142135624);
12874
+ }
12875
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-dense.ids-tooltip-position-west > .ids-tooltip__content::after {
12876
+ right: calc(0px - var(--ids-comp-tooltip-size-caret-size-dense) / 2);
12877
+ }
12878
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-dense.ids-tooltip-position-northwest {
12879
+ margin-right: calc(-10px - var(--ids-comp-tooltip-size-caret-size-dense)/1.4142135624);
12880
+ }
12881
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-dense.ids-tooltip-position-northwest > .ids-tooltip__content::after {
12882
+ bottom: calc(0px - var(--ids-comp-tooltip-size-caret-size-dense) / 2);
12883
+ }
12884
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-light > .ids-tooltip__content::after {
12885
+ background: var(--ids-comp-tooltip-color-bg-light-default);
12886
+ }
12887
+ .ids-tooltip.ids-tooltip-pointered.ids-tooltip-dark > .ids-tooltip__content::after {
12888
+ background: var(--ids-comp-tooltip-color-bg-dark-default);
13226
12889
  }