@i-cell/ids-styles 0.0.58 → 0.0.59

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/components.css +95 -95
  2. package/dist/components.min.css +1 -1
  3. package/dist/components.plugin.js +226 -208
  4. package/dist/paginator/paginator.css +20 -20
  5. package/dist/paginator/paginator.min.css +1 -1
  6. package/dist/paginator/paginator.plugin.js +20 -20
  7. package/dist/segmented-control-toggle/segmented-control-toggle.css +75 -75
  8. package/dist/segmented-control-toggle/segmented-control-toggle.min.css +1 -1
  9. package/dist/segmented-control-toggle/segmented-control-toggle.plugin.js +206 -188
  10. package/package.json +1 -1
package/dist/components.css CHANGED
@@ -9847,19 +9847,19 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9847
9847
  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-primary-default);
9848
9848
  }
9849
9849
  .ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow.active:not(:disabled) {
9850
- color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-primary-default);
9850
+ color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-primary-active);
9851
9851
  }
9852
9852
  .ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:focus, .ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:focus-visible {
9853
- color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-primary-default);
9853
+ color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-primary-focused);
9854
9854
  }
9855
9855
  .ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:hover {
9856
- color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-primary-default);
9856
+ color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-primary-hovered);
9857
9857
  }
9858
9858
  .ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:active {
9859
- color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-primary-default);
9859
+ color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-primary-pressed);
9860
9860
  }
9861
9861
  .ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:disabled {
9862
- color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-primary-default);
9862
+ color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-primary-disabled);
9863
9863
  }
9864
9864
  .ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-truncation {
9865
9865
  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-primary-disabled);
@@ -9898,19 +9898,19 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9898
9898
  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-secondary-default);
9899
9899
  }
9900
9900
  .ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow.active:not(:disabled) {
9901
- color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-secondary-default);
9901
+ color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-secondary-active);
9902
9902
  }
9903
9903
  .ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:focus, .ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:focus-visible {
9904
- color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-secondary-default);
9904
+ color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-secondary-focused);
9905
9905
  }
9906
9906
  .ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:hover {
9907
- color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-secondary-default);
9907
+ color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-secondary-hovered);
9908
9908
  }
9909
9909
  .ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:active {
9910
- color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-secondary-default);
9910
+ color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-secondary-pressed);
9911
9911
  }
9912
9912
  .ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:disabled {
9913
- color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-secondary-default);
9913
+ color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-secondary-disabled);
9914
9914
  }
9915
9915
  .ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-truncation {
9916
9916
  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-secondary-disabled);
@@ -9949,19 +9949,19 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9949
9949
  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-light-default);
9950
9950
  }
9951
9951
  .ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow.active:not(:disabled) {
9952
- color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-light-default);
9952
+ color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-light-active);
9953
9953
  }
9954
9954
  .ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:focus, .ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:focus-visible {
9955
- color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-light-default);
9955
+ color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-light-focused);
9956
9956
  }
9957
9957
  .ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:hover {
9958
- color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-light-default);
9958
+ color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-light-hovered);
9959
9959
  }
9960
9960
  .ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:active {
9961
- color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-light-default);
9961
+ color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-light-pressed);
9962
9962
  }
9963
9963
  .ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:disabled {
9964
- color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-light-default);
9964
+ color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-light-disabled);
9965
9965
  }
9966
9966
  .ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-truncation {
9967
9967
  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-light-disabled);
@@ -10000,19 +10000,19 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
10000
10000
  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-surface-default);
10001
10001
  }
10002
10002
  .ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow.active:not(:disabled) {
10003
- color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-surface-default);
10003
+ color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-surface-active);
10004
10004
  }
10005
10005
  .ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:focus, .ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:focus-visible {
10006
- color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-surface-default);
10006
+ color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-surface-focused);
10007
10007
  }
10008
10008
  .ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:hover {
10009
- color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-surface-default);
10009
+ color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-surface-hovered);
10010
10010
  }
