@i-cell/ids-styles 0.0.1 → 0.0.2

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 (32) hide show
  1. package/dist/accordion/accordion.css +29 -14
  2. package/dist/accordion/accordion.min.css +1 -1
  3. package/dist/accordion/accordion.plugin.js +193 -0
  4. package/dist/action-item/action-item.css +33 -33
  5. package/dist/action-item/action-item.min.css +1 -1
  6. package/dist/action-item/action-item.plugin.js +180 -0
  7. package/dist/action-panel/action-panel.css +12 -12
  8. package/dist/action-panel/action-panel.min.css +1 -1
  9. package/dist/action-panel/action-panel.plugin.js +94 -0
  10. package/dist/avatar/avatar.css +78 -82
  11. package/dist/avatar/avatar.min.css +1 -1
  12. package/dist/avatar/avatar.plugin.js +269 -0
  13. package/dist/button/button.css +187 -180
  14. package/dist/button/button.min.css +1 -1
  15. package/dist/button/button.plugin.js +800 -0
  16. package/dist/card/card.plugin.js +850 -0
  17. package/dist/components.css +718 -637
  18. package/dist/components.min.css +1 -1
  19. package/dist/components.plugin.js +4011 -0
  20. package/dist/dialog/dialog.css +92 -43
  21. package/dist/dialog/dialog.min.css +1 -1
  22. package/dist/dialog/dialog.plugin.js +224 -0
  23. package/dist/divider/divider.css +2 -2
  24. package/dist/divider/divider.min.css +1 -1
  25. package/dist/divider/divider.plugin.js +39 -0
  26. package/dist/icon-button/icon-button.css +102 -102
  27. package/dist/icon-button/icon-button.min.css +1 -1
  28. package/dist/icon-button/icon-button.plugin.js +674 -0
  29. package/dist/tag/tag.css +183 -169
  30. package/dist/tag/tag.min.css +1 -1
  31. package/dist/tag/tag.plugin.js +769 -0
  32. package/package.json +14 -4
