@i-cell/ids-styles 0.0.15-beta.9 → 0.0.16

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 (76) hide show
  1. package/dist/accordion/accordion.css +184 -45
  2. package/dist/accordion/accordion.min.css +1 -1
  3. package/dist/accordion/accordion.plugin.js +194 -55
  4. package/dist/avatar/avatar.css +176 -195
  5. package/dist/avatar/avatar.min.css +1 -1
  6. package/dist/avatar/avatar.plugin.js +168 -170
  7. package/dist/button/button.css +788 -656
  8. package/dist/button/button.min.css +1 -1
  9. package/dist/button/button.plugin.js +792 -693
  10. package/dist/card/card.css +61 -35
  11. package/dist/card/card.min.css +1 -1
  12. package/dist/card/card.plugin.js +181 -126
  13. package/dist/checkbox/checkbox.css +57 -29
  14. package/dist/checkbox/checkbox.min.css +1 -1
  15. package/dist/checkbox/checkbox.plugin.js +78 -53
  16. package/dist/checkbox/pseudo-checkbox.css +53 -25
  17. package/dist/checkbox/pseudo-checkbox.min.css +1 -1
  18. package/dist/checkbox/pseudo-checkbox.plugin.js +72 -43
  19. package/dist/components.css +2434 -1796
  20. package/dist/components.min.css +1 -1
  21. package/dist/components.plugin.js +2763 -2126
  22. package/dist/dialog/dialog.css +12 -1
  23. package/dist/dialog/dialog.min.css +1 -1
  24. package/dist/dialog/dialog.plugin.js +11 -4
  25. package/dist/divider/divider.css +0 -3
  26. package/dist/divider/divider.min.css +1 -1
  27. package/dist/divider/divider.plugin.js +1 -1
  28. package/dist/form-elements/form-field/form-field.css +84 -60
  29. package/dist/form-elements/form-field/form-field.min.css +1 -1
  30. package/dist/form-elements/form-field/form-field.plugin.js +84 -60
  31. package/dist/form-elements/message/message.css +21 -12
  32. package/dist/form-elements/message/message.min.css +1 -1
  33. package/dist/form-elements/message/message.plugin.js +21 -4
  34. package/dist/icon/icon.css +3 -2
  35. package/dist/icon/icon.min.css +1 -1
  36. package/dist/icon/icon.plugin.js +3 -2
  37. package/dist/icon-button/icon-button.css +133 -82
  38. package/dist/icon-button/icon-button.min.css +1 -1
  39. package/dist/icon-button/icon-button.plugin.js +256 -182
  40. package/dist/menu-item/menu-item.css +184 -0
  41. package/dist/menu-item/menu-item.min.css +1 -0
  42. package/dist/menu-item/menu-item.plugin.js +181 -0
  43. package/dist/option/option.css +13 -0
  44. package/dist/option/option.min.css +1 -1
  45. package/dist/option/option.plugin.js +13 -1
  46. package/dist/overlay-panel/overlay-panel.css +125 -0
  47. package/dist/overlay-panel/overlay-panel.min.css +1 -0
  48. package/dist/overlay-panel/overlay-panel.plugin.js +125 -0
  49. package/dist/paginator/paginator.css +133 -23
  50. package/dist/paginator/paginator.min.css +1 -1
  51. package/dist/paginator/paginator.plugin.js +113 -41
  52. package/dist/radio/radio.css +49 -49
  53. package/dist/radio/radio.min.css +1 -1
  54. package/dist/radio/radio.plugin.js +56 -61
  55. package/dist/segmented-control/segmented-control-toggle.css +37 -25
  56. package/dist/segmented-control/segmented-control-toggle.min.css +1 -1
  57. package/dist/segmented-control/segmented-control-toggle.plugin.js +46 -45
  58. package/dist/segmented-control/segmented-control.css +37 -25
  59. package/dist/segmented-control/segmented-control.min.css +1 -1
  60. package/dist/segmented-control/segmented-control.plugin.js +87 -75
  61. package/dist/snackbar/snackbar.css +12 -0
  62. package/dist/snackbar/snackbar.min.css +1 -1
  63. package/dist/snackbar/snackbar.plugin.js +28 -4
  64. package/dist/switch/switch.css +44 -56
  65. package/dist/switch/switch.min.css +1 -1
  66. package/dist/switch/switch.plugin.js +55 -74
  67. package/dist/tag/tag.css +230 -199
  68. package/dist/tag/tag.min.css +1 -1
  69. package/dist/tag/tag.plugin.js +228 -195
  70. package/package.json +4 -4
  71. package/dist/action-item/action-item.css +0 -185
  72. package/dist/action-item/action-item.min.css +0 -1
  73. package/dist/action-item/action-item.plugin.js +0 -176
  74. package/dist/action-panel/action-panel.css +0 -91
  75. package/dist/action-panel/action-panel.min.css +0 -1
  76. package/dist/action-panel/action-panel.plugin.js +0 -91
package/dist/segmented-control/segmented-control.css CHANGED
@@ -11,7 +11,7 @@
11
11
  position: relative;
12
12
  text-wrap: nowrap;
13
13
  }
