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