10011
10011
  .ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:active {
10012
- color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-surface-default);
10012
+ color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-surface-pressed);
10013
10013
  }
10014
10014
  .ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:disabled {
10015
- color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-surface-default);
10015
+ color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-surface-disabled);
10016
10016
  }
10017
10017
  .ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-truncation {
10018
10018
  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-surface-disabled);
@@ -11279,301 +11279,301 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
11279
11279
  .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined {
11280
11280
  background-color: var(--ids-comp-segmented-control-toggle-container-outlined-color-bg-light-default);
11281
11281
  }
11282
- .ids-segmented-control-toggle .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle .ids-segmented-control-toggle-item > button:focus-visible {
11282
+ .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 {
11283
11283
  outline-color: var(--ids-comp-segmented-control-toggle-focused-outline-color-dark-focused);
11284
11284
  }
11285
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button {
11285
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button {
11286
11286
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-default);
11287
11287
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-default);
11288
11288
  border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-default);
11289
11289
  }
11290
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button .ids-icon {
11290
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button .ids-icon {
11291
11291
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-default);
11292
11292
  }
11293
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
11293
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
11294
11294
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-active);
11295
11295
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-active);
11296
11296
  border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-active);
11297
11297
  }
11298
- .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 {
11298
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon {
11299
11299
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-active);
11300
11300
  }
11301
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:hover {
11301
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:hover {
11302
11302
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-hovered);
11303
11303
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-hovered);
11304
11304
  border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-hovered);
11305
11305
  }
11306
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:hover .ids-icon {
11306
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:hover .ids-icon {
11307
11307
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-hovered);
11308
11308
  }
11309
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:active {
11309
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:active {
11310
11310
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-pressed);
11311
11311
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-pressed);
11312
11312
  border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-pressed);
11313
11313
  }
11314
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:active .ids-icon {
11314
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:active .ids-icon {
11315
11315
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-pressed);
11316
11316
  }
11317
- .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 {
11317
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:focus-visible {
11318
11318
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-focused);
11319
11319
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-focused);
11320
11320
  border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-focused);
11321
11321
  }
11322
- .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 {
11322
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:focus-visible .ids-icon {
11323
11323
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-focused);
11324
11324
  }
11325
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:disabled {
11325
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:disabled {
11326
11326
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-disabled);
11327
11327
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-disabled);
11328
11328
  border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-disabled);
11329
11329
  }
11330
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:disabled .ids-icon {
11330
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:disabled .ids-icon {
11331
11331
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-disabled);
11332
11332
  }
11333
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button {
11333
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button {
11334
11334
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-default);
11335
11335
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-default);
11336
11336
  border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-default);
11337
11337
  }
11338
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button .ids-icon {
11338
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button .ids-icon {
11339
11339
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-default);
11340
11340
  }
11341
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
11341
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
11342
11342
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-active);
11343
11343
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-active);
11344
11344
  border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-active);
11345
11345
  }
11346
- .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 {
11346
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon {
11347
11347
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-active);
11348
11348
  }
11349
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:hover {
11349
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:hover {
11350
11350
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-hovered);
11351
11351
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-hovered);
11352
11352
  border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-hovered);
11353
11353
  }
11354
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:hover .ids-icon {
11354
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:hover .ids-icon {
11355
11355
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-hovered);
11356
11356
  }
11357
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:active {
11357
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:active {
11358
11358
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-pressed);
11359
11359
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-pressed);
11360
11360
  border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-pressed);
11361
11361
  }
11362
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:active .ids-icon {
11362
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:active .ids-icon {
11363
11363
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-pressed);
11364
11364
  }
11365
- .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 {
11365
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:focus-visible {
11366
11366
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-focused);
11367
11367
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-focused);
11368
11368
  border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-focused);
11369
11369
  }
11370
- .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 {
11370
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:focus-visible .ids-icon {
11371
11371
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-focused);
11372
11372
  }