package/dist/components.plugin.js ADDED
@@ -0,0 +1,4011 @@
1
+ // Tailwind CSS plugin for the components component in the i-Cell Design System
2
+ module.exports = function ComponentsPlugin() {
3
+ return function ({ addComponents }) {
4
+ const cssObj = {
5
+ '.ids-accordion': {
6
+ display: 'flex',
7
+ flexDirection: 'column',
8
+ alignItems: 'flex-start',
9
+ width: '100%',
10
+ background: 'var(--ids-comp-accordion-item-color-bg-enabled)',
11
+ },
12
+ '.ids-accordion>.ids-accordion-summary': {
13
+ display: 'flex',
14
+ alignItems: 'center',
15
+ width: '100%',
16
+ borderStyle: 'solid',
17
+ cursor: 'pointer',
18
+ },
19
+ '.ids-accordion>.ids-accordion-summary:focus': {
20
+ outlineOffset: '2px',
21
+ outlineStyle: 'solid',
22
+ outlineWidth: 'var(--ids-comp-accordion-summary-focused-outline-size-outline)',
23
+ outlineColor: 'var(--ids-comp-accordion-summary-focused-outline-color-dark-focused)',
24
+ },
25
+ '.ids-theme-dark .ids-accordion>.ids-accordion-summary:focus': {
26
+ outlineColor: 'var(--ids-comp-accordion-summary-focused-outline-color-light-focused)',
27
+ },
28
+ '.ids-accordion>.ids-accordion-summary>.ids-accordion-title': {
29
+ flex: '1 0 0',
30
+ overflow: 'hidden',
31
+ textOverflow: 'ellipsis',
32
+ fontStyle: 'normal',
33
+ },
34
+ '.ids-accordion.ids-accordion-disabled>.ids-accordion-summary': { pointerEvents: 'none', userSelect: 'none' },
35
+ '.ids-accordion>.ids-accordion-content': {
36
+ display: 'flex',
37
+ flexDirection: 'column',
38
+ background: 'var(--ids-comp-accordion-details-color-bg-enabled)',
39
+ },
40
+ '.ids-accordion.ids-accordion-compact': {
41
+ padding: 'var(--ids-comp-size-accordion-item-size-padding-y-compact) var(--ids-comp-size-accordion-item-size-padding-x-compact)',
42
+ gap: 'var(--ids-comp-size-accordion-item-size-gap-compact)',
43
+ borderRadius: 'var(--ids-comp-size-accordion-item-size-border-radius-compact)',
44
+ },
45
+ '.ids-accordion.ids-accordion-compact>.ids-accordion-summary': {
46
+ height: 'var(--ids-comp-size-accordion-summary-size-height-compact)',
47
+ padding:
48
+ 'var(--ids-comp-size-accordion-summary-size-padding-y-compact) var(--ids-comp-size-accordion-summary-size-padding-x-compact)',
49
+ gap: 'var(--ids-comp-size-accordion-summary-size-gap-compact)',
50
+ borderRadius: 'var(--ids-comp-size-accordion-summary-size-border-radius-compact)',
51
+ borderWidth: 'var(--ids-comp-size-accordion-summary-size-border-width-compact)',
52
+ },
53
+ '.ids-accordion.ids-accordion-compact>.ids-accordion-summary>.ids-accordion-title': {
54
+ fontFamily: 'var(--ids-comp-size-accordion-summary-typography-font-family-compact)',
55
+ fontSize: 'var(--ids-comp-size-accordion-summary-typography-font-size-compact)',
56
+ fontWeight: 'var(--ids-comp-size-accordion-summary-typography-font-weight-compact)',
57
+ letterSpacing: 'var(--ids-comp-size-accordion-summary-typography-letter-spacing-compact)',
58
+ lineHeight: 'var(--ids-comp-size-accordion-summary-typography-line-height-compact)',
59
+ },
60
+ '.ids-accordion.ids-accordion-compact>.ids-accordion-content': {
61
+ padding:
62
+ 'var(--ids-comp-size-accordion-details-size-padding-y-compact) var(--ids-comp-size-accordion-details-size-padding-x-compact)',
63
+ gap: 'var(--ids-comp-size-accordion-details-size-gap-compact)',
64
+ },
65
+ '.ids-accordion.ids-accordion-comfortable': {
66
+ padding:
67
+ 'var(--ids-comp-size-accordion-item-size-padding-y-comfortable) var(--ids-comp-size-accordion-item-size-padding-x-comfortable)',
68
+ gap: 'var(--ids-comp-size-accordion-item-size-gap-comfortable)',
69
+ borderRadius: 'var(--ids-comp-size-accordion-item-size-border-radius-comfortable)',
70
+ },
71
+ '.ids-accordion.ids-accordion-comfortable>.ids-accordion-summary': {
72
+ height: 'var(--ids-comp-size-accordion-summary-size-height-comfortable)',
73
+ padding:
74
+ 'var(--ids-comp-size-accordion-summary-size-padding-y-comfortable) var(--ids-comp-size-accordion-summary-size-padding-x-comfortable)',
75
+ gap: 'var(--ids-comp-size-accordion-summary-size-gap-comfortable)',
76
+ borderRadius: 'var(--ids-comp-size-accordion-summary-size-border-radius-comfortable)',
77
+ borderWidth: 'var(--ids-comp-size-accordion-summary-size-border-width-comfortable)',
78
+ },
79
+ '.ids-accordion.ids-accordion-comfortable>.ids-accordion-summary>.ids-accordion-title': {
80
+ fontFamily: 'var(--ids-comp-size-accordion-summary-typography-font-family-comfortable)',
81
+ fontSize: 'var(--ids-comp-size-accordion-summary-typography-font-size-comfortable)',
82
+ fontWeight: 'var(--ids-comp-size-accordion-summary-typography-font-weight-comfortable)',
83
+ letterSpacing: 'var(--ids-comp-size-accordion-summary-typography-letter-spacing-comfortable)',
84
+ lineHeight: 'var(--ids-comp-size-accordion-summary-typography-line-height-comfortable)',
85
+ },
86
+ '.ids-accordion.ids-accordion-comfortable>.ids-accordion-content': {
87
+ padding:
88
+ 'var(--ids-comp-size-accordion-details-size-padding-y-comfortable) var(--ids-comp-size-accordion-details-size-padding-x-comfortable)',
89
+ gap: 'var(--ids-comp-size-accordion-details-size-gap-comfortable)',
90
+ },
91
+ '.ids-accordion.ids-accordion-spacious': {
92
+ padding: 'var(--ids-comp-size-accordion-item-size-padding-y-spacious) var(--ids-comp-size-accordion-item-size-padding-x-spacious)',
93
+ gap: 'var(--ids-comp-size-accordion-item-size-gap-spacious)',
94
+ borderRadius: 'var(--ids-comp-size-accordion-item-size-border-radius-spacious)',
95
+ },
96
+ '.ids-accordion.ids-accordion-spacious>.ids-accordion-summary': {
97
+ height: 'var(--ids-comp-size-accordion-summary-size-height-spacious)',
98
+ padding:
99
+ 'var(--ids-comp-size-accordion-summary-size-padding-y-spacious) var(--ids-comp-size-accordion-summary-size-padding-x-spacious)',
100
+ gap: 'var(--ids-comp-size-accordion-summary-size-gap-spacious)',
101
+ borderRadius: 'var(--ids-comp-size-accordion-summary-size-border-radius-spacious)',
102
+ borderWidth: 'var(--ids-comp-size-accordion-summary-size-border-width-spacious)',
103
+ },
104
+ '.ids-accordion.ids-accordion-spacious>.ids-accordion-summary>.ids-accordion-title': {
105
+ fontFamily: 'var(--ids-comp-size-accordion-summary-typography-font-family-spacious)',
106
+ fontSize: 'var(--ids-comp-size-accordion-summary-typography-font-size-spacious)',
107
+ fontWeight: 'var(--ids-comp-size-accordion-summary-typography-font-weight-spacious)',
108
+ letterSpacing: 'var(--ids-comp-size-accordion-summary-typography-letter-spacing-spacious)',
109
+ lineHeight: 'var(--ids-comp-size-accordion-summary-typography-line-height-spacious)',
110
+ },
111
+ '.ids-accordion.ids-accordion-spacious>.ids-accordion-content': {
112
+ padding:
113
+ 'var(--ids-comp-size-accordion-details-size-padding-y-spacious) var(--ids-comp-size-accordion-details-size-padding-x-spacious)',
114
+ gap: 'var(--ids-comp-size-accordion-details-size-gap-spacious)',
115
+ },
116
+ '.ids-accordion.ids-accordion-dense': {
117
+ padding: 'var(--ids-comp-size-accordion-item-size-padding-y-dense) var(--ids-comp-size-accordion-item-size-padding-x-dense)',
118
+ gap: 'var(--ids-comp-size-accordion-item-size-gap-dense)',
119
+ borderRadius: 'var(--ids-comp-size-accordion-item-size-border-radius-dense)',
120
+ },
121
+ '.ids-accordion.ids-accordion-dense>.ids-accordion-summary': {
122
+ height: 'var(--ids-comp-size-accordion-summary-size-height-dense)',
123
+ padding: 'var(--ids-comp-size-accordion-summary-size-padding-y-dense) var(--ids-comp-size-accordion-summary-size-padding-x-dense)',
124
+ gap: 'var(--ids-comp-size-accordion-summary-size-gap-dense)',
125
+ borderRadius: 'var(--ids-comp-size-accordion-summary-size-border-radius-dense)',
126
+ borderWidth: 'var(--ids-comp-size-accordion-summary-size-border-width-dense)',
127
+ },
128
+ '.ids-accordion.ids-accordion-dense>.ids-accordion-summary>.ids-accordion-title': {
129
+ fontFamily: 'var(--ids-comp-size-accordion-summary-typography-font-family-dense)',
130
+ fontSize: 'var(--ids-comp-size-accordion-summary-typography-font-size-dense)',
131
+ fontWeight: 'var(--ids-comp-size-accordion-summary-typography-font-weight-dense)',
132
+ letterSpacing: 'var(--ids-comp-size-accordion-summary-typography-letter-spacing-dense)',
133
+ lineHeight: 'var(--ids-comp-size-accordion-summary-typography-line-height-dense)',
134
+ },
135
+ '.ids-accordion.ids-accordion-dense>.ids-accordion-content': {
136
+ padding: 'var(--ids-comp-size-accordion-details-size-padding-y-dense) var(--ids-comp-size-accordion-details-size-padding-x-dense)',
137
+ gap: 'var(--ids-comp-size-accordion-details-size-gap-dense)',
138
+ },
139
+ '.ids-accordion.ids-accordion-text>.ids-accordion-summary': {
140
+ background: 'var(--ids-comp-accordion-summary-text-color-bg-enabled)',
141
+ borderColor: 'var(--ids-comp-accordion-summary-text-color-border-enabled)',
142
+ color: 'var(--ids-comp-accordion-summary-text-color-fg-label-enabled)',
143
+ },
144
+ '.ids-accordion.ids-accordion-text>.ids-accordion-summary:hover': {
145
+ background: 'var(--ids-comp-accordion-summary-text-color-bg-hovered)',
146
+ borderColor: 'var(--ids-comp-accordion-summary-text-color-border-hovered)',
147
+ color: 'var(--ids-comp-accordion-summary-text-color-fg-label-hovered)',
148
+ },
149
+ '.ids-accordion.ids-accordion-text>.ids-accordion-summary:focus': {
150
+ background: 'var(--ids-comp-accordion-summary-text-color-bg-focused)',
151
+ borderColor: 'var(--ids-comp-accordion-summary-text-color-border-focused)',
152
+ color: 'var(--ids-comp-accordion-summary-text-color-fg-label-focused)',
153
+ },
154
+ '.ids-accordion.ids-accordion-text>.ids-accordion-summary:active': {
155
+ background: 'var(--ids-comp-accordion-summary-text-color-bg-pressed)',
156
+ borderColor: 'var(--ids-comp-accordion-summary-text-color-border-pressed)',
157
+ color: 'var(--ids-comp-accordion-summary-text-color-fg-label-pressed)',
158
+ },
159
+ '.ids-accordion.ids-accordion-text.ids-accordion-disabled>.ids-accordion-summary': {
160
+ background: 'var(--ids-comp-accordion-summary-text-color-bg-disabled)',
161
+ borderColor: 'var(--ids-comp-accordion-summary-text-color-border-disabled)',
162
+ color: 'var(--ids-comp-accordion-summary-text-color-fg-label-disabled)',
163
+ },
164
+ '.ids-accordion.ids-accordion-filled>.ids-accordion-summary': {
165
+ background: 'var(--ids-comp-accordion-summary-filled-color-bg-enabled)',
166
+ borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-enabled)',
167
+ color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-enabled)',
168
+ },
169
+ '.ids-accordion.ids-accordion-filled>.ids-accordion-summary:hover': {
170
+ background: 'var(--ids-comp-accordion-summary-filled-color-bg-hovered)',
171
+ borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-hovered)',
172
+ color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-hovered)',
173
+ },
174
+ '.ids-accordion.ids-accordion-filled>.ids-accordion-summary:focus': {
175
+ background: 'var(--ids-comp-accordion-summary-filled-color-bg-focused)',
176
+ borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-focused)',
177
+ color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-focused)',
178
+ },
179
+ '.ids-accordion.ids-accordion-filled>.ids-accordion-summary:active': {
180
+ background: 'var(--ids-comp-accordion-summary-filled-color-bg-pressed)',
181
+ borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-pressed)',
182
+ color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-pressed)',
183
+ },
184
+ '.ids-accordion.ids-accordion-filled.ids-accordion-disabled>.ids-accordion-summary': {
185
+ background: 'var(--ids-comp-accordion-summary-filled-color-bg-disabled)',
186
+ borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-disabled)',
187
+ color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-disabled)',
188
+ },
189
+ '.ids-action-item': { width: '100%', display: 'inline-flex', flexShrink: 0, alignItems: 'center', justifyContent: 'center' },
190
+ '.ids-action-item .ids-action-item-label': { overflow: 'hidden', textOverflow: 'ellipsis', fontStyle: 'normal' },
191
+ '.ids-action-item *[icon-leading],.ids-action-item *[icon-trailing]': {
192
+ gap: '10px',
193
+ display: 'flex',
194
+ alignItems: 'center',
195
+ justifyContent: 'center',
196
+ },
197
+ '.ids-action-item.ids-action-item-compact': {
198
+ gap: 'var(--ids-comp-size-action-item-size-gap-compact)',
199
+ borderRadius: 'var(--ids-comp-size-action-item-size-border-radius-compact)',
200
+ padding: 'var(--ids-comp-size-action-item-size-padding-y-compact) var(--ids-comp-size-action-item-size-padding-x-compact)',
201
+ height: 'var(--ids-comp-size-action-item-size-height-compact)',
202
+ fontFamily: 'var(--ids-comp-size-action-item-label-typography-font-family-compact)',
203
+ fontSize: 'var(--ids-comp-size-action-item-label-typography-font-size-compact)',
204
+ fontWeight: 'var(--ids-comp-size-action-item-label-typography-font-weight-compact)',
205
+ letterSpacing: 'var(--ids-comp-size-action-item-label-typography-letter-spacing-compact)',
206
+ lineHeight: 'var(--ids-comp-size-action-item-label-typography-line-height-compact)',
207
+ },
208
+ '.ids-action-item.ids-action-item-compact *[icon-leading],.ids-action-item.ids-action-item-compact *[icon-trailing]': {
209
+ width: 'var(--ids-comp-action-item-size-compact-icon)',
210
+ height: 'var(--ids-comp-action-item-size-compact-icon)',
211
+ },
212
+ '.ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface': {
213
+ border:
214
+ 'var(--ids-comp-size-action-item-size-border-width-compact) solid var(--ids-comp-action-item-text-color-border-surface-enabled)',
215
+ },
216
+ '.ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface:hover': {
217
+ border:
218
+ 'var(--ids-comp-size-action-item-size-border-width-compact) solid var(--ids-comp-action-item-text-color-border-surface-hovered)',
219
+ },
220
+ '.ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface:disabled': {
221
+ border:
222
+ 'var(--ids-comp-size-action-item-size-border-width-compact) solid var(--ids-comp-action-item-text-color-border-surface-disabled)',
223
+ },
224
+ '.ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface': {
225
+ border:
226
+ 'var(--ids-comp-size-action-item-size-border-width-compact) solid var(--ids-comp-action-item-filled-color-border-surface-enabled)',
227
+ },
228
+ '.ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface:hover': {
229
+ border:
230
+ 'var(--ids-comp-size-action-item-size-border-width-compact) solid var(--ids-comp-action-item-filled-color-border-surface-hovered)',
231
+ },
232
+ '.ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface:disabled': {
233
+ border:
234
+ 'var(--ids-comp-size-action-item-size-border-width-compact) solid var(--ids-comp-action-item-filled-color-border-surface-disabled)',
235
+ },
236
+ '.ids-action-item.ids-action-item-comfortable': {
237
+ gap: 'var(--ids-comp-size-action-item-size-gap-comfortable)',
238
+ borderRadius: 'var(--ids-comp-size-action-item-size-border-radius-comfortable)',
239
+ padding: 'var(--ids-comp-size-action-item-size-padding-y-comfortable) var(--ids-comp-size-action-item-size-padding-x-comfortable)',
240
+ height: 'var(--ids-comp-size-action-item-size-height-comfortable)',
241
+ fontFamily: 'var(--ids-comp-size-action-item-label-typography-font-family-comfortable)',
242
+ fontSize: 'var(--ids-comp-size-action-item-label-typography-font-size-comfortable)',
243
+ fontWeight: 'var(--ids-comp-size-action-item-label-typography-font-weight-comfortable)',
244
+ letterSpacing: 'var(--ids-comp-size-action-item-label-typography-letter-spacing-comfortable)',
245
+ lineHeight: 'var(--ids-comp-size-action-item-label-typography-line-height-comfortable)',
246
+ },
247
+ '.ids-action-item.ids-action-item-comfortable *[icon-leading],.ids-action-item.ids-action-item-comfortable *[icon-trailing]': {
248
+ width: 'var(--ids-comp-action-item-size-comfortable-icon)',
249
+ height: 'var(--ids-comp-action-item-size-comfortable-icon)',
250
+ },
251
+ '.ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface': {
252
+ border:
253
+ 'var(--ids-comp-size-action-item-size-border-width-comfortable) solid var(--ids-comp-action-item-text-color-border-surface-enabled)',
254
+ },
255
+ '.ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface:hover': {
256
+ border:
257
+ 'var(--ids-comp-size-action-item-size-border-width-comfortable) solid var(--ids-comp-action-item-text-color-border-surface-hovered)',
258
+ },
259
+ '.ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface:disabled': {
260
+ border:
261
+ 'var(--ids-comp-size-action-item-size-border-width-comfortable) solid var(--ids-comp-action-item-text-color-border-surface-disabled)',
262
+ },
263
+ '.ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface': {
264
+ border:
265
+ 'var(--ids-comp-size-action-item-size-border-width-comfortable) solid var(--ids-comp-action-item-filled-color-border-surface-enabled)',
266
+ },
267
+ '.ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface:hover': {
268
+ border:
269
+ 'var(--ids-comp-size-action-item-size-border-width-comfortable) solid var(--ids-comp-action-item-filled-color-border-surface-hovered)',
270
+ },
271
+ '.ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface:disabled': {
272
+ border:
273
+ 'var(--ids-comp-size-action-item-size-border-width-comfortable) solid var(--ids-comp-action-item-filled-color-border-surface-disabled)',
274
+ },
275
+ '.ids-action-item.ids-action-item-spacious': {
276
+ gap: 'var(--ids-comp-size-action-item-size-gap-spacious)',
277
+ borderRadius: 'var(--ids-comp-size-action-item-size-border-radius-spacious)',
278
+ padding: 'var(--ids-comp-size-action-item-size-padding-y-spacious) var(--ids-comp-size-action-item-size-padding-x-spacious)',
279
+ height: 'var(--ids-comp-size-action-item-size-height-spacious)',
280
+ fontFamily: 'var(--ids-comp-size-action-item-label-typography-font-family-spacious)',
281
+ fontSize: 'var(--ids-comp-size-action-item-label-typography-font-size-spacious)',
282
+ fontWeight: 'var(--ids-comp-size-action-item-label-typography-font-weight-spacious)',
283
+ letterSpacing: 'var(--ids-comp-size-action-item-label-typography-letter-spacing-spacious)',
284
+ lineHeight: 'var(--ids-comp-size-action-item-label-typography-line-height-spacious)',
285
+ },
286
+ '.ids-action-item.ids-action-item-spacious *[icon-leading],.ids-action-item.ids-action-item-spacious *[icon-trailing]': {
287
+ width: 'var(--ids-comp-action-item-size-spacious-icon)',
288
+ height: 'var(--ids-comp-action-item-size-spacious-icon)',
289
+ },
290
+ '.ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface': {
291
+ border:
292
+ 'var(--ids-comp-size-action-item-size-border-width-spacious) solid var(--ids-comp-action-item-text-color-border-surface-enabled)',
293
+ },
294
+ '.ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface:hover': {
295
+ border:
296
+ 'var(--ids-comp-size-action-item-size-border-width-spacious) solid var(--ids-comp-action-item-text-color-border-surface-hovered)',
297
+ },
298
+ '.ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface:disabled': {
299
+ border:
300
+ 'var(--ids-comp-size-action-item-size-border-width-spacious) solid var(--ids-comp-action-item-text-color-border-surface-disabled)',
301
+ },
302
+ '.ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface': {
303
+ border:
304
+ 'var(--ids-comp-size-action-item-size-border-width-spacious) solid var(--ids-comp-action-item-filled-color-border-surface-enabled)',
305
+ },
306
+ '.ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface:hover': {
307
+ border:
308
+ 'var(--ids-comp-size-action-item-size-border-width-spacious) solid var(--ids-comp-action-item-filled-color-border-surface-hovered)',
309
+ },
310
+ '.ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface:disabled': {
311
+ border:
312
+ 'var(--ids-comp-size-action-item-size-border-width-spacious) solid var(--ids-comp-action-item-filled-color-border-surface-disabled)',
313
+ },
314
+ '.ids-action-item.ids-action-item-text.ids-action-item-surface': {
315
+ color: 'var(--ids-comp-action-item-text-color-fg-label-surface-enabled)',
316
+ background: 'var(--ids-comp-action-item-text-color-bg-surface-enabled)',
317
+ },
318
+ '.ids-action-item.ids-action-item-text.ids-action-item-surface.ids-action-item-active': {
319
+ color: 'var(--ids-comp-action-item-text-color-fg-label-surface-active)',
320
+ background: 'var(--ids-comp-action-item-text-color-bg-surface-active)',
321
+ },
322
+ '.ids-action-item.ids-action-item-text.ids-action-item-surface:hover': {
323
+ color: 'var(--ids-comp-action-item-text-color-fg-label-surface-hovered)',
324
+ background: 'var(--ids-comp-action-item-text-color-bg-surface-hovered)',
325
+ },
326
+ '.ids-action-item.ids-action-item-text.ids-action-item-surface:focus': {
327
+ color: 'var(--ids-comp-action-item-text-color-fg-label-surface-focused)',
328
+ background: 'var(--ids-comp-action-item-text-color-bg-surface-focused)',
329
+ },
330
+ '.ids-action-item.ids-action-item-text.ids-action-item-surface:active': {
331
+ background: 'var(--ids-comp-action-item-text-color-bg-surface-pressed)',
332
+ },
333
+ '.ids-action-item.ids-action-item-text.ids-action-item-surface:disabled': {
334
+ color: 'var(--ids-comp-action-item-text-color-fg-label-surface-disabled)',
335
+ background: 'var(--ids-comp-action-item-text-color-bg-surface-disabled)',
336
+ },
337
+ '.ids-action-item.ids-action-item-filled.ids-action-item-surface': {
338
+ color: 'var(--ids-comp-action-item-filled-color-fg-label-surface-enabled)',
339
+ background: 'var(--ids-comp-action-item-filled-color-bg-surface-enabled)',
340
+ },
341
+ '.ids-action-item.ids-action-item-filled.ids-action-item-surface.ids-action-item-active': {
342
+ color: 'var(--ids-comp-action-item-filled-color-fg-label-surface-active)',
343
+ background: 'var(--ids-comp-action-item-filled-color-bg-surface-active)',
344
+ },
345
+ '.ids-action-item.ids-action-item-filled.ids-action-item-surface:hover': {
346
+ color: 'var(--ids-comp-action-item-filled-color-fg-label-surface-hovered)',
347
+ background: 'var(--ids-comp-action-item-filled-color-bg-surface-hovered)',
348
+ },
349
+ '.ids-action-item.ids-action-item-filled.ids-action-item-surface:focus': {
350
+ color: 'var(--ids-comp-action-item-filled-color-fg-label-surface-focused)',
351
+ background: 'var(--ids-comp-action-item-filled-color-bg-surface-focused)',
352
+ },
353
+ '.ids-action-item.ids-action-item-filled.ids-action-item-surface:active': {
354
+ background: 'var(--ids-comp-action-item-filled-color-bg-surface-pressed)',
355
+ },
356
+ '.ids-action-item.ids-action-item-filled.ids-action-item-surface:disabled': {
357
+ color: 'var(--ids-comp-action-item-filled-color-fg-label-surface-disabled)',
358
+ background: 'var(--ids-comp-action-item-filled-color-bg-surface-disabled)',
359
+ },
360
+ '.ids-action-panel': { display: 'flex', width: '22.25rem', flexDirection: 'column', alignItems: 'flex-start' },
361
+ '.ids-action-panel.ids-action-panel-compact': {
362
+ gap: 'var(--ids-comp-size-action-panel-size-gap-compact)',
363
+ padding: 'var(--ids-comp-size-action-panel-size-padding-y-compact) var(--ids-comp-size-action-panel-size-padding-x-compact)',
364
+ borderRadius: 'var(--ids-comp-size-action-panel-size-border-radius-compact)',
365
+ },
366
+ '.ids-action-panel.ids-action-panel-compact.ids-action-panel-filled.ids-action-panel-outlined': {
367
+ border:
368
+ 'var(--ids-comp-size-action-panel-size-border-compact) solid var(--ids-comp-action-panel-filled-color-border-light-enabled)',
369
+ },
370
+ '.ids-action-panel.ids-action-panel-compact.ids-action-panel-outlined.ids-action-panel-outlined': {
371
+ border:
372
+ 'var(--ids-comp-size-action-panel-size-border-compact) solid var(--ids-comp-action-panel-outlined-color-border-light-enabled)',
373
+ },
374
+ '.ids-action-panel.ids-action-panel-compact.ids-action-panel-elevated.ids-action-panel-outlined': {
375
+ border:
376
+ 'var(--ids-comp-size-action-panel-size-border-compact) solid var(--ids-comp-action-panel-elevated-color-border-light-enabled)',
377
+ },
378
+ '.ids-action-panel.ids-action-panel-comfortable': {
379
+ gap: 'var(--ids-comp-size-action-panel-size-gap-comfortable)',
380
+ padding:
381
+ 'var(--ids-comp-size-action-panel-size-padding-y-comfortable) var(--ids-comp-size-action-panel-size-padding-x-comfortable)',
382
+ borderRadius: 'var(--ids-comp-size-action-panel-size-border-radius-comfortable)',
383
+ },
384
+ '.ids-action-panel.ids-action-panel-comfortable.ids-action-panel-filled.ids-action-panel-outlined': {
385
+ border:
386
+ 'var(--ids-comp-size-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-filled-color-border-light-enabled)',
387
+ },
388
+ '.ids-action-panel.ids-action-panel-comfortable.ids-action-panel-outlined.ids-action-panel-outlined': {
389
+ border:
390
+ 'var(--ids-comp-size-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-outlined-color-border-light-enabled)',
391
+ },
392
+ '.ids-action-panel.ids-action-panel-comfortable.ids-action-panel-elevated.ids-action-panel-outlined': {
393
+ border:
394
+ 'var(--ids-comp-size-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-elevated-color-border-light-enabled)',
395
+ },
396
+ '.ids-action-panel.ids-action-panel-spacious': {
397
+ gap: 'var(--ids-comp-size-action-panel-size-gap-spacious)',
398
+ padding: 'var(--ids-comp-size-action-panel-size-padding-y-spacious) var(--ids-comp-size-action-panel-size-padding-x-spacious)',
399
+ borderRadius: 'var(--ids-comp-size-action-panel-size-border-radius-spacious)',
400
+ },
401
+ '.ids-action-panel.ids-action-panel-spacious.ids-action-panel-filled.ids-action-panel-outlined': {
402
+ border:
403
+ 'var(--ids-comp-size-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-filled-color-border-light-enabled)',
404
+ },
405
+ '.ids-action-panel.ids-action-panel-spacious.ids-action-panel-outlined.ids-action-panel-outlined': {
406
+ border:
407
+ 'var(--ids-comp-size-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-outlined-color-border-light-enabled)',
408
+ },
409
+ '.ids-action-panel.ids-action-panel-spacious.ids-action-panel-elevated.ids-action-panel-outlined': {
410
+ border:
411
+ 'var(--ids-comp-size-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-elevated-color-border-light-enabled)',
412
+ },
413
+ '.ids-action-panel.ids-action-panel-dense': {
414
+ gap: 'var(--ids-comp-size-action-panel-size-gap-dense)',
415
+ padding: 'var(--ids-comp-size-action-panel-size-padding-y-dense) var(--ids-comp-size-action-panel-size-padding-x-dense)',
416
+ borderRadius: 'var(--ids-comp-size-action-panel-size-border-radius-dense)',
417
+ },
418
+ '.ids-action-panel.ids-action-panel-dense.ids-action-panel-filled.ids-action-panel-outlined': {
419
+ border: 'var(--ids-comp-size-action-panel-size-border-dense) solid var(--ids-comp-action-panel-filled-color-border-light-enabled)',
420
+ },
421
+ '.ids-action-panel.ids-action-panel-dense.ids-action-panel-outlined.ids-action-panel-outlined': {
422
+ border:
423
+ 'var(--ids-comp-size-action-panel-size-border-dense) solid var(--ids-comp-action-panel-outlined-color-border-light-enabled)',
424
+ },
425
+ '.ids-action-panel.ids-action-panel-dense.ids-action-panel-elevated.ids-action-panel-outlined': {
426
+ border:
427
+ 'var(--ids-comp-size-action-panel-size-border-dense) solid var(--ids-comp-action-panel-elevated-color-border-light-enabled)',
428
+ },
429
+ '.ids-action-panel.ids-action-panel-filled': {
430
+ boxShadow: '0px 0px 0px 0px rgba(0,0,0,0),0px 0px 0px 0px rgba(0,0,0,0)',
431
+ background: 'var(--ids-comp-action-panel-filled-color-bg-light-enabled)',
432
+ },
433
+ '.ids-action-panel.ids-action-panel-outlined': {
434
+ boxShadow: '0px 0px 0px 0px rgba(0,0,0,0),0px 0px 0px 0px rgba(0,0,0,0)',
435
+ background: 'var(--ids-comp-action-panel-outlined-color-bg-light-enabled)',
436
+ },
437
+ '.ids-action-panel.ids-action-panel-elevated': {
438
+ boxShadow:
439
+ 'var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxl) var(--ids-smc-reference-container-effects-shadow-blur-xxxl) var(--ids-smc-reference-container-effects-shadow-spread-xxs) var(--ids-smc-reference-container-effects-shadow-color-dark-darker)',
440
+ background: 'var(--ids-comp-action-panel-elevated-color-bg-light-enabled)',
441
+ },
442
+ '.ids-action-panel button:hover': { borderColor: 'rgba(0,0,0,0)' },
443
+ '.ids-action-panel button:focus': { outline: 'none !important' },
444
+ '.cdk-overlay-connected-position-bounding-box:first-of-type .cdk-overlay-pane:has(.ids-action-panel)': { '@apply py-3': true },
445
+ '.ids-avatar': {
446
+ display: 'flex',
447
+ fontStyle: 'normal',
448
+ textAlign: 'center',
449
+ alignItems: 'center',
450
+ flexDirection: 'column',
451
+ justifyContent: 'center',
452
+ },
453
+ '.ids-avatar .ids-avatar-icon': {
454
+ gap: '10px',
455
+ display: 'flex',
456
+ alignItems: 'center',
457
+ justifyContent: 'center',
458
+ flexDirection: 'column',
459
+ width: '100%',
460
+ height: '100%',
461
+ },
462
+ '.ids-avatar .ids-avatar-image': { borderRadius: '50%', verticalAlign: 'middle', maxWidth: 'none' },
463
+ '.ids-avatar:focus': {
464
+ outlineOffset: '2px',
465
+ outline: 'var(--ids-comp-avatar-focused-outline-size-outline) solid var(--ids-comp-avatar-focused-outline-color-dark-focused)',
466
+ },
467
+ '.ids-avatar:focus.ids-avatar-light': {
468
+ outline: 'var(--ids-comp-avatar-focused-outline-size-outline) solid var(--ids-comp-avatar-focused-outline-color-light-focused)',
469
+ },
470
+ '.ids-avatar:active': { outline: 'none' },
471
+ '.ids-avatar.ids-avatar-compact': {
472
+ width: 'var(--ids-comp-size-avatar-size-height-compact)',
473
+ height: 'var(--ids-comp-size-avatar-size-width-compact)',
474
+ gap: 'var(--ids-comp-size-avatar-size-gap-compact)',
475
+ borderRadius: 'var(--ids-comp-size-avatar-size-border-radius-compact)',
476
+ padding: 'var(--ids-comp-size-avatar-size-padding-y-compact) var(--ids-comp-size-avatar-size-padding-x-compact)',
477
+ border: 'var(--ids-comp-size-avatar-size-border-compact) solid',
478
+ fontFamily: 'var(--ids-comp-size-avatar-initials-typography-font-family-compact)',
479
+ fontSize: 'var(--ids-comp-size-avatar-initials-typography-font-size-compact)',
480
+ fontWeight: 'var(--ids-comp-size-avatar-initials-typography-font-weight-compact)',
481
+ letterSpacing: 'var(--ids-comp-size-avatar-initials-typography-letter-spacing-compact)',
482
+ lineHeight: 'var(--ids-comp-size-avatar-initials-typography-line-height-compact)',
483
+ },
484
+ '.ids-avatar.ids-avatar-compact:has(.ids-avatar-image)': { padding: '0' },
485
+ '.ids-avatar.ids-avatar-compact .ids-avatar-image': {
486
+ width: 'var(--ids-comp-size-avatar-size-width-compact)',
487
+ height: 'var(--ids-comp-size-avatar-size-height-compact)',
488
+ },
489
+ '.ids-avatar.ids-avatar-comfortable': {
490
+ width: 'var(--ids-comp-size-avatar-size-height-comfortable)',
491
+ height: 'var(--ids-comp-size-avatar-size-width-comfortable)',
492
+ gap: 'var(--ids-comp-size-avatar-size-gap-comfortable)',
493
+ borderRadius: 'var(--ids-comp-size-avatar-size-border-radius-comfortable)',
494
+ padding: 'var(--ids-comp-size-avatar-size-padding-y-comfortable) var(--ids-comp-size-avatar-size-padding-x-comfortable)',
495
+ border: 'var(--ids-comp-size-avatar-size-border-comfortable) solid',
496
+ fontFamily: 'var(--ids-comp-size-avatar-initials-typography-font-family-comfortable)',
497
+ fontSize: 'var(--ids-comp-size-avatar-initials-typography-font-size-comfortable)',
498
+ fontWeight: 'var(--ids-comp-size-avatar-initials-typography-font-weight-comfortable)',
499
+ letterSpacing: 'var(--ids-comp-size-avatar-initials-typography-letter-spacing-comfortable)',
500
+ lineHeight: 'var(--ids-comp-size-avatar-initials-typography-line-height-comfortable)',
501
+ },
502
+ '.ids-avatar.ids-avatar-comfortable:has(.ids-avatar-image)': { padding: '0' },
503
+ '.ids-avatar.ids-avatar-comfortable .ids-avatar-image': {
504
+ width: 'var(--ids-comp-size-avatar-size-width-comfortable)',
505
+ height: 'var(--ids-comp-size-avatar-size-height-comfortable)',
506
+ },
507
+ '.ids-avatar.ids-avatar-spacious': {
508
+ width: 'var(--ids-comp-size-avatar-size-height-spacious)',
509
+ height: 'var(--ids-comp-size-avatar-size-width-spacious)',
510
+ gap: 'var(--ids-comp-size-avatar-size-gap-spacious)',
511
+ borderRadius: 'var(--ids-comp-size-avatar-size-border-radius-spacious)',
512
+ padding: 'var(--ids-comp-size-avatar-size-padding-y-spacious) var(--ids-comp-size-avatar-size-padding-x-spacious)',
513
+ border: 'var(--ids-comp-size-avatar-size-border-spacious) solid',
514
+ fontFamily: 'var(--ids-comp-size-avatar-initials-typography-font-family-spacious)',
515
+ fontSize: 'var(--ids-comp-size-avatar-initials-typography-font-size-spacious)',
516
+ fontWeight: 'var(--ids-comp-size-avatar-initials-typography-font-weight-spacious)',
517
+ letterSpacing: 'var(--ids-comp-size-avatar-initials-typography-letter-spacing-spacious)',
518
+ lineHeight: 'var(--ids-comp-size-avatar-initials-typography-line-height-spacious)',
519
+ },
520
+ '.ids-avatar.ids-avatar-spacious:has(.ids-avatar-image)': { padding: '0' },
521
+ '.ids-avatar.ids-avatar-spacious .ids-avatar-image': {
522
+ width: 'var(--ids-comp-size-avatar-size-width-spacious)',
523
+ height: 'var(--ids-comp-size-avatar-size-height-spacious)',
524
+ },
525
+ '.ids-avatar.ids-avatar-dense': {
526
+ width: 'var(--ids-comp-size-avatar-size-height-dense)',
527
+ height: 'var(--ids-comp-size-avatar-size-width-dense)',
528
+ gap: 'var(--ids-comp-size-avatar-size-gap-dense)',
529
+ borderRadius: 'var(--ids-comp-size-avatar-size-border-radius-dense)',
530
+ padding: 'var(--ids-comp-size-avatar-size-padding-y-dense) var(--ids-comp-size-avatar-size-padding-x-dense)',
531
+ border: 'var(--ids-comp-size-avatar-size-border-dense) solid',
532
+ fontFamily: 'var(--ids-comp-size-avatar-initials-typography-font-family-dense)',
533
+ fontSize: 'var(--ids-comp-size-avatar-initials-typography-font-size-dense)',
534
+ fontWeight: 'var(--ids-comp-size-avatar-initials-typography-font-weight-dense)',
535
+ letterSpacing: 'var(--ids-comp-size-avatar-initials-typography-letter-spacing-dense)',
536
+ lineHeight: 'var(--ids-comp-size-avatar-initials-typography-line-height-dense)',
537
+ },
538
+ '.ids-avatar.ids-avatar-dense:has(.ids-avatar-image)': { padding: '0' },
539
+ '.ids-avatar.ids-avatar-dense .ids-avatar-image': {
540
+ width: 'var(--ids-comp-size-avatar-size-width-dense)',
541
+ height: 'var(--ids-comp-size-avatar-size-height-dense)',
542
+ },
543
+ '.ids-avatar.ids-avatar-primary': {
544
+ color: 'var(--ids-comp-avatar-color-fg-primary-enabled)',
545
+ background: 'var(--ids-comp-avatar-color-bg-primary-enabled)',
546
+ borderColor: 'var(--ids-comp-avatar-color-border-primary-enabled)',
547
+ },
548
+ '.ids-avatar.ids-avatar-primary:hover': {
549
+ background: 'var(--ids-comp-avatar-color-bg-primary-hovered)',
550
+ borderColor: 'var(--ids-comp-avatar-color-border-primary-hovered)',
551
+ },
552
+ '.ids-avatar.ids-avatar-primary:focus': {
553
+ background: 'var(--ids-comp-avatar-color-bg-primary-focused)',
554
+ borderColor: 'var(--ids-comp-avatar-color-border-primary-focused)',
555
+ },
556
+ '.ids-avatar.ids-avatar-primary:active': {
557
+ background: 'var(--ids-comp-avatar-color-bg-primary-pressed)',
558
+ borderColor: 'var(--ids-comp-avatar-color-border-primary-pressed)',
559
+ },
560
+ '.ids-avatar.ids-avatar-primary .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-primary-enabled)' },
561
+ '.ids-avatar.ids-avatar-secondary': {
562
+ color: 'var(--ids-comp-avatar-color-fg-secondary-enabled)',
563
+ background: 'var(--ids-comp-avatar-color-bg-secondary-enabled)',
564
+ borderColor: 'var(--ids-comp-avatar-color-border-secondary-enabled)',
565
+ },
566
+ '.ids-avatar.ids-avatar-secondary:hover': {
567
+ background: 'var(--ids-comp-avatar-color-bg-secondary-hovered)',
568
+ borderColor: 'var(--ids-comp-avatar-color-border-secondary-hovered)',
569
+ },
570
+ '.ids-avatar.ids-avatar-secondary:focus': {
571
+ background: 'var(--ids-comp-avatar-color-bg-secondary-focused)',
572
+ borderColor: 'var(--ids-comp-avatar-color-border-secondary-focused)',
573
+ },
574
+ '.ids-avatar.ids-avatar-secondary:active': {
575
+ background: 'var(--ids-comp-avatar-color-bg-secondary-pressed)',
576
+ borderColor: 'var(--ids-comp-avatar-color-border-secondary-pressed)',
577
+ },
578
+ '.ids-avatar.ids-avatar-secondary .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-secondary-enabled)' },
579
+ '.ids-avatar.ids-avatar-brand': {
580
+ color: 'var(--ids-comp-avatar-color-fg-brand-enabled)',
581
+ background: 'var(--ids-comp-avatar-color-bg-brand-enabled)',
582
+ borderColor: 'var(--ids-comp-avatar-color-border-brand-enabled)',
583
+ },
584
+ '.ids-avatar.ids-avatar-brand:hover': {
585
+ background: 'var(--ids-comp-avatar-color-bg-brand-hovered)',
586
+ borderColor: 'var(--ids-comp-avatar-color-border-brand-hovered)',
587
+ },
588
+ '.ids-avatar.ids-avatar-brand:focus': {
589
+ background: 'var(--ids-comp-avatar-color-bg-brand-focused)',
590
+ borderColor: 'var(--ids-comp-avatar-color-border-brand-focused)',
591
+ },
592
+ '.ids-avatar.ids-avatar-brand:active': {
593
+ background: 'var(--ids-comp-avatar-color-bg-brand-pressed)',
594
+ borderColor: 'var(--ids-comp-avatar-color-border-brand-pressed)',
595
+ },
596
+ '.ids-avatar.ids-avatar-brand .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-brand-enabled)' },
597
+ '.ids-avatar.ids-avatar-error': {
598
+ color: 'var(--ids-comp-avatar-color-fg-error-enabled)',
599
+ background: 'var(--ids-comp-avatar-color-bg-error-enabled)',
600
+ borderColor: 'var(--ids-comp-avatar-color-border-error-enabled)',
601
+ },
602
+ '.ids-avatar.ids-avatar-error:hover': {
603
+ background: 'var(--ids-comp-avatar-color-bg-error-hovered)',
604
+ borderColor: 'var(--ids-comp-avatar-color-border-error-hovered)',
605
+ },
606
+ '.ids-avatar.ids-avatar-error:focus': {
607
+ background: 'var(--ids-comp-avatar-color-bg-error-focused)',
608
+ borderColor: 'var(--ids-comp-avatar-color-border-error-focused)',
609
+ },
610
+ '.ids-avatar.ids-avatar-error:active': {
611
+ background: 'var(--ids-comp-avatar-color-bg-error-pressed)',
612
+ borderColor: 'var(--ids-comp-avatar-color-border-error-pressed)',
613
+ },
614
+ '.ids-avatar.ids-avatar-error .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-error-enabled)' },
615
+ '.ids-avatar.ids-avatar-success': {
616
+ color: 'var(--ids-comp-avatar-color-fg-success-enabled)',
617
+ background: 'var(--ids-comp-avatar-color-bg-success-enabled)',
618
+ borderColor: 'var(--ids-comp-avatar-color-border-success-enabled)',
619
+ },
620
+ '.ids-avatar.ids-avatar-success:hover': {
621
+ background: 'var(--ids-comp-avatar-color-bg-success-hovered)',
622
+ borderColor: 'var(--ids-comp-avatar-color-border-success-hovered)',
623
+ },
624
+ '.ids-avatar.ids-avatar-success:focus': {
625
+ background: 'var(--ids-comp-avatar-color-bg-success-focused)',
626
+ borderColor: 'var(--ids-comp-avatar-color-border-success-focused)',
627
+ },
628
+ '.ids-avatar.ids-avatar-success:active': {
629
+ background: 'var(--ids-comp-avatar-color-bg-success-pressed)',
630
+ borderColor: 'var(--ids-comp-avatar-color-border-success-pressed)',
631
+ },
632
+ '.ids-avatar.ids-avatar-success .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-success-enabled)' },
633
+ '.ids-avatar.ids-avatar-warning': {
634
+ color: 'var(--ids-comp-avatar-color-fg-warning-enabled)',
635
+ background: 'var(--ids-comp-avatar-color-bg-warning-enabled)',
636
+ borderColor: 'var(--ids-comp-avatar-color-border-warning-enabled)',
637
+ },
638
+ '.ids-avatar.ids-avatar-warning:hover': {
639
+ background: 'var(--ids-comp-avatar-color-bg-warning-hovered)',
640
+ borderColor: 'var(--ids-comp-avatar-color-border-warning-hovered)',
641
+ },
642
+ '.ids-avatar.ids-avatar-warning:focus': {
643
+ background: 'var(--ids-comp-avatar-color-bg-warning-focused)',
644
+ borderColor: 'var(--ids-comp-avatar-color-border-warning-focused)',
645
+ },
646
+ '.ids-avatar.ids-avatar-warning:active': {
647
+ background: 'var(--ids-comp-avatar-color-bg-warning-pressed)',
648
+ borderColor: 'var(--ids-comp-avatar-color-border-warning-pressed)',
649
+ },
650
+ '.ids-avatar.ids-avatar-warning .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-warning-enabled)' },
651
+ '.ids-avatar.ids-avatar-light': {
652
+ color: 'var(--ids-comp-avatar-color-fg-light-enabled)',
653
+ background: 'var(--ids-comp-avatar-color-bg-light-enabled)',
654
+ borderColor: 'var(--ids-comp-avatar-color-border-light-enabled)',
655
+ },
656
+ '.ids-avatar.ids-avatar-light:hover': {
657
+ background: 'var(--ids-comp-avatar-color-bg-light-hovered)',
658
+ borderColor: 'var(--ids-comp-avatar-color-border-light-hovered)',
659
+ },
660
+ '.ids-avatar.ids-avatar-light:focus': {
661
+ background: 'var(--ids-comp-avatar-color-bg-light-focused)',
662
+ borderColor: 'var(--ids-comp-avatar-color-border-light-focused)',
663
+ },
664
+ '.ids-avatar.ids-avatar-light:active': {
665
+ background: 'var(--ids-comp-avatar-color-bg-light-pressed)',
666
+ borderColor: 'var(--ids-comp-avatar-color-border-light-pressed)',
667
+ },
668
+ '.ids-avatar.ids-avatar-light .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-light-enabled)' },
669
+ '.ids-avatar.ids-avatar-dark': {
670
+ color: 'var(--ids-comp-avatar-color-fg-dark-enabled)',
671
+ background: 'var(--ids-comp-avatar-color-bg-dark-enabled)',
672
+ borderColor: 'var(--ids-comp-avatar-color-border-dark-enabled)',
673
+ },
674
+ '.ids-avatar.ids-avatar-dark:hover': {
675
+ background: 'var(--ids-comp-avatar-color-bg-dark-hovered)',
676
+ borderColor: 'var(--ids-comp-avatar-color-border-dark-hovered)',
677
+ },
678
+ '.ids-avatar.ids-avatar-dark:focus': {
679
+ background: 'var(--ids-comp-avatar-color-bg-dark-focused)',
680
+ borderColor: 'var(--ids-comp-avatar-color-border-dark-focused)',
681
+ },
682
+ '.ids-avatar.ids-avatar-dark:active': {
683
+ background: 'var(--ids-comp-avatar-color-bg-dark-pressed)',
684
+ borderColor: 'var(--ids-comp-avatar-color-border-dark-pressed)',
685
+ },
686
+ '.ids-avatar.ids-avatar-dark .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-dark-enabled)' },
687
+ '.ids-avatar.ids-avatar-surface': {
688
+ color: 'var(--ids-comp-avatar-color-fg-surface-enabled)',
689
+ background: 'var(--ids-comp-avatar-color-bg-surface-enabled)',
690
+ borderColor: 'var(--ids-comp-avatar-color-border-surface-enabled)',
691
+ },
692
+ '.ids-avatar.ids-avatar-surface:hover': {
693
+ background: 'var(--ids-comp-avatar-color-bg-surface-hovered)',
694
+ borderColor: 'var(--ids-comp-avatar-color-border-surface-hovered)',
695
+ },
696
+ '.ids-avatar.ids-avatar-surface:focus': {
697
+ background: 'var(--ids-comp-avatar-color-bg-surface-focused)',
698
+ borderColor: 'var(--ids-comp-avatar-color-border-surface-focused)',
699
+ },
700
+ '.ids-avatar.ids-avatar-surface:active': {
701
+ background: 'var(--ids-comp-avatar-color-bg-surface-pressed)',
702
+ borderColor: 'var(--ids-comp-avatar-color-border-surface-pressed)',
703
+ },
704
+ '.ids-avatar.ids-avatar-surface .ids-avatar-icon path': { fill: 'var(--ids-comp-avatar-color-fg-surface-enabled)' },
705
+ '.ids-button': { flexShrink: 0, width: 'fit-content', alignItems: 'center', display: 'inline-flex', justifyContent: 'center' },
706
+ '.ids-button:focus': {
707
+ outlineOffset: '2px',
708
+ outline: 'var(--ids-comp-buttons-focused-outline-size-outline) solid var(--ids-comp-buttons-focused-outline-color-dark-focused)',
709
+ },
710
+ '.ids-button:focus.ids-button-light': { outlineColor: 'var(--ids-comp-buttons-focused-outline-color-light-focused)' },
711
+ '.ids-button:active': { outline: 'none' },
712
+ '.ids-button *[icon-leading],.ids-button *[icon-trailing]': {
713
+ gap: '10px',
714
+ display: 'flex',
715
+ alignItems: 'center',
716
+ justifyContent: 'center',
717
+ },
718
+ '.ids-button.ids-button-compact': {
719
+ gap: 'var(--ids-comp-size-buttons-size-gap-compact)',
720
+ height: 'var(--ids-comp-size-buttons-size-height-compact)',
721
+ minWidth: 'var(--ids-comp-size-buttons-size-min-width-compact)',
722
+ padding: 'var(--ids-comp-size-buttons-size-padding-y-compact) var(--ids-comp-size-buttons-size-padding-x-compact)',
723
+ borderRadius: 'var(--ids-comp-size-buttons-size-border-radius-compact)',
724
+ border: 'var(--ids-comp-size-buttons-size-border-width-compact) solid',
725
+ },
726
+ '.ids-button.ids-button-compact>.ids-button-label': {
727
+ fontFamily: 'var(--ids-comp-size-buttons-label-typography-font-family-compact)',
728
+ fontSize: 'var(--ids-comp-size-buttons-label-typography-font-size-compact)',
729
+ fontWeight: 'var(--ids-comp-size-buttons-label-typography-font-weight-compact)',
730
+ letterSpacing: 'var(--ids-comp-size-buttons-label-typography-letter-spacing-compact)',
731
+ lineHeight: 'var(--ids-comp-size-buttons-label-typography-line-height-compact)',
732
+ },
733
+ '.ids-button.ids-button-compact *[icon-leading],.ids-button.ids-button-compact *[icon-trailing]': {
734
+ width: 'var(--ids-comp-size-buttons-size-icon-compact)',
735
+ height: 'var(--ids-comp-size-buttons-size-icon-compact)',
736
+ },
737
+ '.ids-button.ids-button-comfortable': {
738
+ gap: 'var(--ids-comp-size-buttons-size-gap-comfortable)',
739
+ height: 'var(--ids-comp-size-buttons-size-height-comfortable)',
740
+ minWidth: 'var(--ids-comp-size-buttons-size-min-width-comfortable)',
741
+ padding: 'var(--ids-comp-size-buttons-size-padding-y-comfortable) var(--ids-comp-size-buttons-size-padding-x-comfortable)',
742
+ borderRadius: 'var(--ids-comp-size-buttons-size-border-radius-comfortable)',
743
+ border: 'var(--ids-comp-size-buttons-size-border-width-comfortable) solid',
744
+ },
745
+ '.ids-button.ids-button-comfortable>.ids-button-label': {
746
+ fontFamily: 'var(--ids-comp-size-buttons-label-typography-font-family-comfortable)',
747
+ fontSize: 'var(--ids-comp-size-buttons-label-typography-font-size-comfortable)',
748
+ fontWeight: 'var(--ids-comp-size-buttons-label-typography-font-weight-comfortable)',
749
+ letterSpacing: 'var(--ids-comp-size-buttons-label-typography-letter-spacing-comfortable)',
750
+ lineHeight: 'var(--ids-comp-size-buttons-label-typography-line-height-comfortable)',
751
+ },
752
+ '.ids-button.ids-button-comfortable *[icon-leading],.ids-button.ids-button-comfortable *[icon-trailing]': {
753
+ width: 'var(--ids-comp-size-buttons-size-icon-comfortable)',
754
+ height: 'var(--ids-comp-size-buttons-size-icon-comfortable)',
755
+ },
756
+ '.ids-button.ids-button-spacious': {
757
+ gap: 'var(--ids-comp-size-buttons-size-gap-spacious)',
758
+ height: 'var(--ids-comp-size-buttons-size-height-spacious)',
759
+ minWidth: 'var(--ids-comp-size-buttons-size-min-width-spacious)',
760
+ padding: 'var(--ids-comp-size-buttons-size-padding-y-spacious) var(--ids-comp-size-buttons-size-padding-x-spacious)',
761
+ borderRadius: 'var(--ids-comp-size-buttons-size-border-radius-spacious)',
762
+ border: 'var(--ids-comp-size-buttons-size-border-width-spacious) solid',
763
+ },
764
+ '.ids-button.ids-button-spacious>.ids-button-label': {
765
+ fontFamily: 'var(--ids-comp-size-buttons-label-typography-font-family-spacious)',
766
+ fontSize: 'var(--ids-comp-size-buttons-label-typography-font-size-spacious)',
767
+ fontWeight: 'var(--ids-comp-size-buttons-label-typography-font-weight-spacious)',
768
+ letterSpacing: 'var(--ids-comp-size-buttons-label-typography-letter-spacing-spacious)',
769
+ lineHeight: 'var(--ids-comp-size-buttons-label-typography-line-height-spacious)',
770
+ },
771
+ '.ids-button.ids-button-spacious *[icon-leading],.ids-button.ids-button-spacious *[icon-trailing]': {
772
+ width: 'var(--ids-comp-size-buttons-size-icon-spacious)',
773
+ height: 'var(--ids-comp-size-buttons-size-icon-spacious)',
774
+ },
775
+ '.ids-button.ids-button-dense': {
776
+ gap: 'var(--ids-comp-size-buttons-size-gap-dense)',
777
+ height: 'var(--ids-comp-size-buttons-size-height-dense)',
778
+ minWidth: 'var(--ids-comp-size-buttons-size-min-width-dense)',
779
+ padding: 'var(--ids-comp-size-buttons-size-padding-y-dense) var(--ids-comp-size-buttons-size-padding-x-dense)',
780
+ borderRadius: 'var(--ids-comp-size-buttons-size-border-radius-dense)',
781
+ border: 'var(--ids-comp-size-buttons-size-border-width-dense) solid',
782
+ },
783
+ '.ids-button.ids-button-dense>.ids-button-label': {
784
+ fontFamily: 'var(--ids-comp-size-buttons-label-typography-font-family-dense)',
785
+ fontSize: 'var(--ids-comp-size-buttons-label-typography-font-size-dense)',
786
+ fontWeight: 'var(--ids-comp-size-buttons-label-typography-font-weight-dense)',
787
+ letterSpacing: 'var(--ids-comp-size-buttons-label-typography-letter-spacing-dense)',
788
+ lineHeight: 'var(--ids-comp-size-buttons-label-typography-line-height-dense)',
789
+ },
790
+ '.ids-button.ids-button-dense *[icon-leading],.ids-button.ids-button-dense *[icon-trailing]': {
791
+ width: 'var(--ids-comp-size-buttons-size-icon-dense)',
792
+ height: 'var(--ids-comp-size-buttons-size-icon-dense)',
793
+ },
794
+ '.ids-button.ids-button-filled.ids-button-primary': {
795
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-primary-enabled)',
796
+ background: 'var(--ids-comp-buttons-filled-color-bg-primary-enabled)',
797
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-primary-enabled)',
798
+ },
799
+ '.ids-button.ids-button-filled.ids-button-primary:hover': {
800
+ background: 'var(--ids-comp-buttons-filled-color-bg-primary-hovered)',
801
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-primary-hovered)',
802
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-primary-hovered)',
803
+ },
804
+ '.ids-button.ids-button-filled.ids-button-primary:focus': {
805
+ outlineOffset: '2px',
806
+ background: 'var(--ids-comp-buttons-filled-color-bg-primary-focused)',
807
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-primary-focused)',
808
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-primary-focused)',
809
+ },
810
+ '.ids-button.ids-button-filled.ids-button-primary:active': {
811
+ background: 'var(--ids-comp-buttons-filled-color-bg-primary-pressed)',
812
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-primary-pressed)',
813
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-primary-pressed)',
814
+ },
815
+ '.ids-button.ids-button-filled.ids-button-primary:disabled': {
816
+ background: 'var(--ids-comp-buttons-filled-color-bg-primary-disabled)',
817
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-primary-disabled)',
818
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-primary-disabled)',
819
+ },
820
+ '.ids-button.ids-button-filled.ids-button-secondary': {
821
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-secondary-enabled)',
822
+ background: 'var(--ids-comp-buttons-filled-color-bg-secondary-enabled)',
823
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-secondary-enabled)',
824
+ },
825
+ '.ids-button.ids-button-filled.ids-button-secondary:hover': {
826
+ background: 'var(--ids-comp-buttons-filled-color-bg-secondary-hovered)',
827
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-secondary-hovered)',
828
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-secondary-hovered)',
829
+ },
830
+ '.ids-button.ids-button-filled.ids-button-secondary:focus': {
831
+ outlineOffset: '2px',
832
+ background: 'var(--ids-comp-buttons-filled-color-bg-secondary-focused)',
833
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-secondary-focused)',
834
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-secondary-focused)',
835
+ },
836
+ '.ids-button.ids-button-filled.ids-button-secondary:active': {
837
+ background: 'var(--ids-comp-buttons-filled-color-bg-secondary-pressed)',
838
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-secondary-pressed)',
839
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-secondary-pressed)',
840
+ },
841
+ '.ids-button.ids-button-filled.ids-button-secondary:disabled': {
842
+ background: 'var(--ids-comp-buttons-filled-color-bg-secondary-disabled)',
843
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-secondary-disabled)',
844
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-secondary-disabled)',
845
+ },
846
+ '.ids-button.ids-button-filled.ids-button-brand': {
847
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-brand-enabled)',
848
+ background: 'var(--ids-comp-buttons-filled-color-bg-brand-enabled)',
849
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-brand-enabled)',
850
+ },
851
+ '.ids-button.ids-button-filled.ids-button-brand:hover': {
852
+ background: 'var(--ids-comp-buttons-filled-color-bg-brand-hovered)',
853
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-brand-hovered)',
854
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-brand-hovered)',
855
+ },
856
+ '.ids-button.ids-button-filled.ids-button-brand:focus': {
857
+ outlineOffset: '2px',
858
+ background: 'var(--ids-comp-buttons-filled-color-bg-brand-focused)',
859
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-brand-focused)',
860
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-brand-focused)',
861
+ },
862
+ '.ids-button.ids-button-filled.ids-button-brand:active': {
863
+ background: 'var(--ids-comp-buttons-filled-color-bg-brand-pressed)',
864
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-brand-pressed)',
865
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-brand-pressed)',
866
+ },
867
+ '.ids-button.ids-button-filled.ids-button-brand:disabled': {
868
+ background: 'var(--ids-comp-buttons-filled-color-bg-brand-disabled)',
869
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-brand-disabled)',
870
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-brand-disabled)',
871
+ },
872
+ '.ids-button.ids-button-filled.ids-button-error': {
873
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-error-enabled)',
874
+ background: 'var(--ids-comp-buttons-filled-color-bg-error-enabled)',
875
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-error-enabled)',
876
+ },
877
+ '.ids-button.ids-button-filled.ids-button-error:hover': {
878
+ background: 'var(--ids-comp-buttons-filled-color-bg-error-hovered)',
879
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-error-hovered)',
880
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-error-hovered)',
881
+ },
882
+ '.ids-button.ids-button-filled.ids-button-error:focus': {
883
+ outlineOffset: '2px',
884
+ background: 'var(--ids-comp-buttons-filled-color-bg-error-focused)',
885
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-error-focused)',
886
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-error-focused)',
887
+ },
888
+ '.ids-button.ids-button-filled.ids-button-error:active': {
889
+ background: 'var(--ids-comp-buttons-filled-color-bg-error-pressed)',
890
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-error-pressed)',
891
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-error-pressed)',
892
+ },
893
+ '.ids-button.ids-button-filled.ids-button-error:disabled': {
894
+ background: 'var(--ids-comp-buttons-filled-color-bg-error-disabled)',
895
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-error-disabled)',
896
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-error-disabled)',
897
+ },
898
+ '.ids-button.ids-button-filled.ids-button-success': {
899
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-success-enabled)',
900
+ background: 'var(--ids-comp-buttons-filled-color-bg-success-enabled)',
901
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-success-enabled)',
902
+ },
903
+ '.ids-button.ids-button-filled.ids-button-success:hover': {
904
+ background: 'var(--ids-comp-buttons-filled-color-bg-success-hovered)',
905
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-success-hovered)',
906
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-success-hovered)',
907
+ },
908
+ '.ids-button.ids-button-filled.ids-button-success:focus': {
909
+ outlineOffset: '2px',
910
+ background: 'var(--ids-comp-buttons-filled-color-bg-success-focused)',
911
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-success-focused)',
912
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-success-focused)',
913
+ },
914
+ '.ids-button.ids-button-filled.ids-button-success:active': {
915
+ background: 'var(--ids-comp-buttons-filled-color-bg-success-pressed)',
916
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-success-pressed)',
917
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-success-pressed)',
918
+ },
919
+ '.ids-button.ids-button-filled.ids-button-success:disabled': {
920
+ background: 'var(--ids-comp-buttons-filled-color-bg-success-disabled)',
921
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-success-disabled)',
922
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-success-disabled)',
923
+ },
924
+ '.ids-button.ids-button-filled.ids-button-warning': {
925
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-warning-enabled)',
926
+ background: 'var(--ids-comp-buttons-filled-color-bg-warning-enabled)',
927
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-warning-enabled)',
928
+ },
929
+ '.ids-button.ids-button-filled.ids-button-warning:hover': {
930
+ background: 'var(--ids-comp-buttons-filled-color-bg-warning-hovered)',
931
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-warning-hovered)',
932
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-warning-hovered)',
933
+ },
934
+ '.ids-button.ids-button-filled.ids-button-warning:focus': {
935
+ outlineOffset: '2px',
936
+ background: 'var(--ids-comp-buttons-filled-color-bg-warning-focused)',
937
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-warning-focused)',
938
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-warning-focused)',
939
+ },
940
+ '.ids-button.ids-button-filled.ids-button-warning:active': {
941
+ background: 'var(--ids-comp-buttons-filled-color-bg-warning-pressed)',
942
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-warning-pressed)',
943
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-warning-pressed)',
944
+ },
945
+ '.ids-button.ids-button-filled.ids-button-warning:disabled': {
946
+ background: 'var(--ids-comp-buttons-filled-color-bg-warning-disabled)',
947
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-warning-disabled)',
948
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-warning-disabled)',
949
+ },
950
+ '.ids-button.ids-button-filled.ids-button-light': {
951
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-light-enabled)',
952
+ background: 'var(--ids-comp-buttons-filled-color-bg-light-enabled)',
953
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-light-enabled)',
954
+ },
955
+ '.ids-button.ids-button-filled.ids-button-light:hover': {
956
+ background: 'var(--ids-comp-buttons-filled-color-bg-light-hovered)',
957
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-light-hovered)',
958
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-light-hovered)',
959
+ },
960
+ '.ids-button.ids-button-filled.ids-button-light:focus': {
961
+ outlineOffset: '2px',
962
+ background: 'var(--ids-comp-buttons-filled-color-bg-light-focused)',
963
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-light-focused)',
964
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-light-focused)',
965
+ },
966
+ '.ids-button.ids-button-filled.ids-button-light:active': {
967
+ background: 'var(--ids-comp-buttons-filled-color-bg-light-pressed)',
968
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-light-pressed)',
969
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-light-pressed)',
970
+ },
971
+ '.ids-button.ids-button-filled.ids-button-light:disabled': {
972
+ background: 'var(--ids-comp-buttons-filled-color-bg-light-disabled)',
973
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-light-disabled)',
974
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-light-disabled)',
975
+ },
976
+ '.ids-button.ids-button-filled.ids-button-dark': {
977
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-dark-enabled)',
978
+ background: 'var(--ids-comp-buttons-filled-color-bg-dark-enabled)',
979
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-dark-enabled)',
980
+ },
981
+ '.ids-button.ids-button-filled.ids-button-dark:hover': {
982
+ background: 'var(--ids-comp-buttons-filled-color-bg-dark-hovered)',
983
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-dark-hovered)',
984
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-dark-hovered)',
985
+ },
986
+ '.ids-button.ids-button-filled.ids-button-dark:focus': {
987
+ outlineOffset: '2px',
988
+ background: 'var(--ids-comp-buttons-filled-color-bg-dark-focused)',
989
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-dark-focused)',
990
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-dark-focused)',
991
+ },
992
+ '.ids-button.ids-button-filled.ids-button-dark:active': {
993
+ background: 'var(--ids-comp-buttons-filled-color-bg-dark-pressed)',
994
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-dark-pressed)',
995
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-dark-pressed)',
996
+ },
997
+ '.ids-button.ids-button-filled.ids-button-dark:disabled': {
998
+ background: 'var(--ids-comp-buttons-filled-color-bg-dark-disabled)',
999
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-dark-disabled)',
1000
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-dark-disabled)',
1001
+ },
1002
+ '.ids-button.ids-button-filled.ids-button-surface': {
1003
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-surface-enabled)',
1004
+ background: 'var(--ids-comp-buttons-filled-color-bg-surface-enabled)',
1005
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-surface-enabled)',
1006
+ },
1007
+ '.ids-button.ids-button-filled.ids-button-surface:hover': {
1008
+ background: 'var(--ids-comp-buttons-filled-color-bg-surface-hovered)',
1009
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-surface-hovered)',
1010
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-surface-hovered)',
1011
+ },
1012
+ '.ids-button.ids-button-filled.ids-button-surface:focus': {
1013
+ outlineOffset: '2px',
1014
+ background: 'var(--ids-comp-buttons-filled-color-bg-surface-focused)',
1015
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-surface-focused)',
1016
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-surface-focused)',
1017
+ },
1018
+ '.ids-button.ids-button-filled.ids-button-surface:active': {
1019
+ background: 'var(--ids-comp-buttons-filled-color-bg-surface-pressed)',
1020
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-surface-pressed)',
1021
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-surface-pressed)',
1022
+ },
1023
+ '.ids-button.ids-button-filled.ids-button-surface:disabled': {
1024
+ background: 'var(--ids-comp-buttons-filled-color-bg-surface-disabled)',
1025
+ color: 'var(--ids-comp-buttons-filled-color-fg-label-surface-disabled)',
1026
+ borderColor: 'var(--ids-comp-buttons-filled-color-border-surface-disabled)',
1027
+ },
1028
+ '.ids-button.ids-button-outlined.ids-button-primary': {
1029
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-primary-enabled)',
1030
+ background: 'var(--ids-comp-buttons-outlined-color-bg-primary-enabled)',
1031
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-primary-enabled)',
1032
+ },
1033
+ '.ids-button.ids-button-outlined.ids-button-primary:hover': {
1034
+ background: 'var(--ids-comp-buttons-outlined-color-bg-primary-hovered)',
1035
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-primary-hovered)',
1036
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-primary-hovered)',
1037
+ },
1038
+ '.ids-button.ids-button-outlined.ids-button-primary:focus': {
1039
+ outlineOffset: '2px',
1040
+ background: 'var(--ids-comp-buttons-outlined-color-bg-primary-focused)',
1041
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-primary-focused)',
1042
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-primary-focused)',
1043
+ },
1044
+ '.ids-button.ids-button-outlined.ids-button-primary:active': {
1045
+ background: 'var(--ids-comp-buttons-outlined-color-bg-primary-pressed)',
1046
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-primary-pressed)',
1047
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-primary-pressed)',
1048
+ },
1049
+ '.ids-button.ids-button-outlined.ids-button-primary:disabled': {
1050
+ background: 'var(--ids-comp-buttons-outlined-color-bg-primary-disabled)',
1051
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-primary-disabled)',
1052
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-primary-disabled)',
1053
+ },
1054
+ '.ids-button.ids-button-outlined.ids-button-secondary': {
1055
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-secondary-enabled)',
1056
+ background: 'var(--ids-comp-buttons-outlined-color-bg-secondary-enabled)',
1057
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-secondary-enabled)',
1058
+ },
1059
+ '.ids-button.ids-button-outlined.ids-button-secondary:hover': {
1060
+ background: 'var(--ids-comp-buttons-outlined-color-bg-secondary-hovered)',
1061
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-secondary-hovered)',
1062
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-secondary-hovered)',
1063
+ },
1064
+ '.ids-button.ids-button-outlined.ids-button-secondary:focus': {
1065
+ outlineOffset: '2px',
1066
+ background: 'var(--ids-comp-buttons-outlined-color-bg-secondary-focused)',
1067
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-secondary-focused)',
1068
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-secondary-focused)',
1069
+ },
1070
+ '.ids-button.ids-button-outlined.ids-button-secondary:active': {
1071
+ background: 'var(--ids-comp-buttons-outlined-color-bg-secondary-pressed)',
1072
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-secondary-pressed)',
1073
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-secondary-pressed)',
1074
+ },
1075
+ '.ids-button.ids-button-outlined.ids-button-secondary:disabled': {
1076
+ background: 'var(--ids-comp-buttons-outlined-color-bg-secondary-disabled)',
1077
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-secondary-disabled)',
1078
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-secondary-disabled)',
1079
+ },
1080
+ '.ids-button.ids-button-outlined.ids-button-brand': {
1081
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-brand-enabled)',
1082
+ background: 'var(--ids-comp-buttons-outlined-color-bg-brand-enabled)',
1083
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-brand-enabled)',
1084
+ },
1085
+ '.ids-button.ids-button-outlined.ids-button-brand:hover': {
1086
+ background: 'var(--ids-comp-buttons-outlined-color-bg-brand-hovered)',
1087
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-brand-hovered)',
1088
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-brand-hovered)',
1089
+ },
1090
+ '.ids-button.ids-button-outlined.ids-button-brand:focus': {
1091
+ outlineOffset: '2px',
1092
+ background: 'var(--ids-comp-buttons-outlined-color-bg-brand-focused)',
1093
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-brand-focused)',
1094
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-brand-focused)',
1095
+ },
1096
+ '.ids-button.ids-button-outlined.ids-button-brand:active': {
1097
+ background: 'var(--ids-comp-buttons-outlined-color-bg-brand-pressed)',
1098
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-brand-pressed)',
1099
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-brand-pressed)',
1100
+ },
1101
+ '.ids-button.ids-button-outlined.ids-button-brand:disabled': {
1102
+ background: 'var(--ids-comp-buttons-outlined-color-bg-brand-disabled)',
1103
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-brand-disabled)',
1104
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-brand-disabled)',
1105
+ },
1106
+ '.ids-button.ids-button-outlined.ids-button-error': {
1107
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-error-enabled)',
1108
+ background: 'var(--ids-comp-buttons-outlined-color-bg-error-enabled)',
1109
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-error-enabled)',
1110
+ },
1111
+ '.ids-button.ids-button-outlined.ids-button-error:hover': {
1112
+ background: 'var(--ids-comp-buttons-outlined-color-bg-error-hovered)',
1113
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-error-hovered)',
1114
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-error-hovered)',
1115
+ },
1116
+ '.ids-button.ids-button-outlined.ids-button-error:focus': {
1117
+ outlineOffset: '2px',
1118
+ background: 'var(--ids-comp-buttons-outlined-color-bg-error-focused)',
1119
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-error-focused)',
1120
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-error-focused)',
1121
+ },
1122
+ '.ids-button.ids-button-outlined.ids-button-error:active': {
1123
+ background: 'var(--ids-comp-buttons-outlined-color-bg-error-pressed)',
1124
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-error-pressed)',
1125
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-error-pressed)',
1126
+ },
1127
+ '.ids-button.ids-button-outlined.ids-button-error:disabled': {
1128
+ background: 'var(--ids-comp-buttons-outlined-color-bg-error-disabled)',
1129
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-error-disabled)',
1130
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-error-disabled)',
1131
+ },
1132
+ '.ids-button.ids-button-outlined.ids-button-success': {
1133
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-success-enabled)',
1134
+ background: 'var(--ids-comp-buttons-outlined-color-bg-success-enabled)',
1135
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-success-enabled)',
1136
+ },
1137
+ '.ids-button.ids-button-outlined.ids-button-success:hover': {
1138
+ background: 'var(--ids-comp-buttons-outlined-color-bg-success-hovered)',
1139
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-success-hovered)',
1140
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-success-hovered)',
1141
+ },
1142
+ '.ids-button.ids-button-outlined.ids-button-success:focus': {
1143
+ outlineOffset: '2px',
1144
+ background: 'var(--ids-comp-buttons-outlined-color-bg-success-focused)',
1145
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-success-focused)',
1146
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-success-focused)',
1147
+ },
1148
+ '.ids-button.ids-button-outlined.ids-button-success:active': {
1149
+ background: 'var(--ids-comp-buttons-outlined-color-bg-success-pressed)',
1150
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-success-pressed)',
1151
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-success-pressed)',
1152
+ },
1153
+ '.ids-button.ids-button-outlined.ids-button-success:disabled': {
1154
+ background: 'var(--ids-comp-buttons-outlined-color-bg-success-disabled)',
1155
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-success-disabled)',
1156
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-success-disabled)',
1157
+ },
1158
+ '.ids-button.ids-button-outlined.ids-button-warning': {
1159
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-warning-enabled)',
1160
+ background: 'var(--ids-comp-buttons-outlined-color-bg-warning-enabled)',
1161
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-warning-enabled)',
1162
+ },
1163
+ '.ids-button.ids-button-outlined.ids-button-warning:hover': {
1164
+ background: 'var(--ids-comp-buttons-outlined-color-bg-warning-hovered)',
1165
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-warning-hovered)',
1166
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-warning-hovered)',
1167
+ },
1168
+ '.ids-button.ids-button-outlined.ids-button-warning:focus': {
1169
+ outlineOffset: '2px',
1170
+ background: 'var(--ids-comp-buttons-outlined-color-bg-warning-focused)',
1171
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-warning-focused)',
1172
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-warning-focused)',
1173
+ },
1174
+ '.ids-button.ids-button-outlined.ids-button-warning:active': {
1175
+ background: 'var(--ids-comp-buttons-outlined-color-bg-warning-pressed)',
1176
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-warning-pressed)',
1177
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-warning-pressed)',
1178
+ },
1179
+ '.ids-button.ids-button-outlined.ids-button-warning:disabled': {
1180
+ background: 'var(--ids-comp-buttons-outlined-color-bg-warning-disabled)',
1181
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-warning-disabled)',
1182
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-warning-disabled)',
1183
+ },
1184
+ '.ids-button.ids-button-outlined.ids-button-light': {
1185
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-light-enabled)',
1186
+ background: 'var(--ids-comp-buttons-outlined-color-bg-light-enabled)',
1187
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-light-enabled)',
1188
+ },
1189
+ '.ids-button.ids-button-outlined.ids-button-light:hover': {
1190
+ background: 'var(--ids-comp-buttons-outlined-color-bg-light-hovered)',
1191
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-light-hovered)',
1192
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-light-hovered)',
1193
+ },
1194
+ '.ids-button.ids-button-outlined.ids-button-light:focus': {
1195
+ outlineOffset: '2px',
1196
+ background: 'var(--ids-comp-buttons-outlined-color-bg-light-focused)',
1197
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-light-focused)',
1198
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-light-focused)',
1199
+ },
1200
+ '.ids-button.ids-button-outlined.ids-button-light:active': {
1201
+ background: 'var(--ids-comp-buttons-outlined-color-bg-light-pressed)',
1202
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-light-pressed)',
1203
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-light-pressed)',
1204
+ },
1205
+ '.ids-button.ids-button-outlined.ids-button-light:disabled': {
1206
+ background: 'var(--ids-comp-buttons-outlined-color-bg-light-disabled)',
1207
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-light-disabled)',
1208
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-light-disabled)',
1209
+ },
1210
+ '.ids-button.ids-button-outlined.ids-button-dark': {
1211
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-dark-enabled)',
1212
+ background: 'var(--ids-comp-buttons-outlined-color-bg-dark-enabled)',
1213
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-dark-enabled)',
1214
+ },
1215
+ '.ids-button.ids-button-outlined.ids-button-dark:hover': {
1216
+ background: 'var(--ids-comp-buttons-outlined-color-bg-dark-hovered)',
1217
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-dark-hovered)',
1218
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-dark-hovered)',
1219
+ },
1220
+ '.ids-button.ids-button-outlined.ids-button-dark:focus': {
1221
+ outlineOffset: '2px',
1222
+ background: 'var(--ids-comp-buttons-outlined-color-bg-dark-focused)',
1223
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-dark-focused)',
1224
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-dark-focused)',
1225
+ },
1226
+ '.ids-button.ids-button-outlined.ids-button-dark:active': {
1227
+ background: 'var(--ids-comp-buttons-outlined-color-bg-dark-pressed)',
1228
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-dark-pressed)',
1229
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-dark-pressed)',
1230
+ },
1231
+ '.ids-button.ids-button-outlined.ids-button-dark:disabled': {
1232
+ background: 'var(--ids-comp-buttons-outlined-color-bg-dark-disabled)',
1233
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-dark-disabled)',
1234
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-dark-disabled)',
1235
+ },
1236
+ '.ids-button.ids-button-outlined.ids-button-surface': {
1237
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-surface-enabled)',
1238
+ background: 'var(--ids-comp-buttons-outlined-color-bg-surface-enabled)',
1239
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-surface-enabled)',
1240
+ },
1241
+ '.ids-button.ids-button-outlined.ids-button-surface:hover': {
1242
+ background: 'var(--ids-comp-buttons-outlined-color-bg-surface-hovered)',
1243
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-surface-hovered)',
1244
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-surface-hovered)',
1245
+ },
1246
+ '.ids-button.ids-button-outlined.ids-button-surface:focus': {
1247
+ outlineOffset: '2px',
1248
+ background: 'var(--ids-comp-buttons-outlined-color-bg-surface-focused)',
1249
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-surface-focused)',
1250
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-surface-focused)',
1251
+ },
1252
+ '.ids-button.ids-button-outlined.ids-button-surface:active': {
1253
+ background: 'var(--ids-comp-buttons-outlined-color-bg-surface-pressed)',
1254
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-surface-pressed)',
1255
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-surface-pressed)',
1256
+ },
1257
+ '.ids-button.ids-button-outlined.ids-button-surface:disabled': {
1258
+ background: 'var(--ids-comp-buttons-outlined-color-bg-surface-disabled)',
1259
+ color: 'var(--ids-comp-buttons-outlined-color-fg-label-surface-disabled)',
1260
+ borderColor: 'var(--ids-comp-buttons-outlined-color-border-surface-disabled)',
1261
+ },
1262
+ '.ids-button.ids-button-text.ids-button-primary': {
1263
+ color: 'var(--ids-comp-buttons-text-color-fg-label-primary-enabled)',
1264
+ background: 'var(--ids-comp-buttons-text-color-bg-primary-enabled)',
1265
+ borderColor: 'var(--ids-comp-buttons-text-color-border-primary-enabled)',
1266
+ },
1267
+ '.ids-button.ids-button-text.ids-button-primary:hover': {
1268
+ background: 'var(--ids-comp-buttons-text-color-bg-primary-hovered)',
1269
+ color: 'var(--ids-comp-buttons-text-color-fg-label-primary-hovered)',
1270
+ borderColor: 'var(--ids-comp-buttons-text-color-border-primary-hovered)',
1271
+ },
1272
+ '.ids-button.ids-button-text.ids-button-primary:focus': {
1273
+ outlineOffset: '2px',
1274
+ background: 'var(--ids-comp-buttons-text-color-bg-primary-focused)',
1275
+ color: 'var(--ids-comp-buttons-text-color-fg-label-primary-focused)',
1276
+ borderColor: 'var(--ids-comp-buttons-text-color-border-primary-focused)',
1277
+ },
1278
+ '.ids-button.ids-button-text.ids-button-primary:active': {
1279
+ background: 'var(--ids-comp-buttons-text-color-bg-primary-pressed)',
1280
+ color: 'var(--ids-comp-buttons-text-color-fg-label-primary-pressed)',
1281
+ borderColor: 'var(--ids-comp-buttons-text-color-border-primary-pressed)',
1282
+ },
1283
+ '.ids-button.ids-button-text.ids-button-primary:disabled': {
1284
+ background: 'var(--ids-comp-buttons-text-color-bg-primary-disabled)',
1285
+ color: 'var(--ids-comp-buttons-text-color-fg-label-primary-disabled)',
1286
+ borderColor: 'var(--ids-comp-buttons-text-color-border-primary-disabled)',
1287
+ },
1288
+ '.ids-button.ids-button-text.ids-button-secondary': {
1289
+ color: 'var(--ids-comp-buttons-text-color-fg-label-secondary-enabled)',
1290
+ background: 'var(--ids-comp-buttons-text-color-bg-secondary-enabled)',
1291
+ borderColor: 'var(--ids-comp-buttons-text-color-border-secondary-enabled)',
1292
+ },
1293
+ '.ids-button.ids-button-text.ids-button-secondary:hover': {
1294
+ background: 'var(--ids-comp-buttons-text-color-bg-secondary-hovered)',
1295
+ color: 'var(--ids-comp-buttons-text-color-fg-label-secondary-hovered)',
1296
+ borderColor: 'var(--ids-comp-buttons-text-color-border-secondary-hovered)',
1297
+ },
1298
+ '.ids-button.ids-button-text.ids-button-secondary:focus': {
1299
+ outlineOffset: '2px',
1300
+ background: 'var(--ids-comp-buttons-text-color-bg-secondary-focused)',
1301
+ color: 'var(--ids-comp-buttons-text-color-fg-label-secondary-focused)',
1302
+ borderColor: 'var(--ids-comp-buttons-text-color-border-secondary-focused)',
1303
+ },
1304
+ '.ids-button.ids-button-text.ids-button-secondary:active': {
1305
+ background: 'var(--ids-comp-buttons-text-color-bg-secondary-pressed)',
1306
+ color: 'var(--ids-comp-buttons-text-color-fg-label-secondary-pressed)',
1307
+ borderColor: 'var(--ids-comp-buttons-text-color-border-secondary-pressed)',
1308
+ },
1309
+ '.ids-button.ids-button-text.ids-button-secondary:disabled': {
1310
+ background: 'var(--ids-comp-buttons-text-color-bg-secondary-disabled)',
1311
+ color: 'var(--ids-comp-buttons-text-color-fg-label-secondary-disabled)',
1312
+ borderColor: 'var(--ids-comp-buttons-text-color-border-secondary-disabled)',
1313
+ },
1314
+ '.ids-button.ids-button-text.ids-button-brand': {
1315
+ color: 'var(--ids-comp-buttons-text-color-fg-label-brand-enabled)',
1316
+ background: 'var(--ids-comp-buttons-text-color-bg-brand-enabled)',
1317
+ borderColor: 'var(--ids-comp-buttons-text-color-border-brand-enabled)',
1318
+ },
1319
+ '.ids-button.ids-button-text.ids-button-brand:hover': {
1320
+ background: 'var(--ids-comp-buttons-text-color-bg-brand-hovered)',
1321
+ color: 'var(--ids-comp-buttons-text-color-fg-label-brand-hovered)',
1322
+ borderColor: 'var(--ids-comp-buttons-text-color-border-brand-hovered)',
1323
+ },
1324
+ '.ids-button.ids-button-text.ids-button-brand:focus': {
1325
+ outlineOffset: '2px',
1326
+ background: 'var(--ids-comp-buttons-text-color-bg-brand-focused)',
1327
+ color: 'var(--ids-comp-buttons-text-color-fg-label-brand-focused)',
1328
+ borderColor: 'var(--ids-comp-buttons-text-color-border-brand-focused)',
1329
+ },
1330
+ '.ids-button.ids-button-text.ids-button-brand:active': {
1331
+ background: 'var(--ids-comp-buttons-text-color-bg-brand-pressed)',
1332
+ color: 'var(--ids-comp-buttons-text-color-fg-label-brand-pressed)',
1333
+ borderColor: 'var(--ids-comp-buttons-text-color-border-brand-pressed)',
1334
+ },
1335
+ '.ids-button.ids-button-text.ids-button-brand:disabled': {
1336
+ background: 'var(--ids-comp-buttons-text-color-bg-brand-disabled)',
1337
+ color: 'var(--ids-comp-buttons-text-color-fg-label-brand-disabled)',
1338
+ borderColor: 'var(--ids-comp-buttons-text-color-border-brand-disabled)',
1339
+ },
1340
+ '.ids-button.ids-button-text.ids-button-error': {
1341
+ color: 'var(--ids-comp-buttons-text-color-fg-label-error-enabled)',
1342
+ background: 'var(--ids-comp-buttons-text-color-bg-error-enabled)',
1343
+ borderColor: 'var(--ids-comp-buttons-text-color-border-error-enabled)',
1344
+ },
1345
+ '.ids-button.ids-button-text.ids-button-error:hover': {
1346
+ background: 'var(--ids-comp-buttons-text-color-bg-error-hovered)',
1347
+ color: 'var(--ids-comp-buttons-text-color-fg-label-error-hovered)',
1348
+ borderColor: 'var(--ids-comp-buttons-text-color-border-error-hovered)',
1349
+ },
1350
+ '.ids-button.ids-button-text.ids-button-error:focus': {
1351
+ outlineOffset: '2px',
1352
+ background: 'var(--ids-comp-buttons-text-color-bg-error-focused)',
1353
+ color: 'var(--ids-comp-buttons-text-color-fg-label-error-focused)',
1354
+ borderColor: 'var(--ids-comp-buttons-text-color-border-error-focused)',
1355
+ },
1356
+ '.ids-button.ids-button-text.ids-button-error:active': {
1357
+ background: 'var(--ids-comp-buttons-text-color-bg-error-pressed)',
1358
+ color: 'var(--ids-comp-buttons-text-color-fg-label-error-pressed)',
1359
+ borderColor: 'var(--ids-comp-buttons-text-color-border-error-pressed)',
1360
+ },
1361
+ '.ids-button.ids-button-text.ids-button-error:disabled': {
1362
+ background: 'var(--ids-comp-buttons-text-color-bg-error-disabled)',
1363
+ color: 'var(--ids-comp-buttons-text-color-fg-label-error-disabled)',
1364
+ borderColor: 'var(--ids-comp-buttons-text-color-border-error-disabled)',
1365
+ },
1366
+ '.ids-button.ids-button-text.ids-button-success': {
1367
+ color: 'var(--ids-comp-buttons-text-color-fg-label-success-enabled)',
1368
+ background: 'var(--ids-comp-buttons-text-color-bg-success-enabled)',
1369
+ borderColor: 'var(--ids-comp-buttons-text-color-border-success-enabled)',
1370
+ },
1371
+ '.ids-button.ids-button-text.ids-button-success:hover': {
1372
+ background: 'var(--ids-comp-buttons-text-color-bg-success-hovered)',
1373
+ color: 'var(--ids-comp-buttons-text-color-fg-label-success-hovered)',
1374
+ borderColor: 'var(--ids-comp-buttons-text-color-border-success-hovered)',
1375
+ },
1376
+ '.ids-button.ids-button-text.ids-button-success:focus': {
1377
+ outlineOffset: '2px',
1378
+ background: 'var(--ids-comp-buttons-text-color-bg-success-focused)',
1379
+ color: 'var(--ids-comp-buttons-text-color-fg-label-success-focused)',
1380
+ borderColor: 'var(--ids-comp-buttons-text-color-border-success-focused)',
1381
+ },
1382
+ '.ids-button.ids-button-text.ids-button-success:active': {
1383
+ background: 'var(--ids-comp-buttons-text-color-bg-success-pressed)',
1384
+ color: 'var(--ids-comp-buttons-text-color-fg-label-success-pressed)',
1385
+ borderColor: 'var(--ids-comp-buttons-text-color-border-success-pressed)',
1386
+ },
1387
+ '.ids-button.ids-button-text.ids-button-success:disabled': {
1388
+ background: 'var(--ids-comp-buttons-text-color-bg-success-disabled)',
1389
+ color: 'var(--ids-comp-buttons-text-color-fg-label-success-disabled)',
1390
+ borderColor: 'var(--ids-comp-buttons-text-color-border-success-disabled)',
1391
+ },
1392
+ '.ids-button.ids-button-text.ids-button-warning': {
1393
+ color: 'var(--ids-comp-buttons-text-color-fg-label-warning-enabled)',
1394
+ background: 'var(--ids-comp-buttons-text-color-bg-warning-enabled)',
1395
+ borderColor: 'var(--ids-comp-buttons-text-color-border-warning-enabled)',
1396
+ },
1397
+ '.ids-button.ids-button-text.ids-button-warning:hover': {
1398
+ background: 'var(--ids-comp-buttons-text-color-bg-warning-hovered)',
1399
+ color: 'var(--ids-comp-buttons-text-color-fg-label-warning-hovered)',
1400
+ borderColor: 'var(--ids-comp-buttons-text-color-border-warning-hovered)',
1401
+ },
1402
+ '.ids-button.ids-button-text.ids-button-warning:focus': {
1403
+ outlineOffset: '2px',
1404
+ background: 'var(--ids-comp-buttons-text-color-bg-warning-focused)',
1405
+ color: 'var(--ids-comp-buttons-text-color-fg-label-warning-focused)',
1406
+ borderColor: 'var(--ids-comp-buttons-text-color-border-warning-focused)',
1407
+ },
1408
+ '.ids-button.ids-button-text.ids-button-warning:active': {
1409
+ background: 'var(--ids-comp-buttons-text-color-bg-warning-pressed)',
1410
+ color: 'var(--ids-comp-buttons-text-color-fg-label-warning-pressed)',
1411
+ borderColor: 'var(--ids-comp-buttons-text-color-border-warning-pressed)',
1412
+ },
1413
+ '.ids-button.ids-button-text.ids-button-warning:disabled': {
1414
+ background: 'var(--ids-comp-buttons-text-color-bg-warning-disabled)',
1415
+ color: 'var(--ids-comp-buttons-text-color-fg-label-warning-disabled)',
1416
+ borderColor: 'var(--ids-comp-buttons-text-color-border-warning-disabled)',
1417
+ },
1418
+ '.ids-button.ids-button-text.ids-button-light': {
1419
+ color: 'var(--ids-comp-buttons-text-color-fg-label-light-enabled)',
1420
+ background: 'var(--ids-comp-buttons-text-color-bg-light-enabled)',
1421
+ borderColor: 'var(--ids-comp-buttons-text-color-border-light-enabled)',
1422
+ },
1423
+ '.ids-button.ids-button-text.ids-button-light:hover': {
1424
+ background: 'var(--ids-comp-buttons-text-color-bg-light-hovered)',
1425
+ color: 'var(--ids-comp-buttons-text-color-fg-label-light-hovered)',
1426
+ borderColor: 'var(--ids-comp-buttons-text-color-border-light-hovered)',
1427
+ },
1428
+ '.ids-button.ids-button-text.ids-button-light:focus': {
1429
+ outlineOffset: '2px',
1430
+ background: 'var(--ids-comp-buttons-text-color-bg-light-focused)',
1431
+ color: 'var(--ids-comp-buttons-text-color-fg-label-light-focused)',
1432
+ borderColor: 'var(--ids-comp-buttons-text-color-border-light-focused)',
1433
+ },
1434
+ '.ids-button.ids-button-text.ids-button-light:active': {
1435
+ background: 'var(--ids-comp-buttons-text-color-bg-light-pressed)',
1436
+ color: 'var(--ids-comp-buttons-text-color-fg-label-light-pressed)',
1437
+ borderColor: 'var(--ids-comp-buttons-text-color-border-light-pressed)',
1438
+ },
1439
+ '.ids-button.ids-button-text.ids-button-light:disabled': {
1440
+ background: 'var(--ids-comp-buttons-text-color-bg-light-disabled)',
1441
+ color: 'var(--ids-comp-buttons-text-color-fg-label-light-disabled)',
1442
+ borderColor: 'var(--ids-comp-buttons-text-color-border-light-disabled)',
1443
+ },
1444
+ '.ids-button.ids-button-text.ids-button-dark': {
1445
+ color: 'var(--ids-comp-buttons-text-color-fg-label-dark-enabled)',
1446
+ background: 'var(--ids-comp-buttons-text-color-bg-dark-enabled)',
1447
+ borderColor: 'var(--ids-comp-buttons-text-color-border-dark-enabled)',
1448
+ },
1449
+ '.ids-button.ids-button-text.ids-button-dark:hover': {
1450
+ background: 'var(--ids-comp-buttons-text-color-bg-dark-hovered)',
1451
+ color: 'var(--ids-comp-buttons-text-color-fg-label-dark-hovered)',
1452
+ borderColor: 'var(--ids-comp-buttons-text-color-border-dark-hovered)',
1453
+ },
1454
+ '.ids-button.ids-button-text.ids-button-dark:focus': {
1455
+ outlineOffset: '2px',
1456
+ background: 'var(--ids-comp-buttons-text-color-bg-dark-focused)',
1457
+ color: 'var(--ids-comp-buttons-text-color-fg-label-dark-focused)',
1458
+ borderColor: 'var(--ids-comp-buttons-text-color-border-dark-focused)',
1459
+ },
1460
+ '.ids-button.ids-button-text.ids-button-dark:active': {
1461
+ background: 'var(--ids-comp-buttons-text-color-bg-dark-pressed)',
1462
+ color: 'var(--ids-comp-buttons-text-color-fg-label-dark-pressed)',
1463
+ borderColor: 'var(--ids-comp-buttons-text-color-border-dark-pressed)',
1464
+ },
1465
+ '.ids-button.ids-button-text.ids-button-dark:disabled': {
1466
+ background: 'var(--ids-comp-buttons-text-color-bg-dark-disabled)',
1467
+ color: 'var(--ids-comp-buttons-text-color-fg-label-dark-disabled)',
1468
+ borderColor: 'var(--ids-comp-buttons-text-color-border-dark-disabled)',
1469
+ },
1470
+ '.ids-button.ids-button-text.ids-button-surface': {
1471
+ color: 'var(--ids-comp-buttons-text-color-fg-label-surface-enabled)',
1472
+ background: 'var(--ids-comp-buttons-text-color-bg-surface-enabled)',
1473
+ borderColor: 'var(--ids-comp-buttons-text-color-border-surface-enabled)',
1474
+ },
1475
+ '.ids-button.ids-button-text.ids-button-surface:hover': {
1476
+ background: 'var(--ids-comp-buttons-text-color-bg-surface-hovered)',
1477
+ color: 'var(--ids-comp-buttons-text-color-fg-label-surface-hovered)',
1478
+ borderColor: 'var(--ids-comp-buttons-text-color-border-surface-hovered)',
1479
+ },
1480
+ '.ids-button.ids-button-text.ids-button-surface:focus': {
1481
+ outlineOffset: '2px',
1482
+ background: 'var(--ids-comp-buttons-text-color-bg-surface-focused)',
1483
+ color: 'var(--ids-comp-buttons-text-color-fg-label-surface-focused)',
1484
+ borderColor: 'var(--ids-comp-buttons-text-color-border-surface-focused)',
1485
+ },
1486
+ '.ids-button.ids-button-text.ids-button-surface:active': {
1487
+ background: 'var(--ids-comp-buttons-text-color-bg-surface-pressed)',
1488
+ color: 'var(--ids-comp-buttons-text-color-fg-label-surface-pressed)',
1489
+ borderColor: 'var(--ids-comp-buttons-text-color-border-surface-pressed)',
1490
+ },
1491
+ '.ids-button.ids-button-text.ids-button-surface:disabled': {
1492
+ background: 'var(--ids-comp-buttons-text-color-bg-surface-disabled)',
1493
+ color: 'var(--ids-comp-buttons-text-color-fg-label-surface-disabled)',
1494
+ borderColor: 'var(--ids-comp-buttons-text-color-border-surface-disabled)',
1495
+ },
1496
+ '.ids-card': { display: 'flex', borderStyle: 'solid' },
1497
+ '.ids-card.ids-card-clickable': { pointerEvents: 'auto', cursor: 'pointer' },
1498
+ '.ids-card.ids-card-clickable:focus': {
1499
+ outlineOffset: '2px',
1500
+ outlineStyle: 'solid',
1501
+ outlineColor: 'var(--ids-comp-card-focused-outline-color-dark-focused)',
1502
+ },
1503
+ '.ids-card.ids-card-clickable:focus.ids-button-light': { outlineColor: 'var(--ids-comp-card-focused-outline-color-light-focused)' },
1504
+ '.ids-card.ids-card-clickable.ids-card-disabled': { pointerEvents: 'none', cursor: 'not-allowed' },
1505
+ '.ids-card.ids-card-vertical': { flexDirection: 'column' },
1506
+ '.ids-card.ids-card-vertical .ids-card-section:first-child': {
1507
+ paddingBottom: '0px',
1508
+ borderTopLeftRadius: 'inherit',
1509
+ borderTopRightRadius: 'inherit',
1510
+ },
1511
+ '.ids-card.ids-card-vertical .ids-card-section:last-child': {
1512
+ paddingTop: '0px',
1513
+ borderBottomLeftRadius: 'inherit',
1514
+ borderBottomRightRadius: 'inherit',
1515
+ },
1516
+ '.ids-card.ids-card-vertical .ids-card-section.ids-card-section-stretched': {
1517
+ paddingLeft: '0px',
1518
+ paddingRight: '0px',
1519
+ width: '100%',
1520
+ },
1521
+ '.ids-card.ids-card-vertical .ids-card-section .ids-card-header-headline': { display: 'flex', flexDirection: 'column' },
1522
+ '.ids-card.ids-card-horizontal .ids-card-section:first-child': {
1523
+ paddingRight: '0px',
1524
+ borderTopLeftRadius: 'inherit',
1525
+ borderBottomLeftRadius: 'inherit',
1526
+ },
1527
+ '.ids-card.ids-card-horizontal .ids-card-section:last-child': {
1528
+ paddingLeft: '0px',
1529
+ borderTopRightRadius: 'inherit',
1530
+ borderBottomRightRadius: 'inherit',
1531
+ },
1532
+ '.ids-card.ids-card-horizontal .ids-card-section.ids-card-section-stretched': {
1533
+ paddingTop: '0px',
1534
+ paddingBottom: '0px',
1535
+ height: '100%',
1536
+ },
1537
+ '.ids-card.ids-card-horizontal .ids-card-section.ids-card-header,.ids-card.ids-card-horizontal .ids-card-section.ids-card-footer': {
1538
+ display: 'none',
1539
+ },
1540
+ '.ids-card .ids-card-title': {
1541
+ color: 'var(--ids-smc-reference-container-color-fg-surface-darker-95)',
1542
+ fontSize: '24px',
1543
+ fontStyle: 'normal',
1544
+ fontWeight: 600,
1545
+ lineHeight: '32px',
1546
+ },
1547
+ '.ids-card .ids-card-subtitle': {
1548
+ color: 'var(--ids-smc-reference-container-color-fg-surface-darker-70)',
1549
+ fontSize: '16px',
1550
+ fontStyle: 'normal',
1551
+ fontWeight: 500,
1552
+ lineHeight: '24px',
1553
+ letterSpacing: '.15px',
1554
+ },
1555
+ '.ids-card.ids-card-elevated': {
1556
+ boxShadow:
1557
+ 'var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-sm) var(--ids-smc-reference-container-effects-shadow-blur-md) var(--ids-smc-reference-container-effects-shadow-spread-xxl) var(--ids-smc-reference-container-effects-shadow-color-dark-light),var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xs) var(--ids-smc-reference-container-effects-shadow-blur-sm) var(--ids-smc-reference-container-effects-shadow-spread-xl) var(--ids-smc-reference-container-effects-shadow-color-dark-light)',
1558
+ },
1559
+ '.ids-card.ids-card-compact.ids-card-horizontal': {
1560
+ padding:
1561
+ 'var(--ids-comp-size-card-container-horizontal-size-padding-y-compact) var(--ids-comp-size-card-container-horizontal-size-padding-x-compact)',
1562
+ gap: 'var(--ids-comp-size-card-container-horizontal-size-gap-compact)',
1563
+ borderRadius: 'var(--ids-comp-size-card-container-horizontal-size-border-radius-compact)',
1564
+ },
1565
+ '.ids-card.ids-card-compact.ids-card-horizontal.ids-card-outlined': {
1566
+ borderWidth: 'var(--ids-comp-size-card-container-horizontal-size-border-width-compact)',
1567
+ },
1568
+ '.ids-card.ids-card-compact.ids-card-vertical': {
1569
+ padding:
1570
+ 'var(--ids-comp-size-card-container-vertical-size-padding-y-compact) var(--ids-comp-size-card-container-vertical-size-padding-x-compact)',
1571
+ gap: 'var(--ids-comp-size-card-container-vertical-size-gap-compact)',
1572
+ borderRadius: 'var(--ids-comp-size-card-container-vertical-size-border-radius-compact)',
1573
+ },
1574
+ '.ids-card.ids-card-compact.ids-card-vertical.ids-card-outlined': {
1575
+ borderWidth: 'var(--ids-comp-size-card-container-vertical-size-border-width-compact)',
1576
+ },
1577
+ '.ids-card.ids-card-compact.ids-card-clickable:focus': { outlineWidth: 'var(--ids-comp-size-card-focused-outline-outline-compact)' },
1578
+ '.ids-card.ids-card-compact .ids-card-header-headline': {
1579
+ gap: 'var(--ids-comp-size-card-header-headline-gap-compact)',
1580
+ padding: 'var(--ids-comp-size-card-header-headline-padding-y-compact) var(--ids-comp-size-card-header-headline-padding-x-compact)',
1581
+ },
1582
+ '.ids-card.ids-card-compact.ids-card-vertical .ids-card-section:not(.ids-card-media):first-child': {
1583
+ paddingTop: 'var(--ids-comp-size-card-slot-size-padding-top-compact)',
1584
+ },
1585
+ '.ids-card.ids-card-compact.ids-card-vertical .ids-card-section:not(.ids-card-media):last-child': {
1586
+ paddingBottom: 'var(--ids-comp-size-card-slot-size-padding-bottom-compact)',
1587
+ },
1588
+ '.ids-card.ids-card-compact.ids-card-vertical .ids-card-section.ids-card-section-padded': {
1589
+ paddingLeft: 'var(--ids-comp-size-card-slot-size-padding-x-compact)',
1590
+ paddingRight: 'var(--ids-comp-size-card-slot-size-padding-x-compact)',
1591
+ },
1592
+ '.ids-card.ids-card-compact.ids-card-horizontal .ids-card-section:not(.ids-card-media):first-child': {
1593
+ paddingLeft: 'var(--ids-comp-size-card-slot-size-padding-top-compact)',
1594
+ },
1595
+ '.ids-card.ids-card-compact.ids-card-horizontal .ids-card-section:not(.ids-card-media):last-child': {
1596
+ paddingRight: 'var(--ids-comp-size-card-slot-size-padding-bottom-compact)',
1597
+ },
1598
+ '.ids-card.ids-card-compact.ids-card-horizontal .ids-card-section.ids-card-section-padded': {
1599
+ paddingTop: 'var(--ids-comp-size-card-slot-size-padding-x-compact)',
1600
+ paddingBottom: 'var(--ids-comp-size-card-slot-size-padding-x-compact)',
1601
+ },
1602
+ '.ids-card.ids-card-comfortable.ids-card-horizontal': {
1603
+ padding:
1604
+ 'var(--ids-comp-size-card-container-horizontal-size-padding-y-comfortable) var(--ids-comp-size-card-container-horizontal-size-padding-x-comfortable)',
1605
+ gap: 'var(--ids-comp-size-card-container-horizontal-size-gap-comfortable)',
1606
+ borderRadius: 'var(--ids-comp-size-card-container-horizontal-size-border-radius-comfortable)',
1607
+ },
1608
+ '.ids-card.ids-card-comfortable.ids-card-horizontal.ids-card-outlined': {
1609
+ borderWidth: 'var(--ids-comp-size-card-container-horizontal-size-border-width-comfortable)',
1610
+ },
1611
+ '.ids-card.ids-card-comfortable.ids-card-vertical': {
1612
+ padding:
1613
+ 'var(--ids-comp-size-card-container-vertical-size-padding-y-comfortable) var(--ids-comp-size-card-container-vertical-size-padding-x-comfortable)',
1614
+ gap: 'var(--ids-comp-size-card-container-vertical-size-gap-comfortable)',
1615
+ borderRadius: 'var(--ids-comp-size-card-container-vertical-size-border-radius-comfortable)',
1616
+ },
1617
+ '.ids-card.ids-card-comfortable.ids-card-vertical.ids-card-outlined': {
1618
+ borderWidth: 'var(--ids-comp-size-card-container-vertical-size-border-width-comfortable)',
1619
+ },
1620
+ '.ids-card.ids-card-comfortable.ids-card-clickable:focus': {
1621
+ outlineWidth: 'var(--ids-comp-size-card-focused-outline-outline-comfortable)',
1622
+ },
1623
+ '.ids-card.ids-card-comfortable .ids-card-header-headline': {
1624
+ gap: 'var(--ids-comp-size-card-header-headline-gap-comfortable)',
1625
+ padding:
1626
+ 'var(--ids-comp-size-card-header-headline-padding-y-comfortable) var(--ids-comp-size-card-header-headline-padding-x-comfortable)',
1627
+ },
1628
+ '.ids-card.ids-card-comfortable.ids-card-vertical .ids-card-section:not(.ids-card-media):first-child': {
1629
+ paddingTop: 'var(--ids-comp-size-card-slot-size-padding-top-comfortable)',
1630
+ },
1631
+ '.ids-card.ids-card-comfortable.ids-card-vertical .ids-card-section:not(.ids-card-media):last-child': {
1632
+ paddingBottom: 'var(--ids-comp-size-card-slot-size-padding-bottom-comfortable)',
1633
+ },
1634
+ '.ids-card.ids-card-comfortable.ids-card-vertical .ids-card-section.ids-card-section-padded': {
1635
+ paddingLeft: 'var(--ids-comp-size-card-slot-size-padding-x-comfortable)',
1636
+ paddingRight: 'var(--ids-comp-size-card-slot-size-padding-x-comfortable)',
1637
+ },
1638
+ '.ids-card.ids-card-comfortable.ids-card-horizontal .ids-card-section:not(.ids-card-media):first-child': {
1639
+ paddingLeft: 'var(--ids-comp-size-card-slot-size-padding-top-comfortable)',
1640
+ },
1641
+ '.ids-card.ids-card-comfortable.ids-card-horizontal .ids-card-section:not(.ids-card-media):last-child': {
1642
+ paddingRight: 'var(--ids-comp-size-card-slot-size-padding-bottom-comfortable)',
1643
+ },
1644
+ '.ids-card.ids-card-comfortable.ids-card-horizontal .ids-card-section.ids-card-section-padded': {
1645
+ paddingTop: 'var(--ids-comp-size-card-slot-size-padding-x-comfortable)',
1646
+ paddingBottom: 'var(--ids-comp-size-card-slot-size-padding-x-comfortable)',
1647
+ },
1648
+ '.ids-card.ids-card-spacious.ids-card-horizontal': {
1649
+ padding:
1650
+ 'var(--ids-comp-size-card-container-horizontal-size-padding-y-spacious) var(--ids-comp-size-card-container-horizontal-size-padding-x-spacious)',
1651
+ gap: 'var(--ids-comp-size-card-container-horizontal-size-gap-spacious)',
1652
+ borderRadius: 'var(--ids-comp-size-card-container-horizontal-size-border-radius-spacious)',
1653
+ },
1654
+ '.ids-card.ids-card-spacious.ids-card-horizontal.ids-card-outlined': {
1655
+ borderWidth: 'var(--ids-comp-size-card-container-horizontal-size-border-width-spacious)',
1656
+ },
1657
+ '.ids-card.ids-card-spacious.ids-card-vertical': {
1658
+ padding:
1659
+ 'var(--ids-comp-size-card-container-vertical-size-padding-y-spacious) var(--ids-comp-size-card-container-vertical-size-padding-x-spacious)',
1660
+ gap: 'var(--ids-comp-size-card-container-vertical-size-gap-spacious)',
1661
+ borderRadius: 'var(--ids-comp-size-card-container-vertical-size-border-radius-spacious)',
1662
+ },
1663
+ '.ids-card.ids-card-spacious.ids-card-vertical.ids-card-outlined': {
1664
+ borderWidth: 'var(--ids-comp-size-card-container-vertical-size-border-width-spacious)',
1665
+ },
1666
+ '.ids-card.ids-card-spacious.ids-card-clickable:focus': {
1667
+ outlineWidth: 'var(--ids-comp-size-card-focused-outline-outline-spacious)',
1668
+ },
1669
+ '.ids-card.ids-card-spacious .ids-card-header-headline': {
1670
+ gap: 'var(--ids-comp-size-card-header-headline-gap-spacious)',
1671
+ padding:
1672
+ 'var(--ids-comp-size-card-header-headline-padding-y-spacious) var(--ids-comp-size-card-header-headline-padding-x-spacious)',
1673
+ },
1674
+ '.ids-card.ids-card-spacious.ids-card-vertical .ids-card-section:not(.ids-card-media):first-child': {
1675
+ paddingTop: 'var(--ids-comp-size-card-slot-size-padding-top-spacious)',
1676
+ },
1677
+ '.ids-card.ids-card-spacious.ids-card-vertical .ids-card-section:not(.ids-card-media):last-child': {
1678
+ paddingBottom: 'var(--ids-comp-size-card-slot-size-padding-bottom-spacious)',
1679
+ },
1680
+ '.ids-card.ids-card-spacious.ids-card-vertical .ids-card-section.ids-card-section-padded': {
1681
+ paddingLeft: 'var(--ids-comp-size-card-slot-size-padding-x-spacious)',
1682
+ paddingRight: 'var(--ids-comp-size-card-slot-size-padding-x-spacious)',
1683
+ },
1684
+ '.ids-card.ids-card-spacious.ids-card-horizontal .ids-card-section:not(.ids-card-media):first-child': {
1685
+ paddingLeft: 'var(--ids-comp-size-card-slot-size-padding-top-spacious)',
1686
+ },
1687
+ '.ids-card.ids-card-spacious.ids-card-horizontal .ids-card-section:not(.ids-card-media):last-child': {
1688
+ paddingRight: 'var(--ids-comp-size-card-slot-size-padding-bottom-spacious)',
1689
+ },
1690
+ '.ids-card.ids-card-spacious.ids-card-horizontal .ids-card-section.ids-card-section-padded': {
1691
+ paddingTop: 'var(--ids-comp-size-card-slot-size-padding-x-spacious)',
1692
+ paddingBottom: 'var(--ids-comp-size-card-slot-size-padding-x-spacious)',
1693
+ },
1694
+ '.ids-card.ids-card-dense.ids-card-horizontal': {
1695
+ padding:
1696
+ 'var(--ids-comp-size-card-container-horizontal-size-padding-y-dense) var(--ids-comp-size-card-container-horizontal-size-padding-x-dense)',
1697
+ gap: 'var(--ids-comp-size-card-container-horizontal-size-gap-dense)',
1698
+ borderRadius: 'var(--ids-comp-size-card-container-horizontal-size-border-radius-dense)',
1699
+ },
1700
+ '.ids-card.ids-card-dense.ids-card-horizontal.ids-card-outlined': {
1701
+ borderWidth: 'var(--ids-comp-size-card-container-horizontal-size-border-width-dense)',
1702
+ },
1703
+ '.ids-card.ids-card-dense.ids-card-vertical': {
1704
+ padding:
1705
+ 'var(--ids-comp-size-card-container-vertical-size-padding-y-dense) var(--ids-comp-size-card-container-vertical-size-padding-x-dense)',
1706
+ gap: 'var(--ids-comp-size-card-container-vertical-size-gap-dense)',
1707
+ borderRadius: 'var(--ids-comp-size-card-container-vertical-size-border-radius-dense)',
1708
+ },
1709
+ '.ids-card.ids-card-dense.ids-card-vertical.ids-card-outlined': {
1710
+ borderWidth: 'var(--ids-comp-size-card-container-vertical-size-border-width-dense)',
1711
+ },
1712
+ '.ids-card.ids-card-dense.ids-card-clickable:focus': { outlineWidth: 'var(--ids-comp-size-card-focused-outline-outline-dense)' },
1713
+ '.ids-card.ids-card-dense .ids-card-header-headline': {
1714
+ gap: 'var(--ids-comp-size-card-header-headline-gap-dense)',
1715
+ padding: 'var(--ids-comp-size-card-header-headline-padding-y-dense) var(--ids-comp-size-card-header-headline-padding-x-dense)',
1716
+ },
1717
+ '.ids-card.ids-card-dense.ids-card-vertical .ids-card-section:not(.ids-card-media):first-child': {
1718
+ paddingTop: 'var(--ids-comp-size-card-slot-size-padding-top-dense)',
1719
+ },
1720
+ '.ids-card.ids-card-dense.ids-card-vertical .ids-card-section:not(.ids-card-media):last-child': {
1721
+ paddingBottom: 'var(--ids-comp-size-card-slot-size-padding-bottom-dense)',
1722
+ },
1723
+ '.ids-card.ids-card-dense.ids-card-vertical .ids-card-section.ids-card-section-padded': {
1724
+ paddingLeft: 'var(--ids-comp-size-card-slot-size-padding-x-dense)',
1725
+ paddingRight: 'var(--ids-comp-size-card-slot-size-padding-x-dense)',
1726
+ },
1727
+ '.ids-card.ids-card-dense.ids-card-horizontal .ids-card-section:not(.ids-card-media):first-child': {
1728
+ paddingLeft: 'var(--ids-comp-size-card-slot-size-padding-top-dense)',
1729
+ },
1730
+ '.ids-card.ids-card-dense.ids-card-horizontal .ids-card-section:not(.ids-card-media):last-child': {
1731
+ paddingRight: 'var(--ids-comp-size-card-slot-size-padding-bottom-dense)',
1732
+ },
1733
+ '.ids-card.ids-card-dense.ids-card-horizontal .ids-card-section.ids-card-section-padded': {
1734
+ paddingTop: 'var(--ids-comp-size-card-slot-size-padding-x-dense)',
1735
+ paddingBottom: 'var(--ids-comp-size-card-slot-size-padding-x-dense)',
1736
+ },
1737
+ '.ids-card.ids-card-filled.ids-card-primary': {
1738
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-primary-enabled)',
1739
+ borderColor: 'var(--ids-comp-card-filled-color-border-primary-enabled)',
1740
+ },
1741
+ '.ids-card.ids-card-filled.ids-card-primary.ids-card-clickable:hover': {
1742
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-primary-hovered)',
1743
+ borderColor: 'var(--ids-comp-card-filled-color-border-primary-hovered)',
1744
+ },
1745
+ '.ids-card.ids-card-filled.ids-card-primary.ids-card-clickable:focus': {
1746
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-primary-focused)',
1747
+ borderColor: 'var(--ids-comp-card-filled-color-border-primary-focused)',
1748
+ },
1749
+ '.ids-card.ids-card-filled.ids-card-primary.ids-card-clickable:active': {
1750
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-primary-pressed)',
1751
+ borderColor: 'var(--ids-comp-card-filled-color-border-primary-pressed)',
1752
+ },
1753
+ '.ids-card.ids-card-filled.ids-card-primary.ids-card-clickable.ids-card-disabled': {
1754
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-primary-disabled)',
1755
+ borderColor: 'var(--ids-comp-card-filled-color-border-primary-disabled)',
1756
+ },
1757
+ '.ids-card.ids-card-filled.ids-card-secondary': {
1758
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-secondary-enabled)',
1759
+ borderColor: 'var(--ids-comp-card-filled-color-border-secondary-enabled)',
1760
+ },
1761
+ '.ids-card.ids-card-filled.ids-card-secondary.ids-card-clickable:hover': {
1762
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-secondary-hovered)',
1763
+ borderColor: 'var(--ids-comp-card-filled-color-border-secondary-hovered)',
1764
+ },
1765
+ '.ids-card.ids-card-filled.ids-card-secondary.ids-card-clickable:focus': {
1766
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-secondary-focused)',
1767
+ borderColor: 'var(--ids-comp-card-filled-color-border-secondary-focused)',
1768
+ },
1769
+ '.ids-card.ids-card-filled.ids-card-secondary.ids-card-clickable:active': {
1770
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-secondary-pressed)',
1771
+ borderColor: 'var(--ids-comp-card-filled-color-border-secondary-pressed)',
1772
+ },
1773
+ '.ids-card.ids-card-filled.ids-card-secondary.ids-card-clickable.ids-card-disabled': {
1774
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-secondary-disabled)',
1775
+ borderColor: 'var(--ids-comp-card-filled-color-border-secondary-disabled)',
1776
+ },
1777
+ '.ids-card.ids-card-filled.ids-card-brand': {
1778
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-brand-enabled)',
1779
+ borderColor: 'var(--ids-comp-card-filled-color-border-brand-enabled)',
1780
+ },
1781
+ '.ids-card.ids-card-filled.ids-card-brand.ids-card-clickable:hover': {
1782
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-brand-hovered)',
1783
+ borderColor: 'var(--ids-comp-card-filled-color-border-brand-hovered)',
1784
+ },
1785
+ '.ids-card.ids-card-filled.ids-card-brand.ids-card-clickable:focus': {
1786
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-brand-focused)',
1787
+ borderColor: 'var(--ids-comp-card-filled-color-border-brand-focused)',
1788
+ },
1789
+ '.ids-card.ids-card-filled.ids-card-brand.ids-card-clickable:active': {
1790
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-brand-pressed)',
1791
+ borderColor: 'var(--ids-comp-card-filled-color-border-brand-pressed)',
1792
+ },
1793
+ '.ids-card.ids-card-filled.ids-card-brand.ids-card-clickable.ids-card-disabled': {
1794
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-brand-disabled)',
1795
+ borderColor: 'var(--ids-comp-card-filled-color-border-brand-disabled)',
1796
+ },
1797
+ '.ids-card.ids-card-filled.ids-card-error': {
1798
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-error-enabled)',
1799
+ borderColor: 'var(--ids-comp-card-filled-color-border-error-enabled)',
1800
+ },
1801
+ '.ids-card.ids-card-filled.ids-card-error.ids-card-clickable:hover': {
1802
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-error-hovered)',
1803
+ borderColor: 'var(--ids-comp-card-filled-color-border-error-hovered)',
1804
+ },
1805
+ '.ids-card.ids-card-filled.ids-card-error.ids-card-clickable:focus': {
1806
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-error-focused)',
1807
+ borderColor: 'var(--ids-comp-card-filled-color-border-error-focused)',
1808
+ },
1809
+ '.ids-card.ids-card-filled.ids-card-error.ids-card-clickable:active': {
1810
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-error-pressed)',
1811
+ borderColor: 'var(--ids-comp-card-filled-color-border-error-pressed)',
1812
+ },
1813
+ '.ids-card.ids-card-filled.ids-card-error.ids-card-clickable.ids-card-disabled': {
1814
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-error-disabled)',
1815
+ borderColor: 'var(--ids-comp-card-filled-color-border-error-disabled)',
1816
+ },
1817
+ '.ids-card.ids-card-filled.ids-card-success': {
1818
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-success-enabled)',
1819
+ borderColor: 'var(--ids-comp-card-filled-color-border-success-enabled)',
1820
+ },
1821
+ '.ids-card.ids-card-filled.ids-card-success.ids-card-clickable:hover': {
1822
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-success-hovered)',
1823
+ borderColor: 'var(--ids-comp-card-filled-color-border-success-hovered)',
1824
+ },
1825
+ '.ids-card.ids-card-filled.ids-card-success.ids-card-clickable:focus': {
1826
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-success-focused)',
1827
+ borderColor: 'var(--ids-comp-card-filled-color-border-success-focused)',
1828
+ },
1829
+ '.ids-card.ids-card-filled.ids-card-success.ids-card-clickable:active': {
1830
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-success-pressed)',
1831
+ borderColor: 'var(--ids-comp-card-filled-color-border-success-pressed)',
1832
+ },
1833
+ '.ids-card.ids-card-filled.ids-card-success.ids-card-clickable.ids-card-disabled': {
1834
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-success-disabled)',
1835
+ borderColor: 'var(--ids-comp-card-filled-color-border-success-disabled)',
1836
+ },
1837
+ '.ids-card.ids-card-filled.ids-card-warning': {
1838
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-warning-enabled)',
1839
+ borderColor: 'var(--ids-comp-card-filled-color-border-warning-enabled)',
1840
+ },
1841
+ '.ids-card.ids-card-filled.ids-card-warning.ids-card-clickable:hover': {
1842
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-warning-hovered)',
1843
+ borderColor: 'var(--ids-comp-card-filled-color-border-warning-hovered)',
1844
+ },
1845
+ '.ids-card.ids-card-filled.ids-card-warning.ids-card-clickable:focus': {
1846
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-warning-focused)',
1847
+ borderColor: 'var(--ids-comp-card-filled-color-border-warning-focused)',
1848
+ },
1849
+ '.ids-card.ids-card-filled.ids-card-warning.ids-card-clickable:active': {
1850
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-warning-pressed)',
1851
+ borderColor: 'var(--ids-comp-card-filled-color-border-warning-pressed)',
1852
+ },
1853
+ '.ids-card.ids-card-filled.ids-card-warning.ids-card-clickable.ids-card-disabled': {
1854
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-warning-disabled)',
1855
+ borderColor: 'var(--ids-comp-card-filled-color-border-warning-disabled)',
1856
+ },
1857
+ '.ids-card.ids-card-filled.ids-card-info': {
1858
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-info-enabled)',
1859
+ borderColor: 'var(--ids-comp-card-filled-color-border-info-enabled)',
1860
+ },
1861
+ '.ids-card.ids-card-filled.ids-card-info.ids-card-clickable:hover': {
1862
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-info-hovered)',
1863
+ borderColor: 'var(--ids-comp-card-filled-color-border-info-hovered)',
1864
+ },
1865
+ '.ids-card.ids-card-filled.ids-card-info.ids-card-clickable:focus': {
1866
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-info-focused)',
1867
+ borderColor: 'var(--ids-comp-card-filled-color-border-info-focused)',
1868
+ },
1869
+ '.ids-card.ids-card-filled.ids-card-info.ids-card-clickable:active': {
1870
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-info-pressed)',
1871
+ borderColor: 'var(--ids-comp-card-filled-color-border-info-pressed)',
1872
+ },
1873
+ '.ids-card.ids-card-filled.ids-card-info.ids-card-clickable.ids-card-disabled': {
1874
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-info-disabled)',
1875
+ borderColor: 'var(--ids-comp-card-filled-color-border-info-disabled)',
1876
+ },
1877
+ '.ids-card.ids-card-filled.ids-card-light': {
1878
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-light-enabled)',
1879
+ borderColor: 'var(--ids-comp-card-filled-color-border-light-enabled)',
1880
+ },
1881
+ '.ids-card.ids-card-filled.ids-card-light.ids-card-clickable:hover': {
1882
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-light-hovered)',
1883
+ borderColor: 'var(--ids-comp-card-filled-color-border-light-hovered)',
1884
+ },
1885
+ '.ids-card.ids-card-filled.ids-card-light.ids-card-clickable:focus': {
1886
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-light-focused)',
1887
+ borderColor: 'var(--ids-comp-card-filled-color-border-light-focused)',
1888
+ },
1889
+ '.ids-card.ids-card-filled.ids-card-light.ids-card-clickable:active': {
1890
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-light-pressed)',
1891
+ borderColor: 'var(--ids-comp-card-filled-color-border-light-pressed)',
1892
+ },
1893
+ '.ids-card.ids-card-filled.ids-card-light.ids-card-clickable.ids-card-disabled': {
1894
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-light-disabled)',
1895
+ borderColor: 'var(--ids-comp-card-filled-color-border-light-disabled)',
1896
+ },
1897
+ '.ids-card.ids-card-filled.ids-card-dark': {
1898
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-dark-enabled)',
1899
+ borderColor: 'var(--ids-comp-card-filled-color-border-dark-enabled)',
1900
+ },
1901
+ '.ids-card.ids-card-filled.ids-card-dark.ids-card-clickable:hover': {
1902
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-dark-hovered)',
1903
+ borderColor: 'var(--ids-comp-card-filled-color-border-dark-hovered)',
1904
+ },
1905
+ '.ids-card.ids-card-filled.ids-card-dark.ids-card-clickable:focus': {
1906
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-dark-focused)',
1907
+ borderColor: 'var(--ids-comp-card-filled-color-border-dark-focused)',
1908
+ },
1909
+ '.ids-card.ids-card-filled.ids-card-dark.ids-card-clickable:active': {
1910
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-dark-pressed)',
1911
+ borderColor: 'var(--ids-comp-card-filled-color-border-dark-pressed)',
1912
+ },
1913
+ '.ids-card.ids-card-filled.ids-card-dark.ids-card-clickable.ids-card-disabled': {
1914
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-dark-disabled)',
1915
+ borderColor: 'var(--ids-comp-card-filled-color-border-dark-disabled)',
1916
+ },
1917
+ '.ids-card.ids-card-filled.ids-card-surface': {
1918
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-surface-enabled)',
1919
+ borderColor: 'var(--ids-comp-card-filled-color-border-surface-enabled)',
1920
+ },
1921
+ '.ids-card.ids-card-filled.ids-card-surface.ids-card-clickable:hover': {
1922
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-surface-hovered)',
1923
+ borderColor: 'var(--ids-comp-card-filled-color-border-surface-hovered)',
1924
+ },
1925
+ '.ids-card.ids-card-filled.ids-card-surface.ids-card-clickable:focus': {
1926
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-surface-focused)',
1927
+ borderColor: 'var(--ids-comp-card-filled-color-border-surface-focused)',
1928
+ },
1929
+ '.ids-card.ids-card-filled.ids-card-surface.ids-card-clickable:active': {
1930
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-surface-pressed)',
1931
+ borderColor: 'var(--ids-comp-card-filled-color-border-surface-pressed)',
1932
+ },
1933
+ '.ids-card.ids-card-filled.ids-card-surface.ids-card-clickable.ids-card-disabled': {
1934
+ backgroundColor: 'var(--ids-comp-card-filled-color-bg-surface-disabled)',
1935
+ borderColor: 'var(--ids-comp-card-filled-color-border-surface-disabled)',
1936
+ },
1937
+ '.ids-card.ids-card-outlined.ids-card-primary': {
1938
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-primary-enabled)',
1939
+ borderColor: 'var(--ids-comp-card-outlined-color-border-primary-enabled)',
1940
+ },
1941
+ '.ids-card.ids-card-outlined.ids-card-primary.ids-card-clickable:hover': {
1942
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-primary-hovered)',
1943
+ borderColor: 'var(--ids-comp-card-outlined-color-border-primary-hovered)',
1944
+ },
1945
+ '.ids-card.ids-card-outlined.ids-card-primary.ids-card-clickable:focus': {
1946
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-primary-focused)',
1947
+ borderColor: 'var(--ids-comp-card-outlined-color-border-primary-focused)',
1948
+ },
1949
+ '.ids-card.ids-card-outlined.ids-card-primary.ids-card-clickable:active': {
1950
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-primary-pressed)',
1951
+ borderColor: 'var(--ids-comp-card-outlined-color-border-primary-pressed)',
1952
+ },
1953
+ '.ids-card.ids-card-outlined.ids-card-primary.ids-card-clickable.ids-card-disabled': {
1954
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-primary-disabled)',
1955
+ borderColor: 'var(--ids-comp-card-outlined-color-border-primary-disabled)',
1956
+ },
1957
+ '.ids-card.ids-card-outlined.ids-card-secondary': {
1958
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-secondary-enabled)',
1959
+ borderColor: 'var(--ids-comp-card-outlined-color-border-secondary-enabled)',
1960
+ },
1961
+ '.ids-card.ids-card-outlined.ids-card-secondary.ids-card-clickable:hover': {
1962
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-secondary-hovered)',
1963
+ borderColor: 'var(--ids-comp-card-outlined-color-border-secondary-hovered)',
1964
+ },
1965
+ '.ids-card.ids-card-outlined.ids-card-secondary.ids-card-clickable:focus': {
1966
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-secondary-focused)',
1967
+ borderColor: 'var(--ids-comp-card-outlined-color-border-secondary-focused)',
1968
+ },
1969
+ '.ids-card.ids-card-outlined.ids-card-secondary.ids-card-clickable:active': {
1970
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-secondary-pressed)',
1971
+ borderColor: 'var(--ids-comp-card-outlined-color-border-secondary-pressed)',
1972
+ },
1973
+ '.ids-card.ids-card-outlined.ids-card-secondary.ids-card-clickable.ids-card-disabled': {
1974
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-secondary-disabled)',
1975
+ borderColor: 'var(--ids-comp-card-outlined-color-border-secondary-disabled)',
1976
+ },
1977
+ '.ids-card.ids-card-outlined.ids-card-brand': {
1978
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-brand-enabled)',
1979
+ borderColor: 'var(--ids-comp-card-outlined-color-border-brand-enabled)',
1980
+ },
1981
+ '.ids-card.ids-card-outlined.ids-card-brand.ids-card-clickable:hover': {
1982
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-brand-hovered)',
1983
+ borderColor: 'var(--ids-comp-card-outlined-color-border-brand-hovered)',
1984
+ },
1985
+ '.ids-card.ids-card-outlined.ids-card-brand.ids-card-clickable:focus': {
1986
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-brand-focused)',
1987
+ borderColor: 'var(--ids-comp-card-outlined-color-border-brand-focused)',
1988
+ },
1989
+ '.ids-card.ids-card-outlined.ids-card-brand.ids-card-clickable:active': {
1990
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-brand-pressed)',
1991
+ borderColor: 'var(--ids-comp-card-outlined-color-border-brand-pressed)',
1992
+ },
1993
+ '.ids-card.ids-card-outlined.ids-card-brand.ids-card-clickable.ids-card-disabled': {
1994
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-brand-disabled)',
1995
+ borderColor: 'var(--ids-comp-card-outlined-color-border-brand-disabled)',
1996
+ },
1997
+ '.ids-card.ids-card-outlined.ids-card-error': {
1998
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-error-enabled)',
1999
+ borderColor: 'var(--ids-comp-card-outlined-color-border-error-enabled)',
2000
+ },
2001
+ '.ids-card.ids-card-outlined.ids-card-error.ids-card-clickable:hover': {
2002
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-error-hovered)',
2003
+ borderColor: 'var(--ids-comp-card-outlined-color-border-error-hovered)',
2004
+ },
2005
+ '.ids-card.ids-card-outlined.ids-card-error.ids-card-clickable:focus': {
2006
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-error-focused)',
2007
+ borderColor: 'var(--ids-comp-card-outlined-color-border-error-focused)',
2008
+ },
2009
+ '.ids-card.ids-card-outlined.ids-card-error.ids-card-clickable:active': {
2010
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-error-pressed)',
2011
+ borderColor: 'var(--ids-comp-card-outlined-color-border-error-pressed)',
2012
+ },
2013
+ '.ids-card.ids-card-outlined.ids-card-error.ids-card-clickable.ids-card-disabled': {
2014
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-error-disabled)',
2015
+ borderColor: 'var(--ids-comp-card-outlined-color-border-error-disabled)',
2016
+ },
2017
+ '.ids-card.ids-card-outlined.ids-card-success': {
2018
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-success-enabled)',
2019
+ borderColor: 'var(--ids-comp-card-outlined-color-border-success-enabled)',
2020
+ },
2021
+ '.ids-card.ids-card-outlined.ids-card-success.ids-card-clickable:hover': {
2022
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-success-hovered)',
2023
+ borderColor: 'var(--ids-comp-card-outlined-color-border-success-hovered)',
2024
+ },
2025
+ '.ids-card.ids-card-outlined.ids-card-success.ids-card-clickable:focus': {
2026
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-success-focused)',
2027
+ borderColor: 'var(--ids-comp-card-outlined-color-border-success-focused)',
2028
+ },
2029
+ '.ids-card.ids-card-outlined.ids-card-success.ids-card-clickable:active': {
2030
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-success-pressed)',
2031
+ borderColor: 'var(--ids-comp-card-outlined-color-border-success-pressed)',
2032
+ },
2033
+ '.ids-card.ids-card-outlined.ids-card-success.ids-card-clickable.ids-card-disabled': {
2034
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-success-disabled)',
2035
+ borderColor: 'var(--ids-comp-card-outlined-color-border-success-disabled)',
2036
+ },
2037
+ '.ids-card.ids-card-outlined.ids-card-warning': {
2038
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-warning-enabled)',
2039
+ borderColor: 'var(--ids-comp-card-outlined-color-border-warning-enabled)',
2040
+ },
2041
+ '.ids-card.ids-card-outlined.ids-card-warning.ids-card-clickable:hover': {
2042
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-warning-hovered)',
2043
+ borderColor: 'var(--ids-comp-card-outlined-color-border-warning-hovered)',
2044
+ },
2045
+ '.ids-card.ids-card-outlined.ids-card-warning.ids-card-clickable:focus': {
2046
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-warning-focused)',
2047
+ borderColor: 'var(--ids-comp-card-outlined-color-border-warning-focused)',
2048
+ },
2049
+ '.ids-card.ids-card-outlined.ids-card-warning.ids-card-clickable:active': {
2050
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-warning-pressed)',
2051
+ borderColor: 'var(--ids-comp-card-outlined-color-border-warning-pressed)',
2052
+ },
2053
+ '.ids-card.ids-card-outlined.ids-card-warning.ids-card-clickable.ids-card-disabled': {
2054
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-warning-disabled)',
2055
+ borderColor: 'var(--ids-comp-card-outlined-color-border-warning-disabled)',
2056
+ },
2057
+ '.ids-card.ids-card-outlined.ids-card-info': {
2058
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-info-enabled)',
2059
+ borderColor: 'var(--ids-comp-card-outlined-color-border-info-enabled)',
2060
+ },
2061
+ '.ids-card.ids-card-outlined.ids-card-info.ids-card-clickable:hover': {
2062
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-info-hovered)',
2063
+ borderColor: 'var(--ids-comp-card-outlined-color-border-info-hovered)',
2064
+ },
2065
+ '.ids-card.ids-card-outlined.ids-card-info.ids-card-clickable:focus': {
2066
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-info-focused)',
2067
+ borderColor: 'var(--ids-comp-card-outlined-color-border-info-focused)',
2068
+ },
2069
+ '.ids-card.ids-card-outlined.ids-card-info.ids-card-clickable:active': {
2070
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-info-pressed)',
2071
+ borderColor: 'var(--ids-comp-card-outlined-color-border-info-pressed)',
2072
+ },
2073
+ '.ids-card.ids-card-outlined.ids-card-info.ids-card-clickable.ids-card-disabled': {
2074
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-info-disabled)',
2075
+ borderColor: 'var(--ids-comp-card-outlined-color-border-info-disabled)',
2076
+ },
2077
+ '.ids-card.ids-card-outlined.ids-card-light': {
2078
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-light-enabled)',
2079
+ borderColor: 'var(--ids-comp-card-outlined-color-border-light-enabled)',
2080
+ },
2081
+ '.ids-card.ids-card-outlined.ids-card-light.ids-card-clickable:hover': {
2082
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-light-hovered)',
2083
+ borderColor: 'var(--ids-comp-card-outlined-color-border-light-hovered)',
2084
+ },
2085
+ '.ids-card.ids-card-outlined.ids-card-light.ids-card-clickable:focus': {
2086
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-light-focused)',
2087
+ borderColor: 'var(--ids-comp-card-outlined-color-border-light-focused)',
2088
+ },
2089
+ '.ids-card.ids-card-outlined.ids-card-light.ids-card-clickable:active': {
2090
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-light-pressed)',
2091
+ borderColor: 'var(--ids-comp-card-outlined-color-border-light-pressed)',
2092
+ },
2093
+ '.ids-card.ids-card-outlined.ids-card-light.ids-card-clickable.ids-card-disabled': {
2094
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-light-disabled)',
2095
+ borderColor: 'var(--ids-comp-card-outlined-color-border-light-disabled)',
2096
+ },
2097
+ '.ids-card.ids-card-outlined.ids-card-dark': {
2098
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-dark-enabled)',
2099
+ borderColor: 'var(--ids-comp-card-outlined-color-border-dark-enabled)',
2100
+ },
2101
+ '.ids-card.ids-card-outlined.ids-card-dark.ids-card-clickable:hover': {
2102
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-dark-hovered)',
2103
+ borderColor: 'var(--ids-comp-card-outlined-color-border-dark-hovered)',
2104
+ },
2105
+ '.ids-card.ids-card-outlined.ids-card-dark.ids-card-clickable:focus': {
2106
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-dark-focused)',
2107
+ borderColor: 'var(--ids-comp-card-outlined-color-border-dark-focused)',
2108
+ },
2109
+ '.ids-card.ids-card-outlined.ids-card-dark.ids-card-clickable:active': {
2110
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-dark-pressed)',
2111
+ borderColor: 'var(--ids-comp-card-outlined-color-border-dark-pressed)',
2112
+ },
2113
+ '.ids-card.ids-card-outlined.ids-card-dark.ids-card-clickable.ids-card-disabled': {
2114
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-dark-disabled)',
2115
+ borderColor: 'var(--ids-comp-card-outlined-color-border-dark-disabled)',
2116
+ },
2117
+ '.ids-card.ids-card-outlined.ids-card-surface': {
2118
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-surface-enabled)',
2119
+ borderColor: 'var(--ids-comp-card-outlined-color-border-surface-enabled)',
2120
+ },
2121
+ '.ids-card.ids-card-outlined.ids-card-surface.ids-card-clickable:hover': {
2122
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-surface-hovered)',
2123
+ borderColor: 'var(--ids-comp-card-outlined-color-border-surface-hovered)',
2124
+ },
2125
+ '.ids-card.ids-card-outlined.ids-card-surface.ids-card-clickable:focus': {
2126
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-surface-focused)',
2127
+ borderColor: 'var(--ids-comp-card-outlined-color-border-surface-focused)',
2128
+ },
2129
+ '.ids-card.ids-card-outlined.ids-card-surface.ids-card-clickable:active': {
2130
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-surface-pressed)',
2131
+ borderColor: 'var(--ids-comp-card-outlined-color-border-surface-pressed)',
2132
+ },
2133
+ '.ids-card.ids-card-outlined.ids-card-surface.ids-card-clickable.ids-card-disabled': {
2134
+ backgroundColor: 'var(--ids-comp-card-outlined-color-bg-surface-disabled)',
2135
+ borderColor: 'var(--ids-comp-card-outlined-color-border-surface-disabled)',
2136
+ },
2137
+ '.ids-card.ids-card-elevated.ids-card-primary': {
2138
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-primary-enabled)',
2139
+ borderColor: 'var(--ids-comp-card-elevated-color-border-primary-enabled)',
2140
+ },
2141
+ '.ids-card.ids-card-elevated.ids-card-primary.ids-card-clickable:hover': {
2142
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-primary-hovered)',
2143
+ borderColor: 'var(--ids-comp-card-elevated-color-border-primary-hovered)',
2144
+ },
2145
+ '.ids-card.ids-card-elevated.ids-card-primary.ids-card-clickable:focus': {
2146
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-primary-focused)',
2147
+ borderColor: 'var(--ids-comp-card-elevated-color-border-primary-focused)',
2148
+ },
2149
+ '.ids-card.ids-card-elevated.ids-card-primary.ids-card-clickable:active': {
2150
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-primary-pressed)',
2151
+ borderColor: 'var(--ids-comp-card-elevated-color-border-primary-pressed)',
2152
+ },
2153
+ '.ids-card.ids-card-elevated.ids-card-primary.ids-card-clickable.ids-card-disabled': {
2154
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-primary-disabled)',
2155
+ borderColor: 'var(--ids-comp-card-elevated-color-border-primary-disabled)',
2156
+ },
2157
+ '.ids-card.ids-card-elevated.ids-card-secondary': {
2158
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-secondary-enabled)',
2159
+ borderColor: 'var(--ids-comp-card-elevated-color-border-secondary-enabled)',
2160
+ },
2161
+ '.ids-card.ids-card-elevated.ids-card-secondary.ids-card-clickable:hover': {
2162
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-secondary-hovered)',
2163
+ borderColor: 'var(--ids-comp-card-elevated-color-border-secondary-hovered)',
2164
+ },
2165
+ '.ids-card.ids-card-elevated.ids-card-secondary.ids-card-clickable:focus': {
2166
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-secondary-focused)',
2167
+ borderColor: 'var(--ids-comp-card-elevated-color-border-secondary-focused)',
2168
+ },
2169
+ '.ids-card.ids-card-elevated.ids-card-secondary.ids-card-clickable:active': {
2170
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-secondary-pressed)',
2171
+ borderColor: 'var(--ids-comp-card-elevated-color-border-secondary-pressed)',
2172
+ },
2173
+ '.ids-card.ids-card-elevated.ids-card-secondary.ids-card-clickable.ids-card-disabled': {
2174
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-secondary-disabled)',
2175
+ borderColor: 'var(--ids-comp-card-elevated-color-border-secondary-disabled)',
2176
+ },
2177
+ '.ids-card.ids-card-elevated.ids-card-brand': {
2178
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-brand-enabled)',
2179
+ borderColor: 'var(--ids-comp-card-elevated-color-border-brand-enabled)',
2180
+ },
2181
+ '.ids-card.ids-card-elevated.ids-card-brand.ids-card-clickable:hover': {
2182
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-brand-hovered)',
2183
+ borderColor: 'var(--ids-comp-card-elevated-color-border-brand-hovered)',
2184
+ },
2185
+ '.ids-card.ids-card-elevated.ids-card-brand.ids-card-clickable:focus': {
2186
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-brand-focused)',
2187
+ borderColor: 'var(--ids-comp-card-elevated-color-border-brand-focused)',
2188
+ },
2189
+ '.ids-card.ids-card-elevated.ids-card-brand.ids-card-clickable:active': {
2190
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-brand-pressed)',
2191
+ borderColor: 'var(--ids-comp-card-elevated-color-border-brand-pressed)',
2192
+ },
2193
+ '.ids-card.ids-card-elevated.ids-card-brand.ids-card-clickable.ids-card-disabled': {
2194
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-brand-disabled)',
2195
+ borderColor: 'var(--ids-comp-card-elevated-color-border-brand-disabled)',
2196
+ },
2197
+ '.ids-card.ids-card-elevated.ids-card-error': {
2198
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-error-enabled)',
2199
+ borderColor: 'var(--ids-comp-card-elevated-color-border-error-enabled)',
2200
+ },
2201
+ '.ids-card.ids-card-elevated.ids-card-error.ids-card-clickable:hover': {
2202
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-error-hovered)',
2203
+ borderColor: 'var(--ids-comp-card-elevated-color-border-error-hovered)',
2204
+ },
2205
+ '.ids-card.ids-card-elevated.ids-card-error.ids-card-clickable:focus': {
2206
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-error-focused)',
2207
+ borderColor: 'var(--ids-comp-card-elevated-color-border-error-focused)',
2208
+ },
2209
+ '.ids-card.ids-card-elevated.ids-card-error.ids-card-clickable:active': {
2210
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-error-pressed)',
2211
+ borderColor: 'var(--ids-comp-card-elevated-color-border-error-pressed)',
2212
+ },
2213
+ '.ids-card.ids-card-elevated.ids-card-error.ids-card-clickable.ids-card-disabled': {
2214
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-error-disabled)',
2215
+ borderColor: 'var(--ids-comp-card-elevated-color-border-error-disabled)',
2216
+ },
2217
+ '.ids-card.ids-card-elevated.ids-card-success': {
2218
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-success-enabled)',
2219
+ borderColor: 'var(--ids-comp-card-elevated-color-border-success-enabled)',
2220
+ },
2221
+ '.ids-card.ids-card-elevated.ids-card-success.ids-card-clickable:hover': {
2222
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-success-hovered)',
2223
+ borderColor: 'var(--ids-comp-card-elevated-color-border-success-hovered)',
2224
+ },
2225
+ '.ids-card.ids-card-elevated.ids-card-success.ids-card-clickable:focus': {
2226
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-success-focused)',
2227
+ borderColor: 'var(--ids-comp-card-elevated-color-border-success-focused)',
2228
+ },
2229
+ '.ids-card.ids-card-elevated.ids-card-success.ids-card-clickable:active': {
2230
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-success-pressed)',
2231
+ borderColor: 'var(--ids-comp-card-elevated-color-border-success-pressed)',
2232
+ },
2233
+ '.ids-card.ids-card-elevated.ids-card-success.ids-card-clickable.ids-card-disabled': {
2234
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-success-disabled)',
2235
+ borderColor: 'var(--ids-comp-card-elevated-color-border-success-disabled)',
2236
+ },
2237
+ '.ids-card.ids-card-elevated.ids-card-warning': {
2238
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-warning-enabled)',
2239
+ borderColor: 'var(--ids-comp-card-elevated-color-border-warning-enabled)',
2240
+ },
2241
+ '.ids-card.ids-card-elevated.ids-card-warning.ids-card-clickable:hover': {
2242
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-warning-hovered)',
2243
+ borderColor: 'var(--ids-comp-card-elevated-color-border-warning-hovered)',
2244
+ },
2245
+ '.ids-card.ids-card-elevated.ids-card-warning.ids-card-clickable:focus': {
2246
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-warning-focused)',
2247
+ borderColor: 'var(--ids-comp-card-elevated-color-border-warning-focused)',
2248
+ },
2249
+ '.ids-card.ids-card-elevated.ids-card-warning.ids-card-clickable:active': {
2250
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-warning-pressed)',
2251
+ borderColor: 'var(--ids-comp-card-elevated-color-border-warning-pressed)',
2252
+ },
2253
+ '.ids-card.ids-card-elevated.ids-card-warning.ids-card-clickable.ids-card-disabled': {
2254
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-warning-disabled)',
2255
+ borderColor: 'var(--ids-comp-card-elevated-color-border-warning-disabled)',
2256
+ },
2257
+ '.ids-card.ids-card-elevated.ids-card-info': {
2258
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-info-enabled)',
2259
+ borderColor: 'var(--ids-comp-card-elevated-color-border-info-enabled)',
2260
+ },
2261
+ '.ids-card.ids-card-elevated.ids-card-info.ids-card-clickable:hover': {
2262
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-info-hovered)',
2263
+ borderColor: 'var(--ids-comp-card-elevated-color-border-info-hovered)',
2264
+ },
2265
+ '.ids-card.ids-card-elevated.ids-card-info.ids-card-clickable:focus': {
2266
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-info-focused)',
2267
+ borderColor: 'var(--ids-comp-card-elevated-color-border-info-focused)',
2268
+ },
2269
+ '.ids-card.ids-card-elevated.ids-card-info.ids-card-clickable:active': {
2270
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-info-pressed)',
2271
+ borderColor: 'var(--ids-comp-card-elevated-color-border-info-pressed)',
2272
+ },
2273
+ '.ids-card.ids-card-elevated.ids-card-info.ids-card-clickable.ids-card-disabled': {
2274
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-info-disabled)',
2275
+ borderColor: 'var(--ids-comp-card-elevated-color-border-info-disabled)',
2276
+ },
2277
+ '.ids-card.ids-card-elevated.ids-card-light': {
2278
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-light-enabled)',
2279
+ borderColor: 'var(--ids-comp-card-elevated-color-border-light-enabled)',
2280
+ },
2281
+ '.ids-card.ids-card-elevated.ids-card-light.ids-card-clickable:hover': {
2282
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-light-hovered)',
2283
+ borderColor: 'var(--ids-comp-card-elevated-color-border-light-hovered)',
2284
+ },
2285
+ '.ids-card.ids-card-elevated.ids-card-light.ids-card-clickable:focus': {
2286
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-light-focused)',
2287
+ borderColor: 'var(--ids-comp-card-elevated-color-border-light-focused)',
2288
+ },
2289
+ '.ids-card.ids-card-elevated.ids-card-light.ids-card-clickable:active': {
2290
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-light-pressed)',
2291
+ borderColor: 'var(--ids-comp-card-elevated-color-border-light-pressed)',
2292
+ },
2293
+ '.ids-card.ids-card-elevated.ids-card-light.ids-card-clickable.ids-card-disabled': {
2294
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-light-disabled)',
2295
+ borderColor: 'var(--ids-comp-card-elevated-color-border-light-disabled)',
2296
+ },
2297
+ '.ids-card.ids-card-elevated.ids-card-dark': {
2298
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-dark-enabled)',
2299
+ borderColor: 'var(--ids-comp-card-elevated-color-border-dark-enabled)',
2300
+ },
2301
+ '.ids-card.ids-card-elevated.ids-card-dark.ids-card-clickable:hover': {
2302
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-dark-hovered)',
2303
+ borderColor: 'var(--ids-comp-card-elevated-color-border-dark-hovered)',
2304
+ },
2305
+ '.ids-card.ids-card-elevated.ids-card-dark.ids-card-clickable:focus': {
2306
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-dark-focused)',
2307
+ borderColor: 'var(--ids-comp-card-elevated-color-border-dark-focused)',
2308
+ },
2309
+ '.ids-card.ids-card-elevated.ids-card-dark.ids-card-clickable:active': {
2310
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-dark-pressed)',
2311
+ borderColor: 'var(--ids-comp-card-elevated-color-border-dark-pressed)',
2312
+ },
2313
+ '.ids-card.ids-card-elevated.ids-card-dark.ids-card-clickable.ids-card-disabled': {
2314
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-dark-disabled)',
2315
+ borderColor: 'var(--ids-comp-card-elevated-color-border-dark-disabled)',
2316
+ },
2317
+ '.ids-card.ids-card-elevated.ids-card-surface': {
2318
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-surface-enabled)',
2319
+ borderColor: 'var(--ids-comp-card-elevated-color-border-surface-enabled)',
2320
+ },
2321
+ '.ids-card.ids-card-elevated.ids-card-surface.ids-card-clickable:hover': {
2322
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-surface-hovered)',
2323
+ borderColor: 'var(--ids-comp-card-elevated-color-border-surface-hovered)',
2324
+ },
2325
+ '.ids-card.ids-card-elevated.ids-card-surface.ids-card-clickable:focus': {
2326
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-surface-focused)',
2327
+ borderColor: 'var(--ids-comp-card-elevated-color-border-surface-focused)',
2328
+ },
2329
+ '.ids-card.ids-card-elevated.ids-card-surface.ids-card-clickable:active': {
2330
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-surface-pressed)',
2331
+ borderColor: 'var(--ids-comp-card-elevated-color-border-surface-pressed)',
2332
+ },
2333
+ '.ids-card.ids-card-elevated.ids-card-surface.ids-card-clickable.ids-card-disabled': {
2334
+ backgroundColor: 'var(--ids-comp-card-elevated-color-bg-surface-disabled)',
2335
+ borderColor: 'var(--ids-comp-card-elevated-color-border-surface-disabled)',
2336
+ },
2337
+ '.ids-dialog': {
2338
+ boxSizing: 'border-box',
2339
+ borderStyle: 'solid',
2340
+ borderColor: 'var(--ids-comp-dialog-container-color-border-surface-default)',
2341
+ backgroundColor: 'var(--ids-comp-dialog-container-color-bg-enabled)',
2342
+ boxShadow:
2343
+ 'var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxl) var(--ids-smc-reference-container-effects-shadow-blur-xxxl) var(--ids-smc-reference-container-effects-shadow-spread-xxs) var(--ids-smc-reference-container-effects-shadow-color-dark-default)',
2344
+ },
2345
+ '.ids-dialog::backdrop': { backgroundColor: 'rgba(0,0,0,0)' },
2346
+ '.ids-dialog.ids-dialog-with-backdrop::backdrop': {
2347
+ opacity: 'var(--ids-comp-dialog-backdrop-opacity)',
2348
+ backgroundColor: 'var(--ids-comp-dialog-backdrop-background)',
2349
+ },
2350
+ '.ids-dialog .ids-dialog-container': { display: 'grid', gridTemplateRows: 'auto 1fr auto', position: 'relative', maxHeight: '80vh' },
2351
+ '.ids-dialog .ids-dialog-container .ids-dialog-header': { display: 'flex', alignItems: 'stretch' },
2352
+ '.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-title': { fontStyle: 'normal' },
2353
+ '.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle': { fontStyle: 'normal' },
2354
+ '.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content': {
2355
+ display: 'flex',
2356
+ flexDirection: 'column',
2357
+ flex: '1 0 0',
2358
+ alignItems: 'flex-start',
2359
+ },
2360
+ '.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-close-button': { position: 'absolute', top: '12px', right: '12px' },
2361
+ '.ids-dialog .ids-dialog-container .ids-dialog-content': {
2362
+ display: 'flex',
2363
+ alignItems: 'center',
2364
+ justifyContent: 'center',
2365
+ overflowY: 'auto',
2366
+ background: 'var(--ids-comp-dialog-content-color-bg-enabled)',
2367
+ },
2368
+ '.ids-dialog .ids-dialog-container .ids-dialog-content .ids-dialog-content-overflow': { overflowY: 'auto', height: '100%' },
2369
+ '.ids-dialog .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable': {
2370
+ borderTopStyle: 'solid',
2371
+ borderBottomStyle: 'solid',
2372
+ borderTopColor: 'var(--ids-comp-dialog-content-color-border-surface-default)',
2373
+ borderBottomColor: 'var(--ids-comp-dialog-content-color-border-surface-default)',
2374
+ },
2375
+ '.ids-dialog .ids-dialog-container .ids-dialog-actions': {
2376
+ display: 'flex',
2377
+ background: 'var(--ids-comp-dialog-footer-color-bg-enabled)',
2378
+ justifyContent: 'flex-end',
2379
+ alignItems: 'flex-start',
2380
+ alignContent: 'flex-start',
2381
+ alignSelf: 'stretch',
2382
+ flexWrap: 'wrap',
2383
+ },
2384
+ '.ids-dialog.ids-dialog-compact': {
2385
+ borderRadius: 'var(--ids-comp-size-dialog-container-size-border-radius-compact)',
2386
+ borderWidth: 'var(--ids-comp-size-dialog-container-size-border-width-compact)',
2387
+ },
2388
+ '.ids-dialog.ids-dialog-compact .ids-dialog-container': {
2389
+ width: 'var(--ids-comp-size-dialog-container-size-width-compact)',
2390
+ minHeight: 'var(--ids-comp-size-dialog-container-size-min-height-compact)',
2391
+ padding:
2392
+ 'var(--ids-comp-size-dialog-container-size-padding-y-compact) var(--ids-comp-size-dialog-container-size-padding-x-compact)',
2393
+ gap: 'var(--ids-comp-size-dialog-container-size-gap-compact)',
2394
+ },
2395
+ '.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-title': {
2396
+ fontFamily: 'var(--ids-comp-size-dialog-header-title-typography-font-family-compact)',
2397
+ fontSize: 'var(--ids-comp-size-dialog-header-title-typography-font-size-compact)',
2398
+ fontWeight: 'var(--ids-comp-size-dialog-header-title-typography-font-weight-compact)',
2399
+ letterSpacing: 'var(--ids-comp-size-dialog-header-title-typography-letter-spacing-compact)',
2400
+ lineHeight: 'var(--ids-comp-size-dialog-header-title-typography-line-height-compact)',
2401
+ },
2402
+ '.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle': {
2403
+ fontFamily: 'var(--ids-comp-size-dialog-header-subtitle-typography-font-family-compact)',
2404
+ fontSize: 'var(--ids-comp-size-dialog-header-subtitle-typography-font-size-compact)',
2405
+ fontWeight: 'var(--ids-comp-size-dialog-header-subtitle-typography-font-weight-compact)',
2406
+ letterSpacing: 'var(--ids-comp-size-dialog-header-subtitle-typography-letter-spacing-compact)',
2407
+ lineHeight: 'var(--ids-comp-size-dialog-header-subtitle-typography-line-height-compact)',
2408
+ },
2409
+ '.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content': {
2410
+ gap: 'var(--ids-comp-size-dialog-header-size-gap-compact)',
2411
+ padding: 'var(--ids-comp-size-dialog-header-size-padding-y-compact) var(--ids-comp-size-dialog-header-size-padding-x-compact)',
2412
+ },
2413
+ '.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-content': {
2414
+ padding:
2415
+ 'var(--ids-comp-size-dialog-content-fixed-size-padding-y-compact) var(--ids-comp-size-dialog-content-fixed-size-padding-x-compact)',
2416
+ },
2417
+ '.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable': {
2418
+ padding:
2419
+ 'var(--ids-comp-size-dialog-content-scrollable-size-padding-y-compact) var(--ids-comp-size-dialog-content-scrollable-size-padding-x-compact)',
2420
+ borderTopWidth: 'var(--ids-comp-size-dialog-content-scrollable-size-border-width-compact)',
2421
+ borderBottomWidth: 'var(--ids-comp-size-dialog-content-scrollable-size-border-width-compact)',
2422
+ },
2423
+ '.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-actions': {
2424
+ padding: 'var(--ids-comp-size-dialog-footer-padding-y-compact) var(--ids-comp-size-dialog-footer-padding-x-compact)',
2425
+ },
2426
+ '.ids-dialog.ids-dialog-comfortable': {
2427
+ borderRadius: 'var(--ids-comp-size-dialog-container-size-border-radius-comfortable)',
2428
+ borderWidth: 'var(--ids-comp-size-dialog-container-size-border-width-comfortable)',
2429
+ },
2430
+ '.ids-dialog.ids-dialog-comfortable .ids-dialog-container': {
2431
+ width: 'var(--ids-comp-size-dialog-container-size-width-comfortable)',
2432
+ minHeight: 'var(--ids-comp-size-dialog-container-size-min-height-comfortable)',
2433
+ padding:
2434
+ 'var(--ids-comp-size-dialog-container-size-padding-y-comfortable) var(--ids-comp-size-dialog-container-size-padding-x-comfortable)',
2435
+ gap: 'var(--ids-comp-size-dialog-container-size-gap-comfortable)',
2436
+ },
2437
+ '.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-title': {
2438
+ fontFamily: 'var(--ids-comp-size-dialog-header-title-typography-font-family-comfortable)',
2439
+ fontSize: 'var(--ids-comp-size-dialog-header-title-typography-font-size-comfortable)',
2440
+ fontWeight: 'var(--ids-comp-size-dialog-header-title-typography-font-weight-comfortable)',
2441
+ letterSpacing: 'var(--ids-comp-size-dialog-header-title-typography-letter-spacing-comfortable)',
2442
+ lineHeight: 'var(--ids-comp-size-dialog-header-title-typography-line-height-comfortable)',
2443
+ },
2444
+ '.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle': {
2445
+ fontFamily: 'var(--ids-comp-size-dialog-header-subtitle-typography-font-family-comfortable)',
2446
+ fontSize: 'var(--ids-comp-size-dialog-header-subtitle-typography-font-size-comfortable)',
2447
+ fontWeight: 'var(--ids-comp-size-dialog-header-subtitle-typography-font-weight-comfortable)',
2448
+ letterSpacing: 'var(--ids-comp-size-dialog-header-subtitle-typography-letter-spacing-comfortable)',
2449
+ lineHeight: 'var(--ids-comp-size-dialog-header-subtitle-typography-line-height-comfortable)',
2450
+ },
2451
+ '.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content': {
2452
+ gap: 'var(--ids-comp-size-dialog-header-size-gap-comfortable)',
2453
+ padding:
2454
+ 'var(--ids-comp-size-dialog-header-size-padding-y-comfortable) var(--ids-comp-size-dialog-header-size-padding-x-comfortable)',
2455
+ },
2456
+ '.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-content': {
2457
+ padding:
2458
+ 'var(--ids-comp-size-dialog-content-fixed-size-padding-y-comfortable) var(--ids-comp-size-dialog-content-fixed-size-padding-x-comfortable)',
2459
+ },
2460
+ '.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable': {
2461
+ padding:
2462
+ 'var(--ids-comp-size-dialog-content-scrollable-size-padding-y-comfortable) var(--ids-comp-size-dialog-content-scrollable-size-padding-x-comfortable)',
2463
+ borderTopWidth: 'var(--ids-comp-size-dialog-content-scrollable-size-border-width-comfortable)',
2464
+ borderBottomWidth: 'var(--ids-comp-size-dialog-content-scrollable-size-border-width-comfortable)',
2465
+ },
2466
+ '.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-actions': {
2467
+ padding: 'var(--ids-comp-size-dialog-footer-padding-y-comfortable) var(--ids-comp-size-dialog-footer-padding-x-comfortable)',
2468
+ },
2469
+ '.ids-dialog.ids-dialog-spacious': {
2470
+ borderRadius: 'var(--ids-comp-size-dialog-container-size-border-radius-spacious)',
2471
+ borderWidth: 'var(--ids-comp-size-dialog-container-size-border-width-spacious)',
2472
+ },
2473
+ '.ids-dialog.ids-dialog-spacious .ids-dialog-container': {
2474
+ width: 'var(--ids-comp-size-dialog-container-size-width-spacious)',
2475
+ minHeight: 'var(--ids-comp-size-dialog-container-size-min-height-spacious)',
2476
+ padding:
2477
+ 'var(--ids-comp-size-dialog-container-size-padding-y-spacious) var(--ids-comp-size-dialog-container-size-padding-x-spacious)',
2478
+ gap: 'var(--ids-comp-size-dialog-container-size-gap-spacious)',
2479
+ },
2480
+ '.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-title': {
2481
+ fontFamily: 'var(--ids-comp-size-dialog-header-title-typography-font-family-spacious)',
2482
+ fontSize: 'var(--ids-comp-size-dialog-header-title-typography-font-size-spacious)',
2483
+ fontWeight: 'var(--ids-comp-size-dialog-header-title-typography-font-weight-spacious)',
2484
+ letterSpacing: 'var(--ids-comp-size-dialog-header-title-typography-letter-spacing-spacious)',
2485
+ lineHeight: 'var(--ids-comp-size-dialog-header-title-typography-line-height-spacious)',
2486
+ },
2487
+ '.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle': {
2488
+ fontFamily: 'var(--ids-comp-size-dialog-header-subtitle-typography-font-family-spacious)',
2489
+ fontSize: 'var(--ids-comp-size-dialog-header-subtitle-typography-font-size-spacious)',
2490
+ fontWeight: 'var(--ids-comp-size-dialog-header-subtitle-typography-font-weight-spacious)',
2491
+ letterSpacing: 'var(--ids-comp-size-dialog-header-subtitle-typography-letter-spacing-spacious)',
2492
+ lineHeight: 'var(--ids-comp-size-dialog-header-subtitle-typography-line-height-spacious)',
2493
+ },
2494
+ '.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content': {
2495
+ gap: 'var(--ids-comp-size-dialog-header-size-gap-spacious)',
2496
+ padding: 'var(--ids-comp-size-dialog-header-size-padding-y-spacious) var(--ids-comp-size-dialog-header-size-padding-x-spacious)',
2497
+ },
2498
+ '.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-content': {
2499
+ padding:
2500
+ 'var(--ids-comp-size-dialog-content-fixed-size-padding-y-spacious) var(--ids-comp-size-dialog-content-fixed-size-padding-x-spacious)',
2501
+ },
2502
+ '.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable': {
2503
+ padding:
2504
+ 'var(--ids-comp-size-dialog-content-scrollable-size-padding-y-spacious) var(--ids-comp-size-dialog-content-scrollable-size-padding-x-spacious)',
2505
+ borderTopWidth: 'var(--ids-comp-size-dialog-content-scrollable-size-border-width-spacious)',
2506
+ borderBottomWidth: 'var(--ids-comp-size-dialog-content-scrollable-size-border-width-spacious)',
2507
+ },
2508
+ '.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-actions': {
2509
+ padding: 'var(--ids-comp-size-dialog-footer-padding-y-spacious) var(--ids-comp-size-dialog-footer-padding-x-spacious)',
2510
+ },
2511
+ '.ids-dialog.ids-dialog-dense': {
2512
+ borderRadius: 'var(--ids-comp-size-dialog-container-size-border-radius-dense)',
2513
+ borderWidth: 'var(--ids-comp-size-dialog-container-size-border-width-dense)',
2514
+ },
2515
+ '.ids-dialog.ids-dialog-dense .ids-dialog-container': {
2516
+ width: 'var(--ids-comp-size-dialog-container-size-width-dense)',
2517
+ minHeight: 'var(--ids-comp-size-dialog-container-size-min-height-dense)',
2518
+ padding: 'var(--ids-comp-size-dialog-container-size-padding-y-dense) var(--ids-comp-size-dialog-container-size-padding-x-dense)',
2519
+ gap: 'var(--ids-comp-size-dialog-container-size-gap-dense)',
2520
+ },
2521
+ '.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-title': {
2522
+ fontFamily: 'var(--ids-comp-size-dialog-header-title-typography-font-family-dense)',
2523
+ fontSize: 'var(--ids-comp-size-dialog-header-title-typography-font-size-dense)',
2524
+ fontWeight: 'var(--ids-comp-size-dialog-header-title-typography-font-weight-dense)',
2525
+ letterSpacing: 'var(--ids-comp-size-dialog-header-title-typography-letter-spacing-dense)',
2526
+ lineHeight: 'var(--ids-comp-size-dialog-header-title-typography-line-height-dense)',
2527
+ },
2528
+ '.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle': {
2529
+ fontFamily: 'var(--ids-comp-size-dialog-header-subtitle-typography-font-family-dense)',
2530
+ fontSize: 'var(--ids-comp-size-dialog-header-subtitle-typography-font-size-dense)',
2531
+ fontWeight: 'var(--ids-comp-size-dialog-header-subtitle-typography-font-weight-dense)',
2532
+ letterSpacing: 'var(--ids-comp-size-dialog-header-subtitle-typography-letter-spacing-dense)',
2533
+ lineHeight: 'var(--ids-comp-size-dialog-header-subtitle-typography-line-height-dense)',
2534
+ },
2535
+ '.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content': {
2536
+ gap: 'var(--ids-comp-size-dialog-header-size-gap-dense)',
2537
+ padding: 'var(--ids-comp-size-dialog-header-size-padding-y-dense) var(--ids-comp-size-dialog-header-size-padding-x-dense)',
2538
+ },
2539
+ '.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-content': {
2540
+ padding:
2541
+ 'var(--ids-comp-size-dialog-content-fixed-size-padding-y-dense) var(--ids-comp-size-dialog-content-fixed-size-padding-x-dense)',
2542
+ },
2543
+ '.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable': {
2544
+ padding:
2545
+ 'var(--ids-comp-size-dialog-content-scrollable-size-padding-y-dense) var(--ids-comp-size-dialog-content-scrollable-size-padding-x-dense)',
2546
+ borderTopWidth: 'var(--ids-comp-size-dialog-content-scrollable-size-border-width-dense)',
2547
+ borderBottomWidth: 'var(--ids-comp-size-dialog-content-scrollable-size-border-width-dense)',
2548
+ },
2549
+ '.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-actions': {
2550
+ padding: 'var(--ids-comp-size-dialog-footer-padding-y-dense) var(--ids-comp-size-dialog-footer-padding-x-dense)',
2551
+ },
2552
+ '.ids-divider': {
2553
+ flexShrink: [0, 0],
2554
+ display: 'flex',
2555
+ alignItems: 'center',
2556
+ justifyContent: 'center',
2557
+ alignSelf: 'stretch',
2558
+ width: 'var(--ids-divider-width)',
2559
+ height: 'var(--ids-divider-height)',
2560
+ },
2561
+ '.ids-divider.ids-divider-compact': { borderRadius: 'var(--ids-comp-size-divider-size-border-radius-compact)' },
2562
+ '.ids-divider.ids-divider-compact.ids-divider-horizontal': { height: 'var(--ids-comp-size-divider-size-height-compact)' },
2563
+ '.ids-divider.ids-divider-compact.ids-divider-vertical': { width: 'var(--ids-comp-size-divider-size-width-compact)' },
2564
+ '.ids-divider.ids-divider-comfortable': { borderRadius: 'var(--ids-comp-size-divider-size-border-radius-comfortable)' },
2565
+ '.ids-divider.ids-divider-comfortable.ids-divider-horizontal': { height: 'var(--ids-comp-size-divider-size-height-comfortable)' },
2566
+ '.ids-divider.ids-divider-comfortable.ids-divider-vertical': { width: 'var(--ids-comp-size-divider-size-width-comfortable)' },
2567
+ '.ids-divider.ids-divider-spacious': { borderRadius: 'var(--ids-comp-size-divider-size-border-radius-spacious)' },
2568
+ '.ids-divider.ids-divider-spacious.ids-divider-horizontal': { height: 'var(--ids-comp-size-divider-size-height-spacious)' },
2569
+ '.ids-divider.ids-divider-spacious.ids-divider-vertical': { width: 'var(--ids-comp-size-divider-size-width-spacious)' },
2570
+ '.ids-divider.ids-divider-dense': { borderRadius: 'var(--ids-comp-size-divider-size-border-radius-dense)' },
2571
+ '.ids-divider.ids-divider-dense.ids-divider-horizontal': { height: 'var(--ids-comp-size-divider-size-height-dense)' },
2572
+ '.ids-divider.ids-divider-dense.ids-divider-vertical': { width: 'var(--ids-comp-size-divider-size-width-dense)' },
2573
+ '.ids-divider.ids-divider-primary': { background: 'var(--ids-comp-divider-color-bg-primary-enabled)' },
2574
+ '.ids-divider.ids-divider-secondary': { background: 'var(--ids-comp-divider-color-bg-secondary-enabled)' },
2575
+ '.ids-divider.ids-divider-brand': { background: 'var(--ids-comp-divider-color-bg-brand-enabled)' },
2576
+ '.ids-divider.ids-divider-error': { background: 'var(--ids-comp-divider-color-bg-error-enabled)' },
2577
+ '.ids-divider.ids-divider-success': { background: 'var(--ids-comp-divider-color-bg-success-enabled)' },
2578
+ '.ids-divider.ids-divider-warning': { background: 'var(--ids-comp-divider-color-bg-warning-enabled)' },
2579
+ '.ids-divider.ids-divider-light': { background: 'var(--ids-comp-divider-color-bg-light-enabled)' },
2580
+ '.ids-divider.ids-divider-dark': { background: 'var(--ids-comp-divider-color-bg-dark-enabled)' },
2581
+ '.ids-divider.ids-divider-surface': { background: 'var(--ids-comp-divider-color-bg-surface-enabled)' },
2582
+ '.ids-icon-button': { padding: '0px', display: 'flex', flexShrink: 0, alignItems: 'center', justifyContent: 'center' },
2583
+ '.ids-icon-button:focus': {
2584
+ outlineOffset: '2px',
2585
+ outline:
2586
+ 'var(--ids-comp-icon-button-focused-outline-size-outline) solid var(--ids-comp-icon-button-focused-outline-color-dark-focused)',
2587
+ },
2588
+ '.ids-icon-button:focus.ids-icon-button-light': { outlineColor: 'var(--ids-comp-icon-button-focused-outline-color-light-focused)' },
2589
+ '.ids-icon-button:active': { outline: 'none' },
2590
+ '.ids-icon-button.ids-icon-button-compact': {
2591
+ padding: 'var(--ids-comp-size-icon-button-size-padding-y-compact) var(--ids-comp-size-icon-button-size-padding-x-compact)',
2592
+ width: 'var(--ids-comp-size-icon-button-size-width-compact)',
2593
+ height: 'var(--ids-comp-size-icon-button-size-height-compact)',
2594
+ borderRadius: 'var(--ids-comp-size-icon-button-size-border-radius-compact)',
2595
+ border: 'var(--ids-comp-size-icon-button-size-border-compact) solid',
2596
+ },
2597
+ '.ids-icon-button.ids-icon-button-compact *[icon]': {
2598
+ width: 'var(--ids-comp-size-icon-button-size-icon-compact)',
2599
+ height: 'var(--ids-comp-size-icon-button-size-icon-compact)',
2600
+ },
2601
+ '.ids-icon-button.ids-icon-button-comfortable': {
2602
+ padding: 'var(--ids-comp-size-icon-button-size-padding-y-comfortable) var(--ids-comp-size-icon-button-size-padding-x-comfortable)',
2603
+ width: 'var(--ids-comp-size-icon-button-size-width-comfortable)',
2604
+ height: 'var(--ids-comp-size-icon-button-size-height-comfortable)',
2605
+ borderRadius: 'var(--ids-comp-size-icon-button-size-border-radius-comfortable)',
2606
+ border: 'var(--ids-comp-size-icon-button-size-border-comfortable) solid',
2607
+ },
2608
+ '.ids-icon-button.ids-icon-button-comfortable *[icon]': {
2609
+ width: 'var(--ids-comp-size-icon-button-size-icon-comfortable)',
2610
+ height: 'var(--ids-comp-size-icon-button-size-icon-comfortable)',
2611
+ },
2612
+ '.ids-icon-button.ids-icon-button-spacious': {
2613
+ padding: 'var(--ids-comp-size-icon-button-size-padding-y-spacious) var(--ids-comp-size-icon-button-size-padding-x-spacious)',
2614
+ width: 'var(--ids-comp-size-icon-button-size-width-spacious)',
2615
+ height: 'var(--ids-comp-size-icon-button-size-height-spacious)',
2616
+ borderRadius: 'var(--ids-comp-size-icon-button-size-border-radius-spacious)',
2617
+ border: 'var(--ids-comp-size-icon-button-size-border-spacious) solid',
2618
+ },
2619
+ '.ids-icon-button.ids-icon-button-spacious *[icon]': {
2620
+ width: 'var(--ids-comp-size-icon-button-size-icon-spacious)',
2621
+ height: 'var(--ids-comp-size-icon-button-size-icon-spacious)',
2622
+ },
2623
+ '.ids-icon-button.ids-icon-button-dense': {
2624
+ padding: 'var(--ids-comp-size-icon-button-size-padding-y-dense) var(--ids-comp-size-icon-button-size-padding-x-dense)',
2625
+ width: 'var(--ids-comp-size-icon-button-size-width-dense)',
2626
+ height: 'var(--ids-comp-size-icon-button-size-height-dense)',
2627
+ borderRadius: 'var(--ids-comp-size-icon-button-size-border-radius-dense)',
2628
+ border: 'var(--ids-comp-size-icon-button-size-border-dense) solid',
2629
+ },
2630
+ '.ids-icon-button.ids-icon-button-dense *[icon]': {
2631
+ width: 'var(--ids-comp-size-icon-button-size-icon-dense)',
2632
+ height: 'var(--ids-comp-size-icon-button-size-icon-dense)',
2633
+ },
2634
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-primary': {
2635
+ color: 'var(--ids-comp-icon-button-filled-color-fg-primary-enabled)',
2636
+ background: 'var(--ids-comp-icon-button-filled-color-bg-primary-enabled)',
2637
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-primary-enabled)',
2638
+ },
2639
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-primary:hover': {
2640
+ background: 'var(--ids-comp-icon-button-filled-color-bg-primary-hovered)',
2641
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-primary-hovered)',
2642
+ },
2643
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-primary:focus': {
2644
+ background: 'var(--ids-comp-icon-button-filled-color-bg-primary-focused)',
2645
+ color: 'var(--ids-comp-icon-button-filled-color-fg-primary-focused)',
2646
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-primary-focused)',
2647
+ },
2648
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-primary:active': {
2649
+ background: 'var(--ids-comp-icon-button-filled-color-bg-primary-pressed)',
2650
+ color: 'var(--ids-comp-icon-button-filled-color-fg-primary-pressed)',
2651
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-primary-pressed)',
2652
+ },
2653
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-primary:disabled': {
2654
+ background: 'var(--ids-comp-icon-button-filled-color-bg-primary-disabled)',
2655
+ color: 'var(--ids-comp-icon-button-filled-color-fg-primary-disabled)',
2656
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-primary-disabled)',
2657
+ },
2658
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-secondary': {
2659
+ color: 'var(--ids-comp-icon-button-filled-color-fg-secondary-enabled)',
2660
+ background: 'var(--ids-comp-icon-button-filled-color-bg-secondary-enabled)',
2661
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-secondary-enabled)',
2662
+ },
2663
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-secondary:hover': {
2664
+ background: 'var(--ids-comp-icon-button-filled-color-bg-secondary-hovered)',
2665
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-secondary-hovered)',
2666
+ },
2667
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-secondary:focus': {
2668
+ background: 'var(--ids-comp-icon-button-filled-color-bg-secondary-focused)',
2669
+ color: 'var(--ids-comp-icon-button-filled-color-fg-secondary-focused)',
2670
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-secondary-focused)',
2671
+ },
2672
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-secondary:active': {
2673
+ background: 'var(--ids-comp-icon-button-filled-color-bg-secondary-pressed)',
2674
+ color: 'var(--ids-comp-icon-button-filled-color-fg-secondary-pressed)',
2675
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-secondary-pressed)',
2676
+ },
2677
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-secondary:disabled': {
2678
+ background: 'var(--ids-comp-icon-button-filled-color-bg-secondary-disabled)',
2679
+ color: 'var(--ids-comp-icon-button-filled-color-fg-secondary-disabled)',
2680
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-secondary-disabled)',
2681
+ },
2682
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-brand': {
2683
+ color: 'var(--ids-comp-icon-button-filled-color-fg-brand-enabled)',
2684
+ background: 'var(--ids-comp-icon-button-filled-color-bg-brand-enabled)',
2685
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-brand-enabled)',
2686
+ },
2687
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-brand:hover': {
2688
+ background: 'var(--ids-comp-icon-button-filled-color-bg-brand-hovered)',
2689
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-brand-hovered)',
2690
+ },
2691
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-brand:focus': {
2692
+ background: 'var(--ids-comp-icon-button-filled-color-bg-brand-focused)',
2693
+ color: 'var(--ids-comp-icon-button-filled-color-fg-brand-focused)',
2694
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-brand-focused)',
2695
+ },
2696
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-brand:active': {
2697
+ background: 'var(--ids-comp-icon-button-filled-color-bg-brand-pressed)',
2698
+ color: 'var(--ids-comp-icon-button-filled-color-fg-brand-pressed)',
2699
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-brand-pressed)',
2700
+ },
2701
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-brand:disabled': {
2702
+ background: 'var(--ids-comp-icon-button-filled-color-bg-brand-disabled)',
2703
+ color: 'var(--ids-comp-icon-button-filled-color-fg-brand-disabled)',
2704
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-brand-disabled)',
2705
+ },
2706
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-error': {
2707
+ color: 'var(--ids-comp-icon-button-filled-color-fg-error-enabled)',
2708
+ background: 'var(--ids-comp-icon-button-filled-color-bg-error-enabled)',
2709
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-error-enabled)',
2710
+ },
2711
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-error:hover': {
2712
+ background: 'var(--ids-comp-icon-button-filled-color-bg-error-hovered)',
2713
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-error-hovered)',
2714
+ },
2715
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-error:focus': {
2716
+ background: 'var(--ids-comp-icon-button-filled-color-bg-error-focused)',
2717
+ color: 'var(--ids-comp-icon-button-filled-color-fg-error-focused)',
2718
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-error-focused)',
2719
+ },
2720
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-error:active': {
2721
+ background: 'var(--ids-comp-icon-button-filled-color-bg-error-pressed)',
2722
+ color: 'var(--ids-comp-icon-button-filled-color-fg-error-pressed)',
2723
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-error-pressed)',
2724
+ },
2725
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-error:disabled': {
2726
+ background: 'var(--ids-comp-icon-button-filled-color-bg-error-disabled)',
2727
+ color: 'var(--ids-comp-icon-button-filled-color-fg-error-disabled)',
2728
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-error-disabled)',
2729
+ },
2730
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-success': {
2731
+ color: 'var(--ids-comp-icon-button-filled-color-fg-success-enabled)',
2732
+ background: 'var(--ids-comp-icon-button-filled-color-bg-success-enabled)',
2733
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-success-enabled)',
2734
+ },
2735
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-success:hover': {
2736
+ background: 'var(--ids-comp-icon-button-filled-color-bg-success-hovered)',
2737
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-success-hovered)',
2738
+ },
2739
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-success:focus': {
2740
+ background: 'var(--ids-comp-icon-button-filled-color-bg-success-focused)',
2741
+ color: 'var(--ids-comp-icon-button-filled-color-fg-success-focused)',
2742
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-success-focused)',
2743
+ },
2744
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-success:active': {
2745
+ background: 'var(--ids-comp-icon-button-filled-color-bg-success-pressed)',
2746
+ color: 'var(--ids-comp-icon-button-filled-color-fg-success-pressed)',
2747
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-success-pressed)',
2748
+ },
2749
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-success:disabled': {
2750
+ background: 'var(--ids-comp-icon-button-filled-color-bg-success-disabled)',
2751
+ color: 'var(--ids-comp-icon-button-filled-color-fg-success-disabled)',
2752
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-success-disabled)',
2753
+ },
2754
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-warning': {
2755
+ color: 'var(--ids-comp-icon-button-filled-color-fg-warning-enabled)',
2756
+ background: 'var(--ids-comp-icon-button-filled-color-bg-warning-enabled)',
2757
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-warning-enabled)',
2758
+ },
2759
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-warning:hover': {
2760
+ background: 'var(--ids-comp-icon-button-filled-color-bg-warning-hovered)',
2761
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-warning-hovered)',
2762
+ },
2763
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-warning:focus': {
2764
+ background: 'var(--ids-comp-icon-button-filled-color-bg-warning-focused)',
2765
+ color: 'var(--ids-comp-icon-button-filled-color-fg-warning-focused)',
2766
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-warning-focused)',
2767
+ },
2768
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-warning:active': {
2769
+ background: 'var(--ids-comp-icon-button-filled-color-bg-warning-pressed)',
2770
+ color: 'var(--ids-comp-icon-button-filled-color-fg-warning-pressed)',
2771
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-warning-pressed)',
2772
+ },
2773
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-warning:disabled': {
2774
+ background: 'var(--ids-comp-icon-button-filled-color-bg-warning-disabled)',
2775
+ color: 'var(--ids-comp-icon-button-filled-color-fg-warning-disabled)',
2776
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-warning-disabled)',
2777
+ },
2778
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-light': {
2779
+ color: 'var(--ids-comp-icon-button-filled-color-fg-light-enabled)',
2780
+ background: 'var(--ids-comp-icon-button-filled-color-bg-light-enabled)',
2781
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-light-enabled)',
2782
+ },
2783
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-light:hover': {
2784
+ background: 'var(--ids-comp-icon-button-filled-color-bg-light-hovered)',
2785
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-light-hovered)',
2786
+ },
2787
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-light:focus': {
2788
+ background: 'var(--ids-comp-icon-button-filled-color-bg-light-focused)',
2789
+ color: 'var(--ids-comp-icon-button-filled-color-fg-light-focused)',
2790
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-light-focused)',
2791
+ },
2792
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-light:active': {
2793
+ background: 'var(--ids-comp-icon-button-filled-color-bg-light-pressed)',
2794
+ color: 'var(--ids-comp-icon-button-filled-color-fg-light-pressed)',
2795
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-light-pressed)',
2796
+ },
2797
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-light:disabled': {
2798
+ background: 'var(--ids-comp-icon-button-filled-color-bg-light-disabled)',
2799
+ color: 'var(--ids-comp-icon-button-filled-color-fg-light-disabled)',
2800
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-light-disabled)',
2801
+ },
2802
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-dark': {
2803
+ color: 'var(--ids-comp-icon-button-filled-color-fg-dark-enabled)',
2804
+ background: 'var(--ids-comp-icon-button-filled-color-bg-dark-enabled)',
2805
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-dark-enabled)',
2806
+ },
2807
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-dark:hover': {
2808
+ background: 'var(--ids-comp-icon-button-filled-color-bg-dark-hovered)',
2809
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-dark-hovered)',
2810
+ },
2811
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-dark:focus': {
2812
+ background: 'var(--ids-comp-icon-button-filled-color-bg-dark-focused)',
2813
+ color: 'var(--ids-comp-icon-button-filled-color-fg-dark-focused)',
2814
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-dark-focused)',
2815
+ },
2816
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-dark:active': {
2817
+ background: 'var(--ids-comp-icon-button-filled-color-bg-dark-pressed)',
2818
+ color: 'var(--ids-comp-icon-button-filled-color-fg-dark-pressed)',
2819
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-dark-pressed)',
2820
+ },
2821
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-dark:disabled': {
2822
+ background: 'var(--ids-comp-icon-button-filled-color-bg-dark-disabled)',
2823
+ color: 'var(--ids-comp-icon-button-filled-color-fg-dark-disabled)',
2824
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-dark-disabled)',
2825
+ },
2826
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-surface': {
2827
+ color: 'var(--ids-comp-icon-button-filled-color-fg-surface-enabled)',
2828
+ background: 'var(--ids-comp-icon-button-filled-color-bg-surface-enabled)',
2829
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-surface-enabled)',
2830
+ },
2831
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-surface:hover': {
2832
+ background: 'var(--ids-comp-icon-button-filled-color-bg-surface-hovered)',
2833
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-surface-hovered)',
2834
+ },
2835
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-surface:focus': {
2836
+ background: 'var(--ids-comp-icon-button-filled-color-bg-surface-focused)',
2837
+ color: 'var(--ids-comp-icon-button-filled-color-fg-surface-focused)',
2838
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-surface-focused)',
2839
+ },
2840
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-surface:active': {
2841
+ background: 'var(--ids-comp-icon-button-filled-color-bg-surface-pressed)',
2842
+ color: 'var(--ids-comp-icon-button-filled-color-fg-surface-pressed)',
2843
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-surface-pressed)',
2844
+ },
2845
+ '.ids-icon-button.ids-icon-button-filled.ids-icon-button-surface:disabled': {
2846
+ background: 'var(--ids-comp-icon-button-filled-color-bg-surface-disabled)',
2847
+ color: 'var(--ids-comp-icon-button-filled-color-fg-surface-disabled)',
2848
+ borderColor: 'var(--ids-comp-icon-button-filled-color-border-surface-disabled)',
2849
+ },
2850
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-primary': {
2851
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-primary-enabled)',
2852
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-primary-enabled)',
2853
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-primary-enabled)',
2854
+ },
2855
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-primary:hover': {
2856
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-primary-hovered)',
2857
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-primary-hovered)',
2858
+ },
2859
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-primary:focus': {
2860
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-primary-focused)',
2861
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-primary-focused)',
2862
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-primary-focused)',
2863
+ },
2864
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-primary:active': {
2865
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-primary-pressed)',
2866
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-primary-pressed)',
2867
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-primary-pressed)',
2868
+ },
2869
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-primary:disabled': {
2870
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-primary-disabled)',
2871
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-primary-disabled)',
2872
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-primary-disabled)',
2873
+ },
2874
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-secondary': {
2875
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-secondary-enabled)',
2876
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-secondary-enabled)',
2877
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-secondary-enabled)',
2878
+ },
2879
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-secondary:hover': {
2880
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-secondary-hovered)',
2881
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-secondary-hovered)',
2882
+ },
2883
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-secondary:focus': {
2884
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-secondary-focused)',
2885
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-secondary-focused)',
2886
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-secondary-focused)',
2887
+ },
2888
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-secondary:active': {
2889
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-secondary-pressed)',
2890
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-secondary-pressed)',
2891
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-secondary-pressed)',
2892
+ },
2893
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-secondary:disabled': {
2894
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-secondary-disabled)',
2895
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-secondary-disabled)',
2896
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-secondary-disabled)',
2897
+ },
2898
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-brand': {
2899
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-brand-enabled)',
2900
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-brand-enabled)',
2901
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-brand-enabled)',
2902
+ },
2903
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-brand:hover': {
2904
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-brand-hovered)',
2905
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-brand-hovered)',
2906
+ },
2907
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-brand:focus': {
2908
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-brand-focused)',
2909
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-brand-focused)',
2910
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-brand-focused)',
2911
+ },
2912
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-brand:active': {
2913
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-brand-pressed)',
2914
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-brand-pressed)',
2915
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-brand-pressed)',
2916
+ },
2917
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-brand:disabled': {
2918
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-brand-disabled)',
2919
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-brand-disabled)',
2920
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-brand-disabled)',
2921
+ },
2922
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-error': {
2923
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-error-enabled)',
2924
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-error-enabled)',
2925
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-error-enabled)',
2926
+ },
2927
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-error:hover': {
2928
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-error-hovered)',
2929
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-error-hovered)',
2930
+ },
2931
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-error:focus': {
2932
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-error-focused)',
2933
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-error-focused)',
2934
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-error-focused)',
2935
+ },
2936
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-error:active': {
2937
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-error-pressed)',
2938
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-error-pressed)',
2939
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-error-pressed)',
2940
+ },
2941
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-error:disabled': {
2942
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-error-disabled)',
2943
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-error-disabled)',
2944
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-error-disabled)',
2945
+ },
2946
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-success': {
2947
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-success-enabled)',
2948
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-success-enabled)',
2949
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-success-enabled)',
2950
+ },
2951
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-success:hover': {
2952
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-success-hovered)',
2953
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-success-hovered)',
2954
+ },
2955
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-success:focus': {
2956
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-success-focused)',
2957
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-success-focused)',
2958
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-success-focused)',
2959
+ },
2960
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-success:active': {
2961
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-success-pressed)',
2962
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-success-pressed)',
2963
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-success-pressed)',
2964
+ },
2965
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-success:disabled': {
2966
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-success-disabled)',
2967
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-success-disabled)',
2968
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-success-disabled)',
2969
+ },
2970
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-warning': {
2971
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-warning-enabled)',
2972
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-warning-enabled)',
2973
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-warning-enabled)',
2974
+ },
2975
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-warning:hover': {
2976
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-warning-hovered)',
2977
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-warning-hovered)',
2978
+ },
2979
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-warning:focus': {
2980
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-warning-focused)',
2981
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-warning-focused)',
2982
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-warning-focused)',
2983
+ },
2984
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-warning:active': {
2985
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-warning-pressed)',
2986
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-warning-pressed)',
2987
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-warning-pressed)',
2988
+ },
2989
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-warning:disabled': {
2990
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-warning-disabled)',
2991
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-warning-disabled)',
2992
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-warning-disabled)',
2993
+ },
2994
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-light': {
2995
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-light-enabled)',
2996
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-light-enabled)',
2997
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-light-enabled)',
2998
+ },
2999
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-light:hover': {
3000
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-light-hovered)',
3001
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-light-hovered)',
3002
+ },
3003
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-light:focus': {
3004
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-light-focused)',
3005
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-light-focused)',
3006
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-light-focused)',
3007
+ },
3008
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-light:active': {
3009
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-light-pressed)',
3010
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-light-pressed)',
3011
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-light-pressed)',
3012
+ },
3013
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-light:disabled': {
3014
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-light-disabled)',
3015
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-light-disabled)',
3016
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-light-disabled)',
3017
+ },
3018
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-dark': {
3019
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-dark-enabled)',
3020
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-dark-enabled)',
3021
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-dark-enabled)',
3022
+ },
3023
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-dark:hover': {
3024
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-dark-hovered)',
3025
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-dark-hovered)',
3026
+ },
3027
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-dark:focus': {
3028
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-dark-focused)',
3029
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-dark-focused)',
3030
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-dark-focused)',
3031
+ },
3032
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-dark:active': {
3033
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-dark-pressed)',
3034
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-dark-pressed)',
3035
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-dark-pressed)',
3036
+ },
3037
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-dark:disabled': {
3038
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-dark-disabled)',
3039
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-dark-disabled)',
3040
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-dark-disabled)',
3041
+ },
3042
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-surface': {
3043
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-surface-enabled)',
3044
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-surface-enabled)',
3045
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-surface-enabled)',
3046
+ },
3047
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-surface:hover': {
3048
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-surface-hovered)',
3049
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-surface-hovered)',
3050
+ },
3051
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-surface:focus': {
3052
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-surface-focused)',
3053
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-surface-focused)',
3054
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-surface-focused)',
3055
+ },
3056
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-surface:active': {
3057
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-surface-pressed)',
3058
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-surface-pressed)',
3059
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-surface-pressed)',
3060
+ },
3061
+ '.ids-icon-button.ids-icon-button-outlined.ids-icon-button-surface:disabled': {
3062
+ background: 'var(--ids-comp-icon-button-outlined-color-bg-surface-disabled)',
3063
+ color: 'var(--ids-comp-icon-button-outlined-color-fg-surface-disabled)',
3064
+ borderColor: 'var(--ids-comp-icon-button-outlined-color-border-surface-disabled)',
3065
+ },
3066
+ '.ids-icon-button.ids-icon-button-standard': { border: 'none' },
3067
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-primary': {
3068
+ color: 'var(--ids-comp-icon-button-standard-color-fg-primary-enabled)',
3069
+ background: 'var(--ids-comp-icon-button-standard-color-bg-primary-enabled)',
3070
+ },
3071
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-primary:hover': {
3072
+ background: 'var(--ids-comp-icon-button-standard-color-bg-primary-hovered)',
3073
+ color: 'var(--ids-comp-icon-button-standard-color-fg-primary-hovered)',
3074
+ },
3075
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-primary:focus': {
3076
+ background: 'var(--ids-comp-icon-button-standard-color-bg-primary-focused)',
3077
+ color: 'var(--ids-comp-icon-button-standard-color-fg-primary-focused)',
3078
+ },
3079
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-primary:active': {
3080
+ background: 'var(--ids-comp-icon-button-standard-color-bg-primary-pressed)',
3081
+ color: 'var(--ids-comp-icon-button-standard-color-fg-primary-pressed)',
3082
+ },
3083
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-primary:disabled': {
3084
+ background: 'var(--ids-comp-icon-button-standard-color-bg-primary-disabled)',
3085
+ color: 'var(--ids-comp-icon-button-standard-color-fg-primary-disabled)',
3086
+ },
3087
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-secondary': {
3088
+ color: 'var(--ids-comp-icon-button-standard-color-fg-secondary-enabled)',
3089
+ background: 'var(--ids-comp-icon-button-standard-color-bg-secondary-enabled)',
3090
+ },
3091
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-secondary:hover': {
3092
+ background: 'var(--ids-comp-icon-button-standard-color-bg-secondary-hovered)',
3093
+ color: 'var(--ids-comp-icon-button-standard-color-fg-secondary-hovered)',
3094
+ },
3095
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-secondary:focus': {
3096
+ background: 'var(--ids-comp-icon-button-standard-color-bg-secondary-focused)',
3097
+ color: 'var(--ids-comp-icon-button-standard-color-fg-secondary-focused)',
3098
+ },
3099
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-secondary:active': {
3100
+ background: 'var(--ids-comp-icon-button-standard-color-bg-secondary-pressed)',
3101
+ color: 'var(--ids-comp-icon-button-standard-color-fg-secondary-pressed)',
3102
+ },
3103
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-secondary:disabled': {
3104
+ background: 'var(--ids-comp-icon-button-standard-color-bg-secondary-disabled)',
3105
+ color: 'var(--ids-comp-icon-button-standard-color-fg-secondary-disabled)',
3106
+ },
3107
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-brand': {
3108
+ color: 'var(--ids-comp-icon-button-standard-color-fg-brand-enabled)',
3109
+ background: 'var(--ids-comp-icon-button-standard-color-bg-brand-enabled)',
3110
+ },
3111
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-brand:hover': {
3112
+ background: 'var(--ids-comp-icon-button-standard-color-bg-brand-hovered)',
3113
+ color: 'var(--ids-comp-icon-button-standard-color-fg-brand-hovered)',
3114
+ },
3115
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-brand:focus': {
3116
+ background: 'var(--ids-comp-icon-button-standard-color-bg-brand-focused)',
3117
+ color: 'var(--ids-comp-icon-button-standard-color-fg-brand-focused)',
3118
+ },
3119
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-brand:active': {
3120
+ background: 'var(--ids-comp-icon-button-standard-color-bg-brand-pressed)',
3121
+ color: 'var(--ids-comp-icon-button-standard-color-fg-brand-pressed)',
3122
+ },
3123
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-brand:disabled': {
3124
+ background: 'var(--ids-comp-icon-button-standard-color-bg-brand-disabled)',
3125
+ color: 'var(--ids-comp-icon-button-standard-color-fg-brand-disabled)',
3126
+ },
3127
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-error': {
3128
+ color: 'var(--ids-comp-icon-button-standard-color-fg-error-enabled)',
3129
+ background: 'var(--ids-comp-icon-button-standard-color-bg-error-enabled)',
3130
+ },
3131
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-error:hover': {
3132
+ background: 'var(--ids-comp-icon-button-standard-color-bg-error-hovered)',
3133
+ color: 'var(--ids-comp-icon-button-standard-color-fg-error-hovered)',
3134
+ },
3135
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-error:focus': {
3136
+ background: 'var(--ids-comp-icon-button-standard-color-bg-error-focused)',
3137
+ color: 'var(--ids-comp-icon-button-standard-color-fg-error-focused)',
3138
+ },
3139
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-error:active': {
3140
+ background: 'var(--ids-comp-icon-button-standard-color-bg-error-pressed)',
3141
+ color: 'var(--ids-comp-icon-button-standard-color-fg-error-pressed)',
3142
+ },
3143
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-error:disabled': {
3144
+ background: 'var(--ids-comp-icon-button-standard-color-bg-error-disabled)',
3145
+ color: 'var(--ids-comp-icon-button-standard-color-fg-error-disabled)',
3146
+ },
3147
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-success': {
3148
+ color: 'var(--ids-comp-icon-button-standard-color-fg-success-enabled)',
3149
+ background: 'var(--ids-comp-icon-button-standard-color-bg-success-enabled)',
3150
+ },
3151
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-success:hover': {
3152
+ background: 'var(--ids-comp-icon-button-standard-color-bg-success-hovered)',
3153
+ color: 'var(--ids-comp-icon-button-standard-color-fg-success-hovered)',
3154
+ },
3155
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-success:focus': {
3156
+ background: 'var(--ids-comp-icon-button-standard-color-bg-success-focused)',
3157
+ color: 'var(--ids-comp-icon-button-standard-color-fg-success-focused)',
3158
+ },
3159
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-success:active': {
3160
+ background: 'var(--ids-comp-icon-button-standard-color-bg-success-pressed)',
3161
+ color: 'var(--ids-comp-icon-button-standard-color-fg-success-pressed)',
3162
+ },
3163
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-success:disabled': {
3164
+ background: 'var(--ids-comp-icon-button-standard-color-bg-success-disabled)',
3165
+ color: 'var(--ids-comp-icon-button-standard-color-fg-success-disabled)',
3166
+ },
3167
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-warning': {
3168
+ color: 'var(--ids-comp-icon-button-standard-color-fg-warning-enabled)',
3169
+ background: 'var(--ids-comp-icon-button-standard-color-bg-warning-enabled)',
3170
+ },
3171
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-warning:hover': {
3172
+ background: 'var(--ids-comp-icon-button-standard-color-bg-warning-hovered)',
3173
+ color: 'var(--ids-comp-icon-button-standard-color-fg-warning-hovered)',
3174
+ },
3175
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-warning:focus': {
3176
+ background: 'var(--ids-comp-icon-button-standard-color-bg-warning-focused)',
3177
+ color: 'var(--ids-comp-icon-button-standard-color-fg-warning-focused)',
3178
+ },
3179
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-warning:active': {
3180
+ background: 'var(--ids-comp-icon-button-standard-color-bg-warning-pressed)',
3181
+ color: 'var(--ids-comp-icon-button-standard-color-fg-warning-pressed)',
3182
+ },
3183
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-warning:disabled': {
3184
+ background: 'var(--ids-comp-icon-button-standard-color-bg-warning-disabled)',
3185
+ color: 'var(--ids-comp-icon-button-standard-color-fg-warning-disabled)',
3186
+ },
3187
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-light': {
3188
+ color: 'var(--ids-comp-icon-button-standard-color-fg-light-enabled)',
3189
+ background: 'var(--ids-comp-icon-button-standard-color-bg-light-enabled)',
3190
+ },
3191
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-light:hover': {
3192
+ background: 'var(--ids-comp-icon-button-standard-color-bg-light-hovered)',
3193
+ color: 'var(--ids-comp-icon-button-standard-color-fg-light-hovered)',
3194
+ },
3195
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-light:focus': {
3196
+ background: 'var(--ids-comp-icon-button-standard-color-bg-light-focused)',
3197
+ color: 'var(--ids-comp-icon-button-standard-color-fg-light-focused)',
3198
+ },
3199
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-light:active': {
3200
+ background: 'var(--ids-comp-icon-button-standard-color-bg-light-pressed)',
3201
+ color: 'var(--ids-comp-icon-button-standard-color-fg-light-pressed)',
3202
+ },
3203
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-light:disabled': {
3204
+ background: 'var(--ids-comp-icon-button-standard-color-bg-light-disabled)',
3205
+ color: 'var(--ids-comp-icon-button-standard-color-fg-light-disabled)',
3206
+ },
3207
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-dark': {
3208
+ color: 'var(--ids-comp-icon-button-standard-color-fg-dark-enabled)',
3209
+ background: 'var(--ids-comp-icon-button-standard-color-bg-dark-enabled)',
3210
+ },
3211
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-dark:hover': {
3212
+ background: 'var(--ids-comp-icon-button-standard-color-bg-dark-hovered)',
3213
+ color: 'var(--ids-comp-icon-button-standard-color-fg-dark-hovered)',
3214
+ },
3215
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-dark:focus': {
3216
+ background: 'var(--ids-comp-icon-button-standard-color-bg-dark-focused)',
3217
+ color: 'var(--ids-comp-icon-button-standard-color-fg-dark-focused)',
3218
+ },
3219
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-dark:active': {
3220
+ background: 'var(--ids-comp-icon-button-standard-color-bg-dark-pressed)',
3221
+ color: 'var(--ids-comp-icon-button-standard-color-fg-dark-pressed)',
3222
+ },
3223
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-dark:disabled': {
3224
+ background: 'var(--ids-comp-icon-button-standard-color-bg-dark-disabled)',
3225
+ color: 'var(--ids-comp-icon-button-standard-color-fg-dark-disabled)',
3226
+ },
3227
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-surface': {
3228
+ color: 'var(--ids-comp-icon-button-standard-color-fg-surface-enabled)',
3229
+ background: 'var(--ids-comp-icon-button-standard-color-bg-surface-enabled)',
3230
+ },
3231
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-surface:hover': {
3232
+ background: 'var(--ids-comp-icon-button-standard-color-bg-surface-hovered)',
3233
+ color: 'var(--ids-comp-icon-button-standard-color-fg-surface-hovered)',
3234
+ },
3235
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-surface:focus': {
3236
+ background: 'var(--ids-comp-icon-button-standard-color-bg-surface-focused)',
3237
+ color: 'var(--ids-comp-icon-button-standard-color-fg-surface-focused)',
3238
+ },
3239
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-surface:active': {
3240
+ background: 'var(--ids-comp-icon-button-standard-color-bg-surface-pressed)',
3241
+ color: 'var(--ids-comp-icon-button-standard-color-fg-surface-pressed)',
3242
+ },
3243
+ '.ids-icon-button.ids-icon-button-standard.ids-icon-button-surface:disabled': {
3244
+ background: 'var(--ids-comp-icon-button-standard-color-bg-surface-disabled)',
3245
+ color: 'var(--ids-comp-icon-button-standard-color-fg-surface-disabled)',
3246
+ },
3247
+ '.ids-tag': { flexShrink: 0, width: 'fit-content', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' },
3248
+ '.ids-tag:focus': {
3249
+ outlineOffset: '2px',
3250
+ outline: 'var(--ids-comp-tag-focused-outline-size-outline) solid var(--ids-comp-tag-focused-outline-color-dark-focused)',
3251
+ },
3252
+ '.ids-tag:focus.ids-tag-light': { outlineColor: 'var(--ids-comp-tag-focused-outline-color-light-focused)' },
3253
+ '.ids-tag:active': { outline: 'none' },
3254
+ '.ids-tag *[icon-leading],.ids-tag *[icon-trailing]': {
3255
+ gap: '10px',
3256
+ display: 'flex',
3257
+ alignItems: 'center',
3258
+ justifyContent: 'center',
3259
+ },
3260
+ '.ids-tag.ids-tag-compact': {
3261
+ gap: 'var(--ids-comp-size-tag-size-gap-compact)',
3262
+ height: 'var(--ids-comp-size-tag-size-height-compact)',
3263
+ padding: 'var(--ids-comp-size-tag-size-padding-y-compact) var(--ids-comp-size-tag-size-padding-x-compact)',
3264
+ borderRadius: 'var(--ids-comp-size-tag-size-border-radius-compact)',
3265
+ border: 'var(--ids-comp-size-tag-size-border-compact) solid',
3266
+ },
3267
+ '.ids-tag.ids-tag-compact>.ids-tag-label': {
3268
+ fontFamily: 'var(--ids-comp-size-tag-label-typography-font-family-compact)',
3269
+ fontSize: 'var(--ids-comp-size-tag-label-typography-font-size-compact)',
3270
+ fontWeight: 'var(--ids-comp-size-tag-label-typography-font-weight-compact)',
3271
+ letterSpacing: 'var(--ids-comp-size-tag-label-typography-letter-spacing-compact)',
3272
+ lineHeight: 'var(--ids-comp-size-tag-label-typography-line-height-compact)',
3273
+ },
3274
+ '.ids-tag.ids-tag-compact *[icon-leading],.ids-tag.ids-tag-compact *[icon-trailing]': {
3275
+ width: 'var(--ids-comp-size-tag-size-icon-compact)',
3276
+ height: 'var(--ids-comp-size-tag-size-icon-compact)',
3277
+ },
3278
+ '.ids-tag.ids-tag-comfortable': {
3279
+ gap: 'var(--ids-comp-size-tag-size-gap-comfortable)',
3280
+ height: 'var(--ids-comp-size-tag-size-height-comfortable)',
3281
+ padding: 'var(--ids-comp-size-tag-size-padding-y-comfortable) var(--ids-comp-size-tag-size-padding-x-comfortable)',
3282
+ borderRadius: 'var(--ids-comp-size-tag-size-border-radius-comfortable)',
3283
+ border: 'var(--ids-comp-size-tag-size-border-comfortable) solid',
3284
+ },
3285
+ '.ids-tag.ids-tag-comfortable>.ids-tag-label': {
3286
+ fontFamily: 'var(--ids-comp-size-tag-label-typography-font-family-comfortable)',
3287
+ fontSize: 'var(--ids-comp-size-tag-label-typography-font-size-comfortable)',
3288
+ fontWeight: 'var(--ids-comp-size-tag-label-typography-font-weight-comfortable)',
3289
+ letterSpacing: 'var(--ids-comp-size-tag-label-typography-letter-spacing-comfortable)',
3290
+ lineHeight: 'var(--ids-comp-size-tag-label-typography-line-height-comfortable)',
3291
+ },
3292
+ '.ids-tag.ids-tag-comfortable *[icon-leading],.ids-tag.ids-tag-comfortable *[icon-trailing]': {
3293
+ width: 'var(--ids-comp-size-tag-size-icon-comfortable)',
3294
+ height: 'var(--ids-comp-size-tag-size-icon-comfortable)',
3295
+ },
3296
+ '.ids-tag.ids-tag-spacious': {
3297
+ gap: 'var(--ids-comp-size-tag-size-gap-spacious)',
3298
+ height: 'var(--ids-comp-size-tag-size-height-spacious)',
3299
+ padding: 'var(--ids-comp-size-tag-size-padding-y-spacious) var(--ids-comp-size-tag-size-padding-x-spacious)',
3300
+ borderRadius: 'var(--ids-comp-size-tag-size-border-radius-spacious)',
3301
+ border: 'var(--ids-comp-size-tag-size-border-spacious) solid',
3302
+ },
3303
+ '.ids-tag.ids-tag-spacious>.ids-tag-label': {
3304
+ fontFamily: 'var(--ids-comp-size-tag-label-typography-font-family-spacious)',
3305
+ fontSize: 'var(--ids-comp-size-tag-label-typography-font-size-spacious)',
3306
+ fontWeight: 'var(--ids-comp-size-tag-label-typography-font-weight-spacious)',
3307
+ letterSpacing: 'var(--ids-comp-size-tag-label-typography-letter-spacing-spacious)',
3308
+ lineHeight: 'var(--ids-comp-size-tag-label-typography-line-height-spacious)',
3309
+ },
3310
+ '.ids-tag.ids-tag-spacious *[icon-leading],.ids-tag.ids-tag-spacious *[icon-trailing]': {
3311
+ width: 'var(--ids-comp-size-tag-size-icon-spacious)',
3312
+ height: 'var(--ids-comp-size-tag-size-icon-spacious)',
3313
+ },
3314
+ '.ids-tag.ids-tag-dense': {
3315
+ gap: 'var(--ids-comp-size-tag-size-gap-dense)',
3316
+ height: 'var(--ids-comp-size-tag-size-height-dense)',
3317
+ padding: 'var(--ids-comp-size-tag-size-padding-y-dense) var(--ids-comp-size-tag-size-padding-x-dense)',
3318
+ borderRadius: 'var(--ids-comp-size-tag-size-border-radius-dense)',
3319
+ border: 'var(--ids-comp-size-tag-size-border-dense) solid',
3320
+ },
3321
+ '.ids-tag.ids-tag-dense>.ids-tag-label': {
3322
+ fontFamily: 'var(--ids-comp-size-tag-label-typography-font-family-dense)',
3323
+ fontSize: 'var(--ids-comp-size-tag-label-typography-font-size-dense)',
3324
+ fontWeight: 'var(--ids-comp-size-tag-label-typography-font-weight-dense)',
3325
+ letterSpacing: 'var(--ids-comp-size-tag-label-typography-letter-spacing-dense)',
3326
+ lineHeight: 'var(--ids-comp-size-tag-label-typography-line-height-dense)',
3327
+ },
3328
+ '.ids-tag.ids-tag-dense *[icon-leading],.ids-tag.ids-tag-dense *[icon-trailing]': {
3329
+ width: 'var(--ids-comp-size-tag-size-icon-dense)',
3330
+ height: 'var(--ids-comp-size-tag-size-icon-dense)',
3331
+ },
3332
+ '.ids-tag.ids-tag-filled.ids-tag-primary': {
3333
+ color: 'var(--ids-comp-tag-filled-color-fg-label-primary-enabled)',
3334
+ background: 'var(--ids-comp-tag-filled-color-bg-primary-enabled)',
3335
+ borderColor: 'var(--ids-comp-tag-filled-color-border-primary-enabled)',
3336
+ },
3337
+ '.ids-tag.ids-tag-filled.ids-tag-primary:hover': {
3338
+ color: 'var(--ids-comp-tag-filled-color-fg-label-primary-hovered)',
3339
+ background: 'var(--ids-comp-tag-filled-color-bg-primary-hovered)',
3340
+ borderColor: 'var(--ids-comp-tag-filled-color-border-primary-hovered)',
3341
+ },
3342
+ '.ids-tag.ids-tag-filled.ids-tag-primary:focus': {
3343
+ color: 'var(--ids-comp-tag-filled-color-fg-label-primary-focused)',
3344
+ background: 'var(--ids-comp-tag-filled-color-bg-primary-focused)',
3345
+ borderColor: 'var(--ids-comp-tag-filled-color-border-primary-focused)',
3346
+ },
3347
+ '.ids-tag.ids-tag-filled.ids-tag-primary:active': {
3348
+ color: 'var(--ids-comp-tag-filled-color-fg-label-primary-pressed)',
3349
+ background: 'var(--ids-comp-tag-filled-color-bg-primary-pressed)',
3350
+ borderColor: 'var(--ids-comp-tag-filled-color-border-primary-pressed)',
3351
+ },
3352
+ '.ids-tag.ids-tag-filled.ids-tag-primary:disabled': {
3353
+ color: 'var(--ids-comp-tag-filled-color-fg-label-primary-disabled)',
3354
+ background: 'var(--ids-comp-tag-filled-color-bg-primary-disabled)',
3355
+ borderColor: 'var(--ids-comp-tag-filled-color-border-primary-disabled)',
3356
+ },
3357
+ '.ids-tag.ids-tag-filled.ids-tag-secondary': {
3358
+ color: 'var(--ids-comp-tag-filled-color-fg-label-secondary-enabled)',
3359
+ background: 'var(--ids-comp-tag-filled-color-bg-secondary-enabled)',
3360
+ borderColor: 'var(--ids-comp-tag-filled-color-border-secondary-enabled)',
3361
+ },
3362
+ '.ids-tag.ids-tag-filled.ids-tag-secondary:hover': {
3363
+ color: 'var(--ids-comp-tag-filled-color-fg-label-secondary-hovered)',
3364
+ background: 'var(--ids-comp-tag-filled-color-bg-secondary-hovered)',
3365
+ borderColor: 'var(--ids-comp-tag-filled-color-border-secondary-hovered)',
3366
+ },
3367
+ '.ids-tag.ids-tag-filled.ids-tag-secondary:focus': {
3368
+ color: 'var(--ids-comp-tag-filled-color-fg-label-secondary-focused)',
3369
+ background: 'var(--ids-comp-tag-filled-color-bg-secondary-focused)',
3370
+ borderColor: 'var(--ids-comp-tag-filled-color-border-secondary-focused)',
3371
+ },
3372
+ '.ids-tag.ids-tag-filled.ids-tag-secondary:active': {
3373
+ color: 'var(--ids-comp-tag-filled-color-fg-label-secondary-pressed)',
3374
+ background: 'var(--ids-comp-tag-filled-color-bg-secondary-pressed)',
3375
+ borderColor: 'var(--ids-comp-tag-filled-color-border-secondary-pressed)',
3376
+ },
3377
+ '.ids-tag.ids-tag-filled.ids-tag-secondary:disabled': {
3378
+ color: 'var(--ids-comp-tag-filled-color-fg-label-secondary-disabled)',
3379
+ background: 'var(--ids-comp-tag-filled-color-bg-secondary-disabled)',
3380
+ borderColor: 'var(--ids-comp-tag-filled-color-border-secondary-disabled)',
3381
+ },
3382
+ '.ids-tag.ids-tag-filled.ids-tag-brand': {
3383
+ color: 'var(--ids-comp-tag-filled-color-fg-label-brand-enabled)',
3384
+ background: 'var(--ids-comp-tag-filled-color-bg-brand-enabled)',
3385
+ borderColor: 'var(--ids-comp-tag-filled-color-border-brand-enabled)',
3386
+ },
3387
+ '.ids-tag.ids-tag-filled.ids-tag-brand:hover': {
3388
+ color: 'var(--ids-comp-tag-filled-color-fg-label-brand-hovered)',
3389
+ background: 'var(--ids-comp-tag-filled-color-bg-brand-hovered)',
3390
+ borderColor: 'var(--ids-comp-tag-filled-color-border-brand-hovered)',
3391
+ },
3392
+ '.ids-tag.ids-tag-filled.ids-tag-brand:focus': {
3393
+ color: 'var(--ids-comp-tag-filled-color-fg-label-brand-focused)',
3394
+ background: 'var(--ids-comp-tag-filled-color-bg-brand-focused)',
3395
+ borderColor: 'var(--ids-comp-tag-filled-color-border-brand-focused)',
3396
+ },
3397
+ '.ids-tag.ids-tag-filled.ids-tag-brand:active': {
3398
+ color: 'var(--ids-comp-tag-filled-color-fg-label-brand-pressed)',
3399
+ background: 'var(--ids-comp-tag-filled-color-bg-brand-pressed)',
3400
+ borderColor: 'var(--ids-comp-tag-filled-color-border-brand-pressed)',
3401
+ },
3402
+ '.ids-tag.ids-tag-filled.ids-tag-brand:disabled': {
3403
+ color: 'var(--ids-comp-tag-filled-color-fg-label-brand-disabled)',
3404
+ background: 'var(--ids-comp-tag-filled-color-bg-brand-disabled)',
3405
+ borderColor: 'var(--ids-comp-tag-filled-color-border-brand-disabled)',
3406
+ },
3407
+ '.ids-tag.ids-tag-filled.ids-tag-error': {
3408
+ color: 'var(--ids-comp-tag-filled-color-fg-label-error-enabled)',
3409
+ background: 'var(--ids-comp-tag-filled-color-bg-error-enabled)',
3410
+ borderColor: 'var(--ids-comp-tag-filled-color-border-error-enabled)',
3411
+ },
3412
+ '.ids-tag.ids-tag-filled.ids-tag-error:hover': {
3413
+ color: 'var(--ids-comp-tag-filled-color-fg-label-error-hovered)',
3414
+ background: 'var(--ids-comp-tag-filled-color-bg-error-hovered)',
3415
+ borderColor: 'var(--ids-comp-tag-filled-color-border-error-hovered)',
3416
+ },
3417
+ '.ids-tag.ids-tag-filled.ids-tag-error:focus': {
3418
+ color: 'var(--ids-comp-tag-filled-color-fg-label-error-focused)',
3419
+ background: 'var(--ids-comp-tag-filled-color-bg-error-focused)',
3420
+ borderColor: 'var(--ids-comp-tag-filled-color-border-error-focused)',
3421
+ },
3422
+ '.ids-tag.ids-tag-filled.ids-tag-error:active': {
3423
+ color: 'var(--ids-comp-tag-filled-color-fg-label-error-pressed)',
3424
+ background: 'var(--ids-comp-tag-filled-color-bg-error-pressed)',
3425
+ borderColor: 'var(--ids-comp-tag-filled-color-border-error-pressed)',
3426
+ },
3427
+ '.ids-tag.ids-tag-filled.ids-tag-error:disabled': {
3428
+ color: 'var(--ids-comp-tag-filled-color-fg-label-error-disabled)',
3429
+ background: 'var(--ids-comp-tag-filled-color-bg-error-disabled)',
3430
+ borderColor: 'var(--ids-comp-tag-filled-color-border-error-disabled)',
3431
+ },
3432
+ '.ids-tag.ids-tag-filled.ids-tag-success': {
3433
+ color: 'var(--ids-comp-tag-filled-color-fg-label-success-enabled)',
3434
+ background: 'var(--ids-comp-tag-filled-color-bg-success-enabled)',
3435
+ borderColor: 'var(--ids-comp-tag-filled-color-border-success-enabled)',
3436
+ },
3437
+ '.ids-tag.ids-tag-filled.ids-tag-success:hover': {
3438
+ color: 'var(--ids-comp-tag-filled-color-fg-label-success-hovered)',
3439
+ background: 'var(--ids-comp-tag-filled-color-bg-success-hovered)',
3440
+ borderColor: 'var(--ids-comp-tag-filled-color-border-success-hovered)',
3441
+ },
3442
+ '.ids-tag.ids-tag-filled.ids-tag-success:focus': {
3443
+ color: 'var(--ids-comp-tag-filled-color-fg-label-success-focused)',
3444
+ background: 'var(--ids-comp-tag-filled-color-bg-success-focused)',
3445
+ borderColor: 'var(--ids-comp-tag-filled-color-border-success-focused)',
3446
+ },
3447
+ '.ids-tag.ids-tag-filled.ids-tag-success:active': {
3448
+ color: 'var(--ids-comp-tag-filled-color-fg-label-success-pressed)',
3449
+ background: 'var(--ids-comp-tag-filled-color-bg-success-pressed)',
3450
+ borderColor: 'var(--ids-comp-tag-filled-color-border-success-pressed)',
3451
+ },
3452
+ '.ids-tag.ids-tag-filled.ids-tag-success:disabled': {
3453
+ color: 'var(--ids-comp-tag-filled-color-fg-label-success-disabled)',
3454
+ background: 'var(--ids-comp-tag-filled-color-bg-success-disabled)',
3455
+ borderColor: 'var(--ids-comp-tag-filled-color-border-success-disabled)',
3456
+ },
3457
+ '.ids-tag.ids-tag-filled.ids-tag-warning': {
3458
+ color: 'var(--ids-comp-tag-filled-color-fg-label-warning-enabled)',
3459
+ background: 'var(--ids-comp-tag-filled-color-bg-warning-enabled)',
3460
+ borderColor: 'var(--ids-comp-tag-filled-color-border-warning-enabled)',
3461
+ },
3462
+ '.ids-tag.ids-tag-filled.ids-tag-warning:hover': {
3463
+ color: 'var(--ids-comp-tag-filled-color-fg-label-warning-hovered)',
3464
+ background: 'var(--ids-comp-tag-filled-color-bg-warning-hovered)',
3465
+ borderColor: 'var(--ids-comp-tag-filled-color-border-warning-hovered)',
3466
+ },
3467
+ '.ids-tag.ids-tag-filled.ids-tag-warning:focus': {
3468
+ color: 'var(--ids-comp-tag-filled-color-fg-label-warning-focused)',
3469
+ background: 'var(--ids-comp-tag-filled-color-bg-warning-focused)',
3470
+ borderColor: 'var(--ids-comp-tag-filled-color-border-warning-focused)',
3471
+ },
3472
+ '.ids-tag.ids-tag-filled.ids-tag-warning:active': {
3473
+ color: 'var(--ids-comp-tag-filled-color-fg-label-warning-pressed)',
3474
+ background: 'var(--ids-comp-tag-filled-color-bg-warning-pressed)',
3475
+ borderColor: 'var(--ids-comp-tag-filled-color-border-warning-pressed)',
3476
+ },
3477
+ '.ids-tag.ids-tag-filled.ids-tag-warning:disabled': {
3478
+ color: 'var(--ids-comp-tag-filled-color-fg-label-warning-disabled)',
3479
+ background: 'var(--ids-comp-tag-filled-color-bg-warning-disabled)',
3480
+ borderColor: 'var(--ids-comp-tag-filled-color-border-warning-disabled)',
3481
+ },
3482
+ '.ids-tag.ids-tag-filled.ids-tag-light': {
3483
+ color: 'var(--ids-comp-tag-filled-color-fg-label-light-enabled)',
3484
+ background: 'var(--ids-comp-tag-filled-color-bg-light-enabled)',
3485
+ borderColor: 'var(--ids-comp-tag-filled-color-border-light-enabled)',
3486
+ },
3487
+ '.ids-tag.ids-tag-filled.ids-tag-light:hover': {
3488
+ color: 'var(--ids-comp-tag-filled-color-fg-label-light-hovered)',
3489
+ background: 'var(--ids-comp-tag-filled-color-bg-light-hovered)',
3490
+ borderColor: 'var(--ids-comp-tag-filled-color-border-light-hovered)',
3491
+ },
3492
+ '.ids-tag.ids-tag-filled.ids-tag-light:focus': {
3493
+ color: 'var(--ids-comp-tag-filled-color-fg-label-light-focused)',
3494
+ background: 'var(--ids-comp-tag-filled-color-bg-light-focused)',
3495
+ borderColor: 'var(--ids-comp-tag-filled-color-border-light-focused)',
3496
+ },
3497
+ '.ids-tag.ids-tag-filled.ids-tag-light:active': {
3498
+ color: 'var(--ids-comp-tag-filled-color-fg-label-light-pressed)',
3499
+ background: 'var(--ids-comp-tag-filled-color-bg-light-pressed)',
3500
+ borderColor: 'var(--ids-comp-tag-filled-color-border-light-pressed)',
3501
+ },
3502
+ '.ids-tag.ids-tag-filled.ids-tag-light:disabled': {
3503
+ color: 'var(--ids-comp-tag-filled-color-fg-label-light-disabled)',
3504
+ background: 'var(--ids-comp-tag-filled-color-bg-light-disabled)',
3505
+ borderColor: 'var(--ids-comp-tag-filled-color-border-light-disabled)',
3506
+ },
3507
+ '.ids-tag.ids-tag-filled.ids-tag-dark': {
3508
+ color: 'var(--ids-comp-tag-filled-color-fg-label-dark-enabled)',
3509
+ background: 'var(--ids-comp-tag-filled-color-bg-dark-enabled)',
3510
+ borderColor: 'var(--ids-comp-tag-filled-color-border-dark-enabled)',
3511
+ },
3512
+ '.ids-tag.ids-tag-filled.ids-tag-dark:hover': {
3513
+ color: 'var(--ids-comp-tag-filled-color-fg-label-dark-hovered)',
3514
+ background: 'var(--ids-comp-tag-filled-color-bg-dark-hovered)',
3515
+ borderColor: 'var(--ids-comp-tag-filled-color-border-dark-hovered)',
3516
+ },
3517
+ '.ids-tag.ids-tag-filled.ids-tag-dark:focus': {
3518
+ color: 'var(--ids-comp-tag-filled-color-fg-label-dark-focused)',
3519
+ background: 'var(--ids-comp-tag-filled-color-bg-dark-focused)',
3520
+ borderColor: 'var(--ids-comp-tag-filled-color-border-dark-focused)',
3521
+ },
3522
+ '.ids-tag.ids-tag-filled.ids-tag-dark:active': {
3523
+ color: 'var(--ids-comp-tag-filled-color-fg-label-dark-pressed)',
3524
+ background: 'var(--ids-comp-tag-filled-color-bg-dark-pressed)',
3525
+ borderColor: 'var(--ids-comp-tag-filled-color-border-dark-pressed)',
3526
+ },
3527
+ '.ids-tag.ids-tag-filled.ids-tag-dark:disabled': {
3528
+ color: 'var(--ids-comp-tag-filled-color-fg-label-dark-disabled)',
3529
+ background: 'var(--ids-comp-tag-filled-color-bg-dark-disabled)',
3530
+ borderColor: 'var(--ids-comp-tag-filled-color-border-dark-disabled)',
3531
+ },
3532
+ '.ids-tag.ids-tag-filled.ids-tag-surface': {
3533
+ color: 'var(--ids-comp-tag-filled-color-fg-label-surface-enabled)',
3534
+ background: 'var(--ids-comp-tag-filled-color-bg-surface-enabled)',
3535
+ borderColor: 'var(--ids-comp-tag-filled-color-border-surface-enabled)',
3536
+ },
3537
+ '.ids-tag.ids-tag-filled.ids-tag-surface:hover': {
3538
+ color: 'var(--ids-comp-tag-filled-color-fg-label-surface-hovered)',
3539
+ background: 'var(--ids-comp-tag-filled-color-bg-surface-hovered)',
3540
+ borderColor: 'var(--ids-comp-tag-filled-color-border-surface-hovered)',
3541
+ },
3542
+ '.ids-tag.ids-tag-filled.ids-tag-surface:focus': {
3543
+ color: 'var(--ids-comp-tag-filled-color-fg-label-surface-focused)',
3544
+ background: 'var(--ids-comp-tag-filled-color-bg-surface-focused)',
3545
+ borderColor: 'var(--ids-comp-tag-filled-color-border-surface-focused)',
3546
+ },
3547
+ '.ids-tag.ids-tag-filled.ids-tag-surface:active': {
3548
+ color: 'var(--ids-comp-tag-filled-color-fg-label-surface-pressed)',
3549
+ background: 'var(--ids-comp-tag-filled-color-bg-surface-pressed)',
3550
+ borderColor: 'var(--ids-comp-tag-filled-color-border-surface-pressed)',
3551
+ },
3552
+ '.ids-tag.ids-tag-filled.ids-tag-surface:disabled': {
3553
+ color: 'var(--ids-comp-tag-filled-color-fg-label-surface-disabled)',
3554
+ background: 'var(--ids-comp-tag-filled-color-bg-surface-disabled)',
3555
+ borderColor: 'var(--ids-comp-tag-filled-color-border-surface-disabled)',
3556
+ },
3557
+ '.ids-tag.ids-tag-outlined.ids-tag-primary': {
3558
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-primary-enabled)',
3559
+ background: 'var(--ids-comp-tag-outlined-color-bg-primary-enabled)',
3560
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-primary-enabled)',
3561
+ },
3562
+ '.ids-tag.ids-tag-outlined.ids-tag-primary:hover': {
3563
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-primary-hovered)',
3564
+ background: 'var(--ids-comp-tag-outlined-color-bg-primary-hovered)',
3565
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-primary-hovered)',
3566
+ },
3567
+ '.ids-tag.ids-tag-outlined.ids-tag-primary:focus': {
3568
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-primary-focused)',
3569
+ background: 'var(--ids-comp-tag-outlined-color-bg-primary-focused)',
3570
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-primary-focused)',
3571
+ },
3572
+ '.ids-tag.ids-tag-outlined.ids-tag-primary:active': {
3573
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-primary-pressed)',
3574
+ background: 'var(--ids-comp-tag-outlined-color-bg-primary-pressed)',
3575
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-primary-pressed)',
3576
+ },
3577
+ '.ids-tag.ids-tag-outlined.ids-tag-primary:disabled': {
3578
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-primary-disabled)',
3579
+ background: 'var(--ids-comp-tag-outlined-color-bg-primary-disabled)',
3580
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-primary-disabled)',
3581
+ },
3582
+ '.ids-tag.ids-tag-outlined.ids-tag-secondary': {
3583
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-secondary-enabled)',
3584
+ background: 'var(--ids-comp-tag-outlined-color-bg-secondary-enabled)',
3585
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-secondary-enabled)',
3586
+ },
3587
+ '.ids-tag.ids-tag-outlined.ids-tag-secondary:hover': {
3588
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-secondary-hovered)',
3589
+ background: 'var(--ids-comp-tag-outlined-color-bg-secondary-hovered)',
3590
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-secondary-hovered)',
3591
+ },
3592
+ '.ids-tag.ids-tag-outlined.ids-tag-secondary:focus': {
3593
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-secondary-focused)',
3594
+ background: 'var(--ids-comp-tag-outlined-color-bg-secondary-focused)',
3595
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-secondary-focused)',
3596
+ },
3597
+ '.ids-tag.ids-tag-outlined.ids-tag-secondary:active': {
3598
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-secondary-pressed)',
3599
+ background: 'var(--ids-comp-tag-outlined-color-bg-secondary-pressed)',
3600
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-secondary-pressed)',
3601
+ },
3602
+ '.ids-tag.ids-tag-outlined.ids-tag-secondary:disabled': {
3603
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-secondary-disabled)',
3604
+ background: 'var(--ids-comp-tag-outlined-color-bg-secondary-disabled)',
3605
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-secondary-disabled)',
3606
+ },
3607
+ '.ids-tag.ids-tag-outlined.ids-tag-brand': {
3608
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-brand-enabled)',
3609
+ background: 'var(--ids-comp-tag-outlined-color-bg-brand-enabled)',
3610
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-brand-enabled)',
3611
+ },
3612
+ '.ids-tag.ids-tag-outlined.ids-tag-brand:hover': {
3613
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-brand-hovered)',
3614
+ background: 'var(--ids-comp-tag-outlined-color-bg-brand-hovered)',
3615
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-brand-hovered)',
3616
+ },
3617
+ '.ids-tag.ids-tag-outlined.ids-tag-brand:focus': {
3618
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-brand-focused)',
3619
+ background: 'var(--ids-comp-tag-outlined-color-bg-brand-focused)',
3620
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-brand-focused)',
3621
+ },
3622
+ '.ids-tag.ids-tag-outlined.ids-tag-brand:active': {
3623
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-brand-pressed)',
3624
+ background: 'var(--ids-comp-tag-outlined-color-bg-brand-pressed)',
3625
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-brand-pressed)',
3626
+ },
3627
+ '.ids-tag.ids-tag-outlined.ids-tag-brand:disabled': {
3628
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-brand-disabled)',
3629
+ background: 'var(--ids-comp-tag-outlined-color-bg-brand-disabled)',
3630
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-brand-disabled)',
3631
+ },
3632
+ '.ids-tag.ids-tag-outlined.ids-tag-error': {
3633
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-error-enabled)',
3634
+ background: 'var(--ids-comp-tag-outlined-color-bg-error-enabled)',
3635
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-error-enabled)',
3636
+ },
3637
+ '.ids-tag.ids-tag-outlined.ids-tag-error:hover': {
3638
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-error-hovered)',
3639
+ background: 'var(--ids-comp-tag-outlined-color-bg-error-hovered)',
3640
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-error-hovered)',
3641
+ },
3642
+ '.ids-tag.ids-tag-outlined.ids-tag-error:focus': {
3643
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-error-focused)',
3644
+ background: 'var(--ids-comp-tag-outlined-color-bg-error-focused)',
3645
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-error-focused)',
3646
+ },
3647
+ '.ids-tag.ids-tag-outlined.ids-tag-error:active': {
3648
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-error-pressed)',
3649
+ background: 'var(--ids-comp-tag-outlined-color-bg-error-pressed)',
3650
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-error-pressed)',
3651
+ },
3652
+ '.ids-tag.ids-tag-outlined.ids-tag-error:disabled': {
3653
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-error-disabled)',
3654
+ background: 'var(--ids-comp-tag-outlined-color-bg-error-disabled)',
3655
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-error-disabled)',
3656
+ },
3657
+ '.ids-tag.ids-tag-outlined.ids-tag-success': {
3658
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-success-enabled)',
3659
+ background: 'var(--ids-comp-tag-outlined-color-bg-success-enabled)',
3660
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-success-enabled)',
3661
+ },
3662
+ '.ids-tag.ids-tag-outlined.ids-tag-success:hover': {
3663
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-success-hovered)',
3664
+ background: 'var(--ids-comp-tag-outlined-color-bg-success-hovered)',
3665
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-success-hovered)',
3666
+ },
3667
+ '.ids-tag.ids-tag-outlined.ids-tag-success:focus': {
3668
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-success-focused)',
3669
+ background: 'var(--ids-comp-tag-outlined-color-bg-success-focused)',
3670
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-success-focused)',
3671
+ },
3672
+ '.ids-tag.ids-tag-outlined.ids-tag-success:active': {
3673
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-success-pressed)',
3674
+ background: 'var(--ids-comp-tag-outlined-color-bg-success-pressed)',
3675
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-success-pressed)',
3676
+ },
3677
+ '.ids-tag.ids-tag-outlined.ids-tag-success:disabled': {
3678
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-success-disabled)',
3679
+ background: 'var(--ids-comp-tag-outlined-color-bg-success-disabled)',
3680
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-success-disabled)',
3681
+ },
3682
+ '.ids-tag.ids-tag-outlined.ids-tag-warning': {
3683
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-warning-enabled)',
3684
+ background: 'var(--ids-comp-tag-outlined-color-bg-warning-enabled)',
3685
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-warning-enabled)',
3686
+ },
3687
+ '.ids-tag.ids-tag-outlined.ids-tag-warning:hover': {
3688
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-warning-hovered)',
3689
+ background: 'var(--ids-comp-tag-outlined-color-bg-warning-hovered)',
3690
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-warning-hovered)',
3691
+ },
3692
+ '.ids-tag.ids-tag-outlined.ids-tag-warning:focus': {
3693
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-warning-focused)',
3694
+ background: 'var(--ids-comp-tag-outlined-color-bg-warning-focused)',
3695
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-warning-focused)',
3696
+ },
3697
+ '.ids-tag.ids-tag-outlined.ids-tag-warning:active': {
3698
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-warning-pressed)',
3699
+ background: 'var(--ids-comp-tag-outlined-color-bg-warning-pressed)',
3700
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-warning-pressed)',
3701
+ },
3702
+ '.ids-tag.ids-tag-outlined.ids-tag-warning:disabled': {
3703
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-warning-disabled)',
3704
+ background: 'var(--ids-comp-tag-outlined-color-bg-warning-disabled)',
3705
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-warning-disabled)',
3706
+ },
3707
+ '.ids-tag.ids-tag-outlined.ids-tag-light': {
3708
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-light-enabled)',
3709
+ background: 'var(--ids-comp-tag-outlined-color-bg-light-enabled)',
3710
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-light-enabled)',
3711
+ },
3712
+ '.ids-tag.ids-tag-outlined.ids-tag-light:hover': {
3713
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-light-hovered)',
3714
+ background: 'var(--ids-comp-tag-outlined-color-bg-light-hovered)',
3715
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-light-hovered)',
3716
+ },
3717
+ '.ids-tag.ids-tag-outlined.ids-tag-light:focus': {
3718
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-light-focused)',
3719
+ background: 'var(--ids-comp-tag-outlined-color-bg-light-focused)',
3720
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-light-focused)',
3721
+ },
3722
+ '.ids-tag.ids-tag-outlined.ids-tag-light:active': {
3723
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-light-pressed)',
3724
+ background: 'var(--ids-comp-tag-outlined-color-bg-light-pressed)',
3725
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-light-pressed)',
3726
+ },
3727
+ '.ids-tag.ids-tag-outlined.ids-tag-light:disabled': {
3728
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-light-disabled)',
3729
+ background: 'var(--ids-comp-tag-outlined-color-bg-light-disabled)',
3730
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-light-disabled)',
3731
+ },
3732
+ '.ids-tag.ids-tag-outlined.ids-tag-dark': {
3733
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-dark-enabled)',
3734
+ background: 'var(--ids-comp-tag-outlined-color-bg-dark-enabled)',
3735
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-dark-enabled)',
3736
+ },
3737
+ '.ids-tag.ids-tag-outlined.ids-tag-dark:hover': {
3738
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-dark-hovered)',
3739
+ background: 'var(--ids-comp-tag-outlined-color-bg-dark-hovered)',
3740
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-dark-hovered)',
3741
+ },
3742
+ '.ids-tag.ids-tag-outlined.ids-tag-dark:focus': {
3743
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-dark-focused)',
3744
+ background: 'var(--ids-comp-tag-outlined-color-bg-dark-focused)',
3745
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-dark-focused)',
3746
+ },
3747
+ '.ids-tag.ids-tag-outlined.ids-tag-dark:active': {
3748
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-dark-pressed)',
3749
+ background: 'var(--ids-comp-tag-outlined-color-bg-dark-pressed)',
3750
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-dark-pressed)',
3751
+ },
3752
+ '.ids-tag.ids-tag-outlined.ids-tag-dark:disabled': {
3753
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-dark-disabled)',
3754
+ background: 'var(--ids-comp-tag-outlined-color-bg-dark-disabled)',
3755
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-dark-disabled)',
3756
+ },
3757
+ '.ids-tag.ids-tag-outlined.ids-tag-surface': {
3758
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-surface-enabled)',
3759
+ background: 'var(--ids-comp-tag-outlined-color-bg-surface-enabled)',
3760
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-surface-enabled)',
3761
+ },
3762
+ '.ids-tag.ids-tag-outlined.ids-tag-surface:hover': {
3763
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-surface-hovered)',
3764
+ background: 'var(--ids-comp-tag-outlined-color-bg-surface-hovered)',
3765
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-surface-hovered)',
3766
+ },
3767
+ '.ids-tag.ids-tag-outlined.ids-tag-surface:focus': {
3768
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-surface-focused)',
3769
+ background: 'var(--ids-comp-tag-outlined-color-bg-surface-focused)',
3770
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-surface-focused)',
3771
+ },
3772
+ '.ids-tag.ids-tag-outlined.ids-tag-surface:active': {
3773
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-surface-pressed)',
3774
+ background: 'var(--ids-comp-tag-outlined-color-bg-surface-pressed)',
3775
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-surface-pressed)',
3776
+ },
3777
+ '.ids-tag.ids-tag-outlined.ids-tag-surface:disabled': {
3778
+ color: 'var(--ids-comp-tag-outlined-color-fg-label-surface-disabled)',
3779
+ background: 'var(--ids-comp-tag-outlined-color-bg-surface-disabled)',
3780
+ borderColor: 'var(--ids-comp-tag-outlined-color-border-surface-disabled)',
3781
+ },
3782
+ '.ids-tag.ids-tag-text.ids-tag-primary': {
3783
+ color: 'var(--ids-comp-tag-text-color-fg-label-primary-enabled)',
3784
+ background: 'var(--ids-comp-tag-text-color-bg-primary-enabled)',
3785
+ borderColor: 'var(--ids-comp-tag-text-color-border-primary-enabled)',
3786
+ },
3787
+ '.ids-tag.ids-tag-text.ids-tag-primary:hover': {
3788
+ color: 'var(--ids-comp-tag-text-color-fg-label-primary-hovered)',
3789
+ background: 'var(--ids-comp-tag-text-color-bg-primary-hovered)',
3790
+ borderColor: 'var(--ids-comp-tag-text-color-border-primary-hovered)',
3791
+ },
3792
+ '.ids-tag.ids-tag-text.ids-tag-primary:focus': {
3793
+ color: 'var(--ids-comp-tag-text-color-fg-label-primary-focused)',
3794
+ background: 'var(--ids-comp-tag-text-color-bg-primary-focused)',
3795
+ borderColor: 'var(--ids-comp-tag-text-color-border-primary-focused)',
3796
+ },
3797
+ '.ids-tag.ids-tag-text.ids-tag-primary:active': {
3798
+ color: 'var(--ids-comp-tag-text-color-fg-label-primary-pressed)',
3799
+ background: 'var(--ids-comp-tag-text-color-bg-primary-pressed)',
3800
+ borderColor: 'var(--ids-comp-tag-text-color-border-primary-pressed)',
3801
+ },
3802
+ '.ids-tag.ids-tag-text.ids-tag-primary:disabled': {
3803
+ color: 'var(--ids-comp-tag-text-color-fg-label-primary-disabled)',
3804
+ background: 'var(--ids-comp-tag-text-color-bg-primary-disabled)',
3805
+ borderColor: 'var(--ids-comp-tag-text-color-border-primary-disabled)',
3806
+ },
3807
+ '.ids-tag.ids-tag-text.ids-tag-secondary': {
3808
+ color: 'var(--ids-comp-tag-text-color-fg-label-secondary-enabled)',
3809
+ background: 'var(--ids-comp-tag-text-color-bg-secondary-enabled)',
3810
+ borderColor: 'var(--ids-comp-tag-text-color-border-secondary-enabled)',
3811
+ },
3812
+ '.ids-tag.ids-tag-text.ids-tag-secondary:hover': {
3813
+ color: 'var(--ids-comp-tag-text-color-fg-label-secondary-hovered)',
3814
+ background: 'var(--ids-comp-tag-text-color-bg-secondary-hovered)',
3815
+ borderColor: 'var(--ids-comp-tag-text-color-border-secondary-hovered)',
3816
+ },
3817
+ '.ids-tag.ids-tag-text.ids-tag-secondary:focus': {
3818
+ color: 'var(--ids-comp-tag-text-color-fg-label-secondary-focused)',
3819
+ background: 'var(--ids-comp-tag-text-color-bg-secondary-focused)',
3820
+ borderColor: 'var(--ids-comp-tag-text-color-border-secondary-focused)',
3821
+ },
3822
+ '.ids-tag.ids-tag-text.ids-tag-secondary:active': {
3823
+ color: 'var(--ids-comp-tag-text-color-fg-label-secondary-pressed)',
3824
+ background: 'var(--ids-comp-tag-text-color-bg-secondary-pressed)',
3825
+ borderColor: 'var(--ids-comp-tag-text-color-border-secondary-pressed)',
3826
+ },
3827
+ '.ids-tag.ids-tag-text.ids-tag-secondary:disabled': {
3828
+ color: 'var(--ids-comp-tag-text-color-fg-label-secondary-disabled)',
3829
+ background: 'var(--ids-comp-tag-text-color-bg-secondary-disabled)',
3830
+ borderColor: 'var(--ids-comp-tag-text-color-border-secondary-disabled)',
3831
+ },
3832
+ '.ids-tag.ids-tag-text.ids-tag-brand': {
3833
+ color: 'var(--ids-comp-tag-text-color-fg-label-brand-enabled)',
3834
+ background: 'var(--ids-comp-tag-text-color-bg-brand-enabled)',
3835
+ borderColor: 'var(--ids-comp-tag-text-color-border-brand-enabled)',
3836
+ },
3837
+ '.ids-tag.ids-tag-text.ids-tag-brand:hover': {
3838
+ color: 'var(--ids-comp-tag-text-color-fg-label-brand-hovered)',
3839
+ background: 'var(--ids-comp-tag-text-color-bg-brand-hovered)',
3840
+ borderColor: 'var(--ids-comp-tag-text-color-border-brand-hovered)',
3841
+ },
3842
+ '.ids-tag.ids-tag-text.ids-tag-brand:focus': {
3843
+ color: 'var(--ids-comp-tag-text-color-fg-label-brand-focused)',
3844
+ background: 'var(--ids-comp-tag-text-color-bg-brand-focused)',
3845
+ borderColor: 'var(--ids-comp-tag-text-color-border-brand-focused)',
3846
+ },
3847
+ '.ids-tag.ids-tag-text.ids-tag-brand:active': {
3848
+ color: 'var(--ids-comp-tag-text-color-fg-label-brand-pressed)',
3849
+ background: 'var(--ids-comp-tag-text-color-bg-brand-pressed)',
3850
+ borderColor: 'var(--ids-comp-tag-text-color-border-brand-pressed)',
3851
+ },
3852
+ '.ids-tag.ids-tag-text.ids-tag-brand:disabled': {
3853
+ color: 'var(--ids-comp-tag-text-color-fg-label-brand-disabled)',
3854
+ background: 'var(--ids-comp-tag-text-color-bg-brand-disabled)',
3855
+ borderColor: 'var(--ids-comp-tag-text-color-border-brand-disabled)',
3856
+ },
3857
+ '.ids-tag.ids-tag-text.ids-tag-error': {
3858
+ color: 'var(--ids-comp-tag-text-color-fg-label-error-enabled)',
3859
+ background: 'var(--ids-comp-tag-text-color-bg-error-enabled)',
3860
+ borderColor: 'var(--ids-comp-tag-text-color-border-error-enabled)',
3861
+ },
3862
+ '.ids-tag.ids-tag-text.ids-tag-error:hover': {
3863
+ color: 'var(--ids-comp-tag-text-color-fg-label-error-hovered)',
3864
+ background: 'var(--ids-comp-tag-text-color-bg-error-hovered)',
3865
+ borderColor: 'var(--ids-comp-tag-text-color-border-error-hovered)',
3866
+ },
3867
+ '.ids-tag.ids-tag-text.ids-tag-error:focus': {
3868
+ color: 'var(--ids-comp-tag-text-color-fg-label-error-focused)',
3869
+ background: 'var(--ids-comp-tag-text-color-bg-error-focused)',
3870
+ borderColor: 'var(--ids-comp-tag-text-color-border-error-focused)',
3871
+ },
3872
+ '.ids-tag.ids-tag-text.ids-tag-error:active': {
3873
+ color: 'var(--ids-comp-tag-text-color-fg-label-error-pressed)',
3874
+ background: 'var(--ids-comp-tag-text-color-bg-error-pressed)',
3875
+ borderColor: 'var(--ids-comp-tag-text-color-border-error-pressed)',
3876
+ },
3877
+ '.ids-tag.ids-tag-text.ids-tag-error:disabled': {
3878
+ color: 'var(--ids-comp-tag-text-color-fg-label-error-disabled)',
3879
+ background: 'var(--ids-comp-tag-text-color-bg-error-disabled)',
3880
+ borderColor: 'var(--ids-comp-tag-text-color-border-error-disabled)',
3881
+ },
3882
+ '.ids-tag.ids-tag-text.ids-tag-success': {
3883
+ color: 'var(--ids-comp-tag-text-color-fg-label-success-enabled)',
3884
+ background: 'var(--ids-comp-tag-text-color-bg-success-enabled)',
3885
+ borderColor: 'var(--ids-comp-tag-text-color-border-success-enabled)',
3886
+ },
3887
+ '.ids-tag.ids-tag-text.ids-tag-success:hover': {
3888
+ color: 'var(--ids-comp-tag-text-color-fg-label-success-hovered)',
3889
+ background: 'var(--ids-comp-tag-text-color-bg-success-hovered)',
3890
+ borderColor: 'var(--ids-comp-tag-text-color-border-success-hovered)',
3891
+ },
3892
+ '.ids-tag.ids-tag-text.ids-tag-success:focus': {
3893
+ color: 'var(--ids-comp-tag-text-color-fg-label-success-focused)',
3894
+ background: 'var(--ids-comp-tag-text-color-bg-success-focused)',
3895
+ borderColor: 'var(--ids-comp-tag-text-color-border-success-focused)',
3896
+ },
3897
+ '.ids-tag.ids-tag-text.ids-tag-success:active': {
3898
+ color: 'var(--ids-comp-tag-text-color-fg-label-success-pressed)',
3899
+ background: 'var(--ids-comp-tag-text-color-bg-success-pressed)',
3900
+ borderColor: 'var(--ids-comp-tag-text-color-border-success-pressed)',
3901
+ },
3902
+ '.ids-tag.ids-tag-text.ids-tag-success:disabled': {
3903
+ color: 'var(--ids-comp-tag-text-color-fg-label-success-disabled)',
3904
+ background: 'var(--ids-comp-tag-text-color-bg-success-disabled)',
3905
+ borderColor: 'var(--ids-comp-tag-text-color-border-success-disabled)',
3906
+ },
3907
+ '.ids-tag.ids-tag-text.ids-tag-warning': {
3908
+ color: 'var(--ids-comp-tag-text-color-fg-label-warning-enabled)',
3909
+ background: 'var(--ids-comp-tag-text-color-bg-warning-enabled)',
3910
+ borderColor: 'var(--ids-comp-tag-text-color-border-warning-enabled)',
3911
+ },
3912
+ '.ids-tag.ids-tag-text.ids-tag-warning:hover': {
3913
+ color: 'var(--ids-comp-tag-text-color-fg-label-warning-hovered)',
3914
+ background: 'var(--ids-comp-tag-text-color-bg-warning-hovered)',
3915
+ borderColor: 'var(--ids-comp-tag-text-color-border-warning-hovered)',
3916
+ },
3917
+ '.ids-tag.ids-tag-text.ids-tag-warning:focus': {
3918
+ color: 'var(--ids-comp-tag-text-color-fg-label-warning-focused)',
3919
+ background: 'var(--ids-comp-tag-text-color-bg-warning-focused)',
3920
+ borderColor: 'var(--ids-comp-tag-text-color-border-warning-focused)',
3921
+ },
3922
+ '.ids-tag.ids-tag-text.ids-tag-warning:active': {
3923
+ color: 'var(--ids-comp-tag-text-color-fg-label-warning-pressed)',
3924
+ background: 'var(--ids-comp-tag-text-color-bg-warning-pressed)',
3925
+ borderColor: 'var(--ids-comp-tag-text-color-border-warning-pressed)',
3926
+ },
3927
+ '.ids-tag.ids-tag-text.ids-tag-warning:disabled': {
3928
+ color: 'var(--ids-comp-tag-text-color-fg-label-warning-disabled)',
3929
+ background: 'var(--ids-comp-tag-text-color-bg-warning-disabled)',
3930
+ borderColor: 'var(--ids-comp-tag-text-color-border-warning-disabled)',
3931
+ },
3932
+ '.ids-tag.ids-tag-text.ids-tag-light': {
3933
+ color: 'var(--ids-comp-tag-text-color-fg-label-light-enabled)',
3934
+ background: 'var(--ids-comp-tag-text-color-bg-light-enabled)',
3935
+ borderColor: 'var(--ids-comp-tag-text-color-border-light-enabled)',
3936
+ },
3937
+ '.ids-tag.ids-tag-text.ids-tag-light:hover': {
3938
+ color: 'var(--ids-comp-tag-text-color-fg-label-light-hovered)',
3939
+ background: 'var(--ids-comp-tag-text-color-bg-light-hovered)',
3940
+ borderColor: 'var(--ids-comp-tag-text-color-border-light-hovered)',
3941
+ },
3942
+ '.ids-tag.ids-tag-text.ids-tag-light:focus': {
3943
+ color: 'var(--ids-comp-tag-text-color-fg-label-light-focused)',
3944
+ background: 'var(--ids-comp-tag-text-color-bg-light-focused)',
3945
+ borderColor: 'var(--ids-comp-tag-text-color-border-light-focused)',
3946
+ },
3947
+ '.ids-tag.ids-tag-text.ids-tag-light:active': {
3948
+ color: 'var(--ids-comp-tag-text-color-fg-label-light-pressed)',
3949
+ background: 'var(--ids-comp-tag-text-color-bg-light-pressed)',
3950
+ borderColor: 'var(--ids-comp-tag-text-color-border-light-pressed)',
3951
+ },
3952
+ '.ids-tag.ids-tag-text.ids-tag-light:disabled': {
3953
+ color: 'var(--ids-comp-tag-text-color-fg-label-light-disabled)',
3954
+ background: 'var(--ids-comp-tag-text-color-bg-light-disabled)',
3955
+ borderColor: 'var(--ids-comp-tag-text-color-border-light-disabled)',
3956
+ },
3957
+ '.ids-tag.ids-tag-text.ids-tag-dark': {
3958
+ color: 'var(--ids-comp-tag-text-color-fg-label-dark-enabled)',
3959
+ background: 'var(--ids-comp-tag-text-color-bg-dark-enabled)',
3960
+ borderColor: 'var(--ids-comp-tag-text-color-border-dark-enabled)',
3961
+ },
3962
+ '.ids-tag.ids-tag-text.ids-tag-dark:hover': {
3963
+ color: 'var(--ids-comp-tag-text-color-fg-label-dark-hovered)',
3964
+ background: 'var(--ids-comp-tag-text-color-bg-dark-hovered)',
3965
+ borderColor: 'var(--ids-comp-tag-text-color-border-dark-hovered)',
3966
+ },
3967
+ '.ids-tag.ids-tag-text.ids-tag-dark:focus': {
3968
+ color: 'var(--ids-comp-tag-text-color-fg-label-dark-focused)',
3969
+ background: 'var(--ids-comp-tag-text-color-bg-dark-focused)',
3970
+ borderColor: 'var(--ids-comp-tag-text-color-border-dark-focused)',
3971
+ },
3972
+ '.ids-tag.ids-tag-text.ids-tag-dark:active': {
3973
+ color: 'var(--ids-comp-tag-text-color-fg-label-dark-pressed)',
3974
+ background: 'var(--ids-comp-tag-text-color-bg-dark-pressed)',
3975
+ borderColor: 'var(--ids-comp-tag-text-color-border-dark-pressed)',
3976
+ },
3977
+ '.ids-tag.ids-tag-text.ids-tag-dark:disabled': {
3978
+ color: 'var(--ids-comp-tag-text-color-fg-label-dark-disabled)',
3979
+ background: 'var(--ids-comp-tag-text-color-bg-dark-disabled)',
3980
+ borderColor: 'var(--ids-comp-tag-text-color-border-dark-disabled)',
3981
+ },
3982
+ '.ids-tag.ids-tag-text.ids-tag-surface': {
3983
+ color: 'var(--ids-comp-tag-text-color-fg-label-surface-enabled)',
3984
+ background: 'var(--ids-comp-tag-text-color-bg-surface-enabled)',
3985
+ borderColor: 'var(--ids-comp-tag-text-color-border-surface-enabled)',
3986
+ },
3987
+ '.ids-tag.ids-tag-text.ids-tag-surface:hover': {
3988
+ color: 'var(--ids-comp-tag-text-color-fg-label-surface-hovered)',
3989
+ background: 'var(--ids-comp-tag-text-color-bg-surface-hovered)',
3990
+ borderColor: 'var(--ids-comp-tag-text-color-border-surface-hovered)',
3991
+ },
3992
+ '.ids-tag.ids-tag-text.ids-tag-surface:focus': {
3993
+ color: 'var(--ids-comp-tag-text-color-fg-label-surface-focused)',
3994
+ background: 'var(--ids-comp-tag-text-color-bg-surface-focused)',
3995
+ borderColor: 'var(--ids-comp-tag-text-color-border-surface-focused)',
3996
+ },
3997
+ '.ids-tag.ids-tag-text.ids-tag-surface:active': {
3998
+ color: 'var(--ids-comp-tag-text-color-fg-label-surface-pressed)',
3999
+ background: 'var(--ids-comp-tag-text-color-bg-surface-pressed)',
4000
+ borderColor: 'var(--ids-comp-tag-text-color-border-surface-pressed)',
4001
+ },
4002
+ '.ids-tag.ids-tag-text.ids-tag-surface:disabled': {
4003
+ color: 'var(--ids-comp-tag-text-color-fg-label-surface-disabled)',
4004
+ background: 'var(--ids-comp-tag-text-color-bg-surface-disabled)',
4005
+ borderColor: 'var(--ids-comp-tag-text-color-border-surface-disabled)',
4006
+ },
4007
+ };
4008
+
4009
+ addComponents(cssObj);
4010
+ };
4011
+ };