@ivds/core 0.1.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.
Files changed (154) hide show
  1. package/CHANGELOG.md +45 -0
  2. package/README.md +215 -0
  3. package/lib/all.css +6802 -0
  4. package/lib/all.min.css +1 -0
  5. package/lib/base/base.css +215 -0
  6. package/lib/base/base.min.css +1 -0
  7. package/lib/components/_breadcrumb-mixins.scss +173 -0
  8. package/lib/components/_button-mixin.scss +120 -0
  9. package/lib/components/_card-mixin.scss +196 -0
  10. package/lib/components/_checkbox-mixin.scss +208 -0
  11. package/lib/components/_footer-mixin.scss +385 -0
  12. package/lib/components/_header-mixin.scss +275 -0
  13. package/lib/components/_navigation-mixins.scss +270 -0
  14. package/lib/components/_notification-mixin.scss +239 -0
  15. package/lib/components/_pagination-mixins.scss +280 -0
  16. package/lib/components/_radio-button-mixin.scss +207 -0
  17. package/lib/components/_tag-mixin.scss +261 -0
  18. package/lib/components/_text-input-mixin.scss +203 -0
  19. package/lib/components/all.css +3005 -0
  20. package/lib/components/all.min.css +1 -0
  21. package/lib/components/breadcrumb/breadcrumb.css +141 -0
  22. package/lib/components/breadcrumb/breadcrumb.min.css +1 -0
  23. package/lib/components/button/button.css +221 -0
  24. package/lib/components/button/button.min.css +1 -0
  25. package/lib/components/card/card.css +236 -0
  26. package/lib/components/card/card.min.css +1 -0
  27. package/lib/components/checkbox/checkbox.css +305 -0
  28. package/lib/components/checkbox/checkbox.min.css +1 -0
  29. package/lib/components/footer/footer.css +466 -0
  30. package/lib/components/footer/footer.min.css +1 -0
  31. package/lib/components/header/header.css +274 -0
  32. package/lib/components/header/header.min.css +1 -0
  33. package/lib/components/navigation/navigation.css +214 -0
  34. package/lib/components/navigation/navigation.min.css +1 -0
  35. package/lib/components/notification/notification.css +253 -0
  36. package/lib/components/notification/notification.min.css +1 -0
  37. package/lib/components/pagination/pagination.css +221 -0
  38. package/lib/components/pagination/pagination.min.css +1 -0
  39. package/lib/components/radio-button/radio-button.css +326 -0
  40. package/lib/components/radio-button/radio-button.min.css +1 -0
  41. package/lib/components/tag/tag.css +367 -0
  42. package/lib/components/tag/tag.min.css +1 -0
  43. package/lib/components/text-input/text-input.css +243 -0
  44. package/lib/components/text-input/text-input.min.css +1 -0
  45. package/lib/icons/icon-arrow-left.css +139 -0
  46. package/lib/icons/icon-arrow-left.min.css +1 -0
  47. package/lib/icons/icon-arrow-right.css +139 -0
  48. package/lib/icons/icon-arrow-right.min.css +1 -0
  49. package/lib/icons/icon-check.css +139 -0
  50. package/lib/icons/icon-check.min.css +1 -0
  51. package/lib/icons/icon-close.css +140 -0
  52. package/lib/icons/icon-close.min.css +1 -0
  53. package/lib/icons/icon-error.css +140 -0
  54. package/lib/icons/icon-error.min.css +1 -0
  55. package/lib/icons/icon-info.css +140 -0
  56. package/lib/icons/icon-info.min.css +1 -0
  57. package/lib/icons/icon-success.css +139 -0
  58. package/lib/icons/icon-success.min.css +1 -0
  59. package/lib/icons/icon-warning.css +139 -0
  60. package/lib/icons/icon-warning.min.css +1 -0
  61. package/lib/icons/icons.css +1158 -0
  62. package/lib/icons/icons.min.css +1 -0
  63. package/lib/utils/_flex.scss +200 -0
  64. package/lib/utils/_grid.scss +211 -0
  65. package/lib/utils/_layout.scss +253 -0
  66. package/lib/utils/_spacing.scss +260 -0
  67. package/lib/utils/_typography.scss +111 -0
  68. package/lib/utils/utils.css +2434 -0
  69. package/lib/utils/utils.min.css +1 -0
  70. package/lib/utils-only.css +2801 -0
  71. package/lib/utils-only.min.css +1 -0
  72. package/lib/variables/variables.css +2 -0
  73. package/lib/variables/variables.min.css +0 -0
  74. package/package.json +194 -0
  75. package/src/__tests__/example.test.scss +12 -0
  76. package/src/accessibility.stories.js +416 -0
  77. package/src/all.scss +9 -0
  78. package/src/base/_layout.scss +97 -0
  79. package/src/base/_reset.scss +85 -0
  80. package/src/base/_typography.scss +105 -0
  81. package/src/base/base.scss +6 -0
  82. package/src/components/all.scss +22 -0
  83. package/src/components/breadcrumb/_breadcrumb-mixins.scss +173 -0
  84. package/src/components/breadcrumb/breadcrumb.scss +68 -0
  85. package/src/components/breadcrumb/breadcrumb.stories.js +483 -0
  86. package/src/components/button/__tests__/button-mixins.test.scss +35 -0
  87. package/src/components/button/_button-mixin.scss +120 -0
  88. package/src/components/button/button.scss +126 -0
  89. package/src/components/button/button.stories.js +364 -0
  90. package/src/components/card/__tests__/card-mixins.test.scss +36 -0
  91. package/src/components/card/_card-mixin.scss +196 -0
  92. package/src/components/card/card.scss +193 -0
  93. package/src/components/card/card.stories.js +635 -0
  94. package/src/components/checkbox/_checkbox-mixin.scss +208 -0
  95. package/src/components/checkbox/checkbox.scss +141 -0
  96. package/src/components/checkbox/checkbox.stories.js +303 -0
  97. package/src/components/footer/_footer-mixin.scss +385 -0
  98. package/src/components/footer/footer.scss +86 -0
  99. package/src/components/footer/footer.stories.js +740 -0
  100. package/src/components/header/_header-mixin.scss +275 -0
  101. package/src/components/header/header.scss +84 -0
  102. package/src/components/header/header.stories.js +450 -0
  103. package/src/components/navigation/_navigation-mixins.scss +270 -0
  104. package/src/components/navigation/navigation.scss +64 -0
  105. package/src/components/navigation/navigation.stories.js +410 -0
  106. package/src/components/notification/_notification-mixin.scss +239 -0
  107. package/src/components/notification/notification.scss +118 -0
  108. package/src/components/notification/notification.stories.js +378 -0
  109. package/src/components/overview.stories.js +473 -0
  110. package/src/components/pagination/_pagination-mixins.scss +280 -0
  111. package/src/components/pagination/pagination.scss +76 -0
  112. package/src/components/pagination/pagination.stories.js +729 -0
  113. package/src/components/radio-button/_radio-button-mixin.scss +207 -0
  114. package/src/components/radio-button/radio-button.scss +178 -0
  115. package/src/components/radio-button/radio-button.stories.js +379 -0
  116. package/src/components/tag/_tag-mixin.scss +261 -0
  117. package/src/components/tag/tag.scss +244 -0
  118. package/src/components/tag/tag.stories.js +482 -0
  119. package/src/components/text-input/_text-input-mixin.scss +203 -0
  120. package/src/components/text-input/text-input.scss +150 -0
  121. package/src/components/text-input/text-input.stories.js +723 -0
  122. package/src/icons/_icon.scss +121 -0
  123. package/src/icons/icon-arrow-left.scss +23 -0
  124. package/src/icons/icon-arrow-right.scss +23 -0
  125. package/src/icons/icon-check.scss +23 -0
  126. package/src/icons/icon-close.scss +24 -0
  127. package/src/icons/icon-error.scss +24 -0
  128. package/src/icons/icon-info.scss +24 -0
  129. package/src/icons/icon-success.scss +23 -0
  130. package/src/icons/icon-warning.scss +23 -0
  131. package/src/icons/icons.scss +12 -0
  132. package/src/icons/icons.stories.js +249 -0
  133. package/src/icons/svg/arrow-left.svg +3 -0
  134. package/src/icons/svg/arrow-right.svg +3 -0
  135. package/src/icons/svg/check.svg +3 -0
  136. package/src/icons/svg/close.svg +4 -0
  137. package/src/icons/svg/error.svg +5 -0
  138. package/src/icons/svg/info.svg +5 -0
  139. package/src/icons/svg/success.svg +4 -0
  140. package/src/icons/svg/warning.svg +5 -0
  141. package/src/utils/__tests__/utilities.test.scss +37 -0
  142. package/src/utils/_flex.scss +200 -0
  143. package/src/utils/_grid.scss +211 -0
  144. package/src/utils/_layout.scss +253 -0
  145. package/src/utils/_spacing.scss +260 -0
  146. package/src/utils/_typography.scss +111 -0
  147. package/src/utils/utils.scss +8 -0
  148. package/src/variables/_borders.scss +15 -0
  149. package/src/variables/_breakpoints.scss +11 -0
  150. package/src/variables/_colors.scss +97 -0
  151. package/src/variables/_shadows.scss +14 -0
  152. package/src/variables/_spacing.scss +24 -0
  153. package/src/variables/_typography.scss +47 -0
  154. package/src/variables/variables.scss +9 -0