11373
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:disabled {
11373
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:disabled {
11374
11374
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-disabled);
11375
11375
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-disabled);
11376
11376
  border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-disabled);
11377
11377
  }
11378
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:disabled .ids-icon {
11378
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-primary.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:disabled .ids-icon {
11379
11379
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-disabled);
11380
11380
  }
11381
- .ids-segmented-control-toggle .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle .ids-segmented-control-toggle-item > button:focus-visible {
11381
+ .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 {
11382
11382
  outline-color: var(--ids-comp-segmented-control-toggle-focused-outline-color-dark-focused);
11383
11383
  }
11384
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button {
11384
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button {
11385
11385
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-default);
11386
11386
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-default);
11387
11387
  border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-default);
11388
11388
  }
11389
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button .ids-icon {
11389
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button .ids-icon {
11390
11390
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-default);
11391
11391
  }
11392
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
11392
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
11393
11393
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-active);
11394
11394
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-active);
11395
11395
  border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-active);
11396
11396
  }
11397
- .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 {
11397
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon {
11398
11398
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-active);
11399
11399
  }
11400
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:hover {
11400
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:hover {
11401
11401
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-hovered);
11402
11402
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-hovered);
11403
11403
  border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-hovered);
11404
11404
  }
11405
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:hover .ids-icon {
11405
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:hover .ids-icon {
11406
11406
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-hovered);
11407
11407
  }
11408
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:active {
11408
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:active {
11409
11409
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-pressed);
11410
11410
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-pressed);
11411
11411
  border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-pressed);
11412
11412
  }
11413
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:active .ids-icon {
11413
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:active .ids-icon {
11414
11414
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-pressed);
11415
11415
  }
11416
- .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 {
11416
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:focus-visible {
11417
11417
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-focused);
11418
11418
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-focused);
11419
11419
  border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-focused);
11420
11420
  }
11421
- .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 {
11421
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:focus-visible .ids-icon {
11422
11422
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-focused);
11423
11423
  }
11424
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:disabled {
11424
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:disabled {
11425
11425
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-disabled);
11426
11426
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-disabled);
11427
11427
  border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-disabled);
11428
11428
  }
11429
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:disabled .ids-icon {
11429
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:disabled .ids-icon {
11430
11430
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-disabled);
11431
11431
  }
11432
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button {
11432
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button {
11433
11433
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-default);
11434
11434
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-default);
11435
11435
  border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-default);
11436
11436
  }
11437
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button .ids-icon {
11437
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button .ids-icon {
11438
11438
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-default);
11439
11439
  }
11440
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
11440
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
11441
11441
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-active);
11442
11442
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-active);
11443
11443
  border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-active);
11444
11444
  }
11445
- .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 {
11445
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon {
11446
11446
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-active);
11447
11447
  }
11448
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:hover {
11448
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:hover {
11449
11449
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-hovered);
11450
11450
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-hovered);
11451
11451
  border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-hovered);
11452
11452
  }
11453
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:hover .ids-icon {
11453
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:hover .ids-icon {
11454
11454
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-hovered);
11455
11455
  }
11456
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:active {
11456
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:active {
11457
11457
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-pressed);
11458
11458
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-pressed);
11459
11459
  border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-pressed);
11460
11460
  }
11461
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:active .ids-icon {
11461
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:active .ids-icon {
11462
11462
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-pressed);
11463
11463
  }
11464
- .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 {
11464
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:focus-visible {
11465
11465
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-focused);
11466
11466
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-focused);
11467
11467
  border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-focused);
11468
11468
  }
11469
- .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 {
11469
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:focus-visible .ids-icon {
11470
11470
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-focused);
11471
11471
  }
11472
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:disabled {
11472
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:disabled {
11473
11473
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-disabled);
11474
11474
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-disabled);
11475
11475
  border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-disabled);
