@acorex/styles 7.24.5 → 16.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.
Files changed (81) hide show
  1. package/fonts/font-awesome/fa-brands-400.eot +0 -0
  2. package/fonts/font-awesome/fa-brands-400.svg +3570 -0
  3. package/fonts/font-awesome/fa-brands-400.ttf +0 -0
  4. package/fonts/font-awesome/fa-brands-400.woff +0 -0
  5. package/fonts/font-awesome/fa-brands-400.woff2 +0 -0
  6. package/fonts/font-awesome/fa-duotone-900.eot +0 -0
  7. package/fonts/font-awesome/fa-duotone-900.svg +15055 -0
  8. package/fonts/font-awesome/fa-duotone-900.ttf +0 -0
  9. package/fonts/font-awesome/fa-duotone-900.woff +0 -0
  10. package/fonts/font-awesome/fa-duotone-900.woff2 +0 -0
  11. package/fonts/font-awesome/fa-light-300.eot +0 -0
  12. package/fonts/font-awesome/fa-light-300.svg +12330 -0
  13. package/fonts/font-awesome/fa-light-300.ttf +0 -0
  14. package/fonts/font-awesome/fa-light-300.woff +0 -0
  15. package/fonts/font-awesome/fa-light-300.woff2 +0 -0
  16. package/fonts/font-awesome/fa-regular-400.eot +0 -0
  17. package/fonts/font-awesome/fa-regular-400.svg +11256 -0
  18. package/fonts/font-awesome/fa-regular-400.ttf +0 -0
  19. package/fonts/font-awesome/fa-regular-400.woff +0 -0
  20. package/fonts/font-awesome/fa-regular-400.woff2 +0 -0
  21. package/fonts/font-awesome/fa-solid-900.eot +0 -0
  22. package/fonts/font-awesome/fa-solid-900.svg +9588 -0
  23. package/fonts/font-awesome/fa-solid-900.ttf +0 -0
  24. package/fonts/font-awesome/fa-solid-900.woff +0 -0
  25. package/fonts/font-awesome/fa-solid-900.woff2 +0 -0
  26. package/fonts/font-awesome/font-awesome.css +16960 -0
  27. package/package.json +11 -11
  28. package/scss/buttons.scss +69 -0
  29. package/scss/calendar.scss +144 -0
  30. package/scss/checkbox.scss +46 -0
  31. package/scss/context-menu.scss +75 -0
  32. package/scss/data-grid.scss +117 -0
  33. package/scss/drawer.scss +138 -0
  34. package/scss/fieldset.scss +23 -0
  35. package/scss/forms.scss +523 -0
  36. package/scss/list.scss +47 -0
  37. package/scss/master.scss +330 -0
  38. package/scss/menu.scss +130 -0
  39. package/scss/mixin.scss +12 -0
  40. package/scss/page.scss +54 -0
  41. package/scss/progress.scss +11 -0
  42. package/scss/selection-list.scss +104 -0
  43. package/scss/style.scss +47 -0
  44. package/scss/tab-strip.scss +31 -0
  45. package/scss/tab.scss +36 -0
  46. package/scss/toast.scss +46 -0
  47. package/scss/tooltip.scss +55 -0
  48. package/scss/treeview.scss +152 -0
  49. package/scss/upload.scss +170 -0
  50. package/scss/variables.scss +139 -0
  51. package/icons/fontawesome/fontawesome.scss +0 -68
  52. package/icons/index.scss +0 -207
  53. package/icons/material/material.scss +0 -73
  54. package/index.css +0 -2623
  55. package/index.min.css +0 -1
  56. package/index.scss +0 -9
  57. package/src/base/_preflight.scss +0 -417
  58. package/src/base/index.scss +0 -13
  59. package/src/mixins/_look.scss +0 -84
  60. package/src/mixins/_media.scss +0 -27
  61. package/src/mixins/_util.scss +0 -19
  62. package/src/mixins/index.scss +0 -3
  63. package/src/shared/_actionsheet.scss +0 -23
  64. package/src/shared/_check-box.scss +0 -59
  65. package/src/shared/_color-look.scss +0 -689
  66. package/src/shared/_drop-down.scss +0 -76
  67. package/src/shared/_editor-container.scss +0 -257
  68. package/src/shared/_general-button.scss +0 -87
  69. package/src/shared/_inputs.scss +0 -16
  70. package/src/shared/_list.scss +0 -211
  71. package/src/shared/_radio.scss +0 -56
  72. package/src/shared/_table.scss +0 -149
  73. package/src/shared/_utils.scss +0 -75
  74. package/src/shared/index.scss +0 -11
  75. package/src/utility/index.scss +0 -24
  76. package/src/variables/_colors.scss +0 -2
  77. package/src/variables/_degrees.scss +0 -1
  78. package/src/variables/index.scss +0 -2
  79. package/tailwind-base.js +0 -235
  80. package/themes/default.css +0 -1
  81. package/themes/default.scss +0 -141