14
- .ids-segmented-control .ids-segmented-control-item > button:focus {
14
+ .ids-segmented-control .ids-segmented-control-item > button:focus, .ids-segmented-control .ids-segmented-control-item > button:focus-visible {
15
15
  z-index: 1;
16
16
  outline-style: solid;
17
17
  outline-offset: 2px;
@@ -40,7 +40,7 @@
40
40
  letter-spacing: var(--ids-comp-segmented-control-button-typography-letter-spacing-compact);
41
41
  line-height: var(--ids-comp-segmented-control-button-typography-line-height-compact);
42
42
  }
43
- .ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item > button:focus {
43
+ .ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item > button:focus, .ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item > button:focus-visible {
44
44
  outline-width: var(--ids-comp-segmented-control-focused-outline-size-outline-width-compact);
45
45
  }
46
46
  .ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item:first-of-type > button {
@@ -57,6 +57,9 @@
57
57
  .ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item .ids-icon {
58
58
  height: var(--ids-comp-segmented-control-button-size-icon-compact);
59
59
  width: var(--ids-comp-segmented-control-button-size-icon-compact);
60
+ font-size: var(--ids-comp-segmented-control-button-icon-typography-font-size-compact);
61
+ font-weight: var(--ids-comp-segmented-control-button-icon-typography-font-weight-compact);
62
+ line-height: var(--ids-comp-segmented-control-button-icon-typography-line-height-compact);
60
63
  }
61
64
  .ids-segmented-control.ids-segmented-control-comfortable {
62
65
  padding: var(--ids-comp-segmented-control-container-size-padding-y-comfortable) var(--ids-comp-segmented-control-container-size-padding-x-comfortable);
@@ -76,7 +79,7 @@
76
79
  letter-spacing: var(--ids-comp-segmented-control-button-typography-letter-spacing-comfortable);
77
80
  line-height: var(--ids-comp-segmented-control-button-typography-line-height-comfortable);
78
81
  }
79
- .ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item > button:focus {
82
+ .ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item > button:focus, .ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item > button:focus-visible {
80
83
  outline-width: var(--ids-comp-segmented-control-focused-outline-size-outline-width-comfortable);
81
84
  }
82
85
  .ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item:first-of-type > button {
@@ -93,6 +96,9 @@
93
96
  .ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item .ids-icon {
94
97
  height: var(--ids-comp-segmented-control-button-size-icon-comfortable);
95
98
  width: var(--ids-comp-segmented-control-button-size-icon-comfortable);
99
+ font-size: var(--ids-comp-segmented-control-button-icon-typography-font-size-comfortable);
100
+ font-weight: var(--ids-comp-segmented-control-button-icon-typography-font-weight-comfortable);
101
+ line-height: var(--ids-comp-segmented-control-button-icon-typography-line-height-comfortable);
96
102
  }
97
103
  .ids-segmented-control.ids-segmented-control-spacious {
98
104
  padding: var(--ids-comp-segmented-control-container-size-padding-y-spacious) var(--ids-comp-segmented-control-container-size-padding-x-spacious);
@@ -112,7 +118,7 @@
112
118
  letter-spacing: var(--ids-comp-segmented-control-button-typography-letter-spacing-spacious);
113
119
  line-height: var(--ids-comp-segmented-control-button-typography-line-height-spacious);
114
120
  }
115
- .ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item > button:focus {
121
+ .ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item > button:focus, .ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item > button:focus-visible {
116
122
  outline-width: var(--ids-comp-segmented-control-focused-outline-size-outline-width-spacious);
117
123
  }
118
124
  .ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item:first-of-type > button {
@@ -129,6 +135,9 @@
129
135
  .ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item .ids-icon {
130
136
  height: var(--ids-comp-segmented-control-button-size-icon-spacious);
131
137
  width: var(--ids-comp-segmented-control-button-size-icon-spacious);
138
+ font-size: var(--ids-comp-segmented-control-button-icon-typography-font-size-spacious);
139
+ font-weight: var(--ids-comp-segmented-control-button-icon-typography-font-weight-spacious);
140
+ line-height: var(--ids-comp-segmented-control-button-icon-typography-line-height-spacious);
132
141
  }
133
142
  .ids-segmented-control.ids-segmented-control-dense {
134
143
  padding: var(--ids-comp-segmented-control-container-size-padding-y-dense) var(--ids-comp-segmented-control-container-size-padding-x-dense);
@@ -148,7 +157,7 @@
148
157
  letter-spacing: var(--ids-comp-segmented-control-button-typography-letter-spacing-dense);
149
158
  line-height: var(--ids-comp-segmented-control-button-typography-line-height-dense);
150
159
  }
151
- .ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item > button:focus {
160
+ .ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item > button:focus, .ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item > button:focus-visible {
152
161
  outline-width: var(--ids-comp-segmented-control-focused-outline-size-outline-width-dense);
153
162
  }
154
163
  .ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item:first-of-type > button {
@@ -165,8 +174,11 @@
165
174
  .ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item .ids-icon {
166
175
  height: var(--ids-comp-segmented-control-button-size-icon-dense);
167
176
  width: var(--ids-comp-segmented-control-button-size-icon-dense);
177
+ font-size: var(--ids-comp-segmented-control-button-icon-typography-font-size-dense);
178
+ font-weight: var(--ids-comp-segmented-control-button-icon-typography-font-weight-dense);
179
+ line-height: var(--ids-comp-segmented-control-button-icon-typography-line-height-dense);
168
180
  }
169
- .ids-segmented-control.ids-segmented-control-primary .ids-segmented-control-item > button:focus {
181
+ .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 {
170
182
  outline-color: var(--ids-comp-segmented-control-focused-outline-color-dark-focused);
171
183
  }
172
184
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled {
@@ -205,12 +217,12 @@
205
217
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:active .ids-icon {
206
218
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-pressed);
207
219
  }
208
- .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:focus {
220
+ .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 {
209
221
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-primary-focused);
210
222
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-focused);
211
223
  border-color: var(--ids-comp-segmented-control-button-filled-color-border-primary-focused);
212
224
  }
213
- .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:focus .ids-icon {
225
+ .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 {
214
226
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-focused);
215
227
  }
216
228
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:disabled {
@@ -257,12 +269,12 @@
257
269
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button:active .ids-icon {
258
270
  color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-primary-pressed);
259
271
  }
260
- .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button:focus {
272
+ .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button:focus, .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button:focus-visible {
261
273
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-primary-focused);
262
274
  color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-primary-focused);
263
275
  border-color: var(--ids-comp-segmented-control-button-outlined-color-border-primary-focused);
264
276
  }
265
- .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button:focus .ids-icon {
277
+ .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button:focus .ids-icon, .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button:focus-visible .ids-icon {
266
278
  color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-primary-focused);
267
279
  }
268
280
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled {
@@ -273,7 +285,7 @@
273
285
  .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled .ids-icon {
274
286
  color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-primary-disabled);
275
287
  }
276
- .ids-segmented-control.ids-segmented-control-surface .ids-segmented-control-item > button:focus {
288
+ .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 {
277
289
  outline-color: var(--ids-comp-segmented-control-focused-outline-color-dark-focused);
278
290
  }
279
291
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled {
@@ -312,12 +324,12 @@
312
324
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:active .ids-icon {
313
325
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-pressed);
314
326
  }
315
- .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:focus {
327
+ .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 {
316
328
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-surface-focused);
317
329
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-focused);
318
330
  border-color: var(--ids-comp-segmented-control-button-filled-color-border-surface-focused);
319
331
  }
320
- .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:focus .ids-icon {
332
+ .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 {
321
333
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-focused);
322
334
  }
323
335
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:disabled {
@@ -364,12 +376,12 @@
364
376
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button:active .ids-icon {
365
377
  color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-surface-pressed);
366
378
  }
367
- .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button:focus {
379
+ .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button:focus, .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button:focus-visible {
368
380
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-surface-focused);
369
381
  color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-surface-focused);
370
382
  border-color: var(--ids-comp-segmented-control-button-outlined-color-border-surface-focused);
371
383
  }
372
- .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button:focus .ids-icon {
384
+ .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button:focus .ids-icon, .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button:focus-visible .ids-icon {
373
385
  color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-surface-focused);
374
386
  }
375
387
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled {
@@ -380,7 +392,7 @@
380
392
  .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled .ids-icon {
381
393
  color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-surface-disabled);
382
394
  }
383
- .ids-segmented-control.ids-segmented-control-light .ids-segmented-control-item > button:focus {
395
+ .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 {
384
396
  outline-color: var(--ids-comp-segmented-control-focused-outline-color-light-focused);
385
397
  }
386
398
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled {
@@ -419,12 +431,12 @@
419
431
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:active .ids-icon {
420
432
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-pressed);
421
433
  }
422
- .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:focus {
434
+ .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 {
423
435
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-light-focused);
424
436
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-focused);
425
437
  border-color: var(--ids-comp-segmented-control-button-filled-color-border-light-focused);
426
438
  }
427
- .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:focus .ids-icon {
439
+ .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 {
428
440
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-focused);
429
441
  }
430
442
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:disabled {
@@ -471,12 +483,12 @@
471
483
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:active .ids-icon {
472
484
  color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-light-pressed);
473
485
  }
474
- .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:focus {
486
+ .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:focus, .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:focus-visible {
475
487
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-light-focused);
476
488
  color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-light-focused);
477
489
  border-color: var(--ids-comp-segmented-control-button-outlined-color-border-light-focused);
478
490
  }
479
- .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:focus .ids-icon {
491
+ .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:focus .ids-icon, .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:focus-visible .ids-icon {
480
492
  color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-light-focused);
481
493
  }
482
494
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled {
@@ -487,7 +499,7 @@
487
499
  .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled .ids-icon {
488
500
  color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-light-disabled);
489
501
  }
490
- .ids-segmented-control.ids-segmented-control-dark .ids-segmented-control-item > button:focus {
502
+ .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 {
491
503
  outline-color: var(--ids-comp-segmented-control-focused-outline-color-dark-focused);
492
504
  }
493
505
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled {
@@ -526,12 +538,12 @@
526
538
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:active .ids-icon {
527
539
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-pressed);
528
540
  }
529
- .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:focus {
541
+ .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 {
530
542
  background-color: var(--ids-comp-segmented-control-button-filled-color-bg-dark-focused);
531
543
  color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-focused);
532
544
  border-color: var(--ids-comp-segmented-control-button-filled-color-border-dark-focused);
533
545
  }
534
- .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:focus .ids-icon {
546
+ .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 {
535
547
  color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-focused);
536
548
  }
537
549
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:disabled {
@@ -578,12 +590,12 @@
578
590
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:active .ids-icon {
579
591
  color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-dark-pressed);
580
592
  }
581
- .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:focus {
593
+ .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 {
582
594
  background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-dark-focused);
583
595
  color: var(--ids-comp-segmented-control-button-outlined-color-fg-label-dark-focused);
584
596
  border-color: var(--ids-comp-segmented-control-button-outlined-color-border-dark-focused);
585
597
  }
586
- .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:focus .ids-icon {
598
+ .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 {
587
599
  color: var(--ids-comp-segmented-control-button-outlined-color-fg-icon-dark-focused);
588
600
  }
589
601
  .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled {
package/dist/segmented-control/segmented-control.min.css CHANGED
@@ -1 +1 @@
1
- .ids-segmented-control{display:inline-flex;flex-direction:row;flex-wrap:nowrap;align-items:center}.ids-segmented-control .ids-segmented-control-item>button{display:flex;align-items:center;border-style:solid;position:relative;text-wrap:nowrap}.ids-segmented-control .ids-segmented-control-item>button:focus{z-index:1;outline-style:solid;outline-offset:2px}.ids-segmented-control .ids-segmented-control-item>button:not(:disabled){cursor:pointer}.ids-segmented-control .ids-segmented-control-item>button:disabled{cursor:not-allowed}.ids-segmented-control.ids-segmented-control-compact{padding:var(--ids-comp-segmented-control-container-size-padding-y-compact) var(--ids-comp-segmented-control-container-size-padding-x-compact);gap:var(--ids-comp-segmented-control-container-size-gap-compact);border-top-left-radius:var(--ids-comp-segmented-control-container-size-border-radius-left-compact);border-bottom-left-radius:var(--ids-comp-segmented-control-container-size-border-radius-left-compact);border-top-right-radius:var(--ids-comp-segmented-control-container-size-border-radius-right-compact);border-bottom-right-radius:var(--ids-comp-segmented-control-container-size-border-radius-right-compact)}.ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item>button{border-width:var(--ids-comp-segmented-control-button-size-border-width-compact);padding:var(--ids-comp-segmented-control-button-size-padding-y-compact) var(--ids-comp-segmented-control-button-size-padding-x-compact);gap:var(--ids-comp-segmented-control-button-size-gap-compact);font-family:var(--ids-comp-segmented-control-button-typography-font-family-compact);font-size:var(--ids-comp-segmented-control-button-typography-font-size-compact);font-weight:var(--ids-comp-segmented-control-button-typography-font-weight-compact);letter-spacing:var(--ids-comp-segmented-control-button-typography-letter-spacing-compact);line-height:var(--ids-comp-segmented-control-button-typography-line-height-compact)}.ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item>button:focus{outline-width:var(--ids-comp-segmented-control-focused-outline-size-outline-width-compact)}.ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item:first-of-type>button{border-top-left-radius:var(--ids-comp-segmented-control-button-size-border-radius-compact);border-bottom-left-radius:var(--ids-comp-segmented-control-button-size-border-radius-compact)}.ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item:last-of-type>button{border-top-right-radius:var(--ids-comp-segmented-control-button-size-border-radius-compact);border-bottom-right-radius:var(--ids-comp-segmented-control-button-size-border-radius-compact)}.ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item:not(:last-of-type)>button{border-right-width:0}.ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item .ids-icon{height:var(--ids-comp-segmented-control-button-size-icon-compact);width:var(--ids-comp-segmented-control-button-size-icon-compact)}.ids-segmented-control.ids-segmented-control-comfortable{padding:var(--ids-comp-segmented-control-container-size-padding-y-comfortable) var(--ids-comp-segmented-control-container-size-padding-x-comfortable);gap:var(--ids-comp-segmented-control-container-size-gap-comfortable);border-top-left-radius:var(--ids-comp-segmented-control-container-size-border-radius-left-comfortable);border-bottom-left-radius:var(--ids-comp-segmented-control-container-size-border-radius-left-comfortable);border-top-right-radius:var(--ids-comp-segmented-control-container-size-border-radius-right-comfortable);border-bottom-right-radius:var(--ids-comp-segmented-control-container-size-border-radius-right-comfortable)}.ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item>button{border-width:var(--ids-comp-segmented-control-button-size-border-width-comfortable);padding:var(--ids-comp-segmented-control-button-size-padding-y-comfortable) var(--ids-comp-segmented-control-button-size-padding-x-comfortable);gap:var(--ids-comp-segmented-control-button-size-gap-comfortable);font-family:var(--ids-comp-segmented-control-button-typography-font-family-comfortable);font-size:var(--ids-comp-segmented-control-button-typography-font-size-comfortable);font-weight:var(--ids-comp-segmented-control-button-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-segmented-control-button-typography-letter-spacing-comfortable);line-height:var(--ids-comp-segmented-control-button-typography-line-height-comfortable)}.ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item>button:focus{outline-width:var(--ids-comp-segmented-control-focused-outline-size-outline-width-comfortable)}.ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item:first-of-type>button{border-top-left-radius:var(--ids-comp-segmented-control-button-size-border-radius-comfortable);border-bottom-left-radius:var(--ids-comp-segmented-control-button-size-border-radius-comfortable)}.ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item:last-of-type>button{border-top-right-radius:var(--ids-comp-segmented-control-button-size-border-radius-comfortable);border-bottom-right-radius:var(--ids-comp-segmented-control-button-size-border-radius-comfortable)}.ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item:not(:last-of-type)>button{border-right-width:0}.ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item .ids-icon{height:var(--ids-comp-segmented-control-button-size-icon-comfortable);width:var(--ids-comp-segmented-control-button-size-icon-comfortable)}.ids-segmented-control.ids-segmented-control-spacious{padding:var(--ids-comp-segmented-control-container-size-padding-y-spacious) var(--ids-comp-segmented-control-container-size-padding-x-spacious);gap:var(--ids-comp-segmented-control-container-size-gap-spacious);border-top-left-radius:var(--ids-comp-segmented-control-container-size-border-radius-left-spacious);border-bottom-left-radius:var(--ids-comp-segmented-control-container-size-border-radius-left-spacious);border-top-right-radius:var(--ids-comp-segmented-control-container-size-border-radius-right-spacious);border-bottom-right-radius:var(--ids-comp-segmented-control-container-size-border-radius-right-spacious)}.ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item>button{border-width:var(--ids-comp-segmented-control-button-size-border-width-spacious);padding:var(--ids-comp-segmented-control-button-size-padding-y-spacious) var(--ids-comp-segmented-control-button-size-padding-x-spacious);gap:var(--ids-comp-segmented-control-button-size-gap-spacious);font-family:var(--ids-comp-segmented-control-button-typography-font-family-spacious);font-size:var(--ids-comp-segmented-control-button-typography-font-size-spacious);font-weight:var(--ids-comp-segmented-control-button-typography-font-weight-spacious);letter-spacing:var(--ids-comp-segmented-control-button-typography-letter-spacing-spacious);line-height:var(--ids-comp-segmented-control-button-typography-line-height-spacious)}.ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item>button:focus{outline-width:var(--ids-comp-segmented-control-focused-outline-size-outline-width-spacious)}.ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item:first-of-type>button{border-top-left-radius:var(--ids-comp-segmented-control-button-size-border-radius-spacious);border-bottom-left-radius:var(--ids-comp-segmented-control-button-size-border-radius-spacious)}.ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item:last-of-type>button{border-top-right-radius:var(--ids-comp-segmented-control-button-size-border-radius-spacious);border-bottom-right-radius:var(--ids-comp-segmented-control-button-size-border-radius-spacious)}.ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item:not(:last-of-type)>button{border-right-width:0}.ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item .ids-icon{height:var(--ids-comp-segmented-control-button-size-icon-spacious);width:var(--ids-comp-segmented-control-button-size-icon-spacious)}.ids-segmented-control.ids-segmented-control-dense{padding:var(--ids-comp-segmented-control-container-size-padding-y-dense) var(--ids-comp-segmented-control-container-size-padding-x-dense);gap:var(--ids-comp-segmented-control-container-size-gap-dense);border-top-left-radius:var(--ids-comp-segmented-control-container-size-border-radius-left-dense);border-bottom-left-radius:var(--ids-comp-segmented-control-container-size-border-radius-left-dense);border-top-right-radius:var(--ids-comp-segmented-control-container-size-border-radius-right-dense);border-bottom-right-radius:var(--ids-comp-segmented-control-container-size-border-radius-right-dense)}.ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item>button{border-width:var(--ids-comp-segmented-control-button-size-border-width-dense);padding:var(--ids-comp-segmented-control-button-size-padding-y-dense) var(--ids-comp-segmented-control-button-size-padding-x-dense);gap:var(--ids-comp-segmented-control-button-size-gap-dense);font-family:var(--ids-comp-segmented-control-button-typography-font-family-dense);font-size:var(--ids-comp-segmented-control-button-typography-font-size-dense);font-weight:var(--ids-comp-segmented-control-button-typography-font-weight-dense);letter-spacing:var(--ids-comp-segmented-control-button-typography-letter-spacing-dense);line-height:var(--ids-comp-segmented-control-button-typography-line-height-dense)}.ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item>button:focus{outline-width:var(--ids-comp-segmented-control-focused-outline-size-outline-width-dense)}.ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item:first-of-type>button{border-top-left-radius:var(--ids-comp-segmented-control-button-size-border-radius-dense);border-bottom-left-radius:var(--ids-comp-segmented-control-button-size-border-radius-dense)}.ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item:last-of-type>button{border-top-right-radius:var(--ids-comp-segmented-control-button-size-border-radius-dense);border-bottom-right-radius:var(--ids-comp-segmented-control-button-size-border-radius-dense)}.ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item:not(:last-of-type)>button{border-right-width:0}.ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item .ids-icon{height:var(--ids-comp-segmented-control-button-size-icon-dense);width:var(--ids-comp-segmented-control-button-size-icon-dense)}.ids-segmented-control.ids-segmented-control-primary .ids-segmented-control-item>button:focus{outline-color:var(--ids-comp-segmented-control-focused-outline-color-dark-focused)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled{background-color:var(--ids-comp-segmented-control-container-filled-color-bg-primary-default);border-color:var(--ids-comp-segmented-control-container-filled-color-border-primary-default)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button{background-color:var(--ids-comp-segmented-control-button-filled-color-bg-primary-default);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-default);border-color:var(--ids-comp-segmented-control-button-filled-color-border-primary-default)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button .ids-icon{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-default)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled){background-color:var(--ids-comp-segmented-control-button-filled-color-bg-primary-active);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-active);border-color:var(--ids-comp-segmented-control-button-filled-color-border-primary-active)}.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{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-active)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button:hover{background-color:var(--ids-comp-segmented-control-button-filled-color-bg-primary-hovered);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-hovered);border-color:var(--ids-comp-segmented-control-button-filled-color-border-primary-hovered)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button:hover .ids-icon{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-hovered)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button:active{background-color:var(--ids-comp-segmented-control-button-filled-color-bg-primary-pressed);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-pressed);border-color:var(--ids-comp-segmented-control-button-filled-color-border-primary-pressed)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button:active .ids-icon{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-pressed)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button:focus{background-color:var(--ids-comp-segmented-control-button-filled-color-bg-primary-focused);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-focused);border-color:var(--ids-comp-segmented-control-button-filled-color-border-primary-focused)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button:focus .ids-icon{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-focused)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button:disabled{background-color:var(--ids-comp-segmented-control-button-filled-color-bg-primary-disabled);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-disabled);border-color:var(--ids-comp-segmented-control-button-filled-color-border-primary-disabled)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button:disabled .ids-icon{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-disabled)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined{background-color:var(--ids-comp-segmented-control-container-outlined-color-bg-primary-default);border-color:var(--ids-comp-segmented-control-container-outlined-color-border-primary-default)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button{background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-primary-default);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-primary-default);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-primary-default)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-primary-default)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled){background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-primary-active);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-primary-active);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-primary-active)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled) .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-primary-active)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:hover{background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-primary-hovered);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-primary-hovered);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-primary-hovered)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:hover .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-primary-hovered)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:active{background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-primary-pressed);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-primary-pressed);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-primary-pressed)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:active .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-primary-pressed)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:focus{background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-primary-focused);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-primary-focused);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-primary-focused)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:focus .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-primary-focused)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:disabled{background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-primary-disabled);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-primary-disabled);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-primary-disabled)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:disabled .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-primary-disabled)}.ids-segmented-control.ids-segmented-control-surface .ids-segmented-control-item>button:focus{outline-color:var(--ids-comp-segmented-control-focused-outline-color-dark-focused)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled{background-color:var(--ids-comp-segmented-control-container-filled-color-bg-surface-default);border-color:var(--ids-comp-segmented-control-container-filled-color-border-surface-default)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button{background-color:var(--ids-comp-segmented-control-button-filled-color-bg-surface-default);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-default);border-color:var(--ids-comp-segmented-control-button-filled-color-border-surface-default)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button .ids-icon{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-default)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled){background-color:var(--ids-comp-segmented-control-button-filled-color-bg-surface-active);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-active);border-color:var(--ids-comp-segmented-control-button-filled-color-border-surface-active)}.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{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-active)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button:hover{background-color:var(--ids-comp-segmented-control-button-filled-color-bg-surface-hovered);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-hovered);border-color:var(--ids-comp-segmented-control-button-filled-color-border-surface-hovered)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button:hover .ids-icon{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-hovered)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button:active{background-color:var(--ids-comp-segmented-control-button-filled-color-bg-surface-pressed);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-pressed);border-color:var(--ids-comp-segmented-control-button-filled-color-border-surface-pressed)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button:active .ids-icon{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-pressed)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button:focus{background-color:var(--ids-comp-segmented-control-button-filled-color-bg-surface-focused);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-focused);border-color:var(--ids-comp-segmented-control-button-filled-color-border-surface-focused)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button:focus .ids-icon{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-focused)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button:disabled{background-color:var(--ids-comp-segmented-control-button-filled-color-bg-surface-disabled);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-disabled);border-color:var(--ids-comp-segmented-control-button-filled-color-border-surface-disabled)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button:disabled .ids-icon{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-disabled)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined{background-color:var(--ids-comp-segmented-control-container-outlined-color-bg-surface-default);border-color:var(--ids-comp-segmented-control-container-outlined-color-border-surface-default)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button{background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-surface-default);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-surface-default);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-surface-default)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-surface-default)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled){background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-surface-active);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-surface-active);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-surface-active)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled) .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-surface-active)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:hover{background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-surface-hovered);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-surface-hovered);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-surface-hovered)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:hover .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-surface-hovered)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:active{background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-surface-pressed);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-surface-pressed);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-surface-pressed)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:active .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-surface-pressed)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:focus{background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-surface-focused);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-surface-focused);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-surface-focused)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:focus .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-surface-focused)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:disabled{background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-surface-disabled);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-surface-disabled);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-surface-disabled)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:disabled .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-surface-disabled)}.ids-segmented-control.ids-segmented-control-light .ids-segmented-control-item>button:focus{outline-color:var(--ids-comp-segmented-control-focused-outline-color-light-focused)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled{background-color:var(--ids-comp-segmented-control-container-filled-color-bg-light-default);border-color:var(--ids-comp-segmented-control-container-filled-color-border-light-default)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button{background-color:var(--ids-comp-segmented-control-button-filled-color-bg-light-default);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-light-default);border-color:var(--ids-comp-segmented-control-button-filled-color-border-light-default)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button .ids-icon{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-default)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled){background-color:var(--ids-comp-segmented-control-button-filled-color-bg-light-active);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-light-active);border-color:var(--ids-comp-segmented-control-button-filled-color-border-light-active)}.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{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-active)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button:hover{background-color:var(--ids-comp-segmented-control-button-filled-color-bg-light-hovered);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-light-hovered);border-color:var(--ids-comp-segmented-control-button-filled-color-border-light-hovered)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button:hover .ids-icon{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-hovered)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button:active{background-color:var(--ids-comp-segmented-control-button-filled-color-bg-light-pressed);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-light-pressed);border-color:var(--ids-comp-segmented-control-button-filled-color-border-light-pressed)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button:active .ids-icon{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-pressed)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button:focus{background-color:var(--ids-comp-segmented-control-button-filled-color-bg-light-focused);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-light-focused);border-color:var(--ids-comp-segmented-control-button-filled-color-border-light-focused)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button:focus .ids-icon{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-focused)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button:disabled{background-color:var(--ids-comp-segmented-control-button-filled-color-bg-light-disabled);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-light-disabled);border-color:var(--ids-comp-segmented-control-button-filled-color-border-light-disabled)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button:disabled .ids-icon{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-disabled)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined{background-color:var(--ids-comp-segmented-control-container-outlined-color-bg-light-default);border-color:var(--ids-comp-segmented-control-container-outlined-color-border-light-default)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button{background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-light-default);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-light-default);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-light-default)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-light-default)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled){background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-light-active);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-light-active);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-light-active)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled) .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-light-active)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:hover{background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-light-hovered);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-light-hovered);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-light-hovered)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:hover .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-light-hovered)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:active{background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-light-pressed);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-light-pressed);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-light-pressed)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:active .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-light-pressed)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:focus{background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-light-focused);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-light-focused);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-light-focused)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:focus .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-light-focused)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:disabled{background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-light-disabled);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-light-disabled);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-light-disabled)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:disabled .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-light-disabled)}.ids-segmented-control.ids-segmented-control-dark .ids-segmented-control-item>button:focus{outline-color:var(--ids-comp-segmented-control-focused-outline-color-dark-focused)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled{background-color:var(--ids-comp-segmented-control-container-filled-color-bg-dark-default);border-color:var(--ids-comp-segmented-control-container-filled-color-border-dark-default)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button{background-color:var(--ids-comp-segmented-control-button-filled-color-bg-dark-default);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-default);border-color:var(--ids-comp-segmented-control-button-filled-color-border-dark-default)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button .ids-icon{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-default)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled){background-color:var(--ids-comp-segmented-control-button-filled-color-bg-dark-active);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-active);border-color:var(--ids-comp-segmented-control-button-filled-color-border-dark-active)}.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{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-active)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button:hover{background-color:var(--ids-comp-segmented-control-button-filled-color-bg-dark-hovered);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-hovered);border-color:var(--ids-comp-segmented-control-button-filled-color-border-dark-hovered)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button:hover .ids-icon{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-hovered)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button:active{background-color:var(--ids-comp-segmented-control-button-filled-color-bg-dark-pressed);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-pressed);border-color:var(--ids-comp-segmented-control-button-filled-color-border-dark-pressed)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button:active .ids-icon{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-pressed)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button:focus{background-color:var(--ids-comp-segmented-control-button-filled-color-bg-dark-focused);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-focused);border-color:var(--ids-comp-segmented-control-button-filled-color-border-dark-focused)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button:focus .ids-icon{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-focused)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button:disabled{background-color:var(--ids-comp-segmented-control-button-filled-color-bg-dark-disabled);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-disabled);border-color:var(--ids-comp-segmented-control-button-filled-color-border-dark-disabled)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button:disabled .ids-icon{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-disabled)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined{background-color:var(--ids-comp-segmented-control-container-outlined-color-bg-dark-default);border-color:var(--ids-comp-segmented-control-container-outlined-color-border-dark-default)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button{background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-dark-default);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-dark-default);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-dark-default)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-dark-default)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled){background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-dark-active);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-dark-active);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-dark-active)}.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{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-dark-active)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button:hover{background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-dark-hovered);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-dark-hovered);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-dark-hovered)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button:hover .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-dark-hovered)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button:active{background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-dark-pressed);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-dark-pressed);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-dark-pressed)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button:active .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-dark-pressed)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button:focus{background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-dark-focused);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-dark-focused);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-dark-focused)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button:focus .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-dark-focused)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button:disabled{background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-dark-disabled);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-dark-disabled);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-dark-disabled)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button:disabled .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-dark-disabled)}
1
+ .ids-segmented-control{display:inline-flex;flex-direction:row;flex-wrap:nowrap;align-items:center}.ids-segmented-control .ids-segmented-control-item>button{display:flex;align-items:center;border-style:solid;position:relative;text-wrap:nowrap}.ids-segmented-control .ids-segmented-control-item>button:focus,.ids-segmented-control .ids-segmented-control-item>button:focus-visible{z-index:1;outline-style:solid;outline-offset:2px}.ids-segmented-control .ids-segmented-control-item>button:not(:disabled){cursor:pointer}.ids-segmented-control .ids-segmented-control-item>button:disabled{cursor:not-allowed}.ids-segmented-control.ids-segmented-control-compact{padding:var(--ids-comp-segmented-control-container-size-padding-y-compact) var(--ids-comp-segmented-control-container-size-padding-x-compact);gap:var(--ids-comp-segmented-control-container-size-gap-compact);border-top-left-radius:var(--ids-comp-segmented-control-container-size-border-radius-left-compact);border-bottom-left-radius:var(--ids-comp-segmented-control-container-size-border-radius-left-compact);border-top-right-radius:var(--ids-comp-segmented-control-container-size-border-radius-right-compact);border-bottom-right-radius:var(--ids-comp-segmented-control-container-size-border-radius-right-compact)}.ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item>button{border-width:var(--ids-comp-segmented-control-button-size-border-width-compact);padding:var(--ids-comp-segmented-control-button-size-padding-y-compact) var(--ids-comp-segmented-control-button-size-padding-x-compact);gap:var(--ids-comp-segmented-control-button-size-gap-compact);font-family:var(--ids-comp-segmented-control-button-typography-font-family-compact);font-size:var(--ids-comp-segmented-control-button-typography-font-size-compact);font-weight:var(--ids-comp-segmented-control-button-typography-font-weight-compact);letter-spacing:var(--ids-comp-segmented-control-button-typography-letter-spacing-compact);line-height:var(--ids-comp-segmented-control-button-typography-line-height-compact)}.ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item>button:focus,.ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item>button:focus-visible{outline-width:var(--ids-comp-segmented-control-focused-outline-size-outline-width-compact)}.ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item:first-of-type>button{border-top-left-radius:var(--ids-comp-segmented-control-button-size-border-radius-compact);border-bottom-left-radius:var(--ids-comp-segmented-control-button-size-border-radius-compact)}.ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item:last-of-type>button{border-top-right-radius:var(--ids-comp-segmented-control-button-size-border-radius-compact);border-bottom-right-radius:var(--ids-comp-segmented-control-button-size-border-radius-compact)}.ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item:not(:last-of-type)>button{border-right-width:0}.ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item .ids-icon{height:var(--ids-comp-segmented-control-button-size-icon-compact);width:var(--ids-comp-segmented-control-button-size-icon-compact);font-size:var(--ids-comp-segmented-control-button-icon-typography-font-size-compact);font-weight:var(--ids-comp-segmented-control-button-icon-typography-font-weight-compact);line-height:var(--ids-comp-segmented-control-button-icon-typography-line-height-compact)}.ids-segmented-control.ids-segmented-control-comfortable{padding:var(--ids-comp-segmented-control-container-size-padding-y-comfortable) var(--ids-comp-segmented-control-container-size-padding-x-comfortable);gap:var(--ids-comp-segmented-control-container-size-gap-comfortable);border-top-left-radius:var(--ids-comp-segmented-control-container-size-border-radius-left-comfortable);border-bottom-left-radius:var(--ids-comp-segmented-control-container-size-border-radius-left-comfortable);border-top-right-radius:var(--ids-comp-segmented-control-container-size-border-radius-right-comfortable);border-bottom-right-radius:var(--ids-comp-segmented-control-container-size-border-radius-right-comfortable)}.ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item>button{border-width:var(--ids-comp-segmented-control-button-size-border-width-comfortable);padding:var(--ids-comp-segmented-control-button-size-padding-y-comfortable) var(--ids-comp-segmented-control-button-size-padding-x-comfortable);gap:var(--ids-comp-segmented-control-button-size-gap-comfortable);font-family:var(--ids-comp-segmented-control-button-typography-font-family-comfortable);font-size:var(--ids-comp-segmented-control-button-typography-font-size-comfortable);font-weight:var(--ids-comp-segmented-control-button-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-segmented-control-button-typography-letter-spacing-comfortable);line-height:var(--ids-comp-segmented-control-button-typography-line-height-comfortable)}.ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item>button:focus,.ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item>button:focus-visible{outline-width:var(--ids-comp-segmented-control-focused-outline-size-outline-width-comfortable)}.ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item:first-of-type>button{border-top-left-radius:var(--ids-comp-segmented-control-button-size-border-radius-comfortable);border-bottom-left-radius:var(--ids-comp-segmented-control-button-size-border-radius-comfortable)}.ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item:last-of-type>button{border-top-right-radius:var(--ids-comp-segmented-control-button-size-border-radius-comfortable);border-bottom-right-radius:var(--ids-comp-segmented-control-button-size-border-radius-comfortable)}.ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item:not(:last-of-type)>button{border-right-width:0}.ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item .ids-icon{height:var(--ids-comp-segmented-control-button-size-icon-comfortable);width:var(--ids-comp-segmented-control-button-size-icon-comfortable);font-size:var(--ids-comp-segmented-control-button-icon-typography-font-size-comfortable);font-weight:var(--ids-comp-segmented-control-button-icon-typography-font-weight-comfortable);line-height:var(--ids-comp-segmented-control-button-icon-typography-line-height-comfortable)}.ids-segmented-control.ids-segmented-control-spacious{padding:var(--ids-comp-segmented-control-container-size-padding-y-spacious) var(--ids-comp-segmented-control-container-size-padding-x-spacious);gap:var(--ids-comp-segmented-control-container-size-gap-spacious);border-top-left-radius:var(--ids-comp-segmented-control-container-size-border-radius-left-spacious);border-bottom-left-radius:var(--ids-comp-segmented-control-container-size-border-radius-left-spacious);border-top-right-radius:var(--ids-comp-segmented-control-container-size-border-radius-right-spacious);border-bottom-right-radius:var(--ids-comp-segmented-control-container-size-border-radius-right-spacious)}.ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item>button{border-width:var(--ids-comp-segmented-control-button-size-border-width-spacious);padding:var(--ids-comp-segmented-control-button-size-padding-y-spacious) var(--ids-comp-segmented-control-button-size-padding-x-spacious);gap:var(--ids-comp-segmented-control-button-size-gap-spacious);font-family:var(--ids-comp-segmented-control-button-typography-font-family-spacious);font-size:var(--ids-comp-segmented-control-button-typography-font-size-spacious);font-weight:var(--ids-comp-segmented-control-button-typography-font-weight-spacious);letter-spacing:var(--ids-comp-segmented-control-button-typography-letter-spacing-spacious);line-height:var(--ids-comp-segmented-control-button-typography-line-height-spacious)}.ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item>button:focus,.ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item>button:focus-visible{outline-width:var(--ids-comp-segmented-control-focused-outline-size-outline-width-spacious)}.ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item:first-of-type>button{border-top-left-radius:var(--ids-comp-segmented-control-button-size-border-radius-spacious);border-bottom-left-radius:var(--ids-comp-segmented-control-button-size-border-radius-spacious)}.ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item:last-of-type>button{border-top-right-radius:var(--ids-comp-segmented-control-button-size-border-radius-spacious);border-bottom-right-radius:var(--ids-comp-segmented-control-button-size-border-radius-spacious)}.ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item:not(:last-of-type)>button{border-right-width:0}.ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item .ids-icon{height:var(--ids-comp-segmented-control-button-size-icon-spacious);width:var(--ids-comp-segmented-control-button-size-icon-spacious);font-size:var(--ids-comp-segmented-control-button-icon-typography-font-size-spacious);font-weight:var(--ids-comp-segmented-control-button-icon-typography-font-weight-spacious);line-height:var(--ids-comp-segmented-control-button-icon-typography-line-height-spacious)}.ids-segmented-control.ids-segmented-control-dense{padding:var(--ids-comp-segmented-control-container-size-padding-y-dense) var(--ids-comp-segmented-control-container-size-padding-x-dense);gap:var(--ids-comp-segmented-control-container-size-gap-dense);border-top-left-radius:var(--ids-comp-segmented-control-container-size-border-radius-left-dense);border-bottom-left-radius:var(--ids-comp-segmented-control-container-size-border-radius-left-dense);border-top-right-radius:var(--ids-comp-segmented-control-container-size-border-radius-right-dense);border-bottom-right-radius:var(--ids-comp-segmented-control-container-size-border-radius-right-dense)}.ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item>button{border-width:var(--ids-comp-segmented-control-button-size-border-width-dense);padding:var(--ids-comp-segmented-control-button-size-padding-y-dense) var(--ids-comp-segmented-control-button-size-padding-x-dense);gap:var(--ids-comp-segmented-control-button-size-gap-dense);font-family:var(--ids-comp-segmented-control-button-typography-font-family-dense);font-size:var(--ids-comp-segmented-control-button-typography-font-size-dense);font-weight:var(--ids-comp-segmented-control-button-typography-font-weight-dense);letter-spacing:var(--ids-comp-segmented-control-button-typography-letter-spacing-dense);line-height:var(--ids-comp-segmented-control-button-typography-line-height-dense)}.ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item>button:focus,.ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item>button:focus-visible{outline-width:var(--ids-comp-segmented-control-focused-outline-size-outline-width-dense)}.ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item:first-of-type>button{border-top-left-radius:var(--ids-comp-segmented-control-button-size-border-radius-dense);border-bottom-left-radius:var(--ids-comp-segmented-control-button-size-border-radius-dense)}.ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item:last-of-type>button{border-top-right-radius:var(--ids-comp-segmented-control-button-size-border-radius-dense);border-bottom-right-radius:var(--ids-comp-segmented-control-button-size-border-radius-dense)}.ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item:not(:last-of-type)>button{border-right-width:0}.ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item .ids-icon{height:var(--ids-comp-segmented-control-button-size-icon-dense);width:var(--ids-comp-segmented-control-button-size-icon-dense);font-size:var(--ids-comp-segmented-control-button-icon-typography-font-size-dense);font-weight:var(--ids-comp-segmented-control-button-icon-typography-font-weight-dense);line-height:var(--ids-comp-segmented-control-button-icon-typography-line-height-dense)}.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{outline-color:var(--ids-comp-segmented-control-focused-outline-color-dark-focused)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled{background-color:var(--ids-comp-segmented-control-container-filled-color-bg-primary-default);border-color:var(--ids-comp-segmented-control-container-filled-color-border-primary-default)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button{background-color:var(--ids-comp-segmented-control-button-filled-color-bg-primary-default);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-default);border-color:var(--ids-comp-segmented-control-button-filled-color-border-primary-default)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button .ids-icon{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-default)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled){background-color:var(--ids-comp-segmented-control-button-filled-color-bg-primary-active);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-active);border-color:var(--ids-comp-segmented-control-button-filled-color-border-primary-active)}.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{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-active)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button:hover{background-color:var(--ids-comp-segmented-control-button-filled-color-bg-primary-hovered);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-hovered);border-color:var(--ids-comp-segmented-control-button-filled-color-border-primary-hovered)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button:hover .ids-icon{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-hovered)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button:active{background-color:var(--ids-comp-segmented-control-button-filled-color-bg-primary-pressed);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-pressed);border-color:var(--ids-comp-segmented-control-button-filled-color-border-primary-pressed)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button:active .ids-icon{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-pressed)}.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{background-color:var(--ids-comp-segmented-control-button-filled-color-bg-primary-focused);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-focused);border-color:var(--ids-comp-segmented-control-button-filled-color-border-primary-focused)}.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{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-focused)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button:disabled{background-color:var(--ids-comp-segmented-control-button-filled-color-bg-primary-disabled);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-disabled);border-color:var(--ids-comp-segmented-control-button-filled-color-border-primary-disabled)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item>button:disabled .ids-icon{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-disabled)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined{background-color:var(--ids-comp-segmented-control-container-outlined-color-bg-primary-default);border-color:var(--ids-comp-segmented-control-container-outlined-color-border-primary-default)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button{background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-primary-default);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-primary-default);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-primary-default)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-primary-default)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled){background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-primary-active);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-primary-active);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-primary-active)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled) .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-primary-active)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:hover{background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-primary-hovered);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-primary-hovered);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-primary-hovered)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:hover .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-primary-hovered)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:active{background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-primary-pressed);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-primary-pressed);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-primary-pressed)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:active .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-primary-pressed)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:focus,.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:focus-visible{background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-primary-focused);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-primary-focused);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-primary-focused)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:focus .ids-icon,.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:focus-visible .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-primary-focused)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:disabled{background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-primary-disabled);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-primary-disabled);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-primary-disabled)}.ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item>button:disabled .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-primary-disabled)}.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{outline-color:var(--ids-comp-segmented-control-focused-outline-color-dark-focused)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled{background-color:var(--ids-comp-segmented-control-container-filled-color-bg-surface-default);border-color:var(--ids-comp-segmented-control-container-filled-color-border-surface-default)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button{background-color:var(--ids-comp-segmented-control-button-filled-color-bg-surface-default);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-default);border-color:var(--ids-comp-segmented-control-button-filled-color-border-surface-default)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button .ids-icon{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-default)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled){background-color:var(--ids-comp-segmented-control-button-filled-color-bg-surface-active);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-active);border-color:var(--ids-comp-segmented-control-button-filled-color-border-surface-active)}.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{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-active)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button:hover{background-color:var(--ids-comp-segmented-control-button-filled-color-bg-surface-hovered);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-hovered);border-color:var(--ids-comp-segmented-control-button-filled-color-border-surface-hovered)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button:hover .ids-icon{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-hovered)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button:active{background-color:var(--ids-comp-segmented-control-button-filled-color-bg-surface-pressed);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-pressed);border-color:var(--ids-comp-segmented-control-button-filled-color-border-surface-pressed)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button:active .ids-icon{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-pressed)}.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{background-color:var(--ids-comp-segmented-control-button-filled-color-bg-surface-focused);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-focused);border-color:var(--ids-comp-segmented-control-button-filled-color-border-surface-focused)}.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{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-focused)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button:disabled{background-color:var(--ids-comp-segmented-control-button-filled-color-bg-surface-disabled);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-disabled);border-color:var(--ids-comp-segmented-control-button-filled-color-border-surface-disabled)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item>button:disabled .ids-icon{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-disabled)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined{background-color:var(--ids-comp-segmented-control-container-outlined-color-bg-surface-default);border-color:var(--ids-comp-segmented-control-container-outlined-color-border-surface-default)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button{background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-surface-default);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-surface-default);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-surface-default)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-surface-default)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled){background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-surface-active);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-surface-active);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-surface-active)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled) .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-surface-active)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:hover{background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-surface-hovered);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-surface-hovered);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-surface-hovered)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:hover .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-surface-hovered)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:active{background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-surface-pressed);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-surface-pressed);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-surface-pressed)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:active .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-surface-pressed)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:focus,.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:focus-visible{background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-surface-focused);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-surface-focused);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-surface-focused)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:focus .ids-icon,.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:focus-visible .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-surface-focused)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:disabled{background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-surface-disabled);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-surface-disabled);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-surface-disabled)}.ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item>button:disabled .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-surface-disabled)}.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{outline-color:var(--ids-comp-segmented-control-focused-outline-color-light-focused)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled{background-color:var(--ids-comp-segmented-control-container-filled-color-bg-light-default);border-color:var(--ids-comp-segmented-control-container-filled-color-border-light-default)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button{background-color:var(--ids-comp-segmented-control-button-filled-color-bg-light-default);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-light-default);border-color:var(--ids-comp-segmented-control-button-filled-color-border-light-default)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button .ids-icon{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-default)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled){background-color:var(--ids-comp-segmented-control-button-filled-color-bg-light-active);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-light-active);border-color:var(--ids-comp-segmented-control-button-filled-color-border-light-active)}.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{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-active)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button:hover{background-color:var(--ids-comp-segmented-control-button-filled-color-bg-light-hovered);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-light-hovered);border-color:var(--ids-comp-segmented-control-button-filled-color-border-light-hovered)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button:hover .ids-icon{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-hovered)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button:active{background-color:var(--ids-comp-segmented-control-button-filled-color-bg-light-pressed);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-light-pressed);border-color:var(--ids-comp-segmented-control-button-filled-color-border-light-pressed)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button:active .ids-icon{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-pressed)}.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{background-color:var(--ids-comp-segmented-control-button-filled-color-bg-light-focused);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-light-focused);border-color:var(--ids-comp-segmented-control-button-filled-color-border-light-focused)}.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{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-focused)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button:disabled{background-color:var(--ids-comp-segmented-control-button-filled-color-bg-light-disabled);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-light-disabled);border-color:var(--ids-comp-segmented-control-button-filled-color-border-light-disabled)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item>button:disabled .ids-icon{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-disabled)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined{background-color:var(--ids-comp-segmented-control-container-outlined-color-bg-light-default);border-color:var(--ids-comp-segmented-control-container-outlined-color-border-light-default)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button{background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-light-default);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-light-default);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-light-default)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-light-default)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled){background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-light-active);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-light-active);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-light-active)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled) .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-light-active)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:hover{background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-light-hovered);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-light-hovered);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-light-hovered)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:hover .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-light-hovered)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:active{background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-light-pressed);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-light-pressed);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-light-pressed)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:active .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-light-pressed)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:focus,.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:focus-visible{background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-light-focused);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-light-focused);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-light-focused)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:focus .ids-icon,.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:focus-visible .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-light-focused)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:disabled{background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-light-disabled);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-light-disabled);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-light-disabled)}.ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item>button:disabled .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-light-disabled)}.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{outline-color:var(--ids-comp-segmented-control-focused-outline-color-dark-focused)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled{background-color:var(--ids-comp-segmented-control-container-filled-color-bg-dark-default);border-color:var(--ids-comp-segmented-control-container-filled-color-border-dark-default)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button{background-color:var(--ids-comp-segmented-control-button-filled-color-bg-dark-default);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-default);border-color:var(--ids-comp-segmented-control-button-filled-color-border-dark-default)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button .ids-icon{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-default)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled){background-color:var(--ids-comp-segmented-control-button-filled-color-bg-dark-active);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-active);border-color:var(--ids-comp-segmented-control-button-filled-color-border-dark-active)}.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{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-active)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button:hover{background-color:var(--ids-comp-segmented-control-button-filled-color-bg-dark-hovered);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-hovered);border-color:var(--ids-comp-segmented-control-button-filled-color-border-dark-hovered)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button:hover .ids-icon{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-hovered)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button:active{background-color:var(--ids-comp-segmented-control-button-filled-color-bg-dark-pressed);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-pressed);border-color:var(--ids-comp-segmented-control-button-filled-color-border-dark-pressed)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button:active .ids-icon{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-pressed)}.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{background-color:var(--ids-comp-segmented-control-button-filled-color-bg-dark-focused);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-focused);border-color:var(--ids-comp-segmented-control-button-filled-color-border-dark-focused)}.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{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-focused)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button:disabled{background-color:var(--ids-comp-segmented-control-button-filled-color-bg-dark-disabled);color:var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-disabled);border-color:var(--ids-comp-segmented-control-button-filled-color-border-dark-disabled)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item>button:disabled .ids-icon{color:var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-disabled)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined{background-color:var(--ids-comp-segmented-control-container-outlined-color-bg-dark-default);border-color:var(--ids-comp-segmented-control-container-outlined-color-border-dark-default)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button{background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-dark-default);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-dark-default);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-dark-default)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-dark-default)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button.ids-segmented-control-item-selected:not(:disabled){background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-dark-active);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-dark-active);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-dark-active)}.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{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-dark-active)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button:hover{background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-dark-hovered);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-dark-hovered);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-dark-hovered)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button:hover .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-dark-hovered)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button:active{background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-dark-pressed);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-dark-pressed);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-dark-pressed)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button:active .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-dark-pressed)}.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{background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-dark-focused);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-dark-focused);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-dark-focused)}.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{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-dark-focused)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button:disabled{background-color:var(--ids-comp-segmented-control-button-outlined-color-bg-dark-disabled);color:var(--ids-comp-segmented-control-button-outlined-color-fg-label-dark-disabled);border-color:var(--ids-comp-segmented-control-button-outlined-color-border-dark-disabled)}.ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item>button:disabled .ids-icon{color:var(--ids-comp-segmented-control-button-outlined-color-fg-icon-dark-disabled)}