11476
11476
  }
11477
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:disabled .ids-icon {
11477
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:disabled .ids-icon {
11478
11478
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-disabled);
11479
11479
  }
11480
- .ids-segmented-control-toggle .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle .ids-segmented-control-toggle-item > button:focus-visible {
11480
+ .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 {
11481
11481
  outline-color: var(--ids-comp-segmented-control-toggle-focused-outline-color-light-focused);
11482
11482
  }
11483
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button {
11483
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button {
11484
11484
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-default);
11485
11485
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-default);
11486
11486
  border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-default);
11487
11487
  }
11488
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button .ids-icon {
11488
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button .ids-icon {
11489
11489
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-default);
11490
11490
  }
11491
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
11491
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
11492
11492
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-active);
11493
11493
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-active);
11494
11494
  border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-active);
11495
11495
  }
11496
- .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 {
11496
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon {
11497
11497
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-active);
11498
11498
  }
11499
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:hover {
11499
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:hover {
11500
11500
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-hovered);
11501
11501
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-hovered);
11502
11502
  border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-hovered);
11503
11503
  }
11504
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:hover .ids-icon {
11504
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:hover .ids-icon {
11505
11505
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-hovered);
11506
11506
  }
11507
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:active {
11507
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:active {
11508
11508
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-pressed);
11509
11509
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-pressed);
11510
11510
  border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-pressed);
11511
11511
  }
11512
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:active .ids-icon {
11512
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:active .ids-icon {
11513
11513
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-pressed);
11514
11514
  }
11515
- .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 {
11515
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:focus-visible {
11516
11516
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-focused);
11517
11517
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-focused);
11518
11518
  border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-focused);
11519
11519
  }
11520
- .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 {
11520
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:focus-visible .ids-icon {
11521
11521
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-focused);
11522
11522
  }
11523
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:disabled {
11523
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:disabled {
11524
11524
  background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-disabled);
11525
11525
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-disabled);
11526
11526
  border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-disabled);
11527
11527
  }
11528
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:disabled .ids-icon {
11528
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:disabled .ids-icon {
11529
11529
  color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-disabled);
11530
11530
  }
11531
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button {
11531
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button {
11532
11532
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-default);
11533
11533
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-default);
11534
11534
  border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-default);
11535
11535
  }
11536
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button .ids-icon {
11536
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button .ids-icon {
11537
11537
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-default);
11538
11538
  }
11539
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
11539
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
11540
11540
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-active);
11541
11541
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-active);
11542
11542
  border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-active);
11543
11543
  }
11544
- .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 {
11544
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon {
11545
11545
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-active);
11546
11546
  }
11547
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:hover {
11547
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:hover {
11548
11548
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-hovered);
11549
11549
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-hovered);
11550
11550
  border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-hovered);
11551
11551
  }
11552
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:hover .ids-icon {
11552
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:hover .ids-icon {
11553
11553
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-hovered);
11554
11554
  }
11555
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:active {
11555
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:active {
11556
11556
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-pressed);
11557
11557
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-pressed);
11558
11558
  border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-pressed);
11559
11559
  }
11560
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:active .ids-icon {
11560
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:active .ids-icon {
11561
11561
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-pressed);
11562
11562
  }
11563
- .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 {
11563
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:focus-visible {
11564
11564
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-focused);
11565
11565
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-focused);
11566
11566
  border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-focused);
11567
11567
  }
11568
- .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 {
11568
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:focus-visible .ids-icon {
11569
11569
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-focused);
11570
11570
  }
11571
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:disabled {
11571
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:disabled {
11572
11572
  background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-disabled);
11573
11573
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-disabled);
11574
11574
  border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-disabled);
11575
11575
  }
11576
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:disabled .ids-icon {
11576
+ .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:disabled .ids-icon {
11577
11577
  color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-disabled);
11578
11578
  }
11579
11579