package/index.css DELETED
@@ -1,2623 +0,0 @@
1
- @import '@angular/cdk/overlay-prebuilt.css';
2
- /*
3
- 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
4
- 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
5
- */
6
- *,
7
- ::before,
8
- ::after {
9
- box-sizing: border-box; /* 1 */
10
- border-width: 0; /* 2 */
11
- border-style: solid; /* 2 */
12
- border-color: theme("borderColor.DEFAULT", currentColor); /* 2 */
13
- }
14
-
15
- ::before,
16
- ::after {
17
- --tw-content: "";
18
- }
19
-
20
- /*
21
- 1. Use a consistent sensible line-height in all browsers.
22
- 2. Prevent adjustments of font size after orientation changes in iOS.
23
- 3. Use a more readable tab size.
24
- 4. Use the user's configured `sans` font-family by default.
25
- 5. Use the user's configured `sans` font-feature-settings by default.
26
- 6. Use the user's configured `sans` font-variation-settings by default.
27
- 7. Disable tap highlights on iOS.
28
- */
29
- html,
30
- :host {
31
- line-height: 1.5; /* 1 */
32
- -webkit-text-size-adjust: 100%; /* 2 */
33
- -moz-tab-size: 4; /* 3 */
34
- tab-size: 4; /* 3 */
35
- font-family: theme("fontFamily.sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 4 */
36
- font-feature-settings: theme("fontFamily.sans[1].fontFeatureSettings", normal); /* 5 */
37
- font-variation-settings: theme("fontFamily.sans[1].fontVariationSettings", normal); /* 6 */
38
- -webkit-tap-highlight-color: transparent; /* 7 */
39
- }
40
-
41
- /*
42
- 1. Remove the margin in all browsers.
43
- 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
44
- */
45
- body {
46
- margin: 0; /* 1 */
47
- line-height: inherit; /* 2 */
48
- }
49
-
50
- /*
51
- 1. Add the correct height in Firefox.
52
- 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
53
- 3. Ensure horizontal rules are visible by default.
54
- */
55
- hr {
56
- height: 0; /* 1 */
57
- color: inherit; /* 2 */
58
- border-top-width: 1px; /* 3 */
59
- }
60
-
61
- /*
62
- Add the correct text decoration in Chrome, Edge, and Safari.
63
- */
64
- abbr:where([title]) {
65
- text-decoration: underline dotted;
66
- }
67
-
68
- /*
69
- Remove the default font size and weight for headings.
70
- */
71
- h1,
72
- h2,
73
- h3,
74
- h4,
75
- h5,
76
- h6 {
77
- font-size: inherit;
78
- font-weight: inherit;
79
- }
80
-
81
- /*
82
- Reset links to optimize for opt-in styling instead of opt-out.
83
- */
84
- a {
85
- color: inherit;
86
- text-decoration: inherit;
87
- }
88
-
89
- /*
90
- Add the correct font weight in Edge and Safari.
91
- */
92
- b,
93
- strong {
94
- font-weight: bolder;
95
- }
96
-
97
- /*
98
- 1. Use the user's configured `mono` font-family by default.
99
- 2. Use the user's configured `mono` font-feature-settings by default.
100
- 3. Use the user's configured `mono` font-variation-settings by default.
101
- 4. Correct the odd `em` font sizing in all browsers.
102
- */
103
- code,
104
- kbd,
105
- samp,
106
- pre {
107
- font-family: theme("fontFamily.mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); /* 1 */
108
- font-feature-settings: theme("fontFamily.mono[1].fontFeatureSettings", normal); /* 2 */
109
- font-variation-settings: theme("fontFamily.mono[1].fontVariationSettings", normal); /* 3 */
110
- font-size: 1em; /* 4 */
111
- }
112
-
113
- /*
114
- Add the correct font size in all browsers.
115
- */
116
- small {
117
- font-size: 80%;
118
- }
119
-
120
- /*
121
- Prevent `sub` and `sup` elements from affecting the line height in all browsers.
122
- */
123
- sub,
124
- sup {
125
- font-size: 75%;
126
- line-height: 0;
127
- position: relative;
128
- vertical-align: baseline;
129
- }
130
-
131
- sub {
132
- bottom: -0.25em;
133
- }
134
-
135
- sup {
136
- top: -0.5em;
137
- }
138
-
139
- /*
140
- 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
141
- 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
142
- 3. Remove gaps between table borders by default.
143
- */
144
- table {
145
- text-indent: 0; /* 1 */
146
- border-color: inherit; /* 2 */
147
- border-collapse: collapse; /* 3 */
148
- }
149
-
150
- /*
151
- 1. Change the font styles in all browsers.
152
- 2. Remove the margin in Firefox and Safari.
153
- 3. Remove default padding in all browsers.
154
- */
155
- button,
156
- input,
157
- optgroup,
158
- select,
159
- textarea {
160
- font-family: inherit; /* 1 */
161
- font-feature-settings: inherit; /* 1 */
162
- font-variation-settings: inherit; /* 1 */
163
- font-size: 100%; /* 1 */
164
- font-weight: inherit; /* 1 */
165
- line-height: inherit; /* 1 */
166
- color: inherit; /* 1 */
167
- margin: 0; /* 2 */
168
- padding: 0; /* 3 */
169
- }
170
-
171
- /*
172
- Remove the inheritance of text transform in Edge and Firefox.
173
- */
174
- button,
175
- select {
176
- text-transform: none;
177
- }
178
-
179
- /*
180
- 1. Correct the inability to style clickable types in iOS and Safari.
181
- 2. Remove default button styles.
182
- */
183
- button,
184
- [type=button],
185
- [type=reset],
186
- [type=submit] {
187
- -webkit-appearance: button; /* 1 */
188
- background-color: transparent; /* 2 */
189
- background-image: none; /* 2 */
190
- }
191
-
192
- /*
193
- Use the modern Firefox focus style for all focusable elements.
194
- */
195
- :-moz-focusring {
196
- outline: auto;
197
- }
198
-
199
- /*
200
- Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
201
- */
202
- :-moz-ui-invalid {
203
- box-shadow: none;
204
- }
205
-
206
- /*
207
- Add the correct vertical alignment in Chrome and Firefox.
208
- */
209
- progress {
210
- vertical-align: baseline;
211
- }
212
-
213
- /*
214
- Correct the cursor style of increment and decrement buttons in Safari.
215
- */
216
- ::-webkit-inner-spin-button,
217
- ::-webkit-outer-spin-button {
218
- height: auto;
219
- }
220
-
221
- /*
222
- 1. Correct the odd appearance in Chrome and Safari.
223
- 2. Correct the outline style in Safari.
224
- */
225
- [type=search] {
226
- -webkit-appearance: textfield; /* 1 */
227
- outline-offset: -2px; /* 2 */
228
- }
229
-
230
- /*
231
- Remove the inner padding in Chrome and Safari on macOS.
232
- */
233
- ::-webkit-search-decoration {
234
- -webkit-appearance: none;
235
- }
236
-
237
- /*
238
- 1. Correct the inability to style clickable types in iOS and Safari.
239
- 2. Change font properties to `inherit` in Safari.
240
- */
241
- ::-webkit-file-upload-button {
242
- -webkit-appearance: button; /* 1 */
243
- font: inherit; /* 2 */
244
- }
245
-
246
- /*
247
- Add the correct display in Chrome and Safari.
248
- */
249
- summary {
250
- display: list-item;
251
- }
252
-
253
- /*
254
- Removes the default spacing for appropriate elements.
255
- */
256
- blockquote,
257
- dl,
258
- dd,
259
- h1,
260
- h2,
261
- h3,
262
- h4,
263
- h5,
264
- h6,
265
- hr,
266
- figure,
267
- p,
268
- pre {
269
- margin: 0;
270
- }
271
-
272
- fieldset {
273
- margin: 0;
274
- padding: 0;
275
- }
276
-
277
- legend {
278
- padding: 0;
279
- }
280
-
281
- ol,
282
- ul,
283
- menu {
284
- list-style: none;
285
- margin: 0;
286
- padding: 0;
287
- }
288
-
289
- dialog {
290
- padding: 0;
291
- }
292
-
293
- /*
294
- Prevent resizing textareas horizontally by default.
295
- */
296
- textarea {
297
- resize: vertical;
298
- }
299
-
300
- /*
301
- 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
302
- 2. Set the default placeholder color to the user's configured gray 400 color.
303
- */
304
- input::placeholder,
305
- textarea::placeholder {
306
- opacity: 1; /* 1 */
307
- color: theme("colors.gray.400", #9ca3af); /* 2 */
308
- }
309
-
310
- /*
311
- Set the default cursor for buttons.
312
- */
313
- button,
314
- [role=button] {
315
- cursor: pointer;
316
- }
317
-
318
- /*
319
- Make sure disabled buttons don't get the pointer cursor.
320
- */
321
- :disabled {
322
- cursor: default;
323
- }
324
-
325
- /*
326
- 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
327
- 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
328
- This can trigger a poorly considered lint error in some tools but is included by design.
329
- */
330
- img,
331
- svg,
332
- video,
333
- canvas,
334
- audio,
335
- iframe,
336
- embed,
337
- object {
338
- display: block; /* 1 */
339
- vertical-align: middle; /* 2 */
340
- }
341
-
342
- /*
343
- Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
344
- */
345
- img,
346
- video {
347
- max-width: 100%;
348
- height: auto;
349
- }
350
-
351
- /*
352
- Make elements with the HTML hidden attribute stay hidden by default.
353
- */
354
- [hidden] {
355
- display: none;
356
- }
357
-
358
- :root {
359
- --ax-overlay-full-width: 93;
360
- --ax-color-white: 255, 255, 255;
361
- --ax-color-black: 0, 0, 0;
362
- }
363
-
364
- html,
365
- body {
366
- background-color: rgba(var(--ax-color-background-default));
367
- color: rgba(var(--ax-color-text-default));
368
- }
369
-
370
- .ax-actionsheet-panel {
371
- overflow: hidden;
372
- border-top-left-radius: var(--ax-rounded-border-default);
373
- border-top-right-radius: var(--ax-rounded-border-default);
374
- background-color: rgba(var(--ax-color-surface));
375
- --ax-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
376
- 0 4px 6px -4px rgb(0 0 0 / 0.1);
377
- --ax-shadow-colored: 0 10px 15px -3px var(--ax-shadow-color),
378
- 0 4px 6px -4px var(--ax-shadow-color);
379
- box-shadow: var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--ax-shadow);
380
- animation: 1s both ax-fadeInUp;
381
- animation-duration: 250ms;
382
- }
383
- @keyframes ax-fadeInUp {
384
- from {
385
- transform: translate3d(0, 100%, 0);
386
- opacity: 0;
387
- }
388
- }
389
-
390
- .ax-checkbox {
391
- margin: 0px;
392
- height: 1rem;
393
- width: 1rem;
394
- cursor: pointer;
395
- appearance: none;
396
- border-radius: 0.25rem;
397
- border-width: 1px;
398
- border-color: rgba(var(--ax-color-border-default));
399
- background-color: rgba(var(--ax-color-input-surface));
400
- vertical-align: middle;
401
- outline: 2px solid transparent;
402
- outline-offset: 2px;
403
- }
404
- .ax-checkbox:checked, .ax-checkbox:indeterminate {
405
- border-color: rgba(var(--ax-color-primary-500)) !important;
406
- background-color: rgba(var(--ax-color-primary-500)) !important;
407
- background-size: contain;
408
- background-repeat: no-repeat;
409
- }
410
- .ax-checkbox:checked {
411
- background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
412
- }
413
- .ax-checkbox:indeterminate {
414
- background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9PC9zdHlsZT48L2RlZnM+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzIiB5PSI3IiB3aWR0aD0iMTAiIGhlaWdodD0iMiIvPjwvc3ZnPg==");
415
- }
416
- .ax-checkbox:focus-visible, .ax-checkbox:focus {
417
- box-shadow: 0px 0px 0px 2px rgba(var(--ax-color-surface)), 0px 0px 0px 4px rgba(var(--ax-color-primary-500));
418
- }
419
- .ax-checkbox:disabled {
420
- cursor: not-allowed;
421
- opacity: 0.5;
422
- }
423
-
424
- .ax-el-primary-solid {
425
- background-color: rgba(var(--ax-color-primary-500));
426
- color: rgba(var(--ax-color-primary-fore));
427
- border-color: rgba(var(--ax-color-primary-500));
428
- }
429
- .ax-el-primary-solid.ax-el-interactive:hover:not(.ax-state-disabled) {
430
- background-color: rgba(var(--ax-color-primary-600));
431
- }
432
- .ax-el-primary-solid.ax-state-selected {
433
- background-color: rgba(var(--ax-color-primary-700));
434
- }
435
- .ax-el-primary-solid .ax-ripple {
436
- background-color: rgba(var(--ax-color-primary-300), 0.3) !important;
437
- }
438
- .ax-el-primary-solid ax-loading-spinner .ax-loader {
439
- border-color: rgba(var(--ax-color-primary-fore));
440
- border-bottom-color: transparent;
441
- }
442
- .ax-el-primary-solid:is(.ax-el-primary-solid:focus-visible, .ax-el-primary-solid.ax-state-focus) {
443
- outline-color: rgba(var(--ax-color-primary-500));
444
- }
445
- .ax-el-primary-solid > button:is(.ax-el-primary-solid > button:focus-visible, .ax-el-primary-solid > button.ax-state-focus) {
446
- outline-color: rgba(var(--ax-color-primary-500));
447
- }
448
- .ax-el-primary-solid.ax-dropdown-button-marker {
449
- border-inline-start-color: rgba(var(--ax-color-primary-600));
450
- }
451
-
452
- .ax-el-primary-twotone {
453
- background-color: rgba(var(--ax-color-primary-100));
454
- color: rgba(var(--ax-color-primary-fore-tint));
455
- border-color: rgba(var(--ax-color-primary-100));
456
- }
457
- .ax-el-primary-twotone.ax-el-interactive:hover:not(.ax-state-disabled) {
458
- background-color: rgba(var(--ax-color-primary-200));
459
- }
460
- .ax-el-primary-twotone.ax-state-selected {
461
- background-color: rgba(var(--ax-color-primary-300));
462
- }
463
- .ax-el-primary-twotone .ax-ripple {
464
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
465
- }
466
- .ax-el-primary-twotone ax-loading-spinner .ax-loader {
467
- border-color: rgba(var(--ax-color-primary-fore-tint));
468
- border-bottom-color: transparent;
469
- }
470
- .ax-el-primary-twotone:is(.ax-el-primary-twotone:focus-visible, .ax-el-primary-twotone.ax-state-focus) {
471
- outline-color: rgba(var(--ax-color-primary-500));
472
- }
473
- .ax-el-primary-twotone > button:is(.ax-el-primary-twotone > button:focus-visible, .ax-el-primary-twotone > button.ax-state-focus) {
474
- outline-color: rgba(var(--ax-color-primary-500));
475
- }
476
- .ax-el-primary-twotone.ax-dropdown-button-marker {
477
- border-inline-start-color: rgba(var(--ax-color-primary-50));
478
- }
479
-
480
- .ax-el-primary-outline {
481
- background-color: transparent;
482
- color: rgba(var(--ax-color-primary-500));
483
- border-color: rgba(var(--ax-color-primary-500));
484
- border-width: 1px;
485
- }
486
- .ax-el-primary-outline.ax-el-interactive:hover:not(.ax-state-disabled) {
487
- color: rgba(var(--ax-color-primary-700));
488
- border-color: rgba(var(--ax-color-primary-700));
489
- }
490
- .ax-el-primary-outline.ax-state-selected {
491
- border-color: rgba(var(--ax-color-primary-500));
492
- color: rgba(var(--ax-color-primary-fore));
493
- background-color: rgba(var(--ax-color-primary-500));
494
- }
495
- .ax-el-primary-outline .ax-ripple {
496
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
497
- }
498
- .ax-el-primary-outline ax-loading-spinner .ax-loader {
499
- border-color: rgba(var(--ax-color-primary-500));
500
- border-bottom-color: transparent;
501
- }
502
- .ax-el-primary-outline:is(.ax-el-primary-outline:focus-visible, .ax-el-primary-outline.ax-state-focus) {
503
- outline-offset: -2px;
504
- outline-color: rgba(var(--ax-color-primary-500));
505
- color: rgba(var(--ax-color-primary-fore-tint));
506
- }
507
- .ax-el-primary-outline > button:is(.ax-el-primary-outline > button:focus-visible, .ax-el-primary-outline > button.ax-state-focus) {
508
- outline-offset: -2px;
509
- outline-color: rgba(var(--ax-color-primary-500));
510
- color: rgba(var(--ax-color-primary-fore-tint));
511
- }
512
- .ax-el-primary-outline.ax-dropdown-button-marker {
513
- border-inline-start-color: rgba(var(--ax-color-primary-500));
514
- }
515
-
516
- .ax-el-primary-blank {
517
- color: rgba(var(--ax-color-primary-500));
518
- }
519
- .ax-el-primary-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
520
- color: rgba(var(--ax-color-primary-fore-tint));
521
- }
522
- .ax-el-primary-blank.ax-state-selected {
523
- background-color: rgba(var(--ax-color-primary-700));
524
- color: rgba(var(--ax-color-primary-fore));
525
- }
526
- .ax-el-primary-blank .ax-ripple {
527
- background-color: rgba(var(--ax-color-primary-500), 0.3);
528
- }
529
- .ax-el-primary-blank ax-loading-spinner .ax-loader {
530
- border-color: rgba(var(--ax-color-primary-500));
531
- border-bottom-color: transparent;
532
- }
533
- .ax-el-primary-blank:is(.ax-el-primary-blank:focus-visible, .ax-el-primary-blank.ax-state-focus) {
534
- outline-color: rgba(var(--ax-color-primary-300));
535
- outline-offset: 0;
536
- }
537
- .ax-el-primary-blank > button:is(.ax-el-primary-blank > button:focus-visible, .ax-el-primary-blank > button.ax-state-focus) {
538
- outline-color: rgba(var(--ax-color-primary-300));
539
- outline-offset: 0;
540
- }
541
- .ax-el-primary-blank.ax-dropdown-button-marker {
542
- border-inline-start-color: transparent;
543
- }
544
-
545
- .ax-el-secondary-solid {
546
- background-color: rgba(var(--ax-color-secondary-500));
547
- color: rgba(var(--ax-color-secondary-fore));
548
- border-color: rgba(var(--ax-color-secondary-500));
549
- }
550
- .ax-el-secondary-solid.ax-el-interactive:hover:not(.ax-state-disabled) {
551
- background-color: rgba(var(--ax-color-secondary-600));
552
- }
553
- .ax-el-secondary-solid.ax-state-selected {
554
- background-color: rgba(var(--ax-color-secondary-700));
555
- }
556
- .ax-el-secondary-solid .ax-ripple {
557
- background-color: rgba(var(--ax-color-secondary-300), 0.3) !important;
558
- }
559
- .ax-el-secondary-solid ax-loading-spinner .ax-loader {
560
- border-color: rgba(var(--ax-color-secondary-fore));
561
- border-bottom-color: transparent;
562
- }
563
- .ax-el-secondary-solid:is(.ax-el-secondary-solid:focus-visible, .ax-el-secondary-solid.ax-state-focus) {
564
- outline-color: rgba(var(--ax-color-secondary-500));
565
- }
566
- .ax-el-secondary-solid > button:is(.ax-el-secondary-solid > button:focus-visible, .ax-el-secondary-solid > button.ax-state-focus) {
567
- outline-color: rgba(var(--ax-color-secondary-500));
568
- }
569
- .ax-el-secondary-solid.ax-dropdown-button-marker {
570
- border-inline-start-color: rgba(var(--ax-color-secondary-600));
571
- }
572
-
573
- .ax-el-secondary-twotone {
574
- background-color: rgba(var(--ax-color-secondary-100));
575
- color: rgba(var(--ax-color-secondary-fore-tint));
576
- border-color: rgba(var(--ax-color-secondary-100));
577
- }
578
- .ax-el-secondary-twotone.ax-el-interactive:hover:not(.ax-state-disabled) {
579
- background-color: rgba(var(--ax-color-secondary-200));
580
- }
581
- .ax-el-secondary-twotone.ax-state-selected {
582
- background-color: rgba(var(--ax-color-secondary-300));
583
- }
584
- .ax-el-secondary-twotone .ax-ripple {
585
- background-color: rgba(var(--ax-color-secondary-500), 0.3) !important;
586
- }
587
- .ax-el-secondary-twotone ax-loading-spinner .ax-loader {
588
- border-color: rgba(var(--ax-color-secondary-fore-tint));
589
- border-bottom-color: transparent;
590
- }
591
- .ax-el-secondary-twotone:is(.ax-el-secondary-twotone:focus-visible, .ax-el-secondary-twotone.ax-state-focus) {
592
- outline-color: rgba(var(--ax-color-secondary-500));
593
- }
594
- .ax-el-secondary-twotone > button:is(.ax-el-secondary-twotone > button:focus-visible, .ax-el-secondary-twotone > button.ax-state-focus) {
595
- outline-color: rgba(var(--ax-color-secondary-500));
596
- }
597
- .ax-el-secondary-twotone.ax-dropdown-button-marker {
598
- border-inline-start-color: rgba(var(--ax-color-secondary-50));
599
- }
600
-
601
- .ax-el-secondary-outline {
602
- background-color: transparent;
603
- color: rgba(var(--ax-color-secondary-500));
604
- border-color: rgba(var(--ax-color-secondary-500));
605
- border-width: 1px;
606
- }
607
- .ax-el-secondary-outline.ax-el-interactive:hover:not(.ax-state-disabled) {
608
- color: rgba(var(--ax-color-secondary-700));
609
- border-color: rgba(var(--ax-color-secondary-700));
610
- }
611
- .ax-el-secondary-outline.ax-state-selected {
612
- border-color: rgba(var(--ax-color-secondary-500));
613
- color: rgba(var(--ax-color-secondary-fore));
614
- background-color: rgba(var(--ax-color-secondary-500));
615
- }
616
- .ax-el-secondary-outline .ax-ripple {
617
- background-color: rgba(var(--ax-color-secondary-500), 0.3) !important;
618
- }
619
- .ax-el-secondary-outline ax-loading-spinner .ax-loader {
620
- border-color: rgba(var(--ax-color-secondary-500));
621
- border-bottom-color: transparent;
622
- }
623
- .ax-el-secondary-outline:is(.ax-el-secondary-outline:focus-visible, .ax-el-secondary-outline.ax-state-focus) {
624
- outline-offset: -2px;
625
- outline-color: rgba(var(--ax-color-secondary-500));
626
- color: rgba(var(--ax-color-secondary-fore-tint));
627
- }
628
- .ax-el-secondary-outline > button:is(.ax-el-secondary-outline > button:focus-visible, .ax-el-secondary-outline > button.ax-state-focus) {
629
- outline-offset: -2px;
630
- outline-color: rgba(var(--ax-color-secondary-500));
631
- color: rgba(var(--ax-color-secondary-fore-tint));
632
- }
633
- .ax-el-secondary-outline.ax-dropdown-button-marker {
634
- border-inline-start-color: rgba(var(--ax-color-secondary-500));
635
- }
636
-
637
- .ax-el-secondary-blank {
638
- color: rgba(var(--ax-color-secondary-500));
639
- }
640
- .ax-el-secondary-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
641
- color: rgba(var(--ax-color-secondary-fore-tint));
642
- }
643
- .ax-el-secondary-blank.ax-state-selected {
644
- background-color: rgba(var(--ax-color-secondary-700));
645
- color: rgba(var(--ax-color-secondary-fore));
646
- }
647
- .ax-el-secondary-blank .ax-ripple {
648
- background-color: rgba(var(--ax-color-secondary-500), 0.3);
649
- }
650
- .ax-el-secondary-blank ax-loading-spinner .ax-loader {
651
- border-color: rgba(var(--ax-color-secondary-500));
652
- border-bottom-color: transparent;
653
- }
654
- .ax-el-secondary-blank:is(.ax-el-secondary-blank:focus-visible, .ax-el-secondary-blank.ax-state-focus) {
655
- outline-color: rgba(var(--ax-color-secondary-300));
656
- outline-offset: 0;
657
- }
658
- .ax-el-secondary-blank > button:is(.ax-el-secondary-blank > button:focus-visible, .ax-el-secondary-blank > button.ax-state-focus) {
659
- outline-color: rgba(var(--ax-color-secondary-300));
660
- outline-offset: 0;
661
- }
662
- .ax-el-secondary-blank.ax-dropdown-button-marker {
663
- border-inline-start-color: transparent;
664
- }
665
-
666
- .ax-el-success-solid {
667
- background-color: rgba(var(--ax-color-success-500));
668
- color: rgba(var(--ax-color-success-fore));
669
- border-color: rgba(var(--ax-color-success-500));
670
- }
671
- .ax-el-success-solid.ax-el-interactive:hover:not(.ax-state-disabled) {
672
- background-color: rgba(var(--ax-color-success-600));
673
- }
674
- .ax-el-success-solid.ax-state-selected {
675
- background-color: rgba(var(--ax-color-success-700));
676
- }
677
- .ax-el-success-solid .ax-ripple {
678
- background-color: rgba(var(--ax-color-success-300), 0.3) !important;
679
- }
680
- .ax-el-success-solid ax-loading-spinner .ax-loader {
681
- border-color: rgba(var(--ax-color-success-fore));
682
- border-bottom-color: transparent;
683
- }
684
- .ax-el-success-solid:is(.ax-el-success-solid:focus-visible, .ax-el-success-solid.ax-state-focus) {
685
- outline-color: rgba(var(--ax-color-success-500));
686
- }
687
- .ax-el-success-solid > button:is(.ax-el-success-solid > button:focus-visible, .ax-el-success-solid > button.ax-state-focus) {
688
- outline-color: rgba(var(--ax-color-success-500));
689
- }
690
- .ax-el-success-solid.ax-dropdown-button-marker {
691
- border-inline-start-color: rgba(var(--ax-color-success-600));
692
- }
693
-
694
- .ax-el-success-twotone {
695
- background-color: rgba(var(--ax-color-success-100));
696
- color: rgba(var(--ax-color-success-fore-tint));
697
- border-color: rgba(var(--ax-color-success-100));
698
- }
699
- .ax-el-success-twotone.ax-el-interactive:hover:not(.ax-state-disabled) {
700
- background-color: rgba(var(--ax-color-success-200));
701
- }
702
- .ax-el-success-twotone.ax-state-selected {
703
- background-color: rgba(var(--ax-color-success-300));
704
- }
705
- .ax-el-success-twotone .ax-ripple {
706
- background-color: rgba(var(--ax-color-success-500), 0.3) !important;
707
- }
708
- .ax-el-success-twotone ax-loading-spinner .ax-loader {
709
- border-color: rgba(var(--ax-color-success-fore-tint));
710
- border-bottom-color: transparent;
711
- }
712
- .ax-el-success-twotone:is(.ax-el-success-twotone:focus-visible, .ax-el-success-twotone.ax-state-focus) {
713
- outline-color: rgba(var(--ax-color-success-500));
714
- }
715
- .ax-el-success-twotone > button:is(.ax-el-success-twotone > button:focus-visible, .ax-el-success-twotone > button.ax-state-focus) {
716
- outline-color: rgba(var(--ax-color-success-500));
717
- }
718
- .ax-el-success-twotone.ax-dropdown-button-marker {
719
- border-inline-start-color: rgba(var(--ax-color-success-50));
720
- }
721
-
722
- .ax-el-success-outline {
723
- background-color: transparent;
724
- color: rgba(var(--ax-color-success-500));
725
- border-color: rgba(var(--ax-color-success-500));
726
- border-width: 1px;
727
- }
728
- .ax-el-success-outline.ax-el-interactive:hover:not(.ax-state-disabled) {
729
- color: rgba(var(--ax-color-success-700));
730
- border-color: rgba(var(--ax-color-success-700));
731
- }
732
- .ax-el-success-outline.ax-state-selected {
733
- border-color: rgba(var(--ax-color-success-500));
734
- color: rgba(var(--ax-color-success-fore));
735
- background-color: rgba(var(--ax-color-success-500));
736
- }
737
- .ax-el-success-outline .ax-ripple {
738
- background-color: rgba(var(--ax-color-success-500), 0.3) !important;
739
- }
740
- .ax-el-success-outline ax-loading-spinner .ax-loader {
741
- border-color: rgba(var(--ax-color-success-500));
742
- border-bottom-color: transparent;
743
- }
744
- .ax-el-success-outline:is(.ax-el-success-outline:focus-visible, .ax-el-success-outline.ax-state-focus) {
745
- outline-offset: -2px;
746
- outline-color: rgba(var(--ax-color-success-500));
747
- color: rgba(var(--ax-color-success-fore-tint));
748
- }
749
- .ax-el-success-outline > button:is(.ax-el-success-outline > button:focus-visible, .ax-el-success-outline > button.ax-state-focus) {
750
- outline-offset: -2px;
751
- outline-color: rgba(var(--ax-color-success-500));
752
- color: rgba(var(--ax-color-success-fore-tint));
753
- }
754
- .ax-el-success-outline.ax-dropdown-button-marker {
755
- border-inline-start-color: rgba(var(--ax-color-success-500));
756
- }
757
-
758
- .ax-el-success-blank {
759
- color: rgba(var(--ax-color-success-500));
760
- }
761
- .ax-el-success-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
762
- color: rgba(var(--ax-color-success-fore-tint));
763
- }
764
- .ax-el-success-blank.ax-state-selected {
765
- background-color: rgba(var(--ax-color-success-700));
766
- color: rgba(var(--ax-color-success-fore));
767
- }
768
- .ax-el-success-blank .ax-ripple {
769
- background-color: rgba(var(--ax-color-success-500), 0.3);
770
- }
771
- .ax-el-success-blank ax-loading-spinner .ax-loader {
772
- border-color: rgba(var(--ax-color-success-500));
773
- border-bottom-color: transparent;
774
- }
775
- .ax-el-success-blank:is(.ax-el-success-blank:focus-visible, .ax-el-success-blank.ax-state-focus) {
776
- outline-color: rgba(var(--ax-color-success-300));
777
- outline-offset: 0;
778
- }
779
- .ax-el-success-blank > button:is(.ax-el-success-blank > button:focus-visible, .ax-el-success-blank > button.ax-state-focus) {
780
- outline-color: rgba(var(--ax-color-success-300));
781
- outline-offset: 0;
782
- }
783
- .ax-el-success-blank.ax-dropdown-button-marker {
784
- border-inline-start-color: transparent;
785
- }
786
-
787
- .ax-el-warning-solid {
788
- background-color: rgba(var(--ax-color-warning-500));
789
- color: rgba(var(--ax-color-warning-fore));
790
- border-color: rgba(var(--ax-color-warning-500));
791
- }
792
- .ax-el-warning-solid.ax-el-interactive:hover:not(.ax-state-disabled) {
793
- background-color: rgba(var(--ax-color-warning-600));
794
- }
795
- .ax-el-warning-solid.ax-state-selected {
796
- background-color: rgba(var(--ax-color-warning-700));
797
- }
798
- .ax-el-warning-solid .ax-ripple {
799
- background-color: rgba(var(--ax-color-warning-300), 0.3) !important;
800
- }
801
- .ax-el-warning-solid ax-loading-spinner .ax-loader {
802
- border-color: rgba(var(--ax-color-warning-fore));
803
- border-bottom-color: transparent;
804
- }
805
- .ax-el-warning-solid:is(.ax-el-warning-solid:focus-visible, .ax-el-warning-solid.ax-state-focus) {
806
- outline-color: rgba(var(--ax-color-warning-500));
807
- }
808
- .ax-el-warning-solid > button:is(.ax-el-warning-solid > button:focus-visible, .ax-el-warning-solid > button.ax-state-focus) {
809
- outline-color: rgba(var(--ax-color-warning-500));
810
- }
811
- .ax-el-warning-solid.ax-dropdown-button-marker {
812
- border-inline-start-color: rgba(var(--ax-color-warning-600));
813
- }
814
-
815
- .ax-el-warning-twotone {
816
- background-color: rgba(var(--ax-color-warning-100));
817
- color: rgba(var(--ax-color-warning-fore-tint));
818
- border-color: rgba(var(--ax-color-warning-100));
819
- }
820
- .ax-el-warning-twotone.ax-el-interactive:hover:not(.ax-state-disabled) {
821
- background-color: rgba(var(--ax-color-warning-200));
822
- }
823
- .ax-el-warning-twotone.ax-state-selected {
824
- background-color: rgba(var(--ax-color-warning-300));
825
- }
826
- .ax-el-warning-twotone .ax-ripple {
827
- background-color: rgba(var(--ax-color-warning-500), 0.3) !important;
828
- }
829
- .ax-el-warning-twotone ax-loading-spinner .ax-loader {
830
- border-color: rgba(var(--ax-color-warning-fore-tint));
831
- border-bottom-color: transparent;
832
- }
833
- .ax-el-warning-twotone:is(.ax-el-warning-twotone:focus-visible, .ax-el-warning-twotone.ax-state-focus) {
834
- outline-color: rgba(var(--ax-color-warning-500));
835
- }
836
- .ax-el-warning-twotone > button:is(.ax-el-warning-twotone > button:focus-visible, .ax-el-warning-twotone > button.ax-state-focus) {
837
- outline-color: rgba(var(--ax-color-warning-500));
838
- }
839
- .ax-el-warning-twotone.ax-dropdown-button-marker {
840
- border-inline-start-color: rgba(var(--ax-color-warning-50));
841
- }
842
-
843
- .ax-el-warning-outline {
844
- background-color: transparent;
845
- color: rgba(var(--ax-color-warning-500));
846
- border-color: rgba(var(--ax-color-warning-500));
847
- border-width: 1px;
848
- }
849
- .ax-el-warning-outline.ax-el-interactive:hover:not(.ax-state-disabled) {
850
- color: rgba(var(--ax-color-warning-700));
851
- border-color: rgba(var(--ax-color-warning-700));
852
- }
853
- .ax-el-warning-outline.ax-state-selected {
854
- border-color: rgba(var(--ax-color-warning-500));
855
- color: rgba(var(--ax-color-warning-fore));
856
- background-color: rgba(var(--ax-color-warning-500));
857
- }
858
- .ax-el-warning-outline .ax-ripple {
859
- background-color: rgba(var(--ax-color-warning-500), 0.3) !important;
860
- }
861
- .ax-el-warning-outline ax-loading-spinner .ax-loader {
862
- border-color: rgba(var(--ax-color-warning-500));
863
- border-bottom-color: transparent;
864
- }
865
- .ax-el-warning-outline:is(.ax-el-warning-outline:focus-visible, .ax-el-warning-outline.ax-state-focus) {
866
- outline-offset: -2px;
867
- outline-color: rgba(var(--ax-color-warning-500));
868
- color: rgba(var(--ax-color-warning-fore-tint));
869
- }
870
- .ax-el-warning-outline > button:is(.ax-el-warning-outline > button:focus-visible, .ax-el-warning-outline > button.ax-state-focus) {
871
- outline-offset: -2px;
872
- outline-color: rgba(var(--ax-color-warning-500));
873
- color: rgba(var(--ax-color-warning-fore-tint));
874
- }
875
- .ax-el-warning-outline.ax-dropdown-button-marker {
876
- border-inline-start-color: rgba(var(--ax-color-warning-500));
877
- }
878
-
879
- .ax-el-warning-blank {
880
- color: rgba(var(--ax-color-warning-500));
881
- }
882
- .ax-el-warning-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
883
- color: rgba(var(--ax-color-warning-fore-tint));
884
- }
885
- .ax-el-warning-blank.ax-state-selected {
886
- background-color: rgba(var(--ax-color-warning-700));
887
- color: rgba(var(--ax-color-warning-fore));
888
- }
889
- .ax-el-warning-blank .ax-ripple {
890
- background-color: rgba(var(--ax-color-warning-500), 0.3);
891
- }
892
- .ax-el-warning-blank ax-loading-spinner .ax-loader {
893
- border-color: rgba(var(--ax-color-warning-500));
894
- border-bottom-color: transparent;
895
- }
896
- .ax-el-warning-blank:is(.ax-el-warning-blank:focus-visible, .ax-el-warning-blank.ax-state-focus) {
897
- outline-color: rgba(var(--ax-color-warning-300));
898
- outline-offset: 0;
899
- }
900
- .ax-el-warning-blank > button:is(.ax-el-warning-blank > button:focus-visible, .ax-el-warning-blank > button.ax-state-focus) {
901
- outline-color: rgba(var(--ax-color-warning-300));
902
- outline-offset: 0;
903
- }
904
- .ax-el-warning-blank.ax-dropdown-button-marker {
905
- border-inline-start-color: transparent;
906
- }
907
-
908
- .ax-el-danger-solid {
909
- background-color: rgba(var(--ax-color-danger-500));
910
- color: rgba(var(--ax-color-danger-fore));
911
- border-color: rgba(var(--ax-color-danger-500));
912
- }
913
- .ax-el-danger-solid.ax-el-interactive:hover:not(.ax-state-disabled) {
914
- background-color: rgba(var(--ax-color-danger-600));
915
- }
916
- .ax-el-danger-solid.ax-state-selected {
917
- background-color: rgba(var(--ax-color-danger-700));
918
- }
919
- .ax-el-danger-solid .ax-ripple {
920
- background-color: rgba(var(--ax-color-danger-300), 0.3) !important;
921
- }
922
- .ax-el-danger-solid ax-loading-spinner .ax-loader {
923
- border-color: rgba(var(--ax-color-danger-fore));
924
- border-bottom-color: transparent;
925
- }
926
- .ax-el-danger-solid:is(.ax-el-danger-solid:focus-visible, .ax-el-danger-solid.ax-state-focus) {
927
- outline-color: rgba(var(--ax-color-danger-500));
928
- }
929
- .ax-el-danger-solid > button:is(.ax-el-danger-solid > button:focus-visible, .ax-el-danger-solid > button.ax-state-focus) {
930
- outline-color: rgba(var(--ax-color-danger-500));
931
- }
932
- .ax-el-danger-solid.ax-dropdown-button-marker {
933
- border-inline-start-color: rgba(var(--ax-color-danger-600));
934
- }
935
-
936
- .ax-el-danger-twotone {
937
- background-color: rgba(var(--ax-color-danger-100));
938
- color: rgba(var(--ax-color-danger-fore-tint));
939
- border-color: rgba(var(--ax-color-danger-100));
940
- }
941
- .ax-el-danger-twotone.ax-el-interactive:hover:not(.ax-state-disabled) {
942
- background-color: rgba(var(--ax-color-danger-200));
943
- }
944
- .ax-el-danger-twotone.ax-state-selected {
945
- background-color: rgba(var(--ax-color-danger-300));
946
- }
947
- .ax-el-danger-twotone .ax-ripple {
948
- background-color: rgba(var(--ax-color-danger-500), 0.3) !important;
949
- }
950
- .ax-el-danger-twotone ax-loading-spinner .ax-loader {
951
- border-color: rgba(var(--ax-color-danger-fore-tint));
952
- border-bottom-color: transparent;
953
- }
954
- .ax-el-danger-twotone:is(.ax-el-danger-twotone:focus-visible, .ax-el-danger-twotone.ax-state-focus) {
955
- outline-color: rgba(var(--ax-color-danger-500));
956
- }
957
- .ax-el-danger-twotone > button:is(.ax-el-danger-twotone > button:focus-visible, .ax-el-danger-twotone > button.ax-state-focus) {
958
- outline-color: rgba(var(--ax-color-danger-500));
959
- }
960
- .ax-el-danger-twotone.ax-dropdown-button-marker {
961
- border-inline-start-color: rgba(var(--ax-color-danger-50));
962
- }
963
-
964
- .ax-el-danger-outline {
965
- background-color: transparent;
966
- color: rgba(var(--ax-color-danger-500));
967
- border-color: rgba(var(--ax-color-danger-500));
968
- border-width: 1px;
969
- }
970
- .ax-el-danger-outline.ax-el-interactive:hover:not(.ax-state-disabled) {
971
- color: rgba(var(--ax-color-danger-700));
972
- border-color: rgba(var(--ax-color-danger-700));
973
- }
974
- .ax-el-danger-outline.ax-state-selected {
975
- border-color: rgba(var(--ax-color-danger-500));
976
- color: rgba(var(--ax-color-danger-fore));
977
- background-color: rgba(var(--ax-color-danger-500));
978
- }
979
- .ax-el-danger-outline .ax-ripple {
980
- background-color: rgba(var(--ax-color-danger-500), 0.3) !important;
981
- }
982
- .ax-el-danger-outline ax-loading-spinner .ax-loader {
983
- border-color: rgba(var(--ax-color-danger-500));
984
- border-bottom-color: transparent;
985
- }
986
- .ax-el-danger-outline:is(.ax-el-danger-outline:focus-visible, .ax-el-danger-outline.ax-state-focus) {
987
- outline-offset: -2px;
988
- outline-color: rgba(var(--ax-color-danger-500));
989
- color: rgba(var(--ax-color-danger-fore-tint));
990
- }
991
- .ax-el-danger-outline > button:is(.ax-el-danger-outline > button:focus-visible, .ax-el-danger-outline > button.ax-state-focus) {
992
- outline-offset: -2px;
993
- outline-color: rgba(var(--ax-color-danger-500));
994
- color: rgba(var(--ax-color-danger-fore-tint));
995
- }
996
- .ax-el-danger-outline.ax-dropdown-button-marker {
997
- border-inline-start-color: rgba(var(--ax-color-danger-500));
998
- }
999
-
1000
- .ax-el-danger-blank {
1001
- color: rgba(var(--ax-color-danger-500));
1002
- }
1003
- .ax-el-danger-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
1004
- color: rgba(var(--ax-color-danger-fore-tint));
1005
- }
1006
- .ax-el-danger-blank.ax-state-selected {
1007
- background-color: rgba(var(--ax-color-danger-700));
1008
- color: rgba(var(--ax-color-danger-fore));
1009
- }
1010
- .ax-el-danger-blank .ax-ripple {
1011
- background-color: rgba(var(--ax-color-danger-500), 0.3);
1012
- }
1013
- .ax-el-danger-blank ax-loading-spinner .ax-loader {
1014
- border-color: rgba(var(--ax-color-danger-500));
1015
- border-bottom-color: transparent;
1016
- }
1017
- .ax-el-danger-blank:is(.ax-el-danger-blank:focus-visible, .ax-el-danger-blank.ax-state-focus) {
1018
- outline-color: rgba(var(--ax-color-danger-300));
1019
- outline-offset: 0;
1020
- }
1021
- .ax-el-danger-blank > button:is(.ax-el-danger-blank > button:focus-visible, .ax-el-danger-blank > button.ax-state-focus) {
1022
- outline-color: rgba(var(--ax-color-danger-300));
1023
- outline-offset: 0;
1024
- }
1025
- .ax-el-danger-blank.ax-dropdown-button-marker {
1026
- border-inline-start-color: transparent;
1027
- }
1028
-
1029
- .ax-el-info-solid {
1030
- background-color: rgba(var(--ax-color-info-500));
1031
- color: rgba(var(--ax-color-info-fore));
1032
- border-color: rgba(var(--ax-color-info-500));
1033
- }
1034
- .ax-el-info-solid.ax-el-interactive:hover:not(.ax-state-disabled) {
1035
- background-color: rgba(var(--ax-color-info-600));
1036
- }
1037
- .ax-el-info-solid.ax-state-selected {
1038
- background-color: rgba(var(--ax-color-info-700));
1039
- }
1040
- .ax-el-info-solid .ax-ripple {
1041
- background-color: rgba(var(--ax-color-info-300), 0.3) !important;
1042
- }
1043
- .ax-el-info-solid ax-loading-spinner .ax-loader {
1044
- border-color: rgba(var(--ax-color-info-fore));
1045
- border-bottom-color: transparent;
1046
- }
1047
- .ax-el-info-solid:is(.ax-el-info-solid:focus-visible, .ax-el-info-solid.ax-state-focus) {
1048
- outline-color: rgba(var(--ax-color-info-500));
1049
- }
1050
- .ax-el-info-solid > button:is(.ax-el-info-solid > button:focus-visible, .ax-el-info-solid > button.ax-state-focus) {
1051
- outline-color: rgba(var(--ax-color-info-500));
1052
- }
1053
- .ax-el-info-solid.ax-dropdown-button-marker {
1054
- border-inline-start-color: rgba(var(--ax-color-info-600));
1055
- }
1056
-
1057
- .ax-el-info-twotone {
1058
- background-color: rgba(var(--ax-color-info-100));
1059
- color: rgba(var(--ax-color-info-fore-tint));
1060
- border-color: rgba(var(--ax-color-info-100));
1061
- }
1062
- .ax-el-info-twotone.ax-el-interactive:hover:not(.ax-state-disabled) {
1063
- background-color: rgba(var(--ax-color-info-200));
1064
- }
1065
- .ax-el-info-twotone.ax-state-selected {
1066
- background-color: rgba(var(--ax-color-info-300));
1067
- }
1068
- .ax-el-info-twotone .ax-ripple {
1069
- background-color: rgba(var(--ax-color-info-500), 0.3) !important;
1070
- }
1071
- .ax-el-info-twotone ax-loading-spinner .ax-loader {
1072
- border-color: rgba(var(--ax-color-info-fore-tint));
1073
- border-bottom-color: transparent;
1074
- }
1075
- .ax-el-info-twotone:is(.ax-el-info-twotone:focus-visible, .ax-el-info-twotone.ax-state-focus) {
1076
- outline-color: rgba(var(--ax-color-info-500));
1077
- }
1078
- .ax-el-info-twotone > button:is(.ax-el-info-twotone > button:focus-visible, .ax-el-info-twotone > button.ax-state-focus) {
1079
- outline-color: rgba(var(--ax-color-info-500));
1080
- }
1081
- .ax-el-info-twotone.ax-dropdown-button-marker {
1082
- border-inline-start-color: rgba(var(--ax-color-info-50));
1083
- }
1084
-
1085
- .ax-el-info-outline {
1086
- background-color: transparent;
1087
- color: rgba(var(--ax-color-info-500));
1088
- border-color: rgba(var(--ax-color-info-500));
1089
- border-width: 1px;
1090
- }
1091
- .ax-el-info-outline.ax-el-interactive:hover:not(.ax-state-disabled) {
1092
- color: rgba(var(--ax-color-info-700));
1093
- border-color: rgba(var(--ax-color-info-700));
1094
- }
1095
- .ax-el-info-outline.ax-state-selected {
1096
- border-color: rgba(var(--ax-color-info-500));
1097
- color: rgba(var(--ax-color-info-fore));
1098
- background-color: rgba(var(--ax-color-info-500));
1099
- }
1100
- .ax-el-info-outline .ax-ripple {
1101
- background-color: rgba(var(--ax-color-info-500), 0.3) !important;
1102
- }
1103
- .ax-el-info-outline ax-loading-spinner .ax-loader {
1104
- border-color: rgba(var(--ax-color-info-500));
1105
- border-bottom-color: transparent;
1106
- }
1107
- .ax-el-info-outline:is(.ax-el-info-outline:focus-visible, .ax-el-info-outline.ax-state-focus) {
1108
- outline-offset: -2px;
1109
- outline-color: rgba(var(--ax-color-info-500));
1110
- color: rgba(var(--ax-color-info-fore-tint));
1111
- }
1112
- .ax-el-info-outline > button:is(.ax-el-info-outline > button:focus-visible, .ax-el-info-outline > button.ax-state-focus) {
1113
- outline-offset: -2px;
1114
- outline-color: rgba(var(--ax-color-info-500));
1115
- color: rgba(var(--ax-color-info-fore-tint));
1116
- }
1117
- .ax-el-info-outline.ax-dropdown-button-marker {
1118
- border-inline-start-color: rgba(var(--ax-color-info-500));
1119
- }
1120
-
1121
- .ax-el-info-blank {
1122
- color: rgba(var(--ax-color-info-500));
1123
- }
1124
- .ax-el-info-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
1125
- color: rgba(var(--ax-color-info-fore-tint));
1126
- }
1127
- .ax-el-info-blank.ax-state-selected {
1128
- background-color: rgba(var(--ax-color-info-700));
1129
- color: rgba(var(--ax-color-info-fore));
1130
- }
1131
- .ax-el-info-blank .ax-ripple {
1132
- background-color: rgba(var(--ax-color-info-500), 0.3);
1133
- }
1134
- .ax-el-info-blank ax-loading-spinner .ax-loader {
1135
- border-color: rgba(var(--ax-color-info-500));
1136
- border-bottom-color: transparent;
1137
- }
1138
- .ax-el-info-blank:is(.ax-el-info-blank:focus-visible, .ax-el-info-blank.ax-state-focus) {
1139
- outline-color: rgba(var(--ax-color-info-300));
1140
- outline-offset: 0;
1141
- }
1142
- .ax-el-info-blank > button:is(.ax-el-info-blank > button:focus-visible, .ax-el-info-blank > button.ax-state-focus) {
1143
- outline-color: rgba(var(--ax-color-info-300));
1144
- outline-offset: 0;
1145
- }
1146
- .ax-el-info-blank.ax-dropdown-button-marker {
1147
- border-inline-start-color: transparent;
1148
- }
1149
-
1150
- .ax-el-ghost-solid {
1151
- border-width: 1px;
1152
- border-color: rgba(var(--ax-color-border-default));
1153
- background-color: rgba(var(--ax-color-ghost));
1154
- color: rgba(var(--ax-color-ghost-fore));
1155
- --ax-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
1156
- --ax-shadow-colored: 0 1px 2px 0 var(--ax-shadow-color);
1157
- box-shadow: var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--ax-shadow);
1158
- }
1159
- .ax-el-ghost-solid.ax-el-interactive:hover:not(.ax-el-ghost-solid.ax-el-interactive:hover.ax-state-selected, .ax-el-ghost-solid.ax-el-interactive:hover.ax-state-disabled) {
1160
- border-color: rgba(var(--ax-color-primary-500));
1161
- color: rgba(var(--ax-color-primary-500));
1162
- }
1163
- .ax-el-ghost-solid.ax-el-interactive:hover + .ax-dropdown-button-marker {
1164
- border-inline-start-color: rgba(var(--ax-color-primary-500));
1165
- }
1166
- .ax-el-ghost-solid.ax-el-interactive:active {
1167
- border-color: rgba(var(--ax-color-primary-700));
1168
- color: rgba(var(--ax-color-primary-700));
1169
- }
1170
- .ax-el-ghost-solid.ax-state-selected {
1171
- border-color: rgba(var(--ax-color-primary-500));
1172
- background-color: rgba(var(--ax-color-primary-500));
1173
- color: rgba(var(--ax-color-primary-fore));
1174
- }
1175
- .ax-el-ghost-solid .ax-ripple {
1176
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
1177
- }
1178
- .ax-el-ghost-solid ax-loading-spinner .ax-loader {
1179
- border-color: rgba(var(--ax-color-ghost-fore));
1180
- border-bottom-color: transparent;
1181
- }
1182
- .ax-el-ghost-solid.ax-dropdown-button-marker {
1183
- border-inline-start-color: rgba(var(--ax-color-border-default));
1184
- }
1185
-
1186
- .ax-el-ghost-outline {
1187
- border-width: 1px;
1188
- border-color: rgba(var(--ax-color-border-default));
1189
- background-color: transparent;
1190
- color: rgba(var(--ax-color-ghost-fore));
1191
- }
1192
- .ax-el-ghost-outline.ax-el-interactive:hover:not(.ax-el-ghost-outline.ax-el-interactive:hover.ax-state-selected, .ax-el-ghost-outline.ax-el-interactive:hover.ax-state-disabled) {
1193
- border-color: rgba(var(--ax-color-primary-500));
1194
- color: rgba(var(--ax-color-primary-500));
1195
- }
1196
- .ax-el-ghost-outline.ax-el-interactive:hover + .ax-dropdown-button-marker {
1197
- border-inline-start-color: rgba(var(--ax-color-primary-500));
1198
- }
1199
- .ax-el-ghost-outline.ax-state-selected {
1200
- border-color: rgba(var(--ax-color-primary-500));
1201
- color: rgba(var(--ax-color-primary-fore));
1202
- }
1203
- .ax-el-ghost-outline .ax-ripple {
1204
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
1205
- }
1206
- .ax-el-ghost-outline ax-loading-spinner .ax-loader {
1207
- border-color: rgba(var(--ax-color-ghost-fore));
1208
- border-bottom-color: transparent;
1209
- }
1210
- .ax-el-ghost-outline.ax-dropdown-button-marker {
1211
- border-inline-start-color: rgba(var(--ax-color-border-default));
1212
- }
1213
-
1214
- .ax-el-ghost-blank {
1215
- border-style: none;
1216
- background-color: transparent;
1217
- color: rgba(var(--ax-color-ghost-fore));
1218
- }
1219
- .ax-el-ghost-blank.ax-state-selected {
1220
- background-color: rgba(var(--ax-color-primary-500));
1221
- color: rgba(var(--ax-color-primary-fore));
1222
- }
1223
- .ax-el-ghost-blank.ax-el-interactive:hover:not(.ax-el-ghost-blank.ax-el-interactive:hover.ax-state-selected, .ax-el-ghost-blank.ax-el-interactive:hover.ax-state-disabled) {
1224
- border-color: rgba(var(--ax-color-primary-700));
1225
- color: rgba(var(--ax-color-primary-700));
1226
- }
1227
- .ax-el-ghost-blank.ax-el-interactive:active {
1228
- border-color: rgba(var(--ax-color-primary-800));
1229
- color: rgba(var(--ax-color-primary-800));
1230
- }
1231
- .ax-el-ghost-blank .ax-ripple {
1232
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
1233
- }
1234
- .ax-el-ghost-blank ax-loading-spinner .ax-loader {
1235
- border-color: rgba(var(--ax-color-ghost-fore));
1236
- border-bottom-color: transparent;
1237
- }
1238
- .ax-el-ghost-blank > button:is(.ax-el-ghost-blank > button:focus-visible, .ax-el-ghost-blank > button.ax-state-focus) {
1239
- outline-color: rgba(var(--ax-color-primary-500));
1240
- }
1241
- .ax-el-ghost-blank.ax-dropdown-button-marker {
1242
- border-inline-start-color: rgba(var(--ax-color-border-default));
1243
- }
1244
-
1245
- .ax-el-ghost-twotone {
1246
- border-color: transparent;
1247
- background-color: rgba(var(--ax-color-ghost-fore), 0.05);
1248
- color: rgba(var(--ax-color-ghost-fore));
1249
- }
1250
- .ax-el-ghost-twotone.ax-el-interactive:hover:not(.ax-el-ghost-twotone.ax-el-interactive:hover.ax-state-selected, .ax-el-ghost-twotone.ax-el-interactive:hover.ax-state-disabled) {
1251
- background-color: rgba(var(--ax-color-primary-200));
1252
- color: rgba(var(--ax-color-primary-fore-tint));
1253
- }
1254
- .ax-el-ghost-twotone.ax-el-interactive:hover + .ax-dropdown-button-marker {
1255
- border-inline-start-color: rgba(var(--ax-color-primary-500));
1256
- }
1257
- .ax-el-ghost-twotone.ax-el-interactive:active {
1258
- background-color: rgba(var(--ax-color-primary-300));
1259
- color: rgba(var(--ax-color-primary-fore-tint));
1260
- }
1261
- .ax-el-ghost-twotone.ax-state-selected {
1262
- border-color: rgba(var(--ax-color-primary-300));
1263
- background-color: rgba(var(--ax-color-primary-400));
1264
- color: rgba(var(--ax-color-primary-fore-tint));
1265
- }
1266
- .ax-el-ghost-twotone .ax-ripple {
1267
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
1268
- }
1269
- .ax-el-ghost-twotone ax-loading-spinner .ax-loader {
1270
- border-color: rgba(var(--ax-color-ghost-fore));
1271
- border-bottom-color: transparent;
1272
- }
1273
- .ax-el-ghost-twotone > button:is(.ax-el-ghost-twotone > button:focus-visible, .ax-el-ghost-twotone > button.ax-state-focus) {
1274
- outline-color: rgba(var(--ax-color-primary-500));
1275
- }
1276
- .ax-el-ghost-twotone.ax-dropdown-button-marker {
1277
- border-inline-start-color: rgba(var(--ax-color-border-default));
1278
- }
1279
-
1280
- .ax-dark .ax-el-primary-solid {
1281
- background-color: rgba(var(--ax-color-primary-200));
1282
- color: rgba(var(--ax-color-primary-fore-tint));
1283
- border-color: rgba(var(--ax-color-primary-200));
1284
- }
1285
- .ax-dark .ax-el-primary-solid.ax-el-interactive:hover:not(.ax-state-disabled) {
1286
- background-color: rgba(var(--ax-color-primary-300));
1287
- color: rgba(var(--ax-color-primary-fore-tint));
1288
- }
1289
- .ax-dark .ax-el-primary-solid.ax-state-selected {
1290
- background-color: rgba(var(--ax-color-primary-400));
1291
- }
1292
- .ax-dark .ax-el-primary-solid .ax-ripple {
1293
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
1294
- }
1295
- .ax-dark .ax-el-primary-solid ax-loading-spinner .ax-loader {
1296
- border-color: rgba(var(--ax-color-primary-fore-tint));
1297
- border-bottom-color: transparent;
1298
- }
1299
- .ax-dark .ax-el-primary-solid > button:is(.ax-dark .ax-el-primary-solid > button:focus-visible, .ax-dark .ax-el-primary-solid > button.ax-state-focus) {
1300
- outline-color: rgba(var(--ax-color-primary-200));
1301
- }
1302
- .ax-dark .ax-el-primary-solid.ax-dropdown-button-marker {
1303
- border-inline-start-color: rgba(var(--ax-color-primary-900));
1304
- }
1305
- .ax-dark .ax-el-primary-twotone {
1306
- background-color: rgba(var(--ax-color-primary-200));
1307
- color: rgba(var(--ax-color-primary-fore-tint));
1308
- border-color: rgba(var(--ax-color-primary-200));
1309
- }
1310
- .ax-dark .ax-el-primary-twotone.ax-state-interactive:hover:not(.ax-state-disabled) {
1311
- background-color: rgba(var(--ax-color-primary-300));
1312
- }
1313
- .ax-dark .ax-el-primary-twotone.ax-state-selected {
1314
- background-color: rgba(var(--ax-color-primary-400));
1315
- }
1316
- .ax-dark .ax-el-primary-twotone .ax-ripple {
1317
- background-color: rgba(var(--ax-color-primary-500), 0.3);
1318
- }
1319
- .ax-dark .ax-el-primary-twotone ax-loading-spinner .ax-loader {
1320
- border-color: rgba(var(--ax-color-primary-fore-tint));
1321
- border-bottom-color: transparent;
1322
- }
1323
- .ax-dark .ax-el-primary-twotone.ax-dropdown-button-marker {
1324
- border-inline-start-color: rgba(var(--ax-color-primary-950));
1325
- }
1326
- .ax-dark .ax-el-primary-outline {
1327
- border-color: rgba(var(--ax-color-primary-200));
1328
- color: rgba(var(--ax-color-primary-200));
1329
- }
1330
- .ax-dark .ax-el-primary-outline.ax-el-interactive:hover:not(.ax-state-disabled) {
1331
- border-color: rgba(var(--ax-color-primary-300));
1332
- color: rgba(var(--ax-color-primary-300));
1333
- background-color: transparent;
1334
- }
1335
- .ax-dark .ax-el-primary-outline.ax-state-selected {
1336
- border-color: rgba(var(--ax-color-primary-300));
1337
- color: rgba(var(--ax-color-primary-300));
1338
- }
1339
- .ax-dark .ax-el-primary-outline .ax-ripple {
1340
- border-color: rgba(var(--ax-color-primary-500), 0.3);
1341
- }
1342
- .ax-dark .ax-el-primary-outline ax-loading-spinner .ax-loader {
1343
- border-color: rgba(var(--ax-color-primary-fore-tint));
1344
- border-bottom-color: transparent;
1345
- }
1346
- .ax-dark .ax-el-primary-outline > button:is(.ax-dark .ax-el-primary-outline > button:focus-visible, .ax-dark .ax-el-primary-outline > button.ax-state-focus) {
1347
- border-color: rgba(var(--ax-color-primary-300));
1348
- color: rgba(var(--ax-color-primary-300));
1349
- }
1350
- .ax-dark .ax-el-primary-blank {
1351
- color: rgba(var(--ax-color-primary-300));
1352
- background-color: transparent;
1353
- }
1354
- .ax-dark .ax-el-primary-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
1355
- color: rgba(var(--ax-color-primary-400));
1356
- }
1357
- .ax-dark .ax-el-primary-blank.ax-state-selected {
1358
- background-color: rgba(var(--ax-color-primary-500));
1359
- color: rgba(var(--ax-color-primary-fore));
1360
- }
1361
- .ax-dark .ax-el-primary-blank .ax-ripple {
1362
- background-color: rgba(var(--ax-color-primary-300), 0.3) !important;
1363
- }
1364
- .ax-dark .ax-el-primary-blank ax-loading-spinner .ax-loader {
1365
- border-color: rgba(var(--ax-color-primary-fore-tint));
1366
- border-bottom-color: transparent;
1367
- }
1368
- .ax-dark .ax-el-secondary-solid {
1369
- background-color: rgba(var(--ax-color-secondary-200));
1370
- color: rgba(var(--ax-color-secondary-fore-tint));
1371
- border-color: rgba(var(--ax-color-secondary-200));
1372
- }
1373
- .ax-dark .ax-el-secondary-solid.ax-el-interactive:hover:not(.ax-state-disabled) {
1374
- background-color: rgba(var(--ax-color-secondary-300));
1375
- color: rgba(var(--ax-color-secondary-fore-tint));
1376
- }
1377
- .ax-dark .ax-el-secondary-solid.ax-state-selected {
1378
- background-color: rgba(var(--ax-color-secondary-400));
1379
- }
1380
- .ax-dark .ax-el-secondary-solid .ax-ripple {
1381
- background-color: rgba(var(--ax-color-secondary-500), 0.3) !important;
1382
- }
1383
- .ax-dark .ax-el-secondary-solid ax-loading-spinner .ax-loader {
1384
- border-color: rgba(var(--ax-color-secondary-fore-tint));
1385
- border-bottom-color: transparent;
1386
- }
1387
- .ax-dark .ax-el-secondary-solid > button:is(.ax-dark .ax-el-secondary-solid > button:focus-visible, .ax-dark .ax-el-secondary-solid > button.ax-state-focus) {
1388
- outline-color: rgba(var(--ax-color-primary-200));
1389
- }
1390
- .ax-dark .ax-el-secondary-solid.ax-dropdown-button-marker {
1391
- border-inline-start-color: rgba(var(--ax-color-secondary-900));
1392
- }
1393
- .ax-dark .ax-el-secondary-twotone {
1394
- background-color: rgba(var(--ax-color-secondary-200));
1395
- color: rgba(var(--ax-color-secondary-fore-tint));
1396
- border-color: rgba(var(--ax-color-secondary-200));
1397
- }
1398
- .ax-dark .ax-el-secondary-twotone.ax-state-interactive:hover:not(.ax-state-disabled) {
1399
- background-color: rgba(var(--ax-color-secondary-300));
1400
- }
1401
- .ax-dark .ax-el-secondary-twotone.ax-state-selected {
1402
- background-color: rgba(var(--ax-color-secondary-400));
1403
- }
1404
- .ax-dark .ax-el-secondary-twotone .ax-ripple {
1405
- background-color: rgba(var(--ax-color-secondary-500), 0.3);
1406
- }
1407
- .ax-dark .ax-el-secondary-twotone ax-loading-spinner .ax-loader {
1408
- border-color: rgba(var(--ax-color-secondary-fore-tint));
1409
- border-bottom-color: transparent;
1410
- }
1411
- .ax-dark .ax-el-secondary-twotone.ax-dropdown-button-marker {
1412
- border-inline-start-color: rgba(var(--ax-color-secondary-950));
1413
- }
1414
- .ax-dark .ax-el-secondary-outline {
1415
- border-color: rgba(var(--ax-color-secondary-200));
1416
- color: rgba(var(--ax-color-secondary-200));
1417
- }
1418
- .ax-dark .ax-el-secondary-outline.ax-el-interactive:hover:not(.ax-state-disabled) {
1419
- border-color: rgba(var(--ax-color-secondary-300));
1420
- color: rgba(var(--ax-color-secondary-300));
1421
- background-color: transparent;
1422
- }
1423
- .ax-dark .ax-el-secondary-outline.ax-state-selected {
1424
- border-color: rgba(var(--ax-color-secondary-300));
1425
- color: rgba(var(--ax-color-secondary-300));
1426
- }
1427
- .ax-dark .ax-el-secondary-outline .ax-ripple {
1428
- border-color: rgba(var(--ax-color-secondary-500), 0.3);
1429
- }
1430
- .ax-dark .ax-el-secondary-outline ax-loading-spinner .ax-loader {
1431
- border-color: rgba(var(--ax-color-secondary-fore-tint));
1432
- border-bottom-color: transparent;
1433
- }
1434
- .ax-dark .ax-el-secondary-outline > button:is(.ax-dark .ax-el-secondary-outline > button:focus-visible, .ax-dark .ax-el-secondary-outline > button.ax-state-focus) {
1435
- border-color: rgba(var(--ax-color-secondary-300));
1436
- color: rgba(var(--ax-color-secondary-300));
1437
- }
1438
- .ax-dark .ax-el-secondary-blank {
1439
- color: rgba(var(--ax-color-secondary-300));
1440
- background-color: transparent;
1441
- }
1442
- .ax-dark .ax-el-secondary-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
1443
- color: rgba(var(--ax-color-secondary-400));
1444
- }
1445
- .ax-dark .ax-el-secondary-blank.ax-state-selected {
1446
- background-color: rgba(var(--ax-color-secondary-500));
1447
- color: rgba(var(--ax-color-secondary-fore));
1448
- }
1449
- .ax-dark .ax-el-secondary-blank .ax-ripple {
1450
- background-color: rgba(var(--ax-color-secondary-300), 0.3) !important;
1451
- }
1452
- .ax-dark .ax-el-secondary-blank ax-loading-spinner .ax-loader {
1453
- border-color: rgba(var(--ax-color-secondary-fore-tint));
1454
- border-bottom-color: transparent;
1455
- }
1456
- .ax-dark .ax-el-success-solid {
1457
- background-color: rgba(var(--ax-color-success-200));
1458
- color: rgba(var(--ax-color-success-fore-tint));
1459
- border-color: rgba(var(--ax-color-success-200));
1460
- }
1461
- .ax-dark .ax-el-success-solid.ax-el-interactive:hover:not(.ax-state-disabled) {
1462
- background-color: rgba(var(--ax-color-success-300));
1463
- color: rgba(var(--ax-color-success-fore-tint));
1464
- }
1465
- .ax-dark .ax-el-success-solid.ax-state-selected {
1466
- background-color: rgba(var(--ax-color-success-400));
1467
- }
1468
- .ax-dark .ax-el-success-solid .ax-ripple {
1469
- background-color: rgba(var(--ax-color-success-500), 0.3) !important;
1470
- }
1471
- .ax-dark .ax-el-success-solid ax-loading-spinner .ax-loader {
1472
- border-color: rgba(var(--ax-color-success-fore-tint));
1473
- border-bottom-color: transparent;
1474
- }
1475
- .ax-dark .ax-el-success-solid > button:is(.ax-dark .ax-el-success-solid > button:focus-visible, .ax-dark .ax-el-success-solid > button.ax-state-focus) {
1476
- outline-color: rgba(var(--ax-color-primary-200));
1477
- }
1478
- .ax-dark .ax-el-success-solid.ax-dropdown-button-marker {
1479
- border-inline-start-color: rgba(var(--ax-color-success-900));
1480
- }
1481
- .ax-dark .ax-el-success-twotone {
1482
- background-color: rgba(var(--ax-color-success-200));
1483
- color: rgba(var(--ax-color-success-fore-tint));
1484
- border-color: rgba(var(--ax-color-success-200));
1485
- }
1486
- .ax-dark .ax-el-success-twotone.ax-state-interactive:hover:not(.ax-state-disabled) {
1487
- background-color: rgba(var(--ax-color-success-300));
1488
- }
1489
- .ax-dark .ax-el-success-twotone.ax-state-selected {
1490
- background-color: rgba(var(--ax-color-success-400));
1491
- }
1492
- .ax-dark .ax-el-success-twotone .ax-ripple {
1493
- background-color: rgba(var(--ax-color-success-500), 0.3);
1494
- }
1495
- .ax-dark .ax-el-success-twotone ax-loading-spinner .ax-loader {
1496
- border-color: rgba(var(--ax-color-success-fore-tint));
1497
- border-bottom-color: transparent;
1498
- }
1499
- .ax-dark .ax-el-success-twotone.ax-dropdown-button-marker {
1500
- border-inline-start-color: rgba(var(--ax-color-success-950));
1501
- }
1502
- .ax-dark .ax-el-success-outline {
1503
- border-color: rgba(var(--ax-color-success-200));
1504
- color: rgba(var(--ax-color-success-200));
1505
- }
1506
- .ax-dark .ax-el-success-outline.ax-el-interactive:hover:not(.ax-state-disabled) {
1507
- border-color: rgba(var(--ax-color-success-300));
1508
- color: rgba(var(--ax-color-success-300));
1509
- background-color: transparent;
1510
- }
1511
- .ax-dark .ax-el-success-outline.ax-state-selected {
1512
- border-color: rgba(var(--ax-color-success-300));
1513
- color: rgba(var(--ax-color-success-300));
1514
- }
1515
- .ax-dark .ax-el-success-outline .ax-ripple {
1516
- border-color: rgba(var(--ax-color-success-500), 0.3);
1517
- }
1518
- .ax-dark .ax-el-success-outline ax-loading-spinner .ax-loader {
1519
- border-color: rgba(var(--ax-color-success-fore-tint));
1520
- border-bottom-color: transparent;
1521
- }
1522
- .ax-dark .ax-el-success-outline > button:is(.ax-dark .ax-el-success-outline > button:focus-visible, .ax-dark .ax-el-success-outline > button.ax-state-focus) {
1523
- border-color: rgba(var(--ax-color-success-300));
1524
- color: rgba(var(--ax-color-success-300));
1525
- }
1526
- .ax-dark .ax-el-success-blank {
1527
- color: rgba(var(--ax-color-success-300));
1528
- background-color: transparent;
1529
- }
1530
- .ax-dark .ax-el-success-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
1531
- color: rgba(var(--ax-color-success-400));
1532
- }
1533
- .ax-dark .ax-el-success-blank.ax-state-selected {
1534
- background-color: rgba(var(--ax-color-success-500));
1535
- color: rgba(var(--ax-color-success-fore));
1536
- }
1537
- .ax-dark .ax-el-success-blank .ax-ripple {
1538
- background-color: rgba(var(--ax-color-success-300), 0.3) !important;
1539
- }
1540
- .ax-dark .ax-el-success-blank ax-loading-spinner .ax-loader {
1541
- border-color: rgba(var(--ax-color-success-fore-tint));
1542
- border-bottom-color: transparent;
1543
- }
1544
- .ax-dark .ax-el-warning-solid {
1545
- background-color: rgba(var(--ax-color-warning-200));
1546
- color: rgba(var(--ax-color-warning-fore-tint));
1547
- border-color: rgba(var(--ax-color-warning-200));
1548
- }
1549
- .ax-dark .ax-el-warning-solid.ax-el-interactive:hover:not(.ax-state-disabled) {
1550
- background-color: rgba(var(--ax-color-warning-300));
1551
- color: rgba(var(--ax-color-warning-fore-tint));
1552
- }
1553
- .ax-dark .ax-el-warning-solid.ax-state-selected {
1554
- background-color: rgba(var(--ax-color-warning-400));
1555
- }
1556
- .ax-dark .ax-el-warning-solid .ax-ripple {
1557
- background-color: rgba(var(--ax-color-warning-500), 0.3) !important;
1558
- }
1559
- .ax-dark .ax-el-warning-solid ax-loading-spinner .ax-loader {
1560
- border-color: rgba(var(--ax-color-warning-fore-tint));
1561
- border-bottom-color: transparent;
1562
- }
1563
- .ax-dark .ax-el-warning-solid > button:is(.ax-dark .ax-el-warning-solid > button:focus-visible, .ax-dark .ax-el-warning-solid > button.ax-state-focus) {
1564
- outline-color: rgba(var(--ax-color-primary-200));
1565
- }
1566
- .ax-dark .ax-el-warning-solid.ax-dropdown-button-marker {
1567
- border-inline-start-color: rgba(var(--ax-color-warning-900));
1568
- }
1569
- .ax-dark .ax-el-warning-twotone {
1570
- background-color: rgba(var(--ax-color-warning-200));
1571
- color: rgba(var(--ax-color-warning-fore-tint));
1572
- border-color: rgba(var(--ax-color-warning-200));
1573
- }
1574
- .ax-dark .ax-el-warning-twotone.ax-state-interactive:hover:not(.ax-state-disabled) {
1575
- background-color: rgba(var(--ax-color-warning-300));
1576
- }
1577
- .ax-dark .ax-el-warning-twotone.ax-state-selected {
1578
- background-color: rgba(var(--ax-color-warning-400));
1579
- }
1580
- .ax-dark .ax-el-warning-twotone .ax-ripple {
1581
- background-color: rgba(var(--ax-color-warning-500), 0.3);
1582
- }
1583
- .ax-dark .ax-el-warning-twotone ax-loading-spinner .ax-loader {
1584
- border-color: rgba(var(--ax-color-warning-fore-tint));
1585
- border-bottom-color: transparent;
1586
- }
1587
- .ax-dark .ax-el-warning-twotone.ax-dropdown-button-marker {
1588
- border-inline-start-color: rgba(var(--ax-color-warning-950));
1589
- }
1590
- .ax-dark .ax-el-warning-outline {
1591
- border-color: rgba(var(--ax-color-warning-200));
1592
- color: rgba(var(--ax-color-warning-200));
1593
- }
1594
- .ax-dark .ax-el-warning-outline.ax-el-interactive:hover:not(.ax-state-disabled) {
1595
- border-color: rgba(var(--ax-color-warning-300));
1596
- color: rgba(var(--ax-color-warning-300));
1597
- background-color: transparent;
1598
- }
1599
- .ax-dark .ax-el-warning-outline.ax-state-selected {
1600
- border-color: rgba(var(--ax-color-warning-300));
1601
- color: rgba(var(--ax-color-warning-300));
1602
- }
1603
- .ax-dark .ax-el-warning-outline .ax-ripple {
1604
- border-color: rgba(var(--ax-color-warning-500), 0.3);
1605
- }
1606
- .ax-dark .ax-el-warning-outline ax-loading-spinner .ax-loader {
1607
- border-color: rgba(var(--ax-color-warning-fore-tint));
1608
- border-bottom-color: transparent;
1609
- }
1610
- .ax-dark .ax-el-warning-outline > button:is(.ax-dark .ax-el-warning-outline > button:focus-visible, .ax-dark .ax-el-warning-outline > button.ax-state-focus) {
1611
- border-color: rgba(var(--ax-color-warning-300));
1612
- color: rgba(var(--ax-color-warning-300));
1613
- }
1614
- .ax-dark .ax-el-warning-blank {
1615
- color: rgba(var(--ax-color-warning-300));
1616
- background-color: transparent;
1617
- }
1618
- .ax-dark .ax-el-warning-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
1619
- color: rgba(var(--ax-color-warning-400));
1620
- }
1621
- .ax-dark .ax-el-warning-blank.ax-state-selected {
1622
- background-color: rgba(var(--ax-color-warning-500));
1623
- color: rgba(var(--ax-color-warning-fore));
1624
- }
1625
- .ax-dark .ax-el-warning-blank .ax-ripple {
1626
- background-color: rgba(var(--ax-color-warning-300), 0.3) !important;
1627
- }
1628
- .ax-dark .ax-el-warning-blank ax-loading-spinner .ax-loader {
1629
- border-color: rgba(var(--ax-color-warning-fore-tint));
1630
- border-bottom-color: transparent;
1631
- }
1632
- .ax-dark .ax-el-danger-solid {
1633
- background-color: rgba(var(--ax-color-danger-200));
1634
- color: rgba(var(--ax-color-danger-fore-tint));
1635
- border-color: rgba(var(--ax-color-danger-200));
1636
- }
1637
- .ax-dark .ax-el-danger-solid.ax-el-interactive:hover:not(.ax-state-disabled) {
1638
- background-color: rgba(var(--ax-color-danger-300));
1639
- color: rgba(var(--ax-color-danger-fore-tint));
1640
- }
1641
- .ax-dark .ax-el-danger-solid.ax-state-selected {
1642
- background-color: rgba(var(--ax-color-danger-400));
1643
- }
1644
- .ax-dark .ax-el-danger-solid .ax-ripple {
1645
- background-color: rgba(var(--ax-color-danger-500), 0.3) !important;
1646
- }
1647
- .ax-dark .ax-el-danger-solid ax-loading-spinner .ax-loader {
1648
- border-color: rgba(var(--ax-color-danger-fore-tint));
1649
- border-bottom-color: transparent;
1650
- }
1651
- .ax-dark .ax-el-danger-solid > button:is(.ax-dark .ax-el-danger-solid > button:focus-visible, .ax-dark .ax-el-danger-solid > button.ax-state-focus) {
1652
- outline-color: rgba(var(--ax-color-primary-200));
1653
- }
1654
- .ax-dark .ax-el-danger-solid.ax-dropdown-button-marker {
1655
- border-inline-start-color: rgba(var(--ax-color-danger-900));
1656
- }
1657
- .ax-dark .ax-el-danger-twotone {
1658
- background-color: rgba(var(--ax-color-danger-200));
1659
- color: rgba(var(--ax-color-danger-fore-tint));
1660
- border-color: rgba(var(--ax-color-danger-200));
1661
- }
1662
- .ax-dark .ax-el-danger-twotone.ax-state-interactive:hover:not(.ax-state-disabled) {
1663
- background-color: rgba(var(--ax-color-danger-300));
1664
- }
1665
- .ax-dark .ax-el-danger-twotone.ax-state-selected {
1666
- background-color: rgba(var(--ax-color-danger-400));
1667
- }
1668
- .ax-dark .ax-el-danger-twotone .ax-ripple {
1669
- background-color: rgba(var(--ax-color-danger-500), 0.3);
1670
- }
1671
- .ax-dark .ax-el-danger-twotone ax-loading-spinner .ax-loader {
1672
- border-color: rgba(var(--ax-color-danger-fore-tint));
1673
- border-bottom-color: transparent;
1674
- }
1675
- .ax-dark .ax-el-danger-twotone.ax-dropdown-button-marker {
1676
- border-inline-start-color: rgba(var(--ax-color-danger-950));
1677
- }
1678
- .ax-dark .ax-el-danger-outline {
1679
- border-color: rgba(var(--ax-color-danger-200));
1680
- color: rgba(var(--ax-color-danger-200));
1681
- }
1682
- .ax-dark .ax-el-danger-outline.ax-el-interactive:hover:not(.ax-state-disabled) {
1683
- border-color: rgba(var(--ax-color-danger-300));
1684
- color: rgba(var(--ax-color-danger-300));
1685
- background-color: transparent;
1686
- }
1687
- .ax-dark .ax-el-danger-outline.ax-state-selected {
1688
- border-color: rgba(var(--ax-color-danger-300));
1689
- color: rgba(var(--ax-color-danger-300));
1690
- }
1691
- .ax-dark .ax-el-danger-outline .ax-ripple {
1692
- border-color: rgba(var(--ax-color-danger-500), 0.3);
1693
- }
1694
- .ax-dark .ax-el-danger-outline ax-loading-spinner .ax-loader {
1695
- border-color: rgba(var(--ax-color-danger-fore-tint));
1696
- border-bottom-color: transparent;
1697
- }
1698
- .ax-dark .ax-el-danger-outline > button:is(.ax-dark .ax-el-danger-outline > button:focus-visible, .ax-dark .ax-el-danger-outline > button.ax-state-focus) {
1699
- border-color: rgba(var(--ax-color-danger-300));
1700
- color: rgba(var(--ax-color-danger-300));
1701
- }
1702
- .ax-dark .ax-el-danger-blank {
1703
- color: rgba(var(--ax-color-danger-300));
1704
- background-color: transparent;
1705
- }
1706
- .ax-dark .ax-el-danger-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
1707
- color: rgba(var(--ax-color-danger-400));
1708
- }
1709
- .ax-dark .ax-el-danger-blank.ax-state-selected {
1710
- background-color: rgba(var(--ax-color-danger-500));
1711
- color: rgba(var(--ax-color-danger-fore));
1712
- }
1713
- .ax-dark .ax-el-danger-blank .ax-ripple {
1714
- background-color: rgba(var(--ax-color-danger-300), 0.3) !important;
1715
- }
1716
- .ax-dark .ax-el-danger-blank ax-loading-spinner .ax-loader {
1717
- border-color: rgba(var(--ax-color-danger-fore-tint));
1718
- border-bottom-color: transparent;
1719
- }
1720
- .ax-dark .ax-el-info-solid {
1721
- background-color: rgba(var(--ax-color-info-200));
1722
- color: rgba(var(--ax-color-info-fore-tint));
1723
- border-color: rgba(var(--ax-color-info-200));
1724
- }
1725
- .ax-dark .ax-el-info-solid.ax-el-interactive:hover:not(.ax-state-disabled) {
1726
- background-color: rgba(var(--ax-color-info-300));
1727
- color: rgba(var(--ax-color-info-fore-tint));
1728
- }
1729
- .ax-dark .ax-el-info-solid.ax-state-selected {
1730
- background-color: rgba(var(--ax-color-info-400));
1731
- }
1732
- .ax-dark .ax-el-info-solid .ax-ripple {
1733
- background-color: rgba(var(--ax-color-info-500), 0.3) !important;
1734
- }
1735
- .ax-dark .ax-el-info-solid ax-loading-spinner .ax-loader {
1736
- border-color: rgba(var(--ax-color-info-fore-tint));
1737
- border-bottom-color: transparent;
1738
- }
1739
- .ax-dark .ax-el-info-solid > button:is(.ax-dark .ax-el-info-solid > button:focus-visible, .ax-dark .ax-el-info-solid > button.ax-state-focus) {
1740
- outline-color: rgba(var(--ax-color-primary-200));
1741
- }
1742
- .ax-dark .ax-el-info-solid.ax-dropdown-button-marker {
1743
- border-inline-start-color: rgba(var(--ax-color-info-900));
1744
- }
1745
- .ax-dark .ax-el-info-twotone {
1746
- background-color: rgba(var(--ax-color-info-200));
1747
- color: rgba(var(--ax-color-info-fore-tint));
1748
- border-color: rgba(var(--ax-color-info-200));
1749
- }
1750
- .ax-dark .ax-el-info-twotone.ax-state-interactive:hover:not(.ax-state-disabled) {
1751
- background-color: rgba(var(--ax-color-info-300));
1752
- }
1753
- .ax-dark .ax-el-info-twotone.ax-state-selected {
1754
- background-color: rgba(var(--ax-color-info-400));
1755
- }
1756
- .ax-dark .ax-el-info-twotone .ax-ripple {
1757
- background-color: rgba(var(--ax-color-info-500), 0.3);
1758
- }
1759
- .ax-dark .ax-el-info-twotone ax-loading-spinner .ax-loader {
1760
- border-color: rgba(var(--ax-color-info-fore-tint));
1761
- border-bottom-color: transparent;
1762
- }
1763
- .ax-dark .ax-el-info-twotone.ax-dropdown-button-marker {
1764
- border-inline-start-color: rgba(var(--ax-color-info-950));
1765
- }
1766
- .ax-dark .ax-el-info-outline {
1767
- border-color: rgba(var(--ax-color-info-200));
1768
- color: rgba(var(--ax-color-info-200));
1769
- }
1770
- .ax-dark .ax-el-info-outline.ax-el-interactive:hover:not(.ax-state-disabled) {
1771
- border-color: rgba(var(--ax-color-info-300));
1772
- color: rgba(var(--ax-color-info-300));
1773
- background-color: transparent;
1774
- }
1775
- .ax-dark .ax-el-info-outline.ax-state-selected {
1776
- border-color: rgba(var(--ax-color-info-300));
1777
- color: rgba(var(--ax-color-info-300));
1778
- }
1779
- .ax-dark .ax-el-info-outline .ax-ripple {
1780
- border-color: rgba(var(--ax-color-info-500), 0.3);
1781
- }
1782
- .ax-dark .ax-el-info-outline ax-loading-spinner .ax-loader {
1783
- border-color: rgba(var(--ax-color-info-fore-tint));
1784
- border-bottom-color: transparent;
1785
- }
1786
- .ax-dark .ax-el-info-outline > button:is(.ax-dark .ax-el-info-outline > button:focus-visible, .ax-dark .ax-el-info-outline > button.ax-state-focus) {
1787
- border-color: rgba(var(--ax-color-info-300));
1788
- color: rgba(var(--ax-color-info-300));
1789
- }
1790
- .ax-dark .ax-el-info-blank {
1791
- color: rgba(var(--ax-color-info-300));
1792
- background-color: transparent;
1793
- }
1794
- .ax-dark .ax-el-info-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
1795
- color: rgba(var(--ax-color-info-400));
1796
- }
1797
- .ax-dark .ax-el-info-blank.ax-state-selected {
1798
- background-color: rgba(var(--ax-color-info-500));
1799
- color: rgba(var(--ax-color-info-fore));
1800
- }
1801
- .ax-dark .ax-el-info-blank .ax-ripple {
1802
- background-color: rgba(var(--ax-color-info-300), 0.3) !important;
1803
- }
1804
- .ax-dark .ax-el-info-blank ax-loading-spinner .ax-loader {
1805
- border-color: rgba(var(--ax-color-info-fore-tint));
1806
- border-bottom-color: transparent;
1807
- }
1808
- .ax-dark .ax-el-ghost-solid.ax-el-interactive:hover:not(.ax-dark .ax-el-ghost-solid.ax-el-interactive:hover.ax-state-selected, .ax-dark .ax-el-ghost-solid.ax-el-interactive:hover.ax-state-disabled) {
1809
- border-color: rgba(var(--ax-color-primary-200));
1810
- color: rgba(var(--ax-color-primary-200));
1811
- }
1812
- .ax-dark .ax-el-ghost-solid.ax-el-interactive:hover + .ax-dropdown-button-marker {
1813
- border-inline-start-color: rgba(var(--ax-color-primary-200));
1814
- }
1815
- .ax-dark .ax-el-ghost-solid.ax-el-interactive:active {
1816
- border-color: rgba(var(--ax-color-primary-300));
1817
- color: rgba(var(--ax-color-primary-300));
1818
- }
1819
- .ax-dark .ax-el-ghost-solid.ax-state-selected {
1820
- border-color: rgba(var(--ax-color-primary-200));
1821
- background-color: rgba(var(--ax-color-primary-200));
1822
- color: rgba(var(--ax-color-primary-fore));
1823
- }
1824
- .ax-dark .ax-el-ghost-solid .ax-ripple {
1825
- background-color: rgba(var(--ax-color-primary-200), 0.3) !important;
1826
- }
1827
- .ax-dark .ax-el-ghost-outline.ax-el-interactive:hover:not(.ax-dark .ax-el-ghost-outline.ax-el-interactive:hover.ax-state-selected, .ax-dark .ax-el-ghost-outline.ax-el-interactive:hover.ax-state-disabled) {
1828
- border-color: rgba(var(--ax-color-primary-200));
1829
- color: rgba(var(--ax-color-primary-200));
1830
- }
1831
- .ax-dark .ax-el-ghost-outline.ax-el-interactive:hover + .ax-dropdown-button-marker {
1832
- border-inline-start-color: rgba(var(--ax-color-primary-200));
1833
- }
1834
- .ax-dark .ax-el-ghost-outline.ax-state-selected {
1835
- border-color: rgba(var(--ax-color-primary-200));
1836
- color: rgba(var(--ax-color-primary-fore-tint));
1837
- }
1838
- .ax-dark .ax-el-ghost-outline .ax-ripple {
1839
- background-color: rgba(var(--ax-color-primary-200), 0.3);
1840
- }
1841
- .ax-dark .ax-el-ghost-outline ax-loading-spinner .ax-loader {
1842
- border-color: rgba(var(--ax-color-ghost-fore));
1843
- border-bottom-color: transparent;
1844
- }
1845
- .ax-dark .ax-el-ghost-blank {
1846
- border-style: none;
1847
- background-color: transparent;
1848
- color: rgba(var(--ax-color-ghost-fore));
1849
- }
1850
- .ax-dark .ax-el-ghost-blank.ax-state-selected {
1851
- background-color: rgba(var(--ax-color-primary-500));
1852
- color: rgba(var(--ax-color-primary-fore));
1853
- }
1854
- .ax-dark .ax-el-ghost-blank.ax-el-interactive:hover:not(.ax-dark .ax-el-ghost-blank.ax-el-interactive:hover.ax-state-selected, .ax-dark .ax-el-ghost-blank.ax-el-interactive:hover.ax-state-disabled) {
1855
- border-color: rgba(var(--ax-color-primary-300));
1856
- color: rgba(var(--ax-color-primary-300));
1857
- }
1858
- .ax-dark .ax-el-ghost-blank.ax-el-interactive:active {
1859
- border-color: rgba(var(--ax-color-primary-400));
1860
- color: rgba(var(--ax-color-primary-400));
1861
- }
1862
- .ax-dark .ax-el-ghost-blank .ax-ripple {
1863
- background-color: rgba(var(--ax-color-primary-200), 0.3) !important;
1864
- }
1865
- .ax-dark .ax-el-ghost-blank > button:is(.ax-dark .ax-el-ghost-blank > button:focus-visible, .ax-dark .ax-el-ghost-blank > button.ax-state-focus) {
1866
- outline-color: rgba(var(--ax-color-primary-200));
1867
- }
1868
- .ax-dark .ax-el-ghost-twotone {
1869
- border-color: transparent;
1870
- background-color: rgba(var(--ax-color-ghost-fore), 0.05);
1871
- color: rgba(var(--ax-color-ghost-fore));
1872
- }
1873
- .ax-dark .ax-el-ghost-twotone.ax-el-interactive:hover:not(.ax-dark .ax-el-ghost-twotone.ax-el-interactive:hover.ax-state-selected, .ax-dark .ax-el-ghost-twotone.ax-el-interactive:hover.ax-state-disabled) {
1874
- background-color: rgba(var(--ax-color-primary-200));
1875
- color: rgba(var(--ax-color-primary-fore-tint));
1876
- }
1877
- .ax-dark .ax-el-ghost-twotone.ax-el-interactive:hover + .ax-dropdown-button-marker {
1878
- border-inline-start-color: rgba(var(--ax-color-primary-200));
1879
- }
1880
- .ax-dark .ax-el-ghost-twotone.ax-el-interactive:active {
1881
- background-color: rgba(var(--ax-color-primary-300));
1882
- color: rgba(var(--ax-color-primary-fore-tint));
1883
- }
1884
- .ax-dark .ax-el-ghost-twotone.ax-state-selected {
1885
- border-color: rgba(var(--ax-color-primary-300));
1886
- background-color: rgba(var(--ax-color-primary-300));
1887
- }
1888
- .ax-dark .ax-el-ghost-twotone .ax-ripple {
1889
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
1890
- }
1891
- .ax-dark .ax-el-ghost-twotone > button:is(.ax-dark .ax-el-ghost-twotone > button:focus-visible, .ax-dark .ax-el-ghost-twotone > button.ax-state-focus) {
1892
- outline-color: rgba(var(--ax-color-primary-200));
1893
- }
1894
-
1895
- .ax-drop-down {
1896
- display: contents;
1897
- }
1898
- .ax-drop-down .ax-dropdown-content {
1899
- display: flex;
1900
- flex: 1 1 0%;
1901
- align-items: center;
1902
- overflow-x: auto;
1903
- overflow-y: hidden;
1904
- font-size: 0.875rem;
1905
- line-height: 1.25rem;
1906
- text-transform: capitalize;
1907
- }
1908
- .ax-drop-down .ax-dropdown-content.ax-state-disabled {
1909
- cursor: not-allowed;
1910
- opacity: 0.5;
1911
- }
1912
-
1913
- .ax-overlay-pane {
1914
- margin-top: 0.25rem;
1915
- height: fit-content;
1916
- overflow: hidden;
1917
- border-radius: 0px;
1918
- border-width: 1px;
1919
- border-color: rgba(var(--ax-color-border-default));
1920
- background-color: rgba(var(--ax-color-surface));
1921
- --ax-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
1922
- --ax-shadow-colored: 0 4px 6px -1px var(--ax-shadow-color),
1923
- 0 2px 4px -2px var(--ax-shadow-color);
1924
- box-shadow: var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--ax-shadow);
1925
- }
1926
- @media (min-width: 768px) {
1927
- .ax-overlay-pane {
1928
- border-radius: var(--ax-rounded-border-default);
1929
- }
1930
- }
1931
- .ax-overlay-pane ax-header,
1932
- .ax-overlay-pane ax-footer {
1933
- background-color: rgba(var(--ax-color-surface));
1934
- padding: 0.75rem;
1935
- }
1936
- .ax-overlay-pane.ax-overlay-center {
1937
- height: fit-content;
1938
- width: 80vw;
1939
- max-width: 90vh;
1940
- }
1941
- .ax-overlay-pane.ax-overlay-actionsheet {
1942
- height: auto;
1943
- max-height: 85vh;
1944
- width: 100%;
1945
- background-color: rgba(var(--ax-color-surface));
1946
- }
1947
- .ax-overlay-pane.ax-overlay-actionsheet.ax-full {
1948
- height: 95vh;
1949
- max-height: 95vh;
1950
- }
1951
- .ax-overlay-pane.ax-overlay-full {
1952
- width: 100vw;
1953
- height: 100vh;
1954
- }
1955
-
1956
- .ax-dark .ax-editor-container.ax-look-fill.ax-state-error {
1957
- background-color: rgba(var(--ax-color-danger-500), 0.25);
1958
- }
1959
- .ax-dark .ax-editor-container.ax-look-fill.ax-state-success {
1960
- background-color: rgba(var(--ax-color-success-500), 0.25);
1961
- }
1962
-
1963
- .ax-editor-container {
1964
- display: flex;
1965
- height: var(--ax-size-default);
1966
- width: 100%;
1967
- align-items: center;
1968
- overflow: hidden;
1969
- font-size: 0.875rem;
1970
- line-height: 1;
1971
- color: rgba(var(--ax-color-input-surface-fore));
1972
- }
1973
- .ax-editor-container .ax-editor-container {
1974
- background-color: rgba(var(--ax-color-on-surface)) !important;
1975
- border-radius: 0 !important;
1976
- border: 0px !important;
1977
- height: 100% !important;
1978
- }
1979
- .ax-editor-container .ax-editor-container:focus-within {
1980
- box-shadow: none !important;
1981
- }
1982
- .ax-editor-container .ax-editor-container:focus {
1983
- box-shadow: 0px 0px 0 1px rgba(var(--ax-color-primary-500));
1984
- }
1985
- .ax-editor-container.ax-state-disabled {
1986
- opacity: 0.5;
1987
- cursor: not-allowed;
1988
- }
1989
- .ax-editor-container.ax-look-solid, .ax-editor-container.ax-look-outline {
1990
- border-radius: var(--ax-rounded-border-default);
1991
- border-width: 1px;
1992
- border-color: rgba(var(--ax-color-border-default));
1993
- background-color: rgba(var(--ax-color-input-surface));
1994
- }
1995
- .ax-editor-container.ax-look-solid:focus-within, .ax-editor-container.ax-look-outline:focus-within {
1996
- box-shadow: 0px 0px 0 1px rgba(var(--ax-color-primary-500));
1997
- border-color: rgba(var(--ax-color-primary-500));
1998
- }
1999
- .ax-editor-container.ax-look-solid.ax-state-error, .ax-editor-container.ax-look-outline.ax-state-error {
2000
- border-color: rgba(var(--ax-color-danger-500));
2001
- }
2002
- .ax-editor-container.ax-look-solid.ax-state-error:focus-within, .ax-editor-container.ax-look-outline.ax-state-error:focus-within {
2003
- box-shadow: 0px 0px 0 1px rgba(var(--ax-color-danger-500));
2004
- border-color: rgba(var(--ax-color-danger-500));
2005
- }
2006
- .ax-editor-container.ax-look-solid.ax-state-error .ax-input::placeholder, .ax-editor-container.ax-look-outline.ax-state-error .ax-input::placeholder {
2007
- color: rgba(var(--ax-color-primary-500));
2008
- }
2009
- .ax-editor-container.ax-look-flat {
2010
- border-radius: 0px;
2011
- border-bottom-width: 1px;
2012
- border-color: rgba(var(--ax-color-border-default));
2013
- }
2014
- .ax-editor-container.ax-look-flat:focus-within {
2015
- border-color: rgba(var(--ax-color-primary-500));
2016
- }
2017
- .ax-editor-container.ax-look-flat.ax-state-error {
2018
- border-color: rgba(var(--ax-color-danger-500));
2019
- }
2020
- .ax-editor-container.ax-look-flat.ax-state-error .ax-input::placeholder {
2021
- color: rgba(var(--ax-color-danger-500));
2022
- }
2023
- .ax-editor-container.ax-look-outline {
2024
- background-color: transparent !important;
2025
- }
2026
- .ax-editor-container.ax-look-fill {
2027
- border-radius: var(--ax-rounded-border-default);
2028
- background-color: rgba(var(--ax-color-on-surface));
2029
- }
2030
- .ax-editor-container.ax-look-fill:focus-within {
2031
- box-shadow: 0px 0px 0 2px rgba(var(--ax-color-primary-500));
2032
- }
2033
- .ax-editor-container.ax-look-fill.ax-state-error {
2034
- background-color: rgba(var(--ax-color-danger-50));
2035
- color: rgba(var(--ax-color-danger-fore-tint));
2036
- }
2037
- .ax-editor-container.ax-look-fill.ax-state-error:focus-within {
2038
- box-shadow: 0px 0px 0 2px rgba(var(--ax-color-danger-500));
2039
- }
2040
- .ax-editor-container.ax-look-fill.ax-state-error .ax-input::placeholder {
2041
- color: rgba(var(--ax-color-danger-500));
2042
- }
2043
- .ax-editor-container .ax-editor-input {
2044
- height: 100%;
2045
- flex: 1 1 0%;
2046
- }
2047
- .ax-editor-container .ax-editor-input .ax-input {
2048
- height: 100%;
2049
- }
2050
- .ax-editor-container .ax-input {
2051
- padding-left: 0.75rem;
2052
- padding-right: 0.75rem;
2053
- }
2054
- .ax-editor-container .ax-input::placeholder {
2055
- font-size: inherit;
2056
- font-weight: 400;
2057
- color: rgb(var(--ax-color-text-default), 0.5);
2058
- }
2059
- .ax-editor-container .ax-input:focus, .ax-editor-container .ax-input:focus-visible, .ax-editor-container .ax-input:focus-within {
2060
- outline: none;
2061
- }
2062
- .ax-editor-container.ax-xs .ax-input {
2063
- padding: 0.5rem;
2064
- font-size: 0.75rem;
2065
- line-height: 1rem;
2066
- }
2067
- .ax-editor-container.ax-sm .ax-input {
2068
- padding: 0.5rem;
2069
- font-size: 0.875rem;
2070
- line-height: 1.25rem;
2071
- }
2072
- .ax-editor-container.ax-md .ax-input {
2073
- font-size: 0.875rem;
2074
- line-height: 1.25rem;
2075
- }
2076
- .ax-editor-container.ax-lg .ax-input {
2077
- font-size: 1rem;
2078
- line-height: 1.25rem;
2079
- }
2080
- .ax-editor-container.ax-xl .ax-input {
2081
- font-size: 1.125rem;
2082
- line-height: 1.75rem;
2083
- }
2084
- .ax-editor-container .ax-editor-control {
2085
- display: flex;
2086
- height: 100%;
2087
- align-items: center;
2088
- justify-content: center;
2089
- padding-inline-start: 0.5rem;
2090
- font-size: 1.125rem;
2091
- line-height: 1.75rem;
2092
- font-size: 1.125rem;
2093
- line-height: 1.75rem;
2094
- color: rgba(var(--ax-color-input-surface-fore));
2095
- }
2096
- .ax-editor-container.ax-button-icon {
2097
- padding-left: 0.5rem;
2098
- padding-right: 0.5rem;
2099
- }
2100
- .ax-editor-container .ax-input,
2101
- .ax-editor-container .ax-text-area {
2102
- text-align: inherit;
2103
- font-family: inherit;
2104
- font-size: inherit;
2105
- line-height: inherit;
2106
- height: 100%;
2107
- width: 100%;
2108
- flex: 1 1 0%;
2109
- background-color: transparent;
2110
- font-weight: 400;
2111
- }
2112
- .ax-editor-container .ax-input:focus,
2113
- .ax-editor-container .ax-text-area:focus {
2114
- box-shadow: none;
2115
- }
2116
- .ax-editor-container .ax-text-area {
2117
- padding: 0.625rem;
2118
- }
2119
- .ax-editor-container > ax-prefix *,
2120
- .ax-editor-container > ax-prefix .ax-button,
2121
- .ax-editor-container > ax-prefix ax-title {
2122
- border-end-start-radius: 0.25rem;
2123
- border-start-start-radius: 0.25rem;
2124
- }
2125
- .ax-editor-container > ax-prefix ax-icon {
2126
- padding-left: 0.75rem;
2127
- padding-right: 0.75rem;
2128
- }
2129
- .ax-editor-container > ax-suffix *,
2130
- .ax-editor-container > ax-suffix .ax-button,
2131
- .ax-editor-container > ax-suffix ax-title {
2132
- border-end-end-radius: 0.25rem;
2133
- border-start-end-radius: 0.25rem;
2134
- }
2135
- .ax-editor-container > ax-prefix, .ax-editor-container > ax-suffix {
2136
- height: 100%;
2137
- }
2138
- .ax-editor-container > ax-prefix + .ax-input, .ax-editor-container > ax-suffix + .ax-input {
2139
- padding-left: 0.375rem !important;
2140
- padding-right: 0.375rem !important;
2141
- }
2142
- .ax-editor-container > ax-prefix *, .ax-editor-container > ax-suffix * {
2143
- display: flex;
2144
- height: 100%;
2145
- align-items: center;
2146
- justify-content: center;
2147
- border-radius: 0px;
2148
- }
2149
- .ax-editor-container > ax-prefix ax-title, .ax-editor-container > ax-suffix ax-title {
2150
- padding-left: 1rem;
2151
- padding-right: 1rem;
2152
- }
2153
- .ax-editor-container > ax-prefix > ax-text, .ax-editor-container > ax-suffix > ax-text {
2154
- display: flex;
2155
- align-items: center;
2156
- justify-content: center;
2157
- background-color: transparent;
2158
- padding-left: 0.5rem;
2159
- padding-right: 0.5rem;
2160
- font-size: 0.875rem;
2161
- line-height: 1.25rem;
2162
- }
2163
- .ax-editor-container .ax-button {
2164
- height: 100% !important;
2165
- border-radius: 0px !important;
2166
- }
2167
- .ax-editor-container .ax-button.ax-button-icon {
2168
- height: 100%;
2169
- width: var(--ax-size-default);
2170
- }
2171
-
2172
- .ax-ripple {
2173
- transform: scale(0);
2174
- animation: ripple 500ms linear;
2175
- position: absolute;
2176
- border-radius: 9999px !important;
2177
- }
2178
- @keyframes ripple {
2179
- to {
2180
- transform: scale(4);
2181
- opacity: 0;
2182
- }
2183
- }
2184
-
2185
- .ax-general-button {
2186
- display: inline-flex;
2187
- height: var(--ax-size-default);
2188
- cursor: pointer;
2189
- align-items: center;
2190
- justify-content: center;
2191
- border-radius: var(--ax-rounded-border-default);
2192
- padding-left: 1rem;
2193
- padding-right: 1rem;
2194
- font-size: 0.875rem;
2195
- line-height: 1.25rem;
2196
- color: rgb(var(--ax-color-text-default), 0.75);
2197
- }
2198
- .ax-general-button:hover:not(.ax-general-button:hover:disabled, .ax-state-disabled) {
2199
- color: rgba(var(--ax-color-primary-500), var(--tw-text-opacity));
2200
- }
2201
- .ax-general-button:focus:not(.ax-general-button:focus:disabled, .ax-state-disabled, .ax-general-button:focus-visible:disabled), .ax-general-button:focus-visible:not(.ax-general-button:focus:disabled, .ax-state-disabled, .ax-general-button:focus-visible:disabled) {
2202
- color: rgba(var(--ax-color-primary-700), var(--tw-text-opacity));
2203
- }
2204
- .ax-general-button:active:not(.ax-general-button:active:disabled, .ax-state-disabled) {
2205
- color: rgba(var(--ax-color-primary-300), var(--tw-text-opacity));
2206
- }
2207
- .ax-general-button.ax-button-icon {
2208
- padding-left: 0.5rem;
2209
- padding-right: 0.5rem;
2210
- }
2211
- .ax-general-button.ax-button-icon > button {
2212
- display: flex;
2213
- }
2214
- .ax-general-button.ax-button-rounded {
2215
- border-radius: var(--ax-rounded-border-default);
2216
- }
2217
- .ax-general-button:disabled, .ax-general-button.ax-state-disabled {
2218
- cursor: not-allowed;
2219
- opacity: 0.5;
2220
- }
2221
-
2222
- .ax-clear-button {
2223
- display: inline-flex;
2224
- height: var(--ax-size-default);
2225
- align-items: center;
2226
- justify-content: center;
2227
- margin-left: 0.25rem;
2228
- margin-right: 0.25rem;
2229
- font-size: 1rem;
2230
- line-height: 1.5rem;
2231
- line-height: 1;
2232
- color: rgb(var(--ax-color-text-default), 0.75);
2233
- }
2234
- .ax-clear-button > button {
2235
- display: flex;
2236
- }
2237
- .ax-clear-button:hover:not(.ax-clear-button:hover:disabled, .ax-state-disabled) {
2238
- color: rgb(var(--ax-color-text-default), 0.5);
2239
- }
2240
- .ax-clear-button:focus:not(.ax-clear-button:focus:disabled, .ax-state-disabled, .ax-clear-button:focus-visible:disabled), .ax-clear-button:focus-visible:not(.ax-clear-button:focus:disabled, .ax-state-disabled, .ax-clear-button:focus-visible:disabled) {
2241
- color: rgb(var(--ax-color-text-default));
2242
- }
2243
-
2244
- .ax-input {
2245
- font-size: inherit;
2246
- padding: 0px;
2247
- outline-width: 0px;
2248
- }
2249
- .ax-input:focus {
2250
- outline-color: transparent;
2251
- }
2252
-
2253
- .ax-dark .ax-list-item.ax-state-selected {
2254
- background-color: rgba(var(--ax-color-primary-800)) !important;
2255
- color: rgba(var(--ax-color-primary-fore)) !important;
2256
- }
2257
- .ax-dark .ax-list-item.ax-state-selected .ax-selected-icon {
2258
- color: rgba(var(--ax-color-primary-fore));
2259
- }
2260
-
2261
- .ax-list {
2262
- display: flex;
2263
- height: 100%;
2264
- flex-direction: column;
2265
- overflow: hidden;
2266
- background-color: rgba(var(--ax-color-surface));
2267
- font-size: 0.875rem;
2268
- line-height: 1.25rem;
2269
- }
2270
- @media (min-width: 768px) {
2271
- .ax-list {
2272
- max-height: 20rem;
2273
- }
2274
- }
2275
- .ax-list ax-header,
2276
- .ax-list ax-footer {
2277
- display: flex;
2278
- align-items: center;
2279
- justify-content: space-between;
2280
- border-color: rgba(var(--ax-color-border-default), var(--tw-border-opacity));
2281
- background-color: rgba(var(--ax-color-surface), var(--tw-bg-opacity));
2282
- }
2283
- .ax-list ax-header {
2284
- border-bottom-width: 1px;
2285
- border-color: rgba(var(--ax-color-border-default), var(--tw-border-opacity));
2286
- padding: 1rem;
2287
- font-size: 1rem;
2288
- line-height: 1.5rem;
2289
- font-weight: 500;
2290
- }
2291
- @media (min-width: 768px) {
2292
- .ax-list ax-header {
2293
- font-size: 1.125rem;
2294
- line-height: 1.75rem;
2295
- }
2296
- }
2297
- .ax-list ax-header ax-prefix,
2298
- .ax-list ax-header ax-suffix {
2299
- display: flex;
2300
- flex-direction: column;
2301
- justify-items: start;
2302
- }
2303
- .ax-list ax-header ax-prefix {
2304
- align-items: flex-start;
2305
- }
2306
- .ax-list ax-header ax-suffix {
2307
- align-items: flex-end;
2308
- }
2309
- .ax-list ax-footer {
2310
- border-top-width: 1px;
2311
- }
2312
- .ax-list .ax-content {
2313
- flex: 1 1 0%;
2314
- overflow-y: auto;
2315
- overflow-x: hidden;
2316
- }
2317
- .ax-list .ax-content.ax-list-items-container {
2318
- height: 100%;
2319
- overflow-y: auto;
2320
- padding-top: 0.5rem;
2321
- padding-bottom: 0.5rem;
2322
- }
2323
- .ax-list .ax-content.ax-list-items-container.ax-vertical {
2324
- display: grid;
2325
- grid-template-columns: repeat(1, minmax(0, 1fr));
2326
- }
2327
- .ax-list .ax-content.ax-list-items-container.ax-vertical.ax-divide {
2328
- border-top-width: 1px;
2329
- border-bottom-width: 1px;
2330
- }
2331
- .ax-list .ax-content.ax-list-items-container.ax-default {
2332
- cursor: pointer;
2333
- }
2334
- .ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item-group > span {
2335
- display: flex;
2336
- align-items: center;
2337
- padding: 0.75rem;
2338
- font-weight: 500;
2339
- }
2340
- .ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item-group > ul {
2341
- padding-left: 0.75rem;
2342
- padding-right: 0.75rem;
2343
- }
2344
- .ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item-group .ax-list-item {
2345
- margin-bottom: 0.25rem;
2346
- border-radius: var(--ax-rounded-border-default);
2347
- }
2348
- .ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item {
2349
- position: relative;
2350
- display: flex;
2351
- height: var(--ax-size-default);
2352
- user-select: none;
2353
- align-items: center;
2354
- justify-content: space-between;
2355
- padding-inline-end: 1rem;
2356
- padding-inline-start: 0.75rem;
2357
- font-size: 1rem;
2358
- line-height: 1.5rem;
2359
- }
2360
- .ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item:focus, .ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item:focus-visible {
2361
- outline-width: 2px;
2362
- outline-offset: 2px;
2363
- }
2364
- .ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item.ax-state-checkbox .ax-checkbox-label {
2365
- margin-inline-start: 0.5rem;
2366
- }
2367
- .ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item.ax-state-selected {
2368
- background-color: rgba(var(--ax-color-primary-500), var(--tw-bg-opacity)) !important;
2369
- color: rgba(var(--ax-color-primary-fore), var(--tw-text-opacity)) !important;
2370
- }
2371
- .ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item.ax-state-selected .ax-selected-icon {
2372
- font-size: 1.5rem;
2373
- line-height: 2rem;
2374
- color: rgba(var(--ax-color-primary-500));
2375
- }
2376
- .ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item.ax-state-disabled {
2377
- cursor: not-allowed;
2378
- opacity: 0.5;
2379
- }
2380
- .ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item:focus-visible, .ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item:hover {
2381
- background-color: rgba(var(--ax-color-on-surface));
2382
- }
2383
- .ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item.ax-state-focus {
2384
- background-color: rgba(var(--ax-color-on-surface));
2385
- }
2386
- .ax-list .ax-content.ax-list-items-container .ax-list-loading-container {
2387
- display: flex;
2388
- justify-content: center;
2389
- padding: 0.5rem;
2390
- }
2391
- .ax-list .ax-search-box-container {
2392
- padding: 0.5rem;
2393
- }
2394
- .ax-list .ax-search-box-container.ax-state-hidden {
2395
- display: none;
2396
- }
2397
-
2398
- .ax-radio {
2399
- margin: 0px;
2400
- height: 1rem;
2401
- min-height: 1rem;
2402
- min-width: 1rem;
2403
- width: 1rem;
2404
- cursor: pointer;
2405
- appearance: none;
2406
- border-radius: 9999px;
2407
- border-width: 1px;
2408
- border-color: rgba(var(--ax-color-border-default));
2409
- background-color: rgba(var(--ax-color-input-surface));
2410
- vertical-align: middle;
2411
- outline: 2px solid transparent;
2412
- outline-offset: 2px;
2413
- }
2414
- .ax-radio:checked {
2415
- border-color: rgba(var(--ax-color-primary-500)) !important;
2416
- background-color: rgba(var(--ax-color-primary-500)) !important;
2417
- background-size: contain;
2418
- background-repeat: no-repeat;
2419
- }
2420
- .ax-radio:checked {
2421
- background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
2422
- }
2423
- .ax-radio:focus-visible, .ax-radio:focus {
2424
- box-shadow: 0px 0px 0px 2px rgba(var(--ax-color-surface)), 0px 0px 0px 4px rgba(var(--ax-color-primary-500));
2425
- }
2426
- .ax-radio:disabled {
2427
- cursor: not-allowed;
2428
- opacity: 0.5;
2429
- }
2430
-
2431
- .ax-dark .ax-table thead {
2432
- background-color: rgba(var(--ax-color-on-surface));
2433
- }
2434
-
2435
- .ax-table {
2436
- width: 100%;
2437
- border-collapse: collapse;
2438
- border-spacing: 0;
2439
- overflow: hidden;
2440
- border-radius: var(--ax-rounded-border-default);
2441
- border-width: 1px;
2442
- border-color: rgba(var(--ax-color-border-default));
2443
- font-size: 0.875rem;
2444
- line-height: 1.25rem;
2445
- }
2446
- .ax-table td {
2447
- border-bottom-width: 1px;
2448
- border-color: rgba(var(--ax-color-border-default));
2449
- padding-left: 1rem;
2450
- padding-right: 1rem;
2451
- padding-top: 0.75rem;
2452
- padding-bottom: 0.75rem;
2453
- }
2454
- .ax-table thead {
2455
- border-bottom-width: 1px;
2456
- border-color: rgba(var(--ax-color-border-default));
2457
- background-color: rgba(var(--ax-color-on-surface));
2458
- }
2459
- .ax-table thead th {
2460
- padding-left: 1rem;
2461
- padding-right: 1rem;
2462
- padding-top: 0.875rem;
2463
- padding-bottom: 0.875rem;
2464
- text-align: start;
2465
- font-weight: 500;
2466
- text-transform: uppercase;
2467
- }
2468
- .ax-table.ax-table-alternate tbody tr:nth-child(even) {
2469
- background-color: rgba(var(--ax-color-on-surface));
2470
- }
2471
- .ax-table.ax-table-bordered thead th {
2472
- border-top-width: 0px !important;
2473
- }
2474
- .ax-table.ax-table-bordered tbody tr:last-child td {
2475
- border-bottom-width: 0px !important;
2476
- }
2477
- .ax-table.ax-table-bordered tbody tr td:last-child {
2478
- border-bottom-width: 0px !important;
2479
- }
2480
- .ax-table.ax-table-bordered td,
2481
- .ax-table.ax-table-bordered th {
2482
- border-width: 1px;
2483
- border-color: rgba(var(--ax-color-border-default));
2484
- }
2485
- .ax-table.ax-table-bordered td:first-child,
2486
- .ax-table.ax-table-bordered th:first-child {
2487
- border-inline-start-width: 0px;
2488
- }
2489
- .ax-table.ax-table-bordered td:last-child,
2490
- .ax-table.ax-table-bordered th:last-child {
2491
- border-inline-end-width: 0px;
2492
- }
2493
- @media screen and (max-width: 601px) {
2494
- .ax-table.ax-table-responsive {
2495
- display: block;
2496
- overflow-wrap: break-word;
2497
- border-width: 0px;
2498
- }
2499
- .ax-table.ax-table-responsive thead {
2500
- position: absolute;
2501
- inset-inline-start: -100%;
2502
- top: -100%;
2503
- }
2504
- .ax-table.ax-table-responsive td {
2505
- float: inline-start;
2506
- clear: both;
2507
- box-sizing: border-box;
2508
- display: block;
2509
- width: 100%;
2510
- padding-left: 0.625rem;
2511
- padding-right: 0.625rem;
2512
- padding-top: 0.375rem;
2513
- padding-bottom: 0.375rem;
2514
- }
2515
- .ax-table.ax-table-responsive td:last-child {
2516
- border-width: 0px;
2517
- }
2518
- .ax-table.ax-table-responsive td:before {
2519
- content: attr(data-label);
2520
- display: block;
2521
- font-weight: 700;
2522
- }
2523
- .ax-table.ax-table-responsive tr {
2524
- border-width: 1px;
2525
- border-color: rgba(var(--ax-color-border-default));
2526
- }
2527
- .ax-table.ax-table-responsive tr,
2528
- .ax-table.ax-table-responsive tbody {
2529
- float: inline-start;
2530
- margin-bottom: 0.625rem;
2531
- width: 100%;
2532
- }
2533
- }
2534
-
2535
- [class*=" ax-icon-"],
2536
- [class^=ax-icon-] {
2537
- vertical-align: middle;
2538
- }
2539
-
2540
- .ax-fieldset {
2541
- border-radius: var(--ax-rounded-border-default);
2542
- border-width: 1px;
2543
- border-color: rgba(var(--ax-color-border-default));
2544
- padding: 0.75rem;
2545
- }
2546
- .ax-fieldset legend {
2547
- padding-left: 0.25rem;
2548
- padding-right: 0.25rem;
2549
- font-size: 0.875rem;
2550
- line-height: 1.25rem;
2551
- }
2552
-
2553
- .ax-card {
2554
- border-radius: var(--ax-rounded-border-default);
2555
- border-width: 1px;
2556
- border-color: rgba(var(--ax-color-border-default));
2557
- background-color: rgba(var(--ax-color-surface));
2558
- }
2559
-
2560
- .ax-drop-zone > input {
2561
- position: absolute;
2562
- height: 100%;
2563
- width: 100%;
2564
- cursor: pointer;
2565
- opacity: 0;
2566
- }
2567
-
2568
- .ax-uploader-overlay-state {
2569
- border-radius: inherit;
2570
- pointer-events: none;
2571
- position: absolute;
2572
- inset-inline-start: 0px;
2573
- top: 0px;
2574
- z-index: 10;
2575
- display: flex;
2576
- height: 100%;
2577
- width: 100%;
2578
- cursor: pointer;
2579
- flex-direction: column;
2580
- align-items: center;
2581
- justify-content: center;
2582
- gap: 0.5rem;
2583
- background-color: rgba(var(--ax-color-primary-200), 0.75);
2584
- font-size: 0.875rem;
2585
- line-height: 1.25rem;
2586
- color: rgba(var(--ax-color-primary-fore-tint));
2587
- outline-style: dashed;
2588
- outline-offset: -4px;
2589
- transition-property: all;
2590
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2591
- transition-duration: 150ms;
2592
- }
2593
-
2594
- .ax-dark .ax-uploader-overlay-state {
2595
- background-color: rgba(var(--ax-color-primary-800), 0.75);
2596
- color: rgba(var(--ax-color-primary-fore));
2597
- outline-color: rgba(var(--ax-color-primary-fore));
2598
- }
2599
-
2600
- .ax-xs {
2601
- --ax-size-default: calc(var(--ax-size-base) - 0.75rem);
2602
- }
2603
-
2604
- .ax-sm {
2605
- --ax-size-default: calc(var(--ax-size-base) - 0.5rem);
2606
- }
2607
-
2608
- .ax-md {
2609
- --ax-size-default: var(--ax-size-base);
2610
- }
2611
-
2612
- .ax-lg {
2613
- --ax-size-default: calc(var(--ax-size-base) + 0.5rem);
2614
- }
2615
-
2616
- .ax-xl {
2617
- --ax-size-default: calc(var(--ax-size-base) + 1rem);
2618
- }
2619
-
2620
- .ax-placeholder {
2621
- color: rgba(var(--ax-color-text-default), 0.5);
2622
- font-weight: 500;
2623
- }