package/lib/icons/icons.css ADDED
@@ -0,0 +1,1158 @@
1
+ @charset "UTF-8";
2
+ /* All icons bundle*/
3
+ /* This file imports all icon styles for the IVDS Core package*/
4
+ .ivds-icon {
5
+ display: inline-flex;
6
+ align-items: center;
7
+ justify-content: center;
8
+ width: 1em;
9
+ height: 1em;
10
+ fill: currentcolor;
11
+ flex-shrink: 0;
12
+ vertical-align: middle;
13
+ }
14
+ .ivds-icon svg {
15
+ width: 100%;
16
+ height: 100%;
17
+ fill: inherit;
18
+ display: block;
19
+ }
20
+ .ivds-icon::before {
21
+ font-style: normal;
22
+ font-feature-settings: normal;
23
+ font-variant: normal;
24
+ text-rendering: auto;
25
+ line-height: 1;
26
+ }
27
+ .ivds-icon {
28
+ width: var(--fontSize-base, 1rem);
29
+ height: var(--fontSize-base, 1rem);
30
+ font-size: var(--fontSize-base, 1rem);
31
+ }
32
+ .ivds-icon--xs {
33
+ width: var(--fontSize-xs, 0.75rem);
34
+ height: var(--fontSize-xs, 0.75rem);
35
+ font-size: var(--fontSize-xs, 0.75rem);
36
+ }
37
+ .ivds-icon--sm {
38
+ width: var(--fontSize-sm, 0.875rem);
39
+ height: var(--fontSize-sm, 0.875rem);
40
+ font-size: var(--fontSize-sm, 0.875rem);
41
+ }
42
+ .ivds-icon--md {
43
+ width: var(--fontSize-base, 1rem);
44
+ height: var(--fontSize-base, 1rem);
45
+ font-size: var(--fontSize-base, 1rem);
46
+ }
47
+ .ivds-icon--lg {
48
+ width: var(--fontSize-lg, 1.125rem);
49
+ height: var(--fontSize-lg, 1.125rem);
50
+ font-size: var(--fontSize-lg, 1.125rem);
51
+ }
52
+ .ivds-icon--xl {
53
+ width: var(--fontSize-xl, 1.25rem);
54
+ height: var(--fontSize-xl, 1.25rem);
55
+ font-size: var(--fontSize-xl, 1.25rem);
56
+ }
57
+ .ivds-icon--2xl {
58
+ width: var(--fontSize-2xl, 1.5rem);
59
+ height: var(--fontSize-2xl, 1.5rem);
60
+ font-size: var(--fontSize-2xl, 1.5rem);
61
+ }
62
+ .ivds-icon--3xl {
63
+ width: var(--fontSize-3xl, 1.875rem);
64
+ height: var(--fontSize-3xl, 1.875rem);
65
+ font-size: var(--fontSize-3xl, 1.875rem);
66
+ }
67
+ .ivds-icon--primary {
68
+ color: var(--color-brand-primary-500, #0ea5e9);
69
+ }
70
+ .ivds-icon--secondary {
71
+ color: var(--color-semantic-neutral-600, #6b7280);
72
+ }
73
+ .ivds-icon--success {
74
+ color: var(--color-semantic-success-500, #10b981);
75
+ }
76
+ .ivds-icon--warning {
77
+ color: var(--color-semantic-warning-500, #f59e0b);
78
+ }
79
+ .ivds-icon--error {
80
+ color: var(--color-semantic-error-500, #ef4444);
81
+ }
82
+ .ivds-icon--info {
83
+ color: var(--color-brand-primary-500, #0ea5e9);
84
+ }
85
+ .ivds-icon--interactive {
86
+ cursor: pointer;
87
+ transition: color 0.15s ease-in-out, transform 0.15s ease-in-out;
88
+ }
89
+ .ivds-icon--interactive:hover {
90
+ transform: scale(1.1);
91
+ }
92
+ .ivds-icon--interactive:active {
93
+ transform: scale(0.95);
94
+ }
95
+ .ivds-icon--disabled {
96
+ opacity: 0.5;
97
+ cursor: not-allowed;
98
+ pointer-events: none;
99
+ }
100
+ .ivds-icon {
101
+ display: inline-flex;
102
+ align-items: center;
103
+ justify-content: center;
104
+ width: 1em;
105
+ height: 1em;
106
+ fill: currentcolor;
107
+ flex-shrink: 0;
108
+ vertical-align: middle;
109
+ }
110
+ .ivds-icon svg {
111
+ width: 100%;
112
+ height: 100%;
113
+ fill: inherit;
114
+ display: block;
115
+ }
116
+ .ivds-icon::before {
117
+ font-style: normal;
118
+ font-feature-settings: normal;
119
+ font-variant: normal;
120
+ text-rendering: auto;
121
+ line-height: 1;
122
+ }
123
+ .ivds-icon {
124
+ width: var(--fontSize-base, 1rem);
125
+ height: var(--fontSize-base, 1rem);
126
+ font-size: var(--fontSize-base, 1rem);
127
+ }
128
+ .ivds-icon--xs {
129
+ width: var(--fontSize-xs, 0.75rem);
130
+ height: var(--fontSize-xs, 0.75rem);
131
+ font-size: var(--fontSize-xs, 0.75rem);
132
+ }
133
+ .ivds-icon--sm {
134
+ width: var(--fontSize-sm, 0.875rem);
135
+ height: var(--fontSize-sm, 0.875rem);
136
+ font-size: var(--fontSize-sm, 0.875rem);
137
+ }
138
+ .ivds-icon--md {
139
+ width: var(--fontSize-base, 1rem);
140
+ height: var(--fontSize-base, 1rem);
141
+ font-size: var(--fontSize-base, 1rem);
142
+ }
143
+ .ivds-icon--lg {
144
+ width: var(--fontSize-lg, 1.125rem);
145
+ height: var(--fontSize-lg, 1.125rem);
146
+ font-size: var(--fontSize-lg, 1.125rem);
147
+ }
148
+ .ivds-icon--xl {
149
+ width: var(--fontSize-xl, 1.25rem);
150
+ height: var(--fontSize-xl, 1.25rem);
151
+ font-size: var(--fontSize-xl, 1.25rem);
152
+ }
153
+ .ivds-icon--2xl {
154
+ width: var(--fontSize-2xl, 1.5rem);
155
+ height: var(--fontSize-2xl, 1.5rem);
156
+ font-size: var(--fontSize-2xl, 1.5rem);
157
+ }
158
+ .ivds-icon--3xl {
159
+ width: var(--fontSize-3xl, 1.875rem);
160
+ height: var(--fontSize-3xl, 1.875rem);
161
+ font-size: var(--fontSize-3xl, 1.875rem);
162
+ }
163
+ .ivds-icon--primary {
164
+ color: var(--color-brand-primary-500, #0ea5e9);
165
+ }
166
+ .ivds-icon--secondary {
167
+ color: var(--color-semantic-neutral-600, #6b7280);
168
+ }
169
+ .ivds-icon--success {
170
+ color: var(--color-semantic-success-500, #10b981);
171
+ }
172
+ .ivds-icon--warning {
173
+ color: var(--color-semantic-warning-500, #f59e0b);
174
+ }
175
+ .ivds-icon--error {
176
+ color: var(--color-semantic-error-500, #ef4444);
177
+ }
178
+ .ivds-icon--info {
179
+ color: var(--color-brand-primary-500, #0ea5e9);
180
+ }
181
+ .ivds-icon--interactive {
182
+ cursor: pointer;
183
+ transition: color 0.15s ease-in-out, transform 0.15s ease-in-out;
184
+ }
185
+ .ivds-icon--interactive:hover {
186
+ transform: scale(1.1);
187
+ }
188
+ .ivds-icon--interactive:active {
189
+ transform: scale(0.95);
190
+ }
191
+ .ivds-icon--disabled {
192
+ opacity: 0.5;
193
+ cursor: not-allowed;
194
+ pointer-events: none;
195
+ }
196
+ .ivds-icon--arrow-left {
197
+ display: inline-flex;
198
+ align-items: center;
199
+ justify-content: center;
200
+ width: 1em;
201
+ height: 1em;
202
+ fill: currentcolor;
203
+ flex-shrink: 0;
204
+ vertical-align: middle;
205
+ }
206
+ .ivds-icon--arrow-left svg {
207
+ width: 100%;
208
+ height: 100%;
209
+ fill: inherit;
210
+ display: block;
211
+ }
212
+ .ivds-icon--arrow-left::before {
213
+ font-style: normal;
214
+ font-feature-settings: normal;
215
+ font-variant: normal;
216
+ text-rendering: auto;
217
+ line-height: 1;
218
+ }
219
+ .ivds-icon--arrow-left {
220
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='currentcolor'%3E %3Cpath d='m15 18-6-6 6-6'/%3E %3C/svg%3E");
221
+ background-repeat: no-repeat;
222
+ background-position: center;
223
+ background-size: contain;
224
+ }
225
+ .ivds-icon--arrow-left::before {
226
+ content: "←";
227
+ font-size: inherit;
228
+ }
229
+ .ivds-icon--arrow-left:not(.ivds-icon--no-svg)::before {
230
+ display: none;
231
+ }
232
+ .ivds-icon {
233
+ display: inline-flex;
234
+ align-items: center;
235
+ justify-content: center;
236
+ width: 1em;
237
+ height: 1em;
238
+ fill: currentcolor;
239
+ flex-shrink: 0;
240
+ vertical-align: middle;
241
+ }
242
+ .ivds-icon svg {
243
+ width: 100%;
244
+ height: 100%;
245
+ fill: inherit;
246
+ display: block;
247
+ }
248
+ .ivds-icon::before {
249
+ font-style: normal;
250
+ font-feature-settings: normal;
251
+ font-variant: normal;
252
+ text-rendering: auto;
253
+ line-height: 1;
254
+ }
255
+ .ivds-icon {
256
+ width: var(--fontSize-base, 1rem);
257
+ height: var(--fontSize-base, 1rem);
258
+ font-size: var(--fontSize-base, 1rem);
259
+ }
260
+ .ivds-icon--xs {
261
+ width: var(--fontSize-xs, 0.75rem);
262
+ height: var(--fontSize-xs, 0.75rem);
263
+ font-size: var(--fontSize-xs, 0.75rem);
264
+ }
265
+ .ivds-icon--sm {
266
+ width: var(--fontSize-sm, 0.875rem);
267
+ height: var(--fontSize-sm, 0.875rem);
268
+ font-size: var(--fontSize-sm, 0.875rem);
269
+ }
270
+ .ivds-icon--md {
271
+ width: var(--fontSize-base, 1rem);
272
+ height: var(--fontSize-base, 1rem);
273
+ font-size: var(--fontSize-base, 1rem);
274
+ }
275
+ .ivds-icon--lg {
276
+ width: var(--fontSize-lg, 1.125rem);
277
+ height: var(--fontSize-lg, 1.125rem);
278
+ font-size: var(--fontSize-lg, 1.125rem);
279
+ }
280
+ .ivds-icon--xl {
281
+ width: var(--fontSize-xl, 1.25rem);
282
+ height: var(--fontSize-xl, 1.25rem);
283
+ font-size: var(--fontSize-xl, 1.25rem);
284
+ }
285
+ .ivds-icon--2xl {
286
+ width: var(--fontSize-2xl, 1.5rem);
287
+ height: var(--fontSize-2xl, 1.5rem);
288
+ font-size: var(--fontSize-2xl, 1.5rem);
289
+ }
290
+ .ivds-icon--3xl {
291
+ width: var(--fontSize-3xl, 1.875rem);
292
+ height: var(--fontSize-3xl, 1.875rem);
293
+ font-size: var(--fontSize-3xl, 1.875rem);
294
+ }
295
+ .ivds-icon--primary {
296
+ color: var(--color-brand-primary-500, #0ea5e9);
297
+ }
298
+ .ivds-icon--secondary {
299
+ color: var(--color-semantic-neutral-600, #6b7280);
300
+ }
301
+ .ivds-icon--success {
302
+ color: var(--color-semantic-success-500, #10b981);
303
+ }
304
+ .ivds-icon--warning {
305
+ color: var(--color-semantic-warning-500, #f59e0b);
306
+ }
307
+ .ivds-icon--error {
308
+ color: var(--color-semantic-error-500, #ef4444);
309
+ }
310
+ .ivds-icon--info {
311
+ color: var(--color-brand-primary-500, #0ea5e9);
312
+ }
313
+ .ivds-icon--interactive {
314
+ cursor: pointer;
315
+ transition: color 0.15s ease-in-out, transform 0.15s ease-in-out;
316
+ }
317
+ .ivds-icon--interactive:hover {
318
+ transform: scale(1.1);
319
+ }
320
+ .ivds-icon--interactive:active {
321
+ transform: scale(0.95);
322
+ }
323
+ .ivds-icon--disabled {
324
+ opacity: 0.5;
325
+ cursor: not-allowed;
326
+ pointer-events: none;
327
+ }
328
+ .ivds-icon--arrow-right {
329
+ display: inline-flex;
330
+ align-items: center;
331
+ justify-content: center;
332
+ width: 1em;
333
+ height: 1em;
334
+ fill: currentcolor;
335
+ flex-shrink: 0;
336
+ vertical-align: middle;
337
+ }
338
+ .ivds-icon--arrow-right svg {
339
+ width: 100%;
340
+ height: 100%;
341
+ fill: inherit;
342
+ display: block;
343
+ }
344
+ .ivds-icon--arrow-right::before {
345
+ font-style: normal;
346
+ font-feature-settings: normal;
347
+ font-variant: normal;
348
+ text-rendering: auto;
349
+ line-height: 1;
350
+ }
351
+ .ivds-icon--arrow-right {
352
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='currentcolor'%3E %3Cpath d='m9 18 6-6-6-6'/%3E %3C/svg%3E");
353
+ background-repeat: no-repeat;
354
+ background-position: center;
355
+ background-size: contain;
356
+ }
357
+ .ivds-icon--arrow-right::before {
358
+ content: "→";
359
+ font-size: inherit;
360
+ }
361
+ .ivds-icon--arrow-right:not(.ivds-icon--no-svg)::before {
362
+ display: none;
363
+ }
364
+ .ivds-icon {
365
+ display: inline-flex;
366
+ align-items: center;
367
+ justify-content: center;
368
+ width: 1em;
369
+ height: 1em;
370
+ fill: currentcolor;
371
+ flex-shrink: 0;
372
+ vertical-align: middle;
373
+ }
374
+ .ivds-icon svg {
375
+ width: 100%;
376
+ height: 100%;
377
+ fill: inherit;
378
+ display: block;
379
+ }
380
+ .ivds-icon::before {
381
+ font-style: normal;
382
+ font-feature-settings: normal;
383
+ font-variant: normal;
384
+ text-rendering: auto;
385
+ line-height: 1;
386
+ }
387
+ .ivds-icon {
388
+ width: var(--fontSize-base, 1rem);
389
+ height: var(--fontSize-base, 1rem);
390
+ font-size: var(--fontSize-base, 1rem);
391
+ }
392
+ .ivds-icon--xs {
393
+ width: var(--fontSize-xs, 0.75rem);
394
+ height: var(--fontSize-xs, 0.75rem);
395
+ font-size: var(--fontSize-xs, 0.75rem);
396
+ }
397
+ .ivds-icon--sm {
398
+ width: var(--fontSize-sm, 0.875rem);
399
+ height: var(--fontSize-sm, 0.875rem);
400
+ font-size: var(--fontSize-sm, 0.875rem);
401
+ }
402
+ .ivds-icon--md {
403
+ width: var(--fontSize-base, 1rem);
404
+ height: var(--fontSize-base, 1rem);
405
+ font-size: var(--fontSize-base, 1rem);
406
+ }
407
+ .ivds-icon--lg {
408
+ width: var(--fontSize-lg, 1.125rem);
409
+ height: var(--fontSize-lg, 1.125rem);
410
+ font-size: var(--fontSize-lg, 1.125rem);
411
+ }
412
+ .ivds-icon--xl {
413
+ width: var(--fontSize-xl, 1.25rem);
414
+ height: var(--fontSize-xl, 1.25rem);
415
+ font-size: var(--fontSize-xl, 1.25rem);
416
+ }
417
+ .ivds-icon--2xl {
418
+ width: var(--fontSize-2xl, 1.5rem);
419
+ height: var(--fontSize-2xl, 1.5rem);
420
+ font-size: var(--fontSize-2xl, 1.5rem);
421
+ }
422
+ .ivds-icon--3xl {
423
+ width: var(--fontSize-3xl, 1.875rem);
424
+ height: var(--fontSize-3xl, 1.875rem);
425
+ font-size: var(--fontSize-3xl, 1.875rem);
426
+ }
427
+ .ivds-icon--primary {
428
+ color: var(--color-brand-primary-500, #0ea5e9);
429
+ }
430
+ .ivds-icon--secondary {
431
+ color: var(--color-semantic-neutral-600, #6b7280);
432
+ }
433
+ .ivds-icon--success {
434
+ color: var(--color-semantic-success-500, #10b981);
435
+ }
436
+ .ivds-icon--warning {
437
+ color: var(--color-semantic-warning-500, #f59e0b);
438
+ }
439
+ .ivds-icon--error {
440
+ color: var(--color-semantic-error-500, #ef4444);
441
+ }
442
+ .ivds-icon--info {
443
+ color: var(--color-brand-primary-500, #0ea5e9);
444
+ }
445
+ .ivds-icon--interactive {
446
+ cursor: pointer;
447
+ transition: color 0.15s ease-in-out, transform 0.15s ease-in-out;
448
+ }
449
+ .ivds-icon--interactive:hover {
450
+ transform: scale(1.1);
451
+ }
452
+ .ivds-icon--interactive:active {
453
+ transform: scale(0.95);
454
+ }
455
+ .ivds-icon--disabled {
456
+ opacity: 0.5;
457
+ cursor: not-allowed;
458
+ pointer-events: none;
459
+ }
460
+ .ivds-icon--check {
461
+ display: inline-flex;
462
+ align-items: center;
463
+ justify-content: center;
464
+ width: 1em;
465
+ height: 1em;
466
+ fill: currentcolor;
467
+ flex-shrink: 0;
468
+ vertical-align: middle;
469
+ }
470
+ .ivds-icon--check svg {
471
+ width: 100%;
472
+ height: 100%;
473
+ fill: inherit;
474
+ display: block;
475
+ }
476
+ .ivds-icon--check::before {
477
+ font-style: normal;
478
+ font-feature-settings: normal;
479
+ font-variant: normal;
480
+ text-rendering: auto;
481
+ line-height: 1;
482
+ }
483
+ .ivds-icon--check {
484
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='currentcolor'%3E %3Cpath d='M20 6 9 17l-5-5'/%3E %3C/svg%3E");
485
+ background-repeat: no-repeat;
486
+ background-position: center;
487
+ background-size: contain;
488
+ }
489
+ .ivds-icon--check::before {
490
+ content: "✓";
491
+ font-size: inherit;
492
+ }
493
+ .ivds-icon--check:not(.ivds-icon--no-svg)::before {
494
+ display: none;
495
+ }
496
+ .ivds-icon {
497
+ display: inline-flex;
498
+ align-items: center;
499
+ justify-content: center;
500
+ width: 1em;
501
+ height: 1em;
502
+ fill: currentcolor;
503
+ flex-shrink: 0;
504
+ vertical-align: middle;
505
+ }
506
+ .ivds-icon svg {
507
+ width: 100%;
508
+ height: 100%;
509
+ fill: inherit;
510
+ display: block;
511
+ }
512
+ .ivds-icon::before {
513
+ font-style: normal;
514
+ font-feature-settings: normal;
515
+ font-variant: normal;
516
+ text-rendering: auto;
517
+ line-height: 1;
518
+ }
519
+ .ivds-icon {
520
+ width: var(--fontSize-base, 1rem);
521
+ height: var(--fontSize-base, 1rem);
522
+ font-size: var(--fontSize-base, 1rem);
523
+ }
524
+ .ivds-icon--xs {
525
+ width: var(--fontSize-xs, 0.75rem);
526
+ height: var(--fontSize-xs, 0.75rem);
527
+ font-size: var(--fontSize-xs, 0.75rem);
528
+ }
529
+ .ivds-icon--sm {
530
+ width: var(--fontSize-sm, 0.875rem);
531
+ height: var(--fontSize-sm, 0.875rem);
532
+ font-size: var(--fontSize-sm, 0.875rem);
533
+ }
534
+ .ivds-icon--md {
535
+ width: var(--fontSize-base, 1rem);
536
+ height: var(--fontSize-base, 1rem);
537
+ font-size: var(--fontSize-base, 1rem);
538
+ }
539
+ .ivds-icon--lg {
540
+ width: var(--fontSize-lg, 1.125rem);
541
+ height: var(--fontSize-lg, 1.125rem);
542
+ font-size: var(--fontSize-lg, 1.125rem);
543
+ }
544
+ .ivds-icon--xl {
545
+ width: var(--fontSize-xl, 1.25rem);
546
+ height: var(--fontSize-xl, 1.25rem);
547
+ font-size: var(--fontSize-xl, 1.25rem);
548
+ }
549
+ .ivds-icon--2xl {
550
+ width: var(--fontSize-2xl, 1.5rem);
551
+ height: var(--fontSize-2xl, 1.5rem);
552
+ font-size: var(--fontSize-2xl, 1.5rem);
553
+ }
554
+ .ivds-icon--3xl {
555
+ width: var(--fontSize-3xl, 1.875rem);
556
+ height: var(--fontSize-3xl, 1.875rem);
557
+ font-size: var(--fontSize-3xl, 1.875rem);
558
+ }
559
+ .ivds-icon--primary {
560
+ color: var(--color-brand-primary-500, #0ea5e9);
561
+ }
562
+ .ivds-icon--secondary {
563
+ color: var(--color-semantic-neutral-600, #6b7280);
564
+ }
565
+ .ivds-icon--success {
566
+ color: var(--color-semantic-success-500, #10b981);
567
+ }
568
+ .ivds-icon--warning {
569
+ color: var(--color-semantic-warning-500, #f59e0b);
570
+ }
571
+ .ivds-icon--error {
572
+ color: var(--color-semantic-error-500, #ef4444);
573
+ }
574
+ .ivds-icon--info {
575
+ color: var(--color-brand-primary-500, #0ea5e9);
576
+ }
577
+ .ivds-icon--interactive {
578
+ cursor: pointer;
579
+ transition: color 0.15s ease-in-out, transform 0.15s ease-in-out;
580
+ }
581
+ .ivds-icon--interactive:hover {
582
+ transform: scale(1.1);
583
+ }
584
+ .ivds-icon--interactive:active {
585
+ transform: scale(0.95);
586
+ }
587
+ .ivds-icon--disabled {
588
+ opacity: 0.5;
589
+ cursor: not-allowed;
590
+ pointer-events: none;
591
+ }
592
+ .ivds-icon--close {
593
+ display: inline-flex;
594
+ align-items: center;
595
+ justify-content: center;
596
+ width: 1em;
597
+ height: 1em;
598
+ fill: currentcolor;
599
+ flex-shrink: 0;
600
+ vertical-align: middle;
601
+ }
602
+ .ivds-icon--close svg {
603
+ width: 100%;
604
+ height: 100%;
605
+ fill: inherit;
606
+ display: block;
607
+ }
608
+ .ivds-icon--close::before {
609
+ font-style: normal;
610
+ font-feature-settings: normal;
611
+ font-variant: normal;
612
+ text-rendering: auto;
613
+ line-height: 1;
614
+ }
615
+ .ivds-icon--close {
616
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='currentcolor'%3E %3Cpath d='M18 6 6 18'/%3E %3Cpath d='m6 6 12 12'/%3E %3C/svg%3E");
617
+ background-repeat: no-repeat;
618
+ background-position: center;
619
+ background-size: contain;
620
+ }
621
+ .ivds-icon--close::before {
622
+ content: "×";
623
+ font-size: inherit;
624
+ font-weight: bold;
625
+ }
626
+ .ivds-icon--close:not(.ivds-icon--no-svg)::before {
627
+ display: none;
628
+ }
629
+ .ivds-icon {
630
+ display: inline-flex;
631
+ align-items: center;
632
+ justify-content: center;
633
+ width: 1em;
634
+ height: 1em;
635
+ fill: currentcolor;
636
+ flex-shrink: 0;
637
+ vertical-align: middle;
638
+ }
639
+ .ivds-icon svg {
640
+ width: 100%;
641
+ height: 100%;
642
+ fill: inherit;
643
+ display: block;
644
+ }
645
+ .ivds-icon::before {
646
+ font-style: normal;
647
+ font-feature-settings: normal;
648
+ font-variant: normal;
649
+ text-rendering: auto;
650
+ line-height: 1;
651
+ }
652
+ .ivds-icon {
653
+ width: var(--fontSize-base, 1rem);
654
+ height: var(--fontSize-base, 1rem);
655
+ font-size: var(--fontSize-base, 1rem);
656
+ }
657
+ .ivds-icon--xs {
658
+ width: var(--fontSize-xs, 0.75rem);
659
+ height: var(--fontSize-xs, 0.75rem);
660
+ font-size: var(--fontSize-xs, 0.75rem);
661
+ }
662
+ .ivds-icon--sm {
663
+ width: var(--fontSize-sm, 0.875rem);
664
+ height: var(--fontSize-sm, 0.875rem);
665
+ font-size: var(--fontSize-sm, 0.875rem);
666
+ }
667
+ .ivds-icon--md {
668
+ width: var(--fontSize-base, 1rem);
669
+ height: var(--fontSize-base, 1rem);
670
+ font-size: var(--fontSize-base, 1rem);
671
+ }
672
+ .ivds-icon--lg {
673
+ width: var(--fontSize-lg, 1.125rem);
674
+ height: var(--fontSize-lg, 1.125rem);
675
+ font-size: var(--fontSize-lg, 1.125rem);
676
+ }
677
+ .ivds-icon--xl {
678
+ width: var(--fontSize-xl, 1.25rem);
679
+ height: var(--fontSize-xl, 1.25rem);
680
+ font-size: var(--fontSize-xl, 1.25rem);
681
+ }
682
+ .ivds-icon--2xl {
683
+ width: var(--fontSize-2xl, 1.5rem);
684
+ height: var(--fontSize-2xl, 1.5rem);
685
+ font-size: var(--fontSize-2xl, 1.5rem);
686
+ }
687
+ .ivds-icon--3xl {
688
+ width: var(--fontSize-3xl, 1.875rem);
689
+ height: var(--fontSize-3xl, 1.875rem);
690
+ font-size: var(--fontSize-3xl, 1.875rem);
691
+ }
692
+ .ivds-icon--primary {
693
+ color: var(--color-brand-primary-500, #0ea5e9);
694
+ }
695
+ .ivds-icon--secondary {
696
+ color: var(--color-semantic-neutral-600, #6b7280);
697
+ }
698
+ .ivds-icon--success {
699
+ color: var(--color-semantic-success-500, #10b981);
700
+ }
701
+ .ivds-icon--warning {
702
+ color: var(--color-semantic-warning-500, #f59e0b);
703
+ }
704
+ .ivds-icon--error {
705
+ color: var(--color-semantic-error-500, #ef4444);
706
+ }
707
+ .ivds-icon--info {
708
+ color: var(--color-brand-primary-500, #0ea5e9);
709
+ }
710
+ .ivds-icon--interactive {
711
+ cursor: pointer;
712
+ transition: color 0.15s ease-in-out, transform 0.15s ease-in-out;
713
+ }
714
+ .ivds-icon--interactive:hover {
715
+ transform: scale(1.1);
716
+ }
717
+ .ivds-icon--interactive:active {
718
+ transform: scale(0.95);
719
+ }
720
+ .ivds-icon--disabled {
721
+ opacity: 0.5;
722
+ cursor: not-allowed;
723
+ pointer-events: none;
724
+ }
725
+ .ivds-icon--info {
726
+ display: inline-flex;
727
+ align-items: center;
728
+ justify-content: center;
729
+ width: 1em;
730
+ height: 1em;
731
+ fill: currentcolor;
732
+ flex-shrink: 0;
733
+ vertical-align: middle;
734
+ }
735
+ .ivds-icon--info svg {
736
+ width: 100%;
737
+ height: 100%;
738
+ fill: inherit;
739
+ display: block;
740
+ }
741
+ .ivds-icon--info::before {
742
+ font-style: normal;
743
+ font-feature-settings: normal;
744
+ font-variant: normal;
745
+ text-rendering: auto;
746
+ line-height: 1;
747
+ }
748
+ .ivds-icon--info {
749
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='currentcolor'%3E %3Ccircle cx='12' cy='12' r='10'/%3E %3Cpath d='M12 16v-4'/%3E %3Cpath d='M12 8h.01'/%3E %3C/svg%3E");
750
+ background-repeat: no-repeat;
751
+ background-position: center;
752
+ background-size: contain;
753
+ }
754
+ .ivds-icon--info::before {
755
+ content: "ℹ";
756
+ font-size: inherit;
757
+ font-weight: bold;
758
+ }
759
+ .ivds-icon--info:not(.ivds-icon--no-svg)::before {
760
+ display: none;
761
+ }
762
+ .ivds-icon {
763
+ display: inline-flex;
764
+ align-items: center;
765
+ justify-content: center;
766
+ width: 1em;
767
+ height: 1em;
768
+ fill: currentcolor;
769
+ flex-shrink: 0;
770
+ vertical-align: middle;
771
+ }
772
+ .ivds-icon svg {
773
+ width: 100%;
774
+ height: 100%;
775
+ fill: inherit;
776
+ display: block;
777
+ }
778
+ .ivds-icon::before {
779
+ font-style: normal;
780
+ font-feature-settings: normal;
781
+ font-variant: normal;
782
+ text-rendering: auto;
783
+ line-height: 1;
784
+ }
785
+ .ivds-icon {
786
+ width: var(--fontSize-base, 1rem);
787
+ height: var(--fontSize-base, 1rem);
788
+ font-size: var(--fontSize-base, 1rem);
789
+ }
790
+ .ivds-icon--xs {
791
+ width: var(--fontSize-xs, 0.75rem);
792
+ height: var(--fontSize-xs, 0.75rem);
793
+ font-size: var(--fontSize-xs, 0.75rem);
794
+ }
795
+ .ivds-icon--sm {
796
+ width: var(--fontSize-sm, 0.875rem);
797
+ height: var(--fontSize-sm, 0.875rem);
798
+ font-size: var(--fontSize-sm, 0.875rem);
799
+ }
800
+ .ivds-icon--md {
801
+ width: var(--fontSize-base, 1rem);
802
+ height: var(--fontSize-base, 1rem);
803
+ font-size: var(--fontSize-base, 1rem);
804
+ }
805
+ .ivds-icon--lg {
806
+ width: var(--fontSize-lg, 1.125rem);
807
+ height: var(--fontSize-lg, 1.125rem);
808
+ font-size: var(--fontSize-lg, 1.125rem);
809
+ }
810
+ .ivds-icon--xl {
811
+ width: var(--fontSize-xl, 1.25rem);
812
+ height: var(--fontSize-xl, 1.25rem);
813
+ font-size: var(--fontSize-xl, 1.25rem);
814
+ }
815
+ .ivds-icon--2xl {
816
+ width: var(--fontSize-2xl, 1.5rem);
817
+ height: var(--fontSize-2xl, 1.5rem);
818
+ font-size: var(--fontSize-2xl, 1.5rem);
819
+ }
820
+ .ivds-icon--3xl {
821
+ width: var(--fontSize-3xl, 1.875rem);
822
+ height: var(--fontSize-3xl, 1.875rem);
823
+ font-size: var(--fontSize-3xl, 1.875rem);
824
+ }
825
+ .ivds-icon--primary {
826
+ color: var(--color-brand-primary-500, #0ea5e9);
827
+ }
828
+ .ivds-icon--secondary {
829
+ color: var(--color-semantic-neutral-600, #6b7280);
830
+ }
831
+ .ivds-icon--success {
832
+ color: var(--color-semantic-success-500, #10b981);
833
+ }
834
+ .ivds-icon--warning {
835
+ color: var(--color-semantic-warning-500, #f59e0b);
836
+ }
837
+ .ivds-icon--error {
838
+ color: var(--color-semantic-error-500, #ef4444);
839
+ }
840
+ .ivds-icon--info {
841
+ color: var(--color-brand-primary-500, #0ea5e9);
842
+ }
843
+ .ivds-icon--interactive {
844
+ cursor: pointer;
845
+ transition: color 0.15s ease-in-out, transform 0.15s ease-in-out;
846
+ }
847
+ .ivds-icon--interactive:hover {
848
+ transform: scale(1.1);
849
+ }
850
+ .ivds-icon--interactive:active {
851
+ transform: scale(0.95);
852
+ }
853
+ .ivds-icon--disabled {
854
+ opacity: 0.5;
855
+ cursor: not-allowed;
856
+ pointer-events: none;
857
+ }
858
+ .ivds-icon--warning {
859
+ display: inline-flex;
860
+ align-items: center;
861
+ justify-content: center;
862
+ width: 1em;
863
+ height: 1em;
864
+ fill: currentcolor;
865
+ flex-shrink: 0;
866
+ vertical-align: middle;
867
+ }
868
+ .ivds-icon--warning svg {
869
+ width: 100%;
870
+ height: 100%;
871
+ fill: inherit;
872
+ display: block;
873
+ }
874
+ .ivds-icon--warning::before {
875
+ font-style: normal;
876
+ font-feature-settings: normal;
877
+ font-variant: normal;
878
+ text-rendering: auto;
879
+ line-height: 1;
880
+ }
881
+ .ivds-icon--warning {
882
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='currentcolor'%3E %3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E %3Cpath d='M12 9v4'/%3E %3Cpath d='M12 17h.01'/%3E %3C/svg%3E");
883
+ background-repeat: no-repeat;
884
+ background-position: center;
885
+ background-size: contain;
886
+ }
887
+ .ivds-icon--warning::before {
888
+ content: "⚠";
889
+ font-size: inherit;
890
+ }
891
+ .ivds-icon--warning:not(.ivds-icon--no-svg)::before {
892
+ display: none;
893
+ }
894
+ .ivds-icon {
895
+ display: inline-flex;
896
+ align-items: center;
897
+ justify-content: center;
898
+ width: 1em;
899
+ height: 1em;
900
+ fill: currentcolor;
901
+ flex-shrink: 0;
902
+ vertical-align: middle;
903
+ }
904
+ .ivds-icon svg {
905
+ width: 100%;
906
+ height: 100%;
907
+ fill: inherit;
908
+ display: block;
909
+ }
910
+ .ivds-icon::before {
911
+ font-style: normal;
912
+ font-feature-settings: normal;
913
+ font-variant: normal;
914
+ text-rendering: auto;
915
+ line-height: 1;
916
+ }
917
+ .ivds-icon {
918
+ width: var(--fontSize-base, 1rem);
919
+ height: var(--fontSize-base, 1rem);
920
+ font-size: var(--fontSize-base, 1rem);
921
+ }
922
+ .ivds-icon--xs {
923
+ width: var(--fontSize-xs, 0.75rem);
924
+ height: var(--fontSize-xs, 0.75rem);
925
+ font-size: var(--fontSize-xs, 0.75rem);
926
+ }
927
+ .ivds-icon--sm {
928
+ width: var(--fontSize-sm, 0.875rem);
929
+ height: var(--fontSize-sm, 0.875rem);
930
+ font-size: var(--fontSize-sm, 0.875rem);
931
+ }
932
+ .ivds-icon--md {
933
+ width: var(--fontSize-base, 1rem);
934
+ height: var(--fontSize-base, 1rem);
935
+ font-size: var(--fontSize-base, 1rem);
936
+ }
937
+ .ivds-icon--lg {
938
+ width: var(--fontSize-lg, 1.125rem);
939
+ height: var(--fontSize-lg, 1.125rem);
940
+ font-size: var(--fontSize-lg, 1.125rem);
941
+ }
942
+ .ivds-icon--xl {
943
+ width: var(--fontSize-xl, 1.25rem);
944
+ height: var(--fontSize-xl, 1.25rem);
945
+ font-size: var(--fontSize-xl, 1.25rem);
946
+ }
947
+ .ivds-icon--2xl {
948
+ width: var(--fontSize-2xl, 1.5rem);
949
+ height: var(--fontSize-2xl, 1.5rem);
950
+ font-size: var(--fontSize-2xl, 1.5rem);
951
+ }
952
+ .ivds-icon--3xl {
953
+ width: var(--fontSize-3xl, 1.875rem);
954
+ height: var(--fontSize-3xl, 1.875rem);
955
+ font-size: var(--fontSize-3xl, 1.875rem);
956
+ }
957
+ .ivds-icon--primary {
958
+ color: var(--color-brand-primary-500, #0ea5e9);
959
+ }
960
+ .ivds-icon--secondary {
961
+ color: var(--color-semantic-neutral-600, #6b7280);
962
+ }
963
+ .ivds-icon--success {
964
+ color: var(--color-semantic-success-500, #10b981);
965
+ }
966
+ .ivds-icon--warning {
967
+ color: var(--color-semantic-warning-500, #f59e0b);
968
+ }
969
+ .ivds-icon--error {
970
+ color: var(--color-semantic-error-500, #ef4444);
971
+ }
972
+ .ivds-icon--info {
973
+ color: var(--color-brand-primary-500, #0ea5e9);
974
+ }
975
+ .ivds-icon--interactive {
976
+ cursor: pointer;
977
+ transition: color 0.15s ease-in-out, transform 0.15s ease-in-out;
978
+ }
979
+ .ivds-icon--interactive:hover {
980
+ transform: scale(1.1);
981
+ }
982
+ .ivds-icon--interactive:active {
983
+ transform: scale(0.95);
984
+ }
985
+ .ivds-icon--disabled {
986
+ opacity: 0.5;
987
+ cursor: not-allowed;
988
+ pointer-events: none;
989
+ }
990
+ .ivds-icon--error {
991
+ display: inline-flex;
992
+ align-items: center;
993
+ justify-content: center;
994
+ width: 1em;
995
+ height: 1em;
996
+ fill: currentcolor;
997
+ flex-shrink: 0;
998
+ vertical-align: middle;
999
+ }
1000
+ .ivds-icon--error svg {
1001
+ width: 100%;
1002
+ height: 100%;
1003
+ fill: inherit;
1004
+ display: block;
1005
+ }
1006
+ .ivds-icon--error::before {
1007
+ font-style: normal;
1008
+ font-feature-settings: normal;
1009
+ font-variant: normal;
1010
+ text-rendering: auto;
1011
+ line-height: 1;
1012
+ }
1013
+ .ivds-icon--error {
1014
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='currentcolor'%3E %3Ccircle cx='12' cy='12' r='10'/%3E %3Cpath d='M15 9l-6 6'/%3E %3Cpath d='M9 9l6 6'/%3E %3C/svg%3E");
1015
+ background-repeat: no-repeat;
1016
+ background-position: center;
1017
+ background-size: contain;
1018
+ }
1019
+ .ivds-icon--error::before {
1020
+ content: "✕";
1021
+ font-size: inherit;
1022
+ font-weight: bold;
1023
+ }
1024
+ .ivds-icon--error:not(.ivds-icon--no-svg)::before {
1025
+ display: none;
1026
+ }
1027
+ .ivds-icon {
1028
+ display: inline-flex;
1029
+ align-items: center;
1030
+ justify-content: center;
1031
+ width: 1em;
1032
+ height: 1em;
1033
+ fill: currentcolor;
1034
+ flex-shrink: 0;
1035
+ vertical-align: middle;
1036
+ }
1037
+ .ivds-icon svg {
1038
+ width: 100%;
1039
+ height: 100%;
1040
+ fill: inherit;
1041
+ display: block;
1042
+ }
1043
+ .ivds-icon::before {
1044
+ font-style: normal;
1045
+ font-feature-settings: normal;
1046
+ font-variant: normal;
1047
+ text-rendering: auto;
1048
+ line-height: 1;
1049
+ }
1050
+ .ivds-icon {
1051
+ width: var(--fontSize-base, 1rem);
1052
+ height: var(--fontSize-base, 1rem);
1053
+ font-size: var(--fontSize-base, 1rem);
1054
+ }
1055
+ .ivds-icon--xs {
1056
+ width: var(--fontSize-xs, 0.75rem);
1057
+ height: var(--fontSize-xs, 0.75rem);
1058
+ font-size: var(--fontSize-xs, 0.75rem);
1059
+ }
1060
+ .ivds-icon--sm {
1061
+ width: var(--fontSize-sm, 0.875rem);
1062
+ height: var(--fontSize-sm, 0.875rem);
1063
+ font-size: var(--fontSize-sm, 0.875rem);
1064
+ }
1065
+ .ivds-icon--md {
1066
+ width: var(--fontSize-base, 1rem);
1067
+ height: var(--fontSize-base, 1rem);
1068
+ font-size: var(--fontSize-base, 1rem);
1069
+ }
1070
+ .ivds-icon--lg {
1071
+ width: var(--fontSize-lg, 1.125rem);
1072
+ height: var(--fontSize-lg, 1.125rem);
1073
+ font-size: var(--fontSize-lg, 1.125rem);
1074
+ }
1075
+ .ivds-icon--xl {
1076
+ width: var(--fontSize-xl, 1.25rem);
1077
+ height: var(--fontSize-xl, 1.25rem);
1078
+ font-size: var(--fontSize-xl, 1.25rem);
1079
+ }
1080
+ .ivds-icon--2xl {
1081
+ width: var(--fontSize-2xl, 1.5rem);
1082
+ height: var(--fontSize-2xl, 1.5rem);
1083
+ font-size: var(--fontSize-2xl, 1.5rem);
1084
+ }
1085
+ .ivds-icon--3xl {
1086
+ width: var(--fontSize-3xl, 1.875rem);
1087
+ height: var(--fontSize-3xl, 1.875rem);
1088
+ font-size: var(--fontSize-3xl, 1.875rem);
1089
+ }
1090
+ .ivds-icon--primary {
1091
+ color: var(--color-brand-primary-500, #0ea5e9);
1092
+ }
1093
+ .ivds-icon--secondary {
1094
+ color: var(--color-semantic-neutral-600, #6b7280);
1095
+ }
1096
+ .ivds-icon--success {
1097
+ color: var(--color-semantic-success-500, #10b981);
1098
+ }
1099
+ .ivds-icon--warning {
1100
+ color: var(--color-semantic-warning-500, #f59e0b);
1101
+ }
1102
+ .ivds-icon--error {
1103
+ color: var(--color-semantic-error-500, #ef4444);
1104
+ }
1105
+ .ivds-icon--info {
1106
+ color: var(--color-brand-primary-500, #0ea5e9);
1107
+ }
1108
+ .ivds-icon--interactive {
1109
+ cursor: pointer;
1110
+ transition: color 0.15s ease-in-out, transform 0.15s ease-in-out;
1111
+ }
1112
+ .ivds-icon--interactive:hover {
1113
+ transform: scale(1.1);
1114
+ }
1115
+ .ivds-icon--interactive:active {
1116
+ transform: scale(0.95);
1117
+ }
1118
+ .ivds-icon--disabled {
1119
+ opacity: 0.5;
1120
+ cursor: not-allowed;
1121
+ pointer-events: none;
1122
+ }
1123
+ .ivds-icon--success {
1124
+ display: inline-flex;
1125
+ align-items: center;
1126
+ justify-content: center;
1127
+ width: 1em;
1128
+ height: 1em;
1129
+ fill: currentcolor;
1130
+ flex-shrink: 0;
1131
+ vertical-align: middle;
1132
+ }
1133
+ .ivds-icon--success svg {
1134
+ width: 100%;
1135
+ height: 100%;
1136
+ fill: inherit;
1137
+ display: block;
1138
+ }
1139
+ .ivds-icon--success::before {
1140
+ font-style: normal;
1141
+ font-feature-settings: normal;
1142
+ font-variant: normal;
1143
+ text-rendering: auto;
1144
+ line-height: 1;
1145
+ }
1146
+ .ivds-icon--success {
1147
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='currentcolor'%3E %3Ccircle cx='12' cy='12' r='10'/%3E %3Cpath d='M9 12l2 2 4-4'/%3E %3C/svg%3E");
1148
+ background-repeat: no-repeat;
1149
+ background-position: center;
1150
+ background-size: contain;
1151
+ }
1152
+ .ivds-icon--success::before {
1153
+ content: "✓";
1154
+ font-size: inherit;
1155
+ }
1156
+ .ivds-icon--success:not(.ivds-icon--no-svg)::before {
1157
+ display: none;
1158
+ }