@i-cell/ids-styles 0.0.1

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.
@@ -0,0 +1,761 @@
1
+ .ids-tag {
2
+ flex-shrink: 0;
3
+ width: fit-content;
4
+ display: inline-flex;
5
+ align-items: center;
6
+ justify-content: center;
7
+ }
8
+ .ids-tag.ids-tag-compact {
9
+ line-height: 16px;
10
+ font-size: 12px;
11
+ font-style: normal;
12
+ font-weight: 500;
13
+ letter-spacing: 0.5px;
14
+ }
15
+ .ids-tag.ids-tag-comfortable {
16
+ line-height: 20px;
17
+ font-size: 14px;
18
+ font-style: normal;
19
+ font-weight: 500;
20
+ letter-spacing: 0.1px;
21
+ }
22
+ .ids-tag:focus {
23
+ outline-offset: 2px;
24
+ outline: var(--ids-comp-tag-focused-outline-size-outline) solid var(--ids-comp-tag-focused-outline-color-dark-focused);
25
+ }
26
+ .ids-tag:focus.ids-tag-light {
27
+ outline-color: var(--ids-comp-tag-focused-outline-color-light-focused);
28
+ }
29
+ .ids-tag:active {
30
+ outline: none;
31
+ }
32
+ .ids-tag *[icon-leading],
33
+ .ids-tag *[icon-trailing] {
34
+ gap: 10px;
35
+ display: flex;
36
+ align-items: center;
37
+ justify-content: center;
38
+ }
39
+ .ids-tag.ids-tag-compact {
40
+ gap: var(--ids-comp-size-tag-size-gap-compact, 4px);
41
+ height: var(--ids-comp-size-tag-size-height-compact, 32px);
42
+ padding: var(--ids-comp-size-tag-size-padding-y-compact, 8px) var(--ids-comp-size-tag-size-padding-x-compact, 8px);
43
+ border-radius: var(--ids-comp-size-tag-size-border-radius-compact, 1000px);
44
+ border: var(--ids-comp-size-tag-size-border-compact, 1px) solid;
45
+ }
46
+ .ids-tag.ids-tag-compact *[icon-leading],
47
+ .ids-tag.ids-tag-compact *[icon-trailing] {
48
+ width: var(--ids-comp-size-tag-size-icon-compact);
49
+ height: var(--ids-comp-size-tag-size-icon-compact);
50
+ }
51
+ .ids-tag.ids-tag-comfortable {
52
+ gap: var(--ids-comp-size-tag-size-gap-comfortable, 4px);
53
+ height: var(--ids-comp-size-tag-size-height-comfortable, 32px);
54
+ padding: var(--ids-comp-size-tag-size-padding-y-comfortable, 8px) var(--ids-comp-size-tag-size-padding-x-comfortable, 8px);
55
+ border-radius: var(--ids-comp-size-tag-size-border-radius-comfortable, 1000px);
56
+ border: var(--ids-comp-size-tag-size-border-comfortable, 1px) solid;
57
+ }
58
+ .ids-tag.ids-tag-comfortable *[icon-leading],
59
+ .ids-tag.ids-tag-comfortable *[icon-trailing] {
60
+ width: var(--ids-comp-size-tag-size-icon-comfortable);
61
+ height: var(--ids-comp-size-tag-size-icon-comfortable);
62
+ }
63
+ .ids-tag.ids-tag-spacious {
64
+ gap: var(--ids-comp-size-tag-size-gap-spacious, 4px);
65
+ height: var(--ids-comp-size-tag-size-height-spacious, 32px);
66
+ padding: var(--ids-comp-size-tag-size-padding-y-spacious, 8px) var(--ids-comp-size-tag-size-padding-x-spacious, 8px);
67
+ border-radius: var(--ids-comp-size-tag-size-border-radius-spacious, 1000px);
68
+ border: var(--ids-comp-size-tag-size-border-spacious, 1px) solid;
69
+ }
70
+ .ids-tag.ids-tag-spacious *[icon-leading],
71
+ .ids-tag.ids-tag-spacious *[icon-trailing] {
72
+ width: var(--ids-comp-size-tag-size-icon-spacious);
73
+ height: var(--ids-comp-size-tag-size-icon-spacious);
74
+ }
75
+ .ids-tag.ids-tag-dense {
76
+ gap: var(--ids-comp-size-tag-size-gap-dense, 4px);
77
+ height: var(--ids-comp-size-tag-size-height-dense, 32px);
78
+ padding: var(--ids-comp-size-tag-size-padding-y-dense, 8px) var(--ids-comp-size-tag-size-padding-x-dense, 8px);
79
+ border-radius: var(--ids-comp-size-tag-size-border-radius-dense, 1000px);
80
+ border: var(--ids-comp-size-tag-size-border-dense, 1px) solid;
81
+ }
82
+ .ids-tag.ids-tag-dense *[icon-leading],
83
+ .ids-tag.ids-tag-dense *[icon-trailing] {
84
+ width: var(--ids-comp-size-tag-size-icon-dense);
85
+ height: var(--ids-comp-size-tag-size-icon-dense);
86
+ }
87
+ .ids-tag.ids-tag-filled.ids-tag-primary {
88
+ color: var(--ids-comp-tag-filled-color-fg-label-primary-enabled);
89
+ background: var(--ids-comp-tag-filled-color-bg-primary-enabled);
90
+ border-color: var(--ids-comp-tag-filled-color-border-primary-enabled, rgba(255, 255, 255, 0));
91
+ }
92
+ .ids-tag.ids-tag-filled.ids-tag-primary:hover {
93
+ color: var(--ids-comp-tag-filled-color-fg-label-primary-hovered);
94
+ background: var(--ids-comp-tag-filled-color-bg-primary-hovered);
95
+ border-color: var(--ids-comp-tag-filled-color-border-primary-hovered, rgba(255, 255, 255, 0));
96
+ }
97
+ .ids-tag.ids-tag-filled.ids-tag-primary:focus {
98
+ color: var(--ids-comp-tag-filled-color-fg-label-primary-focused);
99
+ background: var(--ids-comp-tag-filled-color-bg-primary-focused);
100
+ border-color: var(--ids-comp-tag-filled-color-border-primary-focused, rgba(255, 255, 255, 0));
101
+ }
102
+ .ids-tag.ids-tag-filled.ids-tag-primary:active {
103
+ color: var(--ids-comp-tag-filled-color-fg-label-primary-pressed);
104
+ background: var(--ids-comp-tag-filled-color-bg-primary-pressed);
105
+ border-color: var(--ids-comp-tag-filled-color-border-primary-pressed, rgba(255, 255, 255, 0));
106
+ }
107
+ .ids-tag.ids-tag-filled.ids-tag-primary:disabled {
108
+ color: var(--ids-comp-tag-filled-color-fg-label-primary-disabled);
109
+ background: var(--ids-comp-tag-filled-color-bg-primary-disabled);
110
+ border-color: var(--ids-comp-tag-filled-color-border-primary-disabled, rgba(255, 255, 255, 0));
111
+ }
112
+ .ids-tag.ids-tag-filled.ids-tag-secondary {
113
+ color: var(--ids-comp-tag-filled-color-fg-label-secondary-enabled);
114
+ background: var(--ids-comp-tag-filled-color-bg-secondary-enabled);
115
+ border-color: var(--ids-comp-tag-filled-color-border-secondary-enabled, rgba(255, 255, 255, 0));
116
+ }
117
+ .ids-tag.ids-tag-filled.ids-tag-secondary:hover {
118
+ color: var(--ids-comp-tag-filled-color-fg-label-secondary-hovered);
119
+ background: var(--ids-comp-tag-filled-color-bg-secondary-hovered);
120
+ border-color: var(--ids-comp-tag-filled-color-border-secondary-hovered, rgba(255, 255, 255, 0));
121
+ }
122
+ .ids-tag.ids-tag-filled.ids-tag-secondary:focus {
123
+ color: var(--ids-comp-tag-filled-color-fg-label-secondary-focused);
124
+ background: var(--ids-comp-tag-filled-color-bg-secondary-focused);
125
+ border-color: var(--ids-comp-tag-filled-color-border-secondary-focused, rgba(255, 255, 255, 0));
126
+ }
127
+ .ids-tag.ids-tag-filled.ids-tag-secondary:active {
128
+ color: var(--ids-comp-tag-filled-color-fg-label-secondary-pressed);
129
+ background: var(--ids-comp-tag-filled-color-bg-secondary-pressed);
130
+ border-color: var(--ids-comp-tag-filled-color-border-secondary-pressed, rgba(255, 255, 255, 0));
131
+ }
132
+ .ids-tag.ids-tag-filled.ids-tag-secondary:disabled {
133
+ color: var(--ids-comp-tag-filled-color-fg-label-secondary-disabled);
134
+ background: var(--ids-comp-tag-filled-color-bg-secondary-disabled);
135
+ border-color: var(--ids-comp-tag-filled-color-border-secondary-disabled, rgba(255, 255, 255, 0));
136
+ }
137
+ .ids-tag.ids-tag-filled.ids-tag-brand {
138
+ color: var(--ids-comp-tag-filled-color-fg-label-brand-enabled);
139
+ background: var(--ids-comp-tag-filled-color-bg-brand-enabled);
140
+ border-color: var(--ids-comp-tag-filled-color-border-brand-enabled, rgba(255, 255, 255, 0));
141
+ }
142
+ .ids-tag.ids-tag-filled.ids-tag-brand:hover {
143
+ color: var(--ids-comp-tag-filled-color-fg-label-brand-hovered);
144
+ background: var(--ids-comp-tag-filled-color-bg-brand-hovered);
145
+ border-color: var(--ids-comp-tag-filled-color-border-brand-hovered, rgba(255, 255, 255, 0));
146
+ }
147
+ .ids-tag.ids-tag-filled.ids-tag-brand:focus {
148
+ color: var(--ids-comp-tag-filled-color-fg-label-brand-focused);
149
+ background: var(--ids-comp-tag-filled-color-bg-brand-focused);
150
+ border-color: var(--ids-comp-tag-filled-color-border-brand-focused, rgba(255, 255, 255, 0));
151
+ }
152
+ .ids-tag.ids-tag-filled.ids-tag-brand:active {
153
+ color: var(--ids-comp-tag-filled-color-fg-label-brand-pressed);
154
+ background: var(--ids-comp-tag-filled-color-bg-brand-pressed);
155
+ border-color: var(--ids-comp-tag-filled-color-border-brand-pressed, rgba(255, 255, 255, 0));
156
+ }
157
+ .ids-tag.ids-tag-filled.ids-tag-brand:disabled {
158
+ color: var(--ids-comp-tag-filled-color-fg-label-brand-disabled);
159
+ background: var(--ids-comp-tag-filled-color-bg-brand-disabled);
160
+ border-color: var(--ids-comp-tag-filled-color-border-brand-disabled, rgba(255, 255, 255, 0));
161
+ }
162
+ .ids-tag.ids-tag-filled.ids-tag-error {
163
+ color: var(--ids-comp-tag-filled-color-fg-label-error-enabled);
164
+ background: var(--ids-comp-tag-filled-color-bg-error-enabled);
165
+ border-color: var(--ids-comp-tag-filled-color-border-error-enabled, rgba(255, 255, 255, 0));
166
+ }
167
+ .ids-tag.ids-tag-filled.ids-tag-error:hover {
168
+ color: var(--ids-comp-tag-filled-color-fg-label-error-hovered);
169
+ background: var(--ids-comp-tag-filled-color-bg-error-hovered);
170
+ border-color: var(--ids-comp-tag-filled-color-border-error-hovered, rgba(255, 255, 255, 0));
171
+ }
172
+ .ids-tag.ids-tag-filled.ids-tag-error:focus {
173
+ color: var(--ids-comp-tag-filled-color-fg-label-error-focused);
174
+ background: var(--ids-comp-tag-filled-color-bg-error-focused);
175
+ border-color: var(--ids-comp-tag-filled-color-border-error-focused, rgba(255, 255, 255, 0));
176
+ }
177
+ .ids-tag.ids-tag-filled.ids-tag-error:active {
178
+ color: var(--ids-comp-tag-filled-color-fg-label-error-pressed);
179
+ background: var(--ids-comp-tag-filled-color-bg-error-pressed);
180
+ border-color: var(--ids-comp-tag-filled-color-border-error-pressed, rgba(255, 255, 255, 0));
181
+ }
182
+ .ids-tag.ids-tag-filled.ids-tag-error:disabled {
183
+ color: var(--ids-comp-tag-filled-color-fg-label-error-disabled);
184
+ background: var(--ids-comp-tag-filled-color-bg-error-disabled);
185
+ border-color: var(--ids-comp-tag-filled-color-border-error-disabled, rgba(255, 255, 255, 0));
186
+ }
187
+ .ids-tag.ids-tag-filled.ids-tag-success {
188
+ color: var(--ids-comp-tag-filled-color-fg-label-success-enabled);
189
+ background: var(--ids-comp-tag-filled-color-bg-success-enabled);
190
+ border-color: var(--ids-comp-tag-filled-color-border-success-enabled, rgba(255, 255, 255, 0));
191
+ }
192
+ .ids-tag.ids-tag-filled.ids-tag-success:hover {
193
+ color: var(--ids-comp-tag-filled-color-fg-label-success-hovered);
194
+ background: var(--ids-comp-tag-filled-color-bg-success-hovered);
195
+ border-color: var(--ids-comp-tag-filled-color-border-success-hovered, rgba(255, 255, 255, 0));
196
+ }
197
+ .ids-tag.ids-tag-filled.ids-tag-success:focus {
198
+ color: var(--ids-comp-tag-filled-color-fg-label-success-focused);
199
+ background: var(--ids-comp-tag-filled-color-bg-success-focused);
200
+ border-color: var(--ids-comp-tag-filled-color-border-success-focused, rgba(255, 255, 255, 0));
201
+ }
202
+ .ids-tag.ids-tag-filled.ids-tag-success:active {
203
+ color: var(--ids-comp-tag-filled-color-fg-label-success-pressed);
204
+ background: var(--ids-comp-tag-filled-color-bg-success-pressed);
205
+ border-color: var(--ids-comp-tag-filled-color-border-success-pressed, rgba(255, 255, 255, 0));
206
+ }
207
+ .ids-tag.ids-tag-filled.ids-tag-success:disabled {
208
+ color: var(--ids-comp-tag-filled-color-fg-label-success-disabled);
209
+ background: var(--ids-comp-tag-filled-color-bg-success-disabled);
210
+ border-color: var(--ids-comp-tag-filled-color-border-success-disabled, rgba(255, 255, 255, 0));
211
+ }
212
+ .ids-tag.ids-tag-filled.ids-tag-warning {
213
+ color: var(--ids-comp-tag-filled-color-fg-label-warning-enabled);
214
+ background: var(--ids-comp-tag-filled-color-bg-warning-enabled);
215
+ border-color: var(--ids-comp-tag-filled-color-border-warning-enabled, rgba(255, 255, 255, 0));
216
+ }
217
+ .ids-tag.ids-tag-filled.ids-tag-warning:hover {
218
+ color: var(--ids-comp-tag-filled-color-fg-label-warning-hovered);
219
+ background: var(--ids-comp-tag-filled-color-bg-warning-hovered);
220
+ border-color: var(--ids-comp-tag-filled-color-border-warning-hovered, rgba(255, 255, 255, 0));
221
+ }
222
+ .ids-tag.ids-tag-filled.ids-tag-warning:focus {
223
+ color: var(--ids-comp-tag-filled-color-fg-label-warning-focused);
224
+ background: var(--ids-comp-tag-filled-color-bg-warning-focused);
225
+ border-color: var(--ids-comp-tag-filled-color-border-warning-focused, rgba(255, 255, 255, 0));
226
+ }
227
+ .ids-tag.ids-tag-filled.ids-tag-warning:active {
228
+ color: var(--ids-comp-tag-filled-color-fg-label-warning-pressed);
229
+ background: var(--ids-comp-tag-filled-color-bg-warning-pressed);
230
+ border-color: var(--ids-comp-tag-filled-color-border-warning-pressed, rgba(255, 255, 255, 0));
231
+ }
232
+ .ids-tag.ids-tag-filled.ids-tag-warning:disabled {
233
+ color: var(--ids-comp-tag-filled-color-fg-label-warning-disabled);
234
+ background: var(--ids-comp-tag-filled-color-bg-warning-disabled);
235
+ border-color: var(--ids-comp-tag-filled-color-border-warning-disabled, rgba(255, 255, 255, 0));
236
+ }
237
+ .ids-tag.ids-tag-filled.ids-tag-light {
238
+ color: var(--ids-comp-tag-filled-color-fg-label-light-enabled);
239
+ background: var(--ids-comp-tag-filled-color-bg-light-enabled);
240
+ border-color: var(--ids-comp-tag-filled-color-border-light-enabled, rgba(255, 255, 255, 0));
241
+ }
242
+ .ids-tag.ids-tag-filled.ids-tag-light:hover {
243
+ color: var(--ids-comp-tag-filled-color-fg-label-light-hovered);
244
+ background: var(--ids-comp-tag-filled-color-bg-light-hovered);
245
+ border-color: var(--ids-comp-tag-filled-color-border-light-hovered, rgba(255, 255, 255, 0));
246
+ }
247
+ .ids-tag.ids-tag-filled.ids-tag-light:focus {
248
+ color: var(--ids-comp-tag-filled-color-fg-label-light-focused);
249
+ background: var(--ids-comp-tag-filled-color-bg-light-focused);
250
+ border-color: var(--ids-comp-tag-filled-color-border-light-focused, rgba(255, 255, 255, 0));
251
+ }
252
+ .ids-tag.ids-tag-filled.ids-tag-light:active {
253
+ color: var(--ids-comp-tag-filled-color-fg-label-light-pressed);
254
+ background: var(--ids-comp-tag-filled-color-bg-light-pressed);
255
+ border-color: var(--ids-comp-tag-filled-color-border-light-pressed, rgba(255, 255, 255, 0));
256
+ }
257
+ .ids-tag.ids-tag-filled.ids-tag-light:disabled {
258
+ color: var(--ids-comp-tag-filled-color-fg-label-light-disabled);
259
+ background: var(--ids-comp-tag-filled-color-bg-light-disabled);
260
+ border-color: var(--ids-comp-tag-filled-color-border-light-disabled, rgba(255, 255, 255, 0));
261
+ }
262
+ .ids-tag.ids-tag-filled.ids-tag-dark {
263
+ color: var(--ids-comp-tag-filled-color-fg-label-dark-enabled);
264
+ background: var(--ids-comp-tag-filled-color-bg-dark-enabled);
265
+ border-color: var(--ids-comp-tag-filled-color-border-dark-enabled, rgba(255, 255, 255, 0));
266
+ }
267
+ .ids-tag.ids-tag-filled.ids-tag-dark:hover {
268
+ color: var(--ids-comp-tag-filled-color-fg-label-dark-hovered);
269
+ background: var(--ids-comp-tag-filled-color-bg-dark-hovered);
270
+ border-color: var(--ids-comp-tag-filled-color-border-dark-hovered, rgba(255, 255, 255, 0));
271
+ }
272
+ .ids-tag.ids-tag-filled.ids-tag-dark:focus {
273
+ color: var(--ids-comp-tag-filled-color-fg-label-dark-focused);
274
+ background: var(--ids-comp-tag-filled-color-bg-dark-focused);
275
+ border-color: var(--ids-comp-tag-filled-color-border-dark-focused, rgba(255, 255, 255, 0));
276
+ }
277
+ .ids-tag.ids-tag-filled.ids-tag-dark:active {
278
+ color: var(--ids-comp-tag-filled-color-fg-label-dark-pressed);
279
+ background: var(--ids-comp-tag-filled-color-bg-dark-pressed);
280
+ border-color: var(--ids-comp-tag-filled-color-border-dark-pressed, rgba(255, 255, 255, 0));
281
+ }
282
+ .ids-tag.ids-tag-filled.ids-tag-dark:disabled {
283
+ color: var(--ids-comp-tag-filled-color-fg-label-dark-disabled);
284
+ background: var(--ids-comp-tag-filled-color-bg-dark-disabled);
285
+ border-color: var(--ids-comp-tag-filled-color-border-dark-disabled, rgba(255, 255, 255, 0));
286
+ }
287
+ .ids-tag.ids-tag-filled.ids-tag-surface {
288
+ color: var(--ids-comp-tag-filled-color-fg-label-surface-enabled);
289
+ background: var(--ids-comp-tag-filled-color-bg-surface-enabled);
290
+ border-color: var(--ids-comp-tag-filled-color-border-surface-enabled, rgba(255, 255, 255, 0));
291
+ }
292
+ .ids-tag.ids-tag-filled.ids-tag-surface:hover {
293
+ color: var(--ids-comp-tag-filled-color-fg-label-surface-hovered);
294
+ background: var(--ids-comp-tag-filled-color-bg-surface-hovered);
295
+ border-color: var(--ids-comp-tag-filled-color-border-surface-hovered, rgba(255, 255, 255, 0));
296
+ }
297
+ .ids-tag.ids-tag-filled.ids-tag-surface:focus {
298
+ color: var(--ids-comp-tag-filled-color-fg-label-surface-focused);
299
+ background: var(--ids-comp-tag-filled-color-bg-surface-focused);
300
+ border-color: var(--ids-comp-tag-filled-color-border-surface-focused, rgba(255, 255, 255, 0));
301
+ }
302
+ .ids-tag.ids-tag-filled.ids-tag-surface:active {
303
+ color: var(--ids-comp-tag-filled-color-fg-label-surface-pressed);
304
+ background: var(--ids-comp-tag-filled-color-bg-surface-pressed);
305
+ border-color: var(--ids-comp-tag-filled-color-border-surface-pressed, rgba(255, 255, 255, 0));
306
+ }
307
+ .ids-tag.ids-tag-filled.ids-tag-surface:disabled {
308
+ color: var(--ids-comp-tag-filled-color-fg-label-surface-disabled);
309
+ background: var(--ids-comp-tag-filled-color-bg-surface-disabled);
310
+ border-color: var(--ids-comp-tag-filled-color-border-surface-disabled, rgba(255, 255, 255, 0));
311
+ }
312
+ .ids-tag.ids-tag-outlined.ids-tag-primary {
313
+ color: var(--ids-comp-tag-outlined-color-fg-label-primary-enabled);
314
+ background: var(--ids-comp-tag-outlined-color-bg-primary-enabled);
315
+ border-color: var(--ids-comp-tag-outlined-color-border-primary-enabled, rgba(255, 255, 255, 0));
316
+ }
317
+ .ids-tag.ids-tag-outlined.ids-tag-primary:hover {
318
+ color: var(--ids-comp-tag-outlined-color-fg-label-primary-hovered);
319
+ background: var(--ids-comp-tag-outlined-color-bg-primary-hovered);
320
+ border-color: var(--ids-comp-tag-outlined-color-border-primary-hovered, rgba(255, 255, 255, 0));
321
+ }
322
+ .ids-tag.ids-tag-outlined.ids-tag-primary:focus {
323
+ color: var(--ids-comp-tag-outlined-color-fg-label-primary-focused);
324
+ background: var(--ids-comp-tag-outlined-color-bg-primary-focused);
325
+ border-color: var(--ids-comp-tag-outlined-color-border-primary-focused, rgba(255, 255, 255, 0));
326
+ }
327
+ .ids-tag.ids-tag-outlined.ids-tag-primary:active {
328
+ color: var(--ids-comp-tag-outlined-color-fg-label-primary-pressed);
329
+ background: var(--ids-comp-tag-outlined-color-bg-primary-pressed);
330
+ border-color: var(--ids-comp-tag-outlined-color-border-primary-pressed, rgba(255, 255, 255, 0));
331
+ }
332
+ .ids-tag.ids-tag-outlined.ids-tag-primary:disabled {
333
+ color: var(--ids-comp-tag-outlined-color-fg-label-primary-disabled);
334
+ background: var(--ids-comp-tag-outlined-color-bg-primary-disabled);
335
+ border-color: var(--ids-comp-tag-outlined-color-border-primary-disabled, rgba(255, 255, 255, 0));
336
+ }
337
+ .ids-tag.ids-tag-outlined.ids-tag-secondary {
338
+ color: var(--ids-comp-tag-outlined-color-fg-label-secondary-enabled);
339
+ background: var(--ids-comp-tag-outlined-color-bg-secondary-enabled);
340
+ border-color: var(--ids-comp-tag-outlined-color-border-secondary-enabled, rgba(255, 255, 255, 0));
341
+ }
342
+ .ids-tag.ids-tag-outlined.ids-tag-secondary:hover {
343
+ color: var(--ids-comp-tag-outlined-color-fg-label-secondary-hovered);
344
+ background: var(--ids-comp-tag-outlined-color-bg-secondary-hovered);
345
+ border-color: var(--ids-comp-tag-outlined-color-border-secondary-hovered, rgba(255, 255, 255, 0));
346
+ }
347
+ .ids-tag.ids-tag-outlined.ids-tag-secondary:focus {
348
+ color: var(--ids-comp-tag-outlined-color-fg-label-secondary-focused);
349
+ background: var(--ids-comp-tag-outlined-color-bg-secondary-focused);
350
+ border-color: var(--ids-comp-tag-outlined-color-border-secondary-focused, rgba(255, 255, 255, 0));
351
+ }
352
+ .ids-tag.ids-tag-outlined.ids-tag-secondary:active {
353
+ color: var(--ids-comp-tag-outlined-color-fg-label-secondary-pressed);
354
+ background: var(--ids-comp-tag-outlined-color-bg-secondary-pressed);
355
+ border-color: var(--ids-comp-tag-outlined-color-border-secondary-pressed, rgba(255, 255, 255, 0));
356
+ }
357
+ .ids-tag.ids-tag-outlined.ids-tag-secondary:disabled {
358
+ color: var(--ids-comp-tag-outlined-color-fg-label-secondary-disabled);
359
+ background: var(--ids-comp-tag-outlined-color-bg-secondary-disabled);
360
+ border-color: var(--ids-comp-tag-outlined-color-border-secondary-disabled, rgba(255, 255, 255, 0));
361
+ }
362
+ .ids-tag.ids-tag-outlined.ids-tag-brand {
363
+ color: var(--ids-comp-tag-outlined-color-fg-label-brand-enabled);
364
+ background: var(--ids-comp-tag-outlined-color-bg-brand-enabled);
365
+ border-color: var(--ids-comp-tag-outlined-color-border-brand-enabled, rgba(255, 255, 255, 0));
366
+ }
367
+ .ids-tag.ids-tag-outlined.ids-tag-brand:hover {
368
+ color: var(--ids-comp-tag-outlined-color-fg-label-brand-hovered);
369
+ background: var(--ids-comp-tag-outlined-color-bg-brand-hovered);
370
+ border-color: var(--ids-comp-tag-outlined-color-border-brand-hovered, rgba(255, 255, 255, 0));
371
+ }
372
+ .ids-tag.ids-tag-outlined.ids-tag-brand:focus {
373
+ color: var(--ids-comp-tag-outlined-color-fg-label-brand-focused);
374
+ background: var(--ids-comp-tag-outlined-color-bg-brand-focused);
375
+ border-color: var(--ids-comp-tag-outlined-color-border-brand-focused, rgba(255, 255, 255, 0));
376
+ }
377
+ .ids-tag.ids-tag-outlined.ids-tag-brand:active {
378
+ color: var(--ids-comp-tag-outlined-color-fg-label-brand-pressed);
379
+ background: var(--ids-comp-tag-outlined-color-bg-brand-pressed);
380
+ border-color: var(--ids-comp-tag-outlined-color-border-brand-pressed, rgba(255, 255, 255, 0));
381
+ }
382
+ .ids-tag.ids-tag-outlined.ids-tag-brand:disabled {
383
+ color: var(--ids-comp-tag-outlined-color-fg-label-brand-disabled);
384
+ background: var(--ids-comp-tag-outlined-color-bg-brand-disabled);
385
+ border-color: var(--ids-comp-tag-outlined-color-border-brand-disabled, rgba(255, 255, 255, 0));
386
+ }
387
+ .ids-tag.ids-tag-outlined.ids-tag-error {
388
+ color: var(--ids-comp-tag-outlined-color-fg-label-error-enabled);
389
+ background: var(--ids-comp-tag-outlined-color-bg-error-enabled);
390
+ border-color: var(--ids-comp-tag-outlined-color-border-error-enabled, rgba(255, 255, 255, 0));
391
+ }
392
+ .ids-tag.ids-tag-outlined.ids-tag-error:hover {
393
+ color: var(--ids-comp-tag-outlined-color-fg-label-error-hovered);
394
+ background: var(--ids-comp-tag-outlined-color-bg-error-hovered);
395
+ border-color: var(--ids-comp-tag-outlined-color-border-error-hovered, rgba(255, 255, 255, 0));
396
+ }
397
+ .ids-tag.ids-tag-outlined.ids-tag-error:focus {
398
+ color: var(--ids-comp-tag-outlined-color-fg-label-error-focused);
399
+ background: var(--ids-comp-tag-outlined-color-bg-error-focused);
400
+ border-color: var(--ids-comp-tag-outlined-color-border-error-focused, rgba(255, 255, 255, 0));
401
+ }
402
+ .ids-tag.ids-tag-outlined.ids-tag-error:active {
403
+ color: var(--ids-comp-tag-outlined-color-fg-label-error-pressed);
404
+ background: var(--ids-comp-tag-outlined-color-bg-error-pressed);
405
+ border-color: var(--ids-comp-tag-outlined-color-border-error-pressed, rgba(255, 255, 255, 0));
406
+ }
407
+ .ids-tag.ids-tag-outlined.ids-tag-error:disabled {
408
+ color: var(--ids-comp-tag-outlined-color-fg-label-error-disabled);
409
+ background: var(--ids-comp-tag-outlined-color-bg-error-disabled);
410
+ border-color: var(--ids-comp-tag-outlined-color-border-error-disabled, rgba(255, 255, 255, 0));
411
+ }
412
+ .ids-tag.ids-tag-outlined.ids-tag-success {
413
+ color: var(--ids-comp-tag-outlined-color-fg-label-success-enabled);
414
+ background: var(--ids-comp-tag-outlined-color-bg-success-enabled);
415
+ border-color: var(--ids-comp-tag-outlined-color-border-success-enabled, rgba(255, 255, 255, 0));
416
+ }
417
+ .ids-tag.ids-tag-outlined.ids-tag-success:hover {
418
+ color: var(--ids-comp-tag-outlined-color-fg-label-success-hovered);
419
+ background: var(--ids-comp-tag-outlined-color-bg-success-hovered);
420
+ border-color: var(--ids-comp-tag-outlined-color-border-success-hovered, rgba(255, 255, 255, 0));
421
+ }
422
+ .ids-tag.ids-tag-outlined.ids-tag-success:focus {
423
+ color: var(--ids-comp-tag-outlined-color-fg-label-success-focused);
424
+ background: var(--ids-comp-tag-outlined-color-bg-success-focused);
425
+ border-color: var(--ids-comp-tag-outlined-color-border-success-focused, rgba(255, 255, 255, 0));
426
+ }
427
+ .ids-tag.ids-tag-outlined.ids-tag-success:active {
428
+ color: var(--ids-comp-tag-outlined-color-fg-label-success-pressed);
429
+ background: var(--ids-comp-tag-outlined-color-bg-success-pressed);
430
+ border-color: var(--ids-comp-tag-outlined-color-border-success-pressed, rgba(255, 255, 255, 0));
431
+ }
432
+ .ids-tag.ids-tag-outlined.ids-tag-success:disabled {
433
+ color: var(--ids-comp-tag-outlined-color-fg-label-success-disabled);
434
+ background: var(--ids-comp-tag-outlined-color-bg-success-disabled);
435
+ border-color: var(--ids-comp-tag-outlined-color-border-success-disabled, rgba(255, 255, 255, 0));
436
+ }
437
+ .ids-tag.ids-tag-outlined.ids-tag-warning {
438
+ color: var(--ids-comp-tag-outlined-color-fg-label-warning-enabled);
439
+ background: var(--ids-comp-tag-outlined-color-bg-warning-enabled);
440
+ border-color: var(--ids-comp-tag-outlined-color-border-warning-enabled, rgba(255, 255, 255, 0));
441
+ }
442
+ .ids-tag.ids-tag-outlined.ids-tag-warning:hover {
443
+ color: var(--ids-comp-tag-outlined-color-fg-label-warning-hovered);
444
+ background: var(--ids-comp-tag-outlined-color-bg-warning-hovered);
445
+ border-color: var(--ids-comp-tag-outlined-color-border-warning-hovered, rgba(255, 255, 255, 0));
446
+ }
447
+ .ids-tag.ids-tag-outlined.ids-tag-warning:focus {
448
+ color: var(--ids-comp-tag-outlined-color-fg-label-warning-focused);
449
+ background: var(--ids-comp-tag-outlined-color-bg-warning-focused);
450
+ border-color: var(--ids-comp-tag-outlined-color-border-warning-focused, rgba(255, 255, 255, 0));
451
+ }
452
+ .ids-tag.ids-tag-outlined.ids-tag-warning:active {
453
+ color: var(--ids-comp-tag-outlined-color-fg-label-warning-pressed);
454
+ background: var(--ids-comp-tag-outlined-color-bg-warning-pressed);
455
+ border-color: var(--ids-comp-tag-outlined-color-border-warning-pressed, rgba(255, 255, 255, 0));
456
+ }
457
+ .ids-tag.ids-tag-outlined.ids-tag-warning:disabled {
458
+ color: var(--ids-comp-tag-outlined-color-fg-label-warning-disabled);
459
+ background: var(--ids-comp-tag-outlined-color-bg-warning-disabled);
460
+ border-color: var(--ids-comp-tag-outlined-color-border-warning-disabled, rgba(255, 255, 255, 0));
461
+ }
462
+ .ids-tag.ids-tag-outlined.ids-tag-light {
463
+ color: var(--ids-comp-tag-outlined-color-fg-label-light-enabled);
464
+ background: var(--ids-comp-tag-outlined-color-bg-light-enabled);
465
+ border-color: var(--ids-comp-tag-outlined-color-border-light-enabled, rgba(255, 255, 255, 0));
466
+ }
467
+ .ids-tag.ids-tag-outlined.ids-tag-light:hover {
468
+ color: var(--ids-comp-tag-outlined-color-fg-label-light-hovered);
469
+ background: var(--ids-comp-tag-outlined-color-bg-light-hovered);
470
+ border-color: var(--ids-comp-tag-outlined-color-border-light-hovered, rgba(255, 255, 255, 0));
471
+ }
472
+ .ids-tag.ids-tag-outlined.ids-tag-light:focus {
473
+ color: var(--ids-comp-tag-outlined-color-fg-label-light-focused);
474
+ background: var(--ids-comp-tag-outlined-color-bg-light-focused);
475
+ border-color: var(--ids-comp-tag-outlined-color-border-light-focused, rgba(255, 255, 255, 0));
476
+ }
477
+ .ids-tag.ids-tag-outlined.ids-tag-light:active {
478
+ color: var(--ids-comp-tag-outlined-color-fg-label-light-pressed);
479
+ background: var(--ids-comp-tag-outlined-color-bg-light-pressed);
480
+ border-color: var(--ids-comp-tag-outlined-color-border-light-pressed, rgba(255, 255, 255, 0));
481
+ }
482
+ .ids-tag.ids-tag-outlined.ids-tag-light:disabled {
483
+ color: var(--ids-comp-tag-outlined-color-fg-label-light-disabled);
484
+ background: var(--ids-comp-tag-outlined-color-bg-light-disabled);
485
+ border-color: var(--ids-comp-tag-outlined-color-border-light-disabled, rgba(255, 255, 255, 0));
486
+ }
487
+ .ids-tag.ids-tag-outlined.ids-tag-dark {
488
+ color: var(--ids-comp-tag-outlined-color-fg-label-dark-enabled);
489
+ background: var(--ids-comp-tag-outlined-color-bg-dark-enabled);
490
+ border-color: var(--ids-comp-tag-outlined-color-border-dark-enabled, rgba(255, 255, 255, 0));
491
+ }
492
+ .ids-tag.ids-tag-outlined.ids-tag-dark:hover {
493
+ color: var(--ids-comp-tag-outlined-color-fg-label-dark-hovered);
494
+ background: var(--ids-comp-tag-outlined-color-bg-dark-hovered);
495
+ border-color: var(--ids-comp-tag-outlined-color-border-dark-hovered, rgba(255, 255, 255, 0));
496
+ }
497
+ .ids-tag.ids-tag-outlined.ids-tag-dark:focus {
498
+ color: var(--ids-comp-tag-outlined-color-fg-label-dark-focused);
499
+ background: var(--ids-comp-tag-outlined-color-bg-dark-focused);
500
+ border-color: var(--ids-comp-tag-outlined-color-border-dark-focused, rgba(255, 255, 255, 0));
501
+ }
502
+ .ids-tag.ids-tag-outlined.ids-tag-dark:active {
503
+ color: var(--ids-comp-tag-outlined-color-fg-label-dark-pressed);
504
+ background: var(--ids-comp-tag-outlined-color-bg-dark-pressed);
505
+ border-color: var(--ids-comp-tag-outlined-color-border-dark-pressed, rgba(255, 255, 255, 0));
506
+ }
507
+ .ids-tag.ids-tag-outlined.ids-tag-dark:disabled {
508
+ color: var(--ids-comp-tag-outlined-color-fg-label-dark-disabled);
509
+ background: var(--ids-comp-tag-outlined-color-bg-dark-disabled);
510
+ border-color: var(--ids-comp-tag-outlined-color-border-dark-disabled, rgba(255, 255, 255, 0));
511
+ }
512
+ .ids-tag.ids-tag-outlined.ids-tag-surface {
513
+ color: var(--ids-comp-tag-outlined-color-fg-label-surface-enabled);
514
+ background: var(--ids-comp-tag-outlined-color-bg-surface-enabled);
515
+ border-color: var(--ids-comp-tag-outlined-color-border-surface-enabled, rgba(255, 255, 255, 0));
516
+ }
517
+ .ids-tag.ids-tag-outlined.ids-tag-surface:hover {
518
+ color: var(--ids-comp-tag-outlined-color-fg-label-surface-hovered);
519
+ background: var(--ids-comp-tag-outlined-color-bg-surface-hovered);
520
+ border-color: var(--ids-comp-tag-outlined-color-border-surface-hovered, rgba(255, 255, 255, 0));
521
+ }
522
+ .ids-tag.ids-tag-outlined.ids-tag-surface:focus {
523
+ color: var(--ids-comp-tag-outlined-color-fg-label-surface-focused);
524
+ background: var(--ids-comp-tag-outlined-color-bg-surface-focused);
525
+ border-color: var(--ids-comp-tag-outlined-color-border-surface-focused, rgba(255, 255, 255, 0));
526
+ }
527
+ .ids-tag.ids-tag-outlined.ids-tag-surface:active {
528
+ color: var(--ids-comp-tag-outlined-color-fg-label-surface-pressed);
529
+ background: var(--ids-comp-tag-outlined-color-bg-surface-pressed);
530
+ border-color: var(--ids-comp-tag-outlined-color-border-surface-pressed, rgba(255, 255, 255, 0));
531
+ }
532
+ .ids-tag.ids-tag-outlined.ids-tag-surface:disabled {
533
+ color: var(--ids-comp-tag-outlined-color-fg-label-surface-disabled);
534
+ background: var(--ids-comp-tag-outlined-color-bg-surface-disabled);
535
+ border-color: var(--ids-comp-tag-outlined-color-border-surface-disabled, rgba(255, 255, 255, 0));
536
+ }
537
+ .ids-tag.ids-tag-text.ids-tag-primary {
538
+ color: var(--ids-comp-tag-text-color-fg-label-primary-enabled);
539
+ background: var(--ids-comp-tag-text-color-bg-primary-enabled);
540
+ border-color: var(--ids-comp-tag-text-color-border-primary-enabled, rgba(255, 255, 255, 0));
541
+ }
542
+ .ids-tag.ids-tag-text.ids-tag-primary:hover {
543
+ color: var(--ids-comp-tag-text-color-fg-label-primary-hovered);
544
+ background: var(--ids-comp-tag-text-color-bg-primary-hovered);
545
+ border-color: var(--ids-comp-tag-text-color-border-primary-hovered, rgba(255, 255, 255, 0));
546
+ }
547
+ .ids-tag.ids-tag-text.ids-tag-primary:focus {
548
+ color: var(--ids-comp-tag-text-color-fg-label-primary-focused);
549
+ background: var(--ids-comp-tag-text-color-bg-primary-focused);
550
+ border-color: var(--ids-comp-tag-text-color-border-primary-focused, rgba(255, 255, 255, 0));
551
+ }
552
+ .ids-tag.ids-tag-text.ids-tag-primary:active {
553
+ color: var(--ids-comp-tag-text-color-fg-label-primary-pressed);
554
+ background: var(--ids-comp-tag-text-color-bg-primary-pressed);
555
+ border-color: var(--ids-comp-tag-text-color-border-primary-pressed, rgba(255, 255, 255, 0));
556
+ }
557
+ .ids-tag.ids-tag-text.ids-tag-primary:disabled {
558
+ color: var(--ids-comp-tag-text-color-fg-label-primary-disabled);
559
+ background: var(--ids-comp-tag-text-color-bg-primary-disabled);
560
+ border-color: var(--ids-comp-tag-text-color-border-primary-disabled, rgba(255, 255, 255, 0));
561
+ }
562
+ .ids-tag.ids-tag-text.ids-tag-secondary {
563
+ color: var(--ids-comp-tag-text-color-fg-label-secondary-enabled);
564
+ background: var(--ids-comp-tag-text-color-bg-secondary-enabled);
565
+ border-color: var(--ids-comp-tag-text-color-border-secondary-enabled, rgba(255, 255, 255, 0));
566
+ }
567
+ .ids-tag.ids-tag-text.ids-tag-secondary:hover {
568
+ color: var(--ids-comp-tag-text-color-fg-label-secondary-hovered);
569
+ background: var(--ids-comp-tag-text-color-bg-secondary-hovered);
570
+ border-color: var(--ids-comp-tag-text-color-border-secondary-hovered, rgba(255, 255, 255, 0));
571
+ }
572
+ .ids-tag.ids-tag-text.ids-tag-secondary:focus {
573
+ color: var(--ids-comp-tag-text-color-fg-label-secondary-focused);
574
+ background: var(--ids-comp-tag-text-color-bg-secondary-focused);
575
+ border-color: var(--ids-comp-tag-text-color-border-secondary-focused, rgba(255, 255, 255, 0));
576
+ }
577
+ .ids-tag.ids-tag-text.ids-tag-secondary:active {
578
+ color: var(--ids-comp-tag-text-color-fg-label-secondary-pressed);
579
+ background: var(--ids-comp-tag-text-color-bg-secondary-pressed);
580
+ border-color: var(--ids-comp-tag-text-color-border-secondary-pressed, rgba(255, 255, 255, 0));
581
+ }
582
+ .ids-tag.ids-tag-text.ids-tag-secondary:disabled {
583
+ color: var(--ids-comp-tag-text-color-fg-label-secondary-disabled);
584
+ background: var(--ids-comp-tag-text-color-bg-secondary-disabled);
585
+ border-color: var(--ids-comp-tag-text-color-border-secondary-disabled, rgba(255, 255, 255, 0));
586
+ }
587
+ .ids-tag.ids-tag-text.ids-tag-brand {
588
+ color: var(--ids-comp-tag-text-color-fg-label-brand-enabled);
589
+ background: var(--ids-comp-tag-text-color-bg-brand-enabled);
590
+ border-color: var(--ids-comp-tag-text-color-border-brand-enabled, rgba(255, 255, 255, 0));
591
+ }
592
+ .ids-tag.ids-tag-text.ids-tag-brand:hover {
593
+ color: var(--ids-comp-tag-text-color-fg-label-brand-hovered);
594
+ background: var(--ids-comp-tag-text-color-bg-brand-hovered);
595
+ border-color: var(--ids-comp-tag-text-color-border-brand-hovered, rgba(255, 255, 255, 0));
596
+ }
597
+ .ids-tag.ids-tag-text.ids-tag-brand:focus {
598
+ color: var(--ids-comp-tag-text-color-fg-label-brand-focused);
599
+ background: var(--ids-comp-tag-text-color-bg-brand-focused);
600
+ border-color: var(--ids-comp-tag-text-color-border-brand-focused, rgba(255, 255, 255, 0));
601
+ }
602
+ .ids-tag.ids-tag-text.ids-tag-brand:active {
603
+ color: var(--ids-comp-tag-text-color-fg-label-brand-pressed);
604
+ background: var(--ids-comp-tag-text-color-bg-brand-pressed);
605
+ border-color: var(--ids-comp-tag-text-color-border-brand-pressed, rgba(255, 255, 255, 0));
606
+ }
607
+ .ids-tag.ids-tag-text.ids-tag-brand:disabled {
608
+ color: var(--ids-comp-tag-text-color-fg-label-brand-disabled);
609
+ background: var(--ids-comp-tag-text-color-bg-brand-disabled);
610
+ border-color: var(--ids-comp-tag-text-color-border-brand-disabled, rgba(255, 255, 255, 0));
611
+ }
612
+ .ids-tag.ids-tag-text.ids-tag-error {
613
+ color: var(--ids-comp-tag-text-color-fg-label-error-enabled);
614
+ background: var(--ids-comp-tag-text-color-bg-error-enabled);
615
+ border-color: var(--ids-comp-tag-text-color-border-error-enabled, rgba(255, 255, 255, 0));
616
+ }
617
+ .ids-tag.ids-tag-text.ids-tag-error:hover {
618
+ color: var(--ids-comp-tag-text-color-fg-label-error-hovered);
619
+ background: var(--ids-comp-tag-text-color-bg-error-hovered);
620
+ border-color: var(--ids-comp-tag-text-color-border-error-hovered, rgba(255, 255, 255, 0));
621
+ }
622
+ .ids-tag.ids-tag-text.ids-tag-error:focus {
623
+ color: var(--ids-comp-tag-text-color-fg-label-error-focused);
624
+ background: var(--ids-comp-tag-text-color-bg-error-focused);
625
+ border-color: var(--ids-comp-tag-text-color-border-error-focused, rgba(255, 255, 255, 0));
626
+ }
627
+ .ids-tag.ids-tag-text.ids-tag-error:active {
628
+ color: var(--ids-comp-tag-text-color-fg-label-error-pressed);
629
+ background: var(--ids-comp-tag-text-color-bg-error-pressed);
630
+ border-color: var(--ids-comp-tag-text-color-border-error-pressed, rgba(255, 255, 255, 0));
631
+ }
632
+ .ids-tag.ids-tag-text.ids-tag-error:disabled {
633
+ color: var(--ids-comp-tag-text-color-fg-label-error-disabled);
634
+ background: var(--ids-comp-tag-text-color-bg-error-disabled);
635
+ border-color: var(--ids-comp-tag-text-color-border-error-disabled, rgba(255, 255, 255, 0));
636
+ }
637
+ .ids-tag.ids-tag-text.ids-tag-success {
638
+ color: var(--ids-comp-tag-text-color-fg-label-success-enabled);
639
+ background: var(--ids-comp-tag-text-color-bg-success-enabled);
640
+ border-color: var(--ids-comp-tag-text-color-border-success-enabled, rgba(255, 255, 255, 0));
641
+ }
642
+ .ids-tag.ids-tag-text.ids-tag-success:hover {
643
+ color: var(--ids-comp-tag-text-color-fg-label-success-hovered);
644
+ background: var(--ids-comp-tag-text-color-bg-success-hovered);
645
+ border-color: var(--ids-comp-tag-text-color-border-success-hovered, rgba(255, 255, 255, 0));
646
+ }
647
+ .ids-tag.ids-tag-text.ids-tag-success:focus {
648
+ color: var(--ids-comp-tag-text-color-fg-label-success-focused);
649
+ background: var(--ids-comp-tag-text-color-bg-success-focused);
650
+ border-color: var(--ids-comp-tag-text-color-border-success-focused, rgba(255, 255, 255, 0));
651
+ }
652
+ .ids-tag.ids-tag-text.ids-tag-success:active {
653
+ color: var(--ids-comp-tag-text-color-fg-label-success-pressed);
654
+ background: var(--ids-comp-tag-text-color-bg-success-pressed);
655
+ border-color: var(--ids-comp-tag-text-color-border-success-pressed, rgba(255, 255, 255, 0));
656
+ }
657
+ .ids-tag.ids-tag-text.ids-tag-success:disabled {
658
+ color: var(--ids-comp-tag-text-color-fg-label-success-disabled);
659
+ background: var(--ids-comp-tag-text-color-bg-success-disabled);
660
+ border-color: var(--ids-comp-tag-text-color-border-success-disabled, rgba(255, 255, 255, 0));
661
+ }
662
+ .ids-tag.ids-tag-text.ids-tag-warning {
663
+ color: var(--ids-comp-tag-text-color-fg-label-warning-enabled);
664
+ background: var(--ids-comp-tag-text-color-bg-warning-enabled);
665
+ border-color: var(--ids-comp-tag-text-color-border-warning-enabled, rgba(255, 255, 255, 0));
666
+ }
667
+ .ids-tag.ids-tag-text.ids-tag-warning:hover {
668
+ color: var(--ids-comp-tag-text-color-fg-label-warning-hovered);
669
+ background: var(--ids-comp-tag-text-color-bg-warning-hovered);
670
+ border-color: var(--ids-comp-tag-text-color-border-warning-hovered, rgba(255, 255, 255, 0));
671
+ }
672
+ .ids-tag.ids-tag-text.ids-tag-warning:focus {
673
+ color: var(--ids-comp-tag-text-color-fg-label-warning-focused);
674
+ background: var(--ids-comp-tag-text-color-bg-warning-focused);
675
+ border-color: var(--ids-comp-tag-text-color-border-warning-focused, rgba(255, 255, 255, 0));
676
+ }
677
+ .ids-tag.ids-tag-text.ids-tag-warning:active {
678
+ color: var(--ids-comp-tag-text-color-fg-label-warning-pressed);
679
+ background: var(--ids-comp-tag-text-color-bg-warning-pressed);
680
+ border-color: var(--ids-comp-tag-text-color-border-warning-pressed, rgba(255, 255, 255, 0));
681
+ }
682
+ .ids-tag.ids-tag-text.ids-tag-warning:disabled {
683
+ color: var(--ids-comp-tag-text-color-fg-label-warning-disabled);
684
+ background: var(--ids-comp-tag-text-color-bg-warning-disabled);
685
+ border-color: var(--ids-comp-tag-text-color-border-warning-disabled, rgba(255, 255, 255, 0));
686
+ }
687
+ .ids-tag.ids-tag-text.ids-tag-light {
688
+ color: var(--ids-comp-tag-text-color-fg-label-light-enabled);
689
+ background: var(--ids-comp-tag-text-color-bg-light-enabled);
690
+ border-color: var(--ids-comp-tag-text-color-border-light-enabled, rgba(255, 255, 255, 0));
691
+ }
692
+ .ids-tag.ids-tag-text.ids-tag-light:hover {
693
+ color: var(--ids-comp-tag-text-color-fg-label-light-hovered);
694
+ background: var(--ids-comp-tag-text-color-bg-light-hovered);
695
+ border-color: var(--ids-comp-tag-text-color-border-light-hovered, rgba(255, 255, 255, 0));
696
+ }
697
+ .ids-tag.ids-tag-text.ids-tag-light:focus {
698
+ color: var(--ids-comp-tag-text-color-fg-label-light-focused);
699
+ background: var(--ids-comp-tag-text-color-bg-light-focused);
700
+ border-color: var(--ids-comp-tag-text-color-border-light-focused, rgba(255, 255, 255, 0));
701
+ }
702
+ .ids-tag.ids-tag-text.ids-tag-light:active {
703
+ color: var(--ids-comp-tag-text-color-fg-label-light-pressed);
704
+ background: var(--ids-comp-tag-text-color-bg-light-pressed);
705
+ border-color: var(--ids-comp-tag-text-color-border-light-pressed, rgba(255, 255, 255, 0));
706
+ }
707
+ .ids-tag.ids-tag-text.ids-tag-light:disabled {
708
+ color: var(--ids-comp-tag-text-color-fg-label-light-disabled);
709
+ background: var(--ids-comp-tag-text-color-bg-light-disabled);
710
+ border-color: var(--ids-comp-tag-text-color-border-light-disabled, rgba(255, 255, 255, 0));
711
+ }
712
+ .ids-tag.ids-tag-text.ids-tag-dark {
713
+ color: var(--ids-comp-tag-text-color-fg-label-dark-enabled);
714
+ background: var(--ids-comp-tag-text-color-bg-dark-enabled);
715
+ border-color: var(--ids-comp-tag-text-color-border-dark-enabled, rgba(255, 255, 255, 0));
716
+ }
717
+ .ids-tag.ids-tag-text.ids-tag-dark:hover {
718
+ color: var(--ids-comp-tag-text-color-fg-label-dark-hovered);
719
+ background: var(--ids-comp-tag-text-color-bg-dark-hovered);
720
+ border-color: var(--ids-comp-tag-text-color-border-dark-hovered, rgba(255, 255, 255, 0));
721
+ }
722
+ .ids-tag.ids-tag-text.ids-tag-dark:focus {
723
+ color: var(--ids-comp-tag-text-color-fg-label-dark-focused);
724
+ background: var(--ids-comp-tag-text-color-bg-dark-focused);
725
+ border-color: var(--ids-comp-tag-text-color-border-dark-focused, rgba(255, 255, 255, 0));
726
+ }
727
+ .ids-tag.ids-tag-text.ids-tag-dark:active {
728
+ color: var(--ids-comp-tag-text-color-fg-label-dark-pressed);
729
+ background: var(--ids-comp-tag-text-color-bg-dark-pressed);
730
+ border-color: var(--ids-comp-tag-text-color-border-dark-pressed, rgba(255, 255, 255, 0));
731
+ }
732
+ .ids-tag.ids-tag-text.ids-tag-dark:disabled {
733
+ color: var(--ids-comp-tag-text-color-fg-label-dark-disabled);
734
+ background: var(--ids-comp-tag-text-color-bg-dark-disabled);
735
+ border-color: var(--ids-comp-tag-text-color-border-dark-disabled, rgba(255, 255, 255, 0));
736
+ }
737
+ .ids-tag.ids-tag-text.ids-tag-surface {
738
+ color: var(--ids-comp-tag-text-color-fg-label-surface-enabled);
739
+ background: var(--ids-comp-tag-text-color-bg-surface-enabled);
740
+ border-color: var(--ids-comp-tag-text-color-border-surface-enabled, rgba(255, 255, 255, 0));
741
+ }
742
+ .ids-tag.ids-tag-text.ids-tag-surface:hover {
743
+ color: var(--ids-comp-tag-text-color-fg-label-surface-hovered);
744
+ background: var(--ids-comp-tag-text-color-bg-surface-hovered);
745
+ border-color: var(--ids-comp-tag-text-color-border-surface-hovered, rgba(255, 255, 255, 0));
746
+ }
747
+ .ids-tag.ids-tag-text.ids-tag-surface:focus {
748
+ color: var(--ids-comp-tag-text-color-fg-label-surface-focused);
749
+ background: var(--ids-comp-tag-text-color-bg-surface-focused);
750
+ border-color: var(--ids-comp-tag-text-color-border-surface-focused, rgba(255, 255, 255, 0));
751
+ }
752
+ .ids-tag.ids-tag-text.ids-tag-surface:active {
753
+ color: var(--ids-comp-tag-text-color-fg-label-surface-pressed);
754
+ background: var(--ids-comp-tag-text-color-bg-surface-pressed);
755
+ border-color: var(--ids-comp-tag-text-color-border-surface-pressed, rgba(255, 255, 255, 0));
756
+ }
757
+ .ids-tag.ids-tag-text.ids-tag-surface:disabled {
758
+ color: var(--ids-comp-tag-text-color-fg-label-surface-disabled);
759
+ background: var(--ids-comp-tag-text-color-bg-surface-disabled);
760
+ border-color: var(--ids-comp-tag-text-color-border-surface-disabled, rgba(255, 255, 255, 0));
761
+ }