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