@i-cell/ids-styles 0.0.4 → 0.0.6

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 (19) hide show
  1. package/dist/accessibility.css +11 -0
  2. package/dist/accessibility.min.css +1 -0
  3. package/dist/accessibility.plugin.js +20 -0
  4. package/dist/checkbox/checkbox.css +1 -1
  5. package/dist/checkbox/checkbox.min.css +1 -1
  6. package/dist/checkbox/checkbox.plugin.js +1 -1
  7. package/dist/components.css +1096 -9
  8. package/dist/components.min.css +1 -1
  9. package/dist/components.plugin.js +1054 -10
  10. package/dist/paginator/paginator.css +46 -8
  11. package/dist/paginator/paginator.min.css +1 -1
  12. package/dist/paginator/paginator.plugin.js +38 -9
  13. package/dist/segmented-control/segmented-control-toggle.css +505 -0
  14. package/dist/segmented-control/segmented-control-toggle.min.css +1 -0
  15. package/dist/segmented-control/segmented-control-toggle.plugin.js +515 -0
  16. package/dist/segmented-control/segmented-control.css +542 -0
  17. package/dist/segmented-control/segmented-control.min.css +1 -0
  18. package/dist/segmented-control/segmented-control.plugin.js +518 -0
  19. package/package.json +2 -2
