@i-cell/ids-styles 0.0.27 → 0.0.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/components.css +117 -228
  2. package/dist/components.min.css +1 -1
  3. package/dist/components.plugin.js +206 -334
  4. package/dist/segmented-control-toggle/segmented-control-toggle.css +117 -228
  5. package/dist/segmented-control-toggle/segmented-control-toggle.min.css +1 -1
  6. package/dist/segmented-control-toggle/segmented-control-toggle.plugin.js +206 -334
  7. package/package.json +1 -1
  8. package/dist/segmented-control/segmented-control-toggle.css +0 -452
  9. package/dist/segmented-control/segmented-control-toggle.min.css +0 -1
  10. package/dist/segmented-control/segmented-control-toggle.plugin.js +0 -430
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@i-cell/ids-styles",
3
- "version": "0.0.27",
3
+ "version": "0.0.28",
4
4
  "private": false,
5
5
  "description": "Stylesheets for i-Cell Design System UI Kit components (currently Vue and Angular)",
6
6
  "scripts": {
package/dist/segmented-control/segmented-control-toggle.css DELETED
@@ -1,452 +0,0 @@
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, .ids-segmented-control-toggle .ids-segmented-control-toggle-item > button:focus-visible {
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-item > button:not(:disabled) {
23
- cursor: pointer;
24
- }
25
- .ids-segmented-control-toggle .ids-segmented-control-toggle-item > button:disabled {
26
- cursor: not-allowed;
27
- }
28
- .ids-segmented-control-toggle.ids-segmented-control-toggle-compact {
29
- padding: var(--ids-comp-segmented-control-toggle-container-size-padding-y-compact) var(--ids-comp-segmented-control-toggle-container-size-padding-x-compact);
30
- gap: var(--ids-comp-segmented-control-toggle-container-size-gap-compact);
31
- border-top-left-radius: var(--ids-comp-segmented-control-toggle-container-size-border-radius-left-compact);
32
- border-top-right-radius: var(--ids-comp-segmented-control-toggle-container-size-border-radius-right-compact);
33
- border-bottom-left-radius: var(--ids-comp-segmented-control-toggle-container-size-border-radius-left-compact);
34
- border-bottom-right-radius: var(--ids-comp-segmented-control-toggle-container-size-border-radius-right-compact);
35
- }
36
- .ids-segmented-control-toggle.ids-segmented-control-toggle-compact .ids-segmented-control-toggle-item > button {
37
- border-radius: var(--ids-comp-segmented-control-toggle-button-size-border-radius-compact);
38
- border-width: var(--ids-comp-segmented-control-toggle-button-size-border-width-compact);
39
- padding: var(--ids-comp-segmented-control-toggle-button-size-padding-y-compact) var(--ids-comp-segmented-control-toggle-button-size-padding-x-compact);
40
- gap: var(--ids-comp-segmented-control-toggle-button-size-gap-compact);
41
- font-family: var(--ids-comp-segmented-control-toggle-button-typography-font-family-compact);
42
- font-size: var(--ids-comp-segmented-control-toggle-button-typography-font-size-compact);
43
- font-weight: var(--ids-comp-segmented-control-toggle-button-typography-font-weight-compact);
44
- letter-spacing: var(--ids-comp-segmented-control-toggle-button-typography-letter-spacing-compact);
45
- line-height: var(--ids-comp-segmented-control-toggle-button-typography-line-height-compact);
46
- }
47
- .ids-segmented-control-toggle.ids-segmented-control-toggle-compact .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-compact .ids-segmented-control-toggle-item > button:focus-visible {
48
- outline-width: var(--ids-comp-segmented-control-toggle-focused-outline-size-outline-width-compact);
49
- }
50
- .ids-segmented-control-toggle.ids-segmented-control-toggle-compact .ids-segmented-control-toggle-item .ids-icon {
51
- height: var(--ids-comp-segmented-control-toggle-button-size-icon-compact);
52
- width: var(--ids-comp-segmented-control-toggle-button-size-icon-compact);
53
- font-size: var(--ids-comp-segmented-control-toggle-button-icon-typography-font-size-compact);
54
- font-weight: var(--ids-comp-segmented-control-toggle-button-icon-typography-font-weight-compact);
55
- line-height: var(--ids-comp-segmented-control-toggle-button-icon-typography-line-height-compact);
56
- }
57
- .ids-segmented-control-toggle.ids-segmented-control-toggle-comfortable {
58
- padding: var(--ids-comp-segmented-control-toggle-container-size-padding-y-comfortable) var(--ids-comp-segmented-control-toggle-container-size-padding-x-comfortable);
59
- gap: var(--ids-comp-segmented-control-toggle-container-size-gap-comfortable);
60
- border-top-left-radius: var(--ids-comp-segmented-control-toggle-container-size-border-radius-left-comfortable);
61
- border-top-right-radius: var(--ids-comp-segmented-control-toggle-container-size-border-radius-right-comfortable);
62
- border-bottom-left-radius: var(--ids-comp-segmented-control-toggle-container-size-border-radius-left-comfortable);
63
- border-bottom-right-radius: var(--ids-comp-segmented-control-toggle-container-size-border-radius-right-comfortable);
64
- }
65
- .ids-segmented-control-toggle.ids-segmented-control-toggle-comfortable .ids-segmented-control-toggle-item > button {
66
- border-radius: var(--ids-comp-segmented-control-toggle-button-size-border-radius-comfortable);
67
- border-width: var(--ids-comp-segmented-control-toggle-button-size-border-width-comfortable);
68
- padding: var(--ids-comp-segmented-control-toggle-button-size-padding-y-comfortable) var(--ids-comp-segmented-control-toggle-button-size-padding-x-comfortable);
69
- gap: var(--ids-comp-segmented-control-toggle-button-size-gap-comfortable);
70
- font-family: var(--ids-comp-segmented-control-toggle-button-typography-font-family-comfortable);
71
- font-size: var(--ids-comp-segmented-control-toggle-button-typography-font-size-comfortable);
72
- font-weight: var(--ids-comp-segmented-control-toggle-button-typography-font-weight-comfortable);
73
- letter-spacing: var(--ids-comp-segmented-control-toggle-button-typography-letter-spacing-comfortable);
74
- line-height: var(--ids-comp-segmented-control-toggle-button-typography-line-height-comfortable);
75
- }
76
- .ids-segmented-control-toggle.ids-segmented-control-toggle-comfortable .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-comfortable .ids-segmented-control-toggle-item > button:focus-visible {
77
- outline-width: var(--ids-comp-segmented-control-toggle-focused-outline-size-outline-width-comfortable);
78
- }
79
- .ids-segmented-control-toggle.ids-segmented-control-toggle-comfortable .ids-segmented-control-toggle-item .ids-icon {
80
- height: var(--ids-comp-segmented-control-toggle-button-size-icon-comfortable);
81
- width: var(--ids-comp-segmented-control-toggle-button-size-icon-comfortable);
82
- font-size: var(--ids-comp-segmented-control-toggle-button-icon-typography-font-size-comfortable);
83
- font-weight: var(--ids-comp-segmented-control-toggle-button-icon-typography-font-weight-comfortable);
84
- line-height: var(--ids-comp-segmented-control-toggle-button-icon-typography-line-height-comfortable);
85
- }
86
- .ids-segmented-control-toggle.ids-segmented-control-toggle-spacious {
87
- padding: var(--ids-comp-segmented-control-toggle-container-size-padding-y-spacious) var(--ids-comp-segmented-control-toggle-container-size-padding-x-spacious);
88
- gap: var(--ids-comp-segmented-control-toggle-container-size-gap-spacious);
89
- border-top-left-radius: var(--ids-comp-segmented-control-toggle-container-size-border-radius-left-spacious);
90
- border-top-right-radius: var(--ids-comp-segmented-control-toggle-container-size-border-radius-right-spacious);
91
- border-bottom-left-radius: var(--ids-comp-segmented-control-toggle-container-size-border-radius-left-spacious);
92
- border-bottom-right-radius: var(--ids-comp-segmented-control-toggle-container-size-border-radius-right-spacious);
93
- }
94
- .ids-segmented-control-toggle.ids-segmented-control-toggle-spacious .ids-segmented-control-toggle-item > button {
95
- border-radius: var(--ids-comp-segmented-control-toggle-button-size-border-radius-spacious);
96
- border-width: var(--ids-comp-segmented-control-toggle-button-size-border-width-spacious);
97
- padding: var(--ids-comp-segmented-control-toggle-button-size-padding-y-spacious) var(--ids-comp-segmented-control-toggle-button-size-padding-x-spacious);
98
- gap: var(--ids-comp-segmented-control-toggle-button-size-gap-spacious);
99
- font-family: var(--ids-comp-segmented-control-toggle-button-typography-font-family-spacious);
100
- font-size: var(--ids-comp-segmented-control-toggle-button-typography-font-size-spacious);
101
- font-weight: var(--ids-comp-segmented-control-toggle-button-typography-font-weight-spacious);
102
- letter-spacing: var(--ids-comp-segmented-control-toggle-button-typography-letter-spacing-spacious);
103
- line-height: var(--ids-comp-segmented-control-toggle-button-typography-line-height-spacious);
104
- }
105
- .ids-segmented-control-toggle.ids-segmented-control-toggle-spacious .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-spacious .ids-segmented-control-toggle-item > button:focus-visible {
106
- outline-width: var(--ids-comp-segmented-control-toggle-focused-outline-size-outline-width-spacious);
107
- }
108
- .ids-segmented-control-toggle.ids-segmented-control-toggle-spacious .ids-segmented-control-toggle-item .ids-icon {
109
- height: var(--ids-comp-segmented-control-toggle-button-size-icon-spacious);
110
- width: var(--ids-comp-segmented-control-toggle-button-size-icon-spacious);
111
- font-size: var(--ids-comp-segmented-control-toggle-button-icon-typography-font-size-spacious);
112
- font-weight: var(--ids-comp-segmented-control-toggle-button-icon-typography-font-weight-spacious);
113
- line-height: var(--ids-comp-segmented-control-toggle-button-icon-typography-line-height-spacious);
114
- }
115
- .ids-segmented-control-toggle.ids-segmented-control-toggle-dense {
116
- padding: var(--ids-comp-segmented-control-toggle-container-size-padding-y-dense) var(--ids-comp-segmented-control-toggle-container-size-padding-x-dense);
117
- gap: var(--ids-comp-segmented-control-toggle-container-size-gap-dense);
118
- border-top-left-radius: var(--ids-comp-segmented-control-toggle-container-size-border-radius-left-dense);
119
- border-top-right-radius: var(--ids-comp-segmented-control-toggle-container-size-border-radius-right-dense);
120
- border-bottom-left-radius: var(--ids-comp-segmented-control-toggle-container-size-border-radius-left-dense);
121
- border-bottom-right-radius: var(--ids-comp-segmented-control-toggle-container-size-border-radius-right-dense);
122
- }
123
- .ids-segmented-control-toggle.ids-segmented-control-toggle-dense .ids-segmented-control-toggle-item > button {
124
- border-radius: var(--ids-comp-segmented-control-toggle-button-size-border-radius-dense);
125
- border-width: var(--ids-comp-segmented-control-toggle-button-size-border-width-dense);
126
- padding: var(--ids-comp-segmented-control-toggle-button-size-padding-y-dense) var(--ids-comp-segmented-control-toggle-button-size-padding-x-dense);
127
- gap: var(--ids-comp-segmented-control-toggle-button-size-gap-dense);
128
- font-family: var(--ids-comp-segmented-control-toggle-button-typography-font-family-dense);
129
- font-size: var(--ids-comp-segmented-control-toggle-button-typography-font-size-dense);
130
- font-weight: var(--ids-comp-segmented-control-toggle-button-typography-font-weight-dense);
131
- letter-spacing: var(--ids-comp-segmented-control-toggle-button-typography-letter-spacing-dense);
132
- line-height: var(--ids-comp-segmented-control-toggle-button-typography-line-height-dense);
133
- }
134
- .ids-segmented-control-toggle.ids-segmented-control-toggle-dense .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-dense .ids-segmented-control-toggle-item > button:focus-visible {
135
- outline-width: var(--ids-comp-segmented-control-toggle-focused-outline-size-outline-width-dense);
136
- }
137
- .ids-segmented-control-toggle.ids-segmented-control-toggle-dense .ids-segmented-control-toggle-item .ids-icon {
138
- height: var(--ids-comp-segmented-control-toggle-button-size-icon-dense);
139
- width: var(--ids-comp-segmented-control-toggle-button-size-icon-dense);
140
- font-size: var(--ids-comp-segmented-control-toggle-button-icon-typography-font-size-dense);
141
- font-weight: var(--ids-comp-segmented-control-toggle-button-icon-typography-font-weight-dense);
142
- line-height: var(--ids-comp-segmented-control-toggle-button-icon-typography-line-height-dense);
143
- }
144
- .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-filled {
145
- background-color: var(--ids-comp-segmented-control-toggle-container-filled-color-bg-surface-default);
146
- }
147
- .ids-segmented-control-toggle.ids-segmented-control-toggle-surface.ids-segmented-control-toggle-outlined {
148
- background-color: var(--ids-comp-segmented-control-toggle-container-outlined-color-bg-surface-default);
149
- }
150
- .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-filled {
151
- background-color: var(--ids-comp-segmented-control-toggle-container-filled-color-bg-light-default);
152
- }
153
- .ids-segmented-control-toggle.ids-segmented-control-toggle-light.ids-segmented-control-toggle-outlined {
154
- background-color: var(--ids-comp-segmented-control-toggle-container-outlined-color-bg-light-default);
155
- }
156
- .ids-segmented-control-toggle .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle .ids-segmented-control-toggle-item > button:focus-visible {
157
- outline-color: var(--ids-comp-segmented-control-toggle-focused-outline-color-dark-focused);
158
- }
159
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button {
160
- background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-default);
161
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-default);
162
- border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-default);
163
- }
164
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button .ids-icon {
165
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-default);
166
- }
167
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
168
- background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-active);
169
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-active);
170
- border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-active);
171
- }
172
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon {
173
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-active);
174
- }
175
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:hover {
176
- background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-hovered);
177
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-hovered);
178
- border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-hovered);
179
- }
180
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:hover .ids-icon {
181
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-hovered);
182
- }
183
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:active {
184
- background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-pressed);
185
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-pressed);
186
- border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-pressed);
187
- }
188
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:active .ids-icon {
189
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-pressed);
190
- }
191
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:focus-visible {
192
- background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-focused);
193
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-focused);
194
- border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-focused);
195
- }
196
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:focus-visible .ids-icon {
197
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-focused);
198
- }
199
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:disabled {
200
- background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-primary-disabled);
201
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-primary-disabled);
202
- border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-disabled);
203
- }
204
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary > button:disabled .ids-icon {
205
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-disabled);
206
- }
207
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button {
208
- background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-default);
209
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-default);
210
- border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-default);
211
- }
212
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button .ids-icon {
213
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-default);
214
- }
215
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
216
- background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-active);
217
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-active);
218
- border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-active);
219
- }
220
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon {
221
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-active);
222
- }
223
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:hover {
224
- background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-hovered);
225
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-hovered);
226
- border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-hovered);
227
- }
228
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:hover .ids-icon {
229
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-hovered);
230
- }
231
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:active {
232
- background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-pressed);
233
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-pressed);
234
- border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-pressed);
235
- }
236
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:active .ids-icon {
237
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-pressed);
238
- }
239
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:focus-visible {
240
- background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-focused);
241
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-focused);
242
- border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-focused);
243
- }
244
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:focus-visible .ids-icon {
245
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-focused);
246
- }
247
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:disabled {
248
- background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-disabled);
249
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-disabled);
250
- border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-disabled);
251
- }
252
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary > button:disabled .ids-icon {
253
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-disabled);
254
- }
255
- .ids-segmented-control-toggle .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle .ids-segmented-control-toggle-item > button:focus-visible {
256
- outline-color: var(--ids-comp-segmented-control-toggle-focused-outline-color-dark-focused);
257
- }
258
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button {
259
- background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-default);
260
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-default);
261
- border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-default);
262
- }
263
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button .ids-icon {
264
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-default);
265
- }
266
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
267
- background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-active);
268
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-active);
269
- border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-active);
270
- }
271
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon {
272
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-active);
273
- }
274
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:hover {
275
- background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-hovered);
276
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-hovered);
277
- border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-hovered);
278
- }
279
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:hover .ids-icon {
280
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-hovered);
281
- }
282
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:active {
283
- background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-pressed);
284
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-pressed);
285
- border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-pressed);
286
- }
287
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:active .ids-icon {
288
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-pressed);
289
- }
290
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:focus-visible {
291
- background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-focused);
292
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-focused);
293
- border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-focused);
294
- }
295
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:focus-visible .ids-icon {
296
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-focused);
297
- }
298
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:disabled {
299
- background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-surface-disabled);
300
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-surface-disabled);
301
- border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-disabled);
302
- }
303
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface > button:disabled .ids-icon {
304
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-disabled);
305
- }
306
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button {
307
- background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-default);
308
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-default);
309
- border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-default);
310
- }
311
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button .ids-icon {
312
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-default);
313
- }
314
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
315
- background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-active);
316
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-active);
317
- border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-active);
318
- }
319
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon {
320
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-active);
321
- }
322
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:hover {
323
- background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-hovered);
324
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-hovered);
325
- border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-hovered);
326
- }
327
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:hover .ids-icon {
328
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-hovered);
329
- }
330
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:active {
331
- background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-pressed);
332
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-pressed);
333
- border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-pressed);
334
- }
335
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:active .ids-icon {
336
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-pressed);
337
- }
338
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:focus-visible {
339
- background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-focused);
340
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-focused);
341
- border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-focused);
342
- }
343
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:focus-visible .ids-icon {
344
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-focused);
345
- }
346
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:disabled {
347
- background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-disabled);
348
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-disabled);
349
- border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-disabled);
350
- }
351
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface > button:disabled .ids-icon {
352
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-disabled);
353
- }
354
- .ids-segmented-control-toggle .ids-segmented-control-toggle-item > button:focus, .ids-segmented-control-toggle .ids-segmented-control-toggle-item > button:focus-visible {
355
- outline-color: var(--ids-comp-segmented-control-toggle-focused-outline-color-light-focused);
356
- }
357
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button {
358
- background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-default);
359
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-default);
360
- border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-default);
361
- }
362
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button .ids-icon {
363
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-default);
364
- }
365
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
366
- background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-active);
367
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-active);
368
- border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-active);
369
- }
370
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon {
371
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-active);
372
- }
373
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:hover {
374
- background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-hovered);
375
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-hovered);
376
- border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-hovered);
377
- }
378
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:hover .ids-icon {
379
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-hovered);
380
- }
381
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:active {
382
- background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-pressed);
383
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-pressed);
384
- border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-pressed);
385
- }
386
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:active .ids-icon {
387
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-pressed);
388
- }
389
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:focus-visible {
390
- background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-focused);
391
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-focused);
392
- border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-focused);
393
- }
394
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:focus-visible .ids-icon {
395
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-focused);
396
- }
397
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:disabled {
398
- background-color: var(--ids-comp-segmented-control-toggle-button-filled-color-bg-light-disabled);
399
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-label-light-disabled);
400
- border-color: var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-disabled);
401
- }
402
- .ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light > button:disabled .ids-icon {
403
- color: var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-disabled);
404
- }
405
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button {
406
- background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-default);
407
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-default);
408
- border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-default);
409
- }
410
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button .ids-icon {
411
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-default);
412
- }
413
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button.ids-segmented-control-toggle-item-selected:not(:disabled) {
414
- background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-active);
415
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-active);
416
- border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-active);
417
- }
418
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon {
419
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-active);
420
- }
421
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:hover {
422
- background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-hovered);
423
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-hovered);
424
- border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-hovered);
425
- }
426
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:hover .ids-icon {
427
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-hovered);
428
- }
429
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:active {
430
- background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-pressed);
431
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-pressed);
432
- border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-pressed);
433
- }
434
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:active .ids-icon {
435
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-pressed);
436
- }
437
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:focus, .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:focus-visible {
438
- background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-focused);
439
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-focused);
440
- border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-focused);
441
- }
442
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:focus .ids-icon, .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:focus-visible .ids-icon {
443
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-focused);
444
- }
445
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:disabled {
446
- background-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-disabled);
447
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-disabled);
448
- border-color: var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-disabled);
449
- }
450
- .ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light > button:disabled .ids-icon {
451
- color: var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-disabled);
452
- }
package/dist/segmented-control/segmented-control-toggle.min.css DELETED
@@ -1 +0,0 @@
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,.ids-segmented-control-toggle .ids-segmented-control-toggle-item>button:focus-visible{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-item>button:not(:disabled){cursor:pointer}.ids-segmented-control-toggle .ids-segmented-control-toggle-item>button:disabled{cursor:not-allowed}.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,.ids-segmented-control-toggle.ids-segmented-control-toggle-compact .ids-segmented-control-toggle-item>button:focus-visible{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);font-size:var(--ids-comp-segmented-control-toggle-button-icon-typography-font-size-compact);font-weight:var(--ids-comp-segmented-control-toggle-button-icon-typography-font-weight-compact);line-height:var(--ids-comp-segmented-control-toggle-button-icon-typography-line-height-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,.ids-segmented-control-toggle.ids-segmented-control-toggle-comfortable .ids-segmented-control-toggle-item>button:focus-visible{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);font-size:var(--ids-comp-segmented-control-toggle-button-icon-typography-font-size-comfortable);font-weight:var(--ids-comp-segmented-control-toggle-button-icon-typography-font-weight-comfortable);line-height:var(--ids-comp-segmented-control-toggle-button-icon-typography-line-height-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,.ids-segmented-control-toggle.ids-segmented-control-toggle-spacious .ids-segmented-control-toggle-item>button:focus-visible{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);font-size:var(--ids-comp-segmented-control-toggle-button-icon-typography-font-size-spacious);font-weight:var(--ids-comp-segmented-control-toggle-button-icon-typography-font-weight-spacious);line-height:var(--ids-comp-segmented-control-toggle-button-icon-typography-line-height-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,.ids-segmented-control-toggle.ids-segmented-control-toggle-dense .ids-segmented-control-toggle-item>button:focus-visible{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);font-size:var(--ids-comp-segmented-control-toggle-button-icon-typography-font-size-dense);font-weight:var(--ids-comp-segmented-control-toggle-button-icon-typography-font-weight-dense);line-height:var(--ids-comp-segmented-control-toggle-button-icon-typography-line-height-dense)}.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)}.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)}.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)}.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)}.ids-segmented-control-toggle .ids-segmented-control-toggle-item>button:focus,.ids-segmented-control-toggle .ids-segmented-control-toggle-item>button:focus-visible{outline-color:var(--ids-comp-segmented-control-toggle-focused-outline-color-dark-focused)}.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary>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);border-color:var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-default)}.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary>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-filled .ids-segmented-control-toggle-item-primary>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);border-color:var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-active)}.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary>button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon{color:var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-active)}.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary>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);border-color:var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-hovered)}.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary>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-filled .ids-segmented-control-toggle-item-primary>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);border-color:var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-pressed)}.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary>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-filled .ids-segmented-control-toggle-item-primary>button:focus,.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary>button:focus-visible{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);border-color:var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-focused)}.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary>button:focus .ids-icon,.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary>button:focus-visible .ids-icon{color:var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-primary-focused)}.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary>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);border-color:var(--ids-comp-segmented-control-toggle-button-filled-color-border-primary-disabled)}.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-primary>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-outlined .ids-segmented-control-toggle-item-primary>button{background-color:var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-default);color:var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-default);border-color:var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-default)}.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary>button .ids-icon{color:var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-default)}.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary>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-outlined-color-fg-label-primary-active);border-color:var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-active)}.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary>button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon{color:var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-active)}.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary>button:hover{background-color:var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-hovered);color:var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-hovered);border-color:var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-hovered)}.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary>button:hover .ids-icon{color:var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-hovered)}.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary>button:active{background-color:var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-pressed);color:var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-pressed);border-color:var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-pressed)}.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary>button:active .ids-icon{color:var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-pressed)}.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary>button:focus,.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary>button:focus-visible{background-color:var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-focused);color:var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-focused);border-color:var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-focused)}.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary>button:focus .ids-icon,.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary>button:focus-visible .ids-icon{color:var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-focused)}.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary>button:disabled{background-color:var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-primary-disabled);color:var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-primary-disabled);border-color:var(--ids-comp-segmented-control-toggle-button-outlined-color-border-primary-disabled)}.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-primary>button:disabled .ids-icon{color:var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-primary-disabled)}.ids-segmented-control-toggle .ids-segmented-control-toggle-item>button:focus,.ids-segmented-control-toggle .ids-segmented-control-toggle-item>button:focus-visible{outline-color:var(--ids-comp-segmented-control-toggle-focused-outline-color-dark-focused)}.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface>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);border-color:var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-default)}.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface>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-filled .ids-segmented-control-toggle-item-surface>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);border-color:var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-active)}.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface>button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon{color:var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-active)}.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface>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);border-color:var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-hovered)}.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface>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-filled .ids-segmented-control-toggle-item-surface>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);border-color:var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-pressed)}.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface>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-filled .ids-segmented-control-toggle-item-surface>button:focus,.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface>button:focus-visible{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);border-color:var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-focused)}.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface>button:focus .ids-icon,.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface>button:focus-visible .ids-icon{color:var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-surface-focused)}.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface>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);border-color:var(--ids-comp-segmented-control-toggle-button-filled-color-border-surface-disabled)}.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-surface>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-outlined .ids-segmented-control-toggle-item-surface>button{background-color:var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-default);color:var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-default);border-color:var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-default)}.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface>button .ids-icon{color:var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-default)}.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface>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-outlined-color-fg-label-surface-active);border-color:var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-active)}.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface>button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon{color:var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-active)}.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface>button:hover{background-color:var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-hovered);color:var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-hovered);border-color:var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-hovered)}.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface>button:hover .ids-icon{color:var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-hovered)}.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface>button:active{background-color:var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-pressed);color:var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-pressed);border-color:var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-pressed)}.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface>button:active .ids-icon{color:var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-pressed)}.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface>button:focus,.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface>button:focus-visible{background-color:var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-focused);color:var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-focused);border-color:var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-focused)}.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface>button:focus .ids-icon,.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface>button:focus-visible .ids-icon{color:var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-focused)}.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface>button:disabled{background-color:var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-surface-disabled);color:var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-surface-disabled);border-color:var(--ids-comp-segmented-control-toggle-button-outlined-color-border-surface-disabled)}.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-surface>button:disabled .ids-icon{color:var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-surface-disabled)}.ids-segmented-control-toggle .ids-segmented-control-toggle-item>button:focus,.ids-segmented-control-toggle .ids-segmented-control-toggle-item>button:focus-visible{outline-color:var(--ids-comp-segmented-control-toggle-focused-outline-color-light-focused)}.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light>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);border-color:var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-default)}.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light>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-filled .ids-segmented-control-toggle-item-light>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);border-color:var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-active)}.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light>button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon{color:var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-active)}.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light>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);border-color:var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-hovered)}.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light>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-filled .ids-segmented-control-toggle-item-light>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);border-color:var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-pressed)}.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light>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-filled .ids-segmented-control-toggle-item-light>button:focus,.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light>button:focus-visible{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);border-color:var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-focused)}.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light>button:focus .ids-icon,.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light>button:focus-visible .ids-icon{color:var(--ids-comp-segmented-control-toggle-button-filled-color-fg-icon-light-focused)}.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light>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);border-color:var(--ids-comp-segmented-control-toggle-button-filled-color-border-light-disabled)}.ids-segmented-control-toggle.ids-segmented-control-toggle-filled .ids-segmented-control-toggle-item-light>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-outlined .ids-segmented-control-toggle-item-light>button{background-color:var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-default);color:var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-default);border-color:var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-default)}.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light>button .ids-icon{color:var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-default)}.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light>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-outlined-color-fg-label-light-active);border-color:var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-active)}.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light>button.ids-segmented-control-toggle-item-selected:not(:disabled) .ids-icon{color:var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-active)}.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light>button:hover{background-color:var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-hovered);color:var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-hovered);border-color:var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-hovered)}.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light>button:hover .ids-icon{color:var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-hovered)}.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light>button:active{background-color:var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-pressed);color:var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-pressed);border-color:var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-pressed)}.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light>button:active .ids-icon{color:var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-pressed)}.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light>button:focus,.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light>button:focus-visible{background-color:var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-focused);color:var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-focused);border-color:var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-focused)}.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light>button:focus .ids-icon,.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light>button:focus-visible .ids-icon{color:var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-focused)}.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light>button:disabled{background-color:var(--ids-comp-segmented-control-toggle-button-outlined-color-bg-light-disabled);color:var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-label-light-disabled);border-color:var(--ids-comp-segmented-control-toggle-button-outlined-color-border-light-disabled)}.ids-segmented-control-toggle.ids-segmented-control-toggle-outlined .ids-segmented-control-toggle-item-light>button:disabled .ids-icon{color:var(--ids-comp-segmented-control-toggle-button-outlined-color-fg-icon-light-disabled)}