package/dist/segmented-control/segmented-control.css ADDED
@@ -0,0 +1,542 @@
1
+ .ids-segmented-control {
2
+ display: inline-flex;
3
+ flex-direction: row;
4
+ flex-wrap: nowrap;
5
+ align-items: center;
6
+ }
7
+ .ids-segmented-control .ids-segmented-control-item > button {
8
+ display: flex;
9
+ align-items: center;
10
+ border-style: solid;
11
+ position: relative;
12
+ text-wrap: nowrap;
13
+ }
14
+ .ids-segmented-control .ids-segmented-control-item > button:focus {
15
+ z-index: 1;
16
+ outline-style: solid;
17
+ outline-offset: 2px;
18
+ }
19
+ .ids-segmented-control.ids-segmented-control-compact {
20
+ padding: var(--ids-comp-segmented-control-container-size-padding-y-compact) var(--ids-comp-segmented-control-container-size-padding-x-compact);
21
+ gap: var(--ids-comp-segmented-control-container-size-gap-compact);
22
+ border-top-left-radius: var(--ids-comp-segmented-control-container-size-border-radius-left-compact);
23
+ border-bottom-left-radius: var(--ids-comp-segmented-control-container-size-border-radius-left-compact);
24
+ border-top-right-radius: var(--ids-comp-segmented-control-container-size-border-radius-right-compact);
25
+ border-bottom-right-radius: var(--ids-comp-segmented-control-container-size-border-radius-right-compact);
26
+ }
27
+ .ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item > button {
28
+ border-width: var(--ids-comp-segmented-control-button-size-border-width-compact);
29
+ padding: var(--ids-comp-segmented-control-button-size-padding-y-compact) var(--ids-comp-segmented-control-button-size-padding-x-compact);
30
+ gap: var(--ids-comp-segmented-control-button-size-gap-compact);
31
+ font-family: var(--ids-comp-segmented-control-button-typography-font-family-compact);
32
+ font-size: var(--ids-comp-segmented-control-button-typography-font-size-compact);
33
+ font-weight: var(--ids-comp-segmented-control-button-typography-font-weight-compact);
34
+ letter-spacing: var(--ids-comp-segmented-control-button-typography-letter-spacing-compact);
35
+ line-height: var(--ids-comp-segmented-control-button-typography-line-height-compact);
36
+ }
37
+ .ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item > button:focus {
38
+ outline-width: var(--ids-comp-segmented-control-focused-outline-size-outline-width-compact);
39
+ }
40
+ .ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item:first-of-type > button {
41
+ border-top-left-radius: var(--ids-comp-segmented-control-button-size-border-radius-compact);
42
+ border-bottom-left-radius: var(--ids-comp-segmented-control-button-size-border-radius-compact);
43
+ }
44
+ .ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item:last-of-type > button {
45
+ border-top-right-radius: var(--ids-comp-segmented-control-button-size-border-radius-compact);
46
+ border-bottom-right-radius: var(--ids-comp-segmented-control-button-size-border-radius-compact);
47
+ }
48
+ .ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item:not(:last-of-type) > button {
49
+ border-right-width: 0;
50
+ }
51
+ .ids-segmented-control.ids-segmented-control-compact .ids-segmented-control-item .ids-icon {
52
+ height: var(--ids-comp-segmented-control-button-size-icon-compact);
53
+ width: var(--ids-comp-segmented-control-button-size-icon-compact);
54
+ }
55
+ .ids-segmented-control.ids-segmented-control-comfortable {
56
+ padding: var(--ids-comp-segmented-control-container-size-padding-y-comfortable) var(--ids-comp-segmented-control-container-size-padding-x-comfortable);
57
+ gap: var(--ids-comp-segmented-control-container-size-gap-comfortable);
58
+ border-top-left-radius: var(--ids-comp-segmented-control-container-size-border-radius-left-comfortable);
59
+ border-bottom-left-radius: var(--ids-comp-segmented-control-container-size-border-radius-left-comfortable);
60
+ border-top-right-radius: var(--ids-comp-segmented-control-container-size-border-radius-right-comfortable);
61
+ border-bottom-right-radius: var(--ids-comp-segmented-control-container-size-border-radius-right-comfortable);
62
+ }
63
+ .ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item > button {
64
+ border-width: var(--ids-comp-segmented-control-button-size-border-width-comfortable);
65
+ padding: var(--ids-comp-segmented-control-button-size-padding-y-comfortable) var(--ids-comp-segmented-control-button-size-padding-x-comfortable);
66
+ gap: var(--ids-comp-segmented-control-button-size-gap-comfortable);
67
+ font-family: var(--ids-comp-segmented-control-button-typography-font-family-comfortable);
68
+ font-size: var(--ids-comp-segmented-control-button-typography-font-size-comfortable);
69
+ font-weight: var(--ids-comp-segmented-control-button-typography-font-weight-comfortable);
70
+ letter-spacing: var(--ids-comp-segmented-control-button-typography-letter-spacing-comfortable);
71
+ line-height: var(--ids-comp-segmented-control-button-typography-line-height-comfortable);
72
+ }
73
+ .ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item > button:focus {
74
+ outline-width: var(--ids-comp-segmented-control-focused-outline-size-outline-width-comfortable);
75
+ }
76
+ .ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item:first-of-type > button {
77
+ border-top-left-radius: var(--ids-comp-segmented-control-button-size-border-radius-comfortable);
78
+ border-bottom-left-radius: var(--ids-comp-segmented-control-button-size-border-radius-comfortable);
79
+ }
80
+ .ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item:last-of-type > button {
81
+ border-top-right-radius: var(--ids-comp-segmented-control-button-size-border-radius-comfortable);
82
+ border-bottom-right-radius: var(--ids-comp-segmented-control-button-size-border-radius-comfortable);
83
+ }
84
+ .ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item:not(:last-of-type) > button {
85
+ border-right-width: 0;
86
+ }
87
+ .ids-segmented-control.ids-segmented-control-comfortable .ids-segmented-control-item .ids-icon {
88
+ height: var(--ids-comp-segmented-control-button-size-icon-comfortable);
89
+ width: var(--ids-comp-segmented-control-button-size-icon-comfortable);
90
+ }
91
+ .ids-segmented-control.ids-segmented-control-spacious {
92
+ padding: var(--ids-comp-segmented-control-container-size-padding-y-spacious) var(--ids-comp-segmented-control-container-size-padding-x-spacious);
93
+ gap: var(--ids-comp-segmented-control-container-size-gap-spacious);
94
+ border-top-left-radius: var(--ids-comp-segmented-control-container-size-border-radius-left-spacious);
95
+ border-bottom-left-radius: var(--ids-comp-segmented-control-container-size-border-radius-left-spacious);
96
+ border-top-right-radius: var(--ids-comp-segmented-control-container-size-border-radius-right-spacious);
97
+ border-bottom-right-radius: var(--ids-comp-segmented-control-container-size-border-radius-right-spacious);
98
+ }
99
+ .ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item > button {
100
+ border-width: var(--ids-comp-segmented-control-button-size-border-width-spacious);
101
+ padding: var(--ids-comp-segmented-control-button-size-padding-y-spacious) var(--ids-comp-segmented-control-button-size-padding-x-spacious);
102
+ gap: var(--ids-comp-segmented-control-button-size-gap-spacious);
103
+ font-family: var(--ids-comp-segmented-control-button-typography-font-family-spacious);
104
+ font-size: var(--ids-comp-segmented-control-button-typography-font-size-spacious);
105
+ font-weight: var(--ids-comp-segmented-control-button-typography-font-weight-spacious);
106
+ letter-spacing: var(--ids-comp-segmented-control-button-typography-letter-spacing-spacious);
107
+ line-height: var(--ids-comp-segmented-control-button-typography-line-height-spacious);
108
+ }
109
+ .ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item > button:focus {
110
+ outline-width: var(--ids-comp-segmented-control-focused-outline-size-outline-width-spacious);
111
+ }
112
+ .ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item:first-of-type > button {
113
+ border-top-left-radius: var(--ids-comp-segmented-control-button-size-border-radius-spacious);
114
+ border-bottom-left-radius: var(--ids-comp-segmented-control-button-size-border-radius-spacious);
115
+ }
116
+ .ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item:last-of-type > button {
117
+ border-top-right-radius: var(--ids-comp-segmented-control-button-size-border-radius-spacious);
118
+ border-bottom-right-radius: var(--ids-comp-segmented-control-button-size-border-radius-spacious);
119
+ }
120
+ .ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item:not(:last-of-type) > button {
121
+ border-right-width: 0;
122
+ }
123
+ .ids-segmented-control.ids-segmented-control-spacious .ids-segmented-control-item .ids-icon {
124
+ height: var(--ids-comp-segmented-control-button-size-icon-spacious);
125
+ width: var(--ids-comp-segmented-control-button-size-icon-spacious);
126
+ }
127
+ .ids-segmented-control.ids-segmented-control-dense {
128
+ padding: var(--ids-comp-segmented-control-container-size-padding-y-dense) var(--ids-comp-segmented-control-container-size-padding-x-dense);
129
+ gap: var(--ids-comp-segmented-control-container-size-gap-dense);
130
+ border-top-left-radius: var(--ids-comp-segmented-control-container-size-border-radius-left-dense);
131
+ border-bottom-left-radius: var(--ids-comp-segmented-control-container-size-border-radius-left-dense);
132
+ border-top-right-radius: var(--ids-comp-segmented-control-container-size-border-radius-right-dense);
133
+ border-bottom-right-radius: var(--ids-comp-segmented-control-container-size-border-radius-right-dense);
134
+ }
135
+ .ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item > button {
136
+ border-width: var(--ids-comp-segmented-control-button-size-border-width-dense);
137
+ padding: var(--ids-comp-segmented-control-button-size-padding-y-dense) var(--ids-comp-segmented-control-button-size-padding-x-dense);
138
+ gap: var(--ids-comp-segmented-control-button-size-gap-dense);
139
+ font-family: var(--ids-comp-segmented-control-button-typography-font-family-dense);
140
+ font-size: var(--ids-comp-segmented-control-button-typography-font-size-dense);
141
+ font-weight: var(--ids-comp-segmented-control-button-typography-font-weight-dense);
142
+ letter-spacing: var(--ids-comp-segmented-control-button-typography-letter-spacing-dense);
143
+ line-height: var(--ids-comp-segmented-control-button-typography-line-height-dense);
144
+ }
145
+ .ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item > button:focus {
146
+ outline-width: var(--ids-comp-segmented-control-focused-outline-size-outline-width-dense);
147
+ }
148
+ .ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item:first-of-type > button {
149
+ border-top-left-radius: var(--ids-comp-segmented-control-button-size-border-radius-dense);
150
+ border-bottom-left-radius: var(--ids-comp-segmented-control-button-size-border-radius-dense);
151
+ }
152
+ .ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item:last-of-type > button {
153
+ border-top-right-radius: var(--ids-comp-segmented-control-button-size-border-radius-dense);
154
+ border-bottom-right-radius: var(--ids-comp-segmented-control-button-size-border-radius-dense);
155
+ }
156
+ .ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item:not(:last-of-type) > button {
157
+ border-right-width: 0;
158
+ }
159
+ .ids-segmented-control.ids-segmented-control-dense .ids-segmented-control-item .ids-icon {
160
+ height: var(--ids-comp-segmented-control-button-size-icon-dense);
161
+ width: var(--ids-comp-segmented-control-button-size-icon-dense);
162
+ }
163
+ .ids-segmented-control.ids-segmented-control-primary .ids-segmented-control-item > button:focus {
164
+ outline-color: var(--ids-comp-segmented-control-focused-outline-color-dark-focused);
165
+ }
166
+ .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled {
167
+ background-color: var(--ids-comp-segmented-control-container-filled-color-bg-primary-default);
168
+ border-color: var(--ids-comp-segmented-control-container-filled-color-border-primary-default);
169
+ }
170
+ .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button {
171
+ background-color: var(--ids-comp-segmented-control-button-filled-color-bg-primary-default);
172
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-default);
173
+ }
174
+ .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button .ids-icon {
175
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-default);
176
+ }
177
+ .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
178
+ background-color: var(--ids-comp-segmented-control-button-filled-color-bg-primary-active);
179
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-active);
180
+ }
181
+ .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 {
182
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-active);
183
+ }
184
+ .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:hover {
185
+ background-color: var(--ids-comp-segmented-control-button-filled-color-bg-primary-hovered);
186
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-hovered);
187
+ }
188
+ .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:hover .ids-icon {
189
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-hovered);
190
+ }
191
+ .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:active {
192
+ background-color: var(--ids-comp-segmented-control-button-filled-color-bg-primary-pressed);
193
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-pressed);
194
+ }
195
+ .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:active .ids-icon {
196
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-pressed);
197
+ }
198
+ .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:focus {
199
+ background-color: var(--ids-comp-segmented-control-button-filled-color-bg-primary-focused);
200
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-focused);
201
+ }
202
+ .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:focus .ids-icon {
203
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-focused);
204
+ }
205
+ .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:disabled {
206
+ background-color: var(--ids-comp-segmented-control-button-filled-color-bg-primary-disabled);
207
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-disabled);
208
+ }
209
+ .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-filled .ids-segmented-control-item > button:disabled .ids-icon {
210
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-disabled);
211
+ }
212
+ .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined {
213
+ background-color: var(--ids-comp-segmented-control-container-outlined-color-bg-primary-default);
214
+ border-color: var(--ids-comp-segmented-control-container-outlined-color-border-primary-default);
215
+ }
216
+ .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button {
217
+ background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-primary-default);
218
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-default);
219
+ }
220
+ .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button .ids-icon {
221
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-default);
222
+ }
223
+ .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
224
+ background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-primary-active);
225
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-active);
226
+ }
227
+ .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 {
228
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-active);
229
+ }
230
+ .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button:hover {
231
+ background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-primary-hovered);
232
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-hovered);
233
+ }
234
+ .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button:hover .ids-icon {
235
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-hovered);
236
+ }
237
+ .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button:active {
238
+ background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-primary-pressed);
239
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-pressed);
240
+ }
241
+ .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button:active .ids-icon {
242
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-pressed);
243
+ }
244
+ .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button:focus {
245
+ background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-primary-focused);
246
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-focused);
247
+ }
248
+ .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button:focus .ids-icon {
249
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-focused);
250
+ }
251
+ .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled {
252
+ background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-primary-disabled);
253
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-primary-disabled);
254
+ }
255
+ .ids-segmented-control.ids-segmented-control-primary.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled .ids-icon {
256
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-primary-disabled);
257
+ }
258
+ .ids-segmented-control.ids-segmented-control-surface .ids-segmented-control-item > button:focus {
259
+ outline-color: var(--ids-comp-segmented-control-focused-outline-color-dark-focused);
260
+ }
261
+ .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled {
262
+ background-color: var(--ids-comp-segmented-control-container-filled-color-bg-surface-default);
263
+ border-color: var(--ids-comp-segmented-control-container-filled-color-border-surface-default);
264
+ }
265
+ .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button {
266
+ background-color: var(--ids-comp-segmented-control-button-filled-color-bg-surface-default);
267
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-default);
268
+ }
269
+ .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button .ids-icon {
270
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-default);
271
+ }
272
+ .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
273
+ background-color: var(--ids-comp-segmented-control-button-filled-color-bg-surface-active);
274
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-active);
275
+ }
276
+ .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 {
277
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-active);
278
+ }
279
+ .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:hover {
280
+ background-color: var(--ids-comp-segmented-control-button-filled-color-bg-surface-hovered);
281
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-hovered);
282
+ }
283
+ .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:hover .ids-icon {
284
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-hovered);
285
+ }
286
+ .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:active {
287
+ background-color: var(--ids-comp-segmented-control-button-filled-color-bg-surface-pressed);
288
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-pressed);
289
+ }
290
+ .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:active .ids-icon {
291
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-pressed);
292
+ }
293
+ .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:focus {
294
+ background-color: var(--ids-comp-segmented-control-button-filled-color-bg-surface-focused);
295
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-focused);
296
+ }
297
+ .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:focus .ids-icon {
298
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-focused);
299
+ }
300
+ .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:disabled {
301
+ background-color: var(--ids-comp-segmented-control-button-filled-color-bg-surface-disabled);
302
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-disabled);
303
+ }
304
+ .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-filled .ids-segmented-control-item > button:disabled .ids-icon {
305
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-disabled);
306
+ }
307
+ .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined {
308
+ background-color: var(--ids-comp-segmented-control-container-outlined-color-bg-surface-default);
309
+ border-color: var(--ids-comp-segmented-control-container-outlined-color-border-surface-default);
310
+ }
311
+ .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button {
312
+ background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-surface-default);
313
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-default);
314
+ }
315
+ .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button .ids-icon {
316
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-default);
317
+ }
318
+ .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
319
+ background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-surface-active);
320
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-active);
321
+ }
322
+ .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 {
323
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-active);
324
+ }
325
+ .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button:hover {
326
+ background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-surface-hovered);
327
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-hovered);
328
+ }
329
+ .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button:hover .ids-icon {
330
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-hovered);
331
+ }
332
+ .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button:active {
333
+ background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-surface-pressed);
334
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-pressed);
335
+ }
336
+ .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button:active .ids-icon {
337
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-pressed);
338
+ }
339
+ .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button:focus {
340
+ background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-surface-focused);
341
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-focused);
342
+ }
343
+ .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button:focus .ids-icon {
344
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-focused);
345
+ }
346
+ .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled {
347
+ background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-surface-disabled);
348
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-surface-disabled);
349
+ }
350
+ .ids-segmented-control.ids-segmented-control-surface.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled .ids-icon {
351
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-surface-disabled);
352
+ }
353
+ .ids-segmented-control.ids-segmented-control-light .ids-segmented-control-item > button:focus {
354
+ outline-color: var(--ids-comp-segmented-control-focused-outline-color-light-focused);
355
+ }
356
+ .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled {
357
+ background-color: var(--ids-comp-segmented-control-container-filled-color-bg-light-default);
358
+ border-color: var(--ids-comp-segmented-control-container-filled-color-border-light-default);
359
+ }
360
+ .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button {
361
+ background-color: var(--ids-comp-segmented-control-button-filled-color-bg-light-default);
362
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-default);
363
+ }
364
+ .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button .ids-icon {
365
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-default);
366
+ }
367
+ .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
368
+ background-color: var(--ids-comp-segmented-control-button-filled-color-bg-light-active);
369
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-active);
370
+ }
371
+ .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 {
372
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-active);
373
+ }
374
+ .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:hover {
375
+ background-color: var(--ids-comp-segmented-control-button-filled-color-bg-light-hovered);
376
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-hovered);
377
+ }
378
+ .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:hover .ids-icon {
379
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-hovered);
380
+ }
381
+ .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:active {
382
+ background-color: var(--ids-comp-segmented-control-button-filled-color-bg-light-pressed);
383
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-pressed);
384
+ }
385
+ .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:active .ids-icon {
386
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-pressed);
387
+ }
388
+ .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:focus {
389
+ background-color: var(--ids-comp-segmented-control-button-filled-color-bg-light-focused);
390
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-focused);
391
+ }
392
+ .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:focus .ids-icon {
393
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-focused);
394
+ }
395
+ .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:disabled {
396
+ background-color: var(--ids-comp-segmented-control-button-filled-color-bg-light-disabled);
397
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-disabled);
398
+ }
399
+ .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-filled .ids-segmented-control-item > button:disabled .ids-icon {
400
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-disabled);
401
+ }
402
+ .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined {
403
+ background-color: var(--ids-comp-segmented-control-container-outlined-color-bg-light-default);
404
+ border-color: var(--ids-comp-segmented-control-container-outlined-color-border-light-default);
405
+ }
406
+ .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button {
407
+ background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-light-default);
408
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-default);
409
+ }
410
+ .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button .ids-icon {
411
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-default);
412
+ }
413
+ .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
414
+ background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-light-active);
415
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-active);
416
+ }
417
+ .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 {
418
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-active);
419
+ }
420
+ .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:hover {
421
+ background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-light-hovered);
422
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-hovered);
423
+ }
424
+ .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:hover .ids-icon {
425
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-hovered);
426
+ }
427
+ .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:active {
428
+ background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-light-pressed);
429
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-pressed);
430
+ }
431
+ .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:active .ids-icon {
432
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-pressed);
433
+ }
434
+ .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:focus {
435
+ background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-light-focused);
436
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-focused);
437
+ }
438
+ .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:focus .ids-icon {
439
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-focused);
440
+ }
441
+ .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled {
442
+ background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-light-disabled);
443
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-light-disabled);
444
+ }
445
+ .ids-segmented-control.ids-segmented-control-light.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled .ids-icon {
446
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-light-disabled);
447
+ }
448
+ .ids-segmented-control.ids-segmented-control-dark .ids-segmented-control-item > button:focus {
449
+ outline-color: var(--ids-comp-segmented-control-focused-outline-color-dark-focused);
450
+ }
451
+ .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled {
452
+ background-color: var(--ids-comp-segmented-control-container-filled-color-bg-dark-default);
453
+ border-color: var(--ids-comp-segmented-control-container-filled-color-border-dark-default);
454
+ }
455
+ .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button {
456
+ background-color: var(--ids-comp-segmented-control-button-filled-color-bg-dark-default);
457
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-default);
458
+ }
459
+ .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button .ids-icon {
460
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-default);
461
+ }
462
+ .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
463
+ background-color: var(--ids-comp-segmented-control-button-filled-color-bg-dark-active);
464
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-active);
465
+ }
466
+ .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 {
467
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-active);
468
+ }
469
+ .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:hover {
470
+ background-color: var(--ids-comp-segmented-control-button-filled-color-bg-dark-hovered);
471
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-hovered);
472
+ }
473
+ .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:hover .ids-icon {
474
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-hovered);
475
+ }
476
+ .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:active {
477
+ background-color: var(--ids-comp-segmented-control-button-filled-color-bg-dark-pressed);
478
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-pressed);
479
+ }
480
+ .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:active .ids-icon {
481
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-pressed);
482
+ }
483
+ .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:focus {
484
+ background-color: var(--ids-comp-segmented-control-button-filled-color-bg-dark-focused);
485
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-focused);
486
+ }
487
+ .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:focus .ids-icon {
488
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-focused);
489
+ }
490
+ .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:disabled {
491
+ background-color: var(--ids-comp-segmented-control-button-filled-color-bg-dark-disabled);
492
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-disabled);
493
+ }
494
+ .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-filled .ids-segmented-control-item > button:disabled .ids-icon {
495
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-disabled);
496
+ }
497
+ .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined {
498
+ background-color: var(--ids-comp-segmented-control-container-outlined-color-bg-dark-default);
499
+ border-color: var(--ids-comp-segmented-control-container-outlined-color-border-dark-default);
500
+ }
501
+ .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button {
502
+ background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-dark-default);
503
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-default);
504
+ }
505
+ .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button .ids-icon {
506
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-default);
507
+ }
508
+ .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button.ids-segmented-control-item-selected:not(:disabled) {
509
+ background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-dark-active);
510
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-active);
511
+ }
512
+ .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 {
513
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-active);
514
+ }
515
+ .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:hover {
516
+ background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-dark-hovered);
517
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-hovered);
518
+ }
519
+ .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:hover .ids-icon {
520
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-hovered);
521
+ }
522
+ .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:active {
523
+ background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-dark-pressed);
524
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-pressed);
525
+ }
526
+ .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:active .ids-icon {
527
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-pressed);
528
+ }
529
+ .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:focus {
530
+ background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-dark-focused);
531
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-focused);
532
+ }
533
+ .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:focus .ids-icon {
534
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-focused);
535
+ }
536
+ .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled {
537
+ background-color: var(--ids-comp-segmented-control-button-outlined-color-bg-dark-disabled);
538
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-label-dark-disabled);
539
+ }
540
+ .ids-segmented-control.ids-segmented-control-dark.ids-segmented-control-outlined .ids-segmented-control-item > button:disabled .ids-icon {
541
+ color: var(--ids-comp-segmented-control-button-filled-color-fg-icon-dark-disabled);
542
+ }
package/dist/segmented-control/segmented-control.min.css ADDED
@@ -0,0 +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-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)}.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)}.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)}.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)}.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)}.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)}.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-filled-color-fg-label-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-filled-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-filled-color-fg-label-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-filled-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-filled-color-fg-label-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-filled-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-filled-color-fg-label-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-filled-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-filled-color-fg-label-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-filled-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-filled-color-fg-label-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-filled-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)}.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)}.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)}.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)}.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)}.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)}.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-filled-color-fg-label-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-filled-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-filled-color-fg-label-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-filled-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-filled-color-fg-label-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-filled-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-filled-color-fg-label-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-filled-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-filled-color-fg-label-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-filled-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-filled-color-fg-label-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-filled-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)}.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)}.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)}.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)}.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)}.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)}.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-filled-color-fg-label-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-filled-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-filled-color-fg-label-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-filled-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-filled-color-fg-label-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-filled-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-filled-color-fg-label-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-filled-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-filled-color-fg-label-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-filled-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-filled-color-fg-label-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-filled-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)}.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)}.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)}.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)}.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)}.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)}.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-filled-color-fg-label-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-filled-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-filled-color-fg-label-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-filled-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-filled-color-fg-label-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-filled-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-filled-color-fg-label-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-filled-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-filled-color-fg-label-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-filled-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-filled-color-fg-label-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-filled-color-fg-icon-dark-disabled)}