@acorex/styles 19.10.0-next.1 → 19.10.0-next.3

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 (50) hide show
  1. package/base/index.scss +15 -0
  2. package/{src/shared → components}/_action-item.scss +3 -3
  3. package/{src/shared → components}/_actionsheet.scss +7 -6
  4. package/{src/shared → components}/_check-box.scss +8 -14
  5. package/{src/shared → components}/_drop-down.scss +7 -16
  6. package/{src/shared → components}/_editor-container.scss +22 -78
  7. package/{src/shared → components}/_general-button.scss +11 -12
  8. package/{src/shared → components}/_list.scss +15 -41
  9. package/{src/shared → components}/_radio.scss +8 -14
  10. package/components/_ripple.scss +13 -0
  11. package/{src/shared → components}/_table.scss +9 -30
  12. package/components/_uploader.scss +44 -0
  13. package/{src/shared → components}/index.scss +2 -3
  14. package/icons/fontawesome/index.scss +10 -11
  15. package/icons/huge/huge-bulk/index.scss +4 -4
  16. package/icons/huge/huge-duotone/index.scss +4 -4
  17. package/icons/huge/huge-solid-sharp/index.scss +4 -4
  18. package/icons/huge/huge-solid-standard/index.scss +4 -4
  19. package/icons/huge/huge-stroke-rounded/index.scss +4 -4
  20. package/icons/huge/huge-stroke-sharp/index.scss +4 -4
  21. package/icons/huge/huge-stroke-standard/index.scss +4 -4
  22. package/icons/huge/huge-twotone/index.scss +4 -4
  23. package/icons/material/index.scss +4 -5
  24. package/index.scss +5 -7
  25. package/mixins/_look.scss +68 -0
  26. package/package.json +1 -1
  27. package/tailwind-base.js +231 -158
  28. package/themes/default.scss +28 -139
  29. package/utils/_theme-generator.scss +241 -0
  30. package/utils/_utils.scss +284 -0
  31. package/utils/index.scss +2 -0
  32. package/variables/_colors.scss +7 -0
  33. package/variables/_looks.scss +1 -0
  34. package/variables/index.scss +2 -0
  35. package/index.css +0 -2843
  36. package/index.min.css +0 -1
  37. package/src/base/index.scss +0 -13
  38. package/src/mixins/_look.scss +0 -83
  39. package/src/shared/_color-look.scss +0 -822
  40. package/src/shared/_inputs.scss +0 -16
  41. package/src/shared/_utils.scss +0 -85
  42. package/src/utility/index.scss +0 -24
  43. package/src/variables/_colors.scss +0 -2
  44. package/src/variables/_degrees.scss +0 -1
  45. package/src/variables/index.scss +0 -2
  46. package/themes/default.css +0 -1
  47. /package/{src/base → base}/_preflight.scss +0 -0
  48. /package/{src/mixins → mixins}/_media.scss +0 -0
  49. /package/{src/mixins → mixins}/_util.scss +0 -0
  50. /package/{src/mixins → mixins}/index.scss +0 -0
package/index.css DELETED
@@ -1,2843 +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-action-list.ax-action-list-horizontal {
371
- display: flex;
372
- flex-direction: row;
373
- }
374
- .ax-action-list.ax-action-list-horizontal ax-divider {
375
- margin-inline: 0.25rem;
376
- width: 1px;
377
- height: auto;
378
- }
379
- .ax-action-list.ax-action-list-vertical {
380
- display: flex;
381
- flex-direction: column;
382
- }
383
- .ax-action-list.ax-action-list-vertical .ax-action-item > div.ax-action-item-prefix ax-prefix {
384
- min-width: 1rem;
385
- }
386
- .ax-action-list.ax-action-list-vertical ax-divider {
387
- margin-block: 0.25rem;
388
- height: 1px;
389
- width: 100%;
390
- }
391
- .ax-action-list ax-title {
392
- display: block;
393
- padding-inline: 0.875rem;
394
- padding-block: 0.25rem;
395
- font-size: 0.75rem;
396
- line-height: 1rem;
397
- font-weight: bolder;
398
- text-transform: uppercase;
399
- opacity: 0.5;
400
- }
401
- .ax-action-list ax-divider {
402
- display: block;
403
- background-color: rgba(var(--ax-color-border-default));
404
- }
405
- .ax-action-list .ax-action-item {
406
- display: flex;
407
- align-items: center;
408
- justify-content: space-between;
409
- font-size: 0.875rem;
410
- line-height: 1.25rem;
411
- height: 2.25rem;
412
- width: 100%;
413
- cursor: pointer;
414
- padding-inline-end: 1rem;
415
- }
416
- .ax-action-list .ax-action-item.ax-state-disabled {
417
- cursor: not-allowed;
418
- opacity: 0.5;
419
- }
420
- .ax-action-list .ax-action-item:hover:not(.ax-action-list .ax-action-item:hover.ax-state-disabled, .ax-action-list .ax-action-item:hover.ax-state-selected) ax-prefix,
421
- .ax-action-list .ax-action-item:hover:not(.ax-action-list .ax-action-item:hover.ax-state-disabled, .ax-action-list .ax-action-item:hover.ax-state-selected) ax-suffix {
422
- opacity: 1;
423
- }
424
- .ax-action-list .ax-action-item > div {
425
- display: flex;
426
- align-items: center;
427
- justify-content: center;
428
- }
429
- .ax-action-list .ax-action-item > div.ax-action-item-prefix {
430
- padding-inline-start: 0.875rem;
431
- }
432
- .ax-action-list .ax-action-item > div.ax-action-item-prefix > ax-text {
433
- padding-inline-start: 0.5rem;
434
- white-space: nowrap;
435
- }
436
- .ax-action-list .ax-action-item > div.ax-action-item-suffix:not(.ax-action-list .ax-action-item > div.ax-action-item-suffix:empty) {
437
- padding-inline-end: 0.875rem;
438
- margin-inline-start: 1rem;
439
- }
440
- .ax-action-list .ax-action-item ax-prefix {
441
- display: flex;
442
- gap: 0.5rem;
443
- }
444
- .ax-action-list .ax-action-item ax-suffix ax-text {
445
- color: rgba(var(--ax-color-text-default));
446
- opacity: 0.5;
447
- font-weight: lighter;
448
- padding-inline: 0.5rem;
449
- }
450
-
451
- .ax-actionsheet-panel {
452
- overflow: hidden;
453
- border-top-left-radius: var(--ax-rounded-border-default);
454
- border-top-right-radius: var(--ax-rounded-border-default);
455
- background-color: rgba(var(--ax-color-surface));
456
- --ax-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
457
- --ax-shadow-colored: 0 10px 15px -3px var(--ax-shadow-color), 0 4px 6px -4px var(--ax-shadow-color);
458
- 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);
459
- animation: 1s both ax-fadeInUp;
460
- animation-duration: 250ms;
461
- }
462
- @keyframes ax-fadeInUp {
463
- from {
464
- transform: translate3d(0, 100%, 0);
465
- opacity: 0;
466
- }
467
- }
468
-
469
- .ax-checkbox {
470
- margin: 0px;
471
- height: 1rem;
472
- min-width: 1rem;
473
- cursor: pointer;
474
- appearance: none;
475
- border-radius: 0.25rem;
476
- border-width: 1px;
477
- border-color: rgba(var(--ax-color-input-border));
478
- background-color: rgba(var(--ax-color-input-surface));
479
- vertical-align: middle;
480
- outline: 2px solid transparent;
481
- outline-offset: 2px;
482
- }
483
- .ax-checkbox:checked, .ax-checkbox:indeterminate {
484
- border-color: rgba(var(--ax-color-primary-500)) !important;
485
- background-color: rgba(var(--ax-color-primary-500)) !important;
486
- background-size: contain;
487
- background-repeat: no-repeat;
488
- }
489
- .ax-checkbox:checked {
490
- 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");
491
- }
492
- .ax-checkbox:indeterminate {
493
- background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9PC9zdHlsZT48L2RlZnM+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzIiB5PSI3IiB3aWR0aD0iMTAiIGhlaWdodD0iMiIvPjwvc3ZnPg==");
494
- }
495
- .ax-checkbox:focus-visible, .ax-checkbox:focus {
496
- box-shadow: 0px 0px 0px 2px rgba(var(--ax-color-surface)), 0px 0px 0px 4px rgba(var(--ax-color-primary-500));
497
- }
498
- .ax-checkbox:disabled {
499
- cursor: not-allowed;
500
- opacity: 0.5;
501
- }
502
-
503
- .ax-el-primary-solid {
504
- background-color: rgba(var(--ax-color-primary-500));
505
- color: rgba(var(--ax-color-primary-fore));
506
- border-color: rgba(var(--ax-color-primary-500));
507
- }
508
- .ax-el-primary-solid.ax-el-interactive:hover:not(.ax-state-disabled) {
509
- background-color: rgba(var(--ax-color-primary-600));
510
- }
511
- .ax-el-primary-solid.ax-state-selected {
512
- background-color: rgba(var(--ax-color-primary-700));
513
- }
514
- .ax-el-primary-solid .ax-ripple {
515
- background-color: rgba(var(--ax-color-primary-300), 0.3) !important;
516
- }
517
- .ax-el-primary-solid ax-loading-spinner .ax-loader {
518
- border-color: rgba(var(--ax-color-primary-fore));
519
- border-bottom-color: transparent;
520
- }
521
- .ax-el-primary-solid:is(.ax-el-primary-solid:focus-visible, .ax-el-primary-solid.ax-state-focus) {
522
- outline-color: rgba(var(--ax-color-primary-500));
523
- }
524
- .ax-el-primary-solid > button:is(.ax-el-primary-solid > button:focus-visible, .ax-el-primary-solid > button.ax-state-focus) {
525
- outline-color: rgba(var(--ax-color-primary-500));
526
- }
527
- .ax-el-primary-solid.ax-dropdown-button-marker {
528
- border-inline-start-color: rgba(var(--ax-color-primary-600));
529
- }
530
-
531
- .ax-el-primary-twotone {
532
- background-color: rgba(var(--ax-color-primary-100));
533
- color: rgba(var(--ax-color-primary-fore-tint));
534
- border-color: rgba(var(--ax-color-primary-100));
535
- }
536
- .ax-el-primary-twotone.ax-el-interactive:hover:not(.ax-state-disabled) {
537
- background-color: rgba(var(--ax-color-primary-200));
538
- }
539
- .ax-el-primary-twotone.ax-state-selected {
540
- background-color: rgba(var(--ax-color-primary-300));
541
- }
542
- .ax-el-primary-twotone .ax-ripple {
543
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
544
- }
545
- .ax-el-primary-twotone ax-loading-spinner .ax-loader {
546
- border-color: rgba(var(--ax-color-primary-fore-tint));
547
- border-bottom-color: transparent;
548
- }
549
- .ax-el-primary-twotone:is(.ax-el-primary-twotone:focus-visible, .ax-el-primary-twotone.ax-state-focus) {
550
- outline-color: rgba(var(--ax-color-primary-500));
551
- }
552
- .ax-el-primary-twotone > button:is(.ax-el-primary-twotone > button:focus-visible, .ax-el-primary-twotone > button.ax-state-focus) {
553
- outline-color: rgba(var(--ax-color-primary-500));
554
- }
555
- .ax-el-primary-twotone.ax-dropdown-button-marker {
556
- border-inline-start-color: rgba(var(--ax-color-primary-50));
557
- }
558
-
559
- .ax-el-primary-outline {
560
- background-color: transparent;
561
- color: rgba(var(--ax-color-primary-500));
562
- border-color: rgba(var(--ax-color-primary-500));
563
- border-width: 1px;
564
- }
565
- .ax-el-primary-outline.ax-el-interactive:hover:not(.ax-state-disabled) {
566
- color: rgba(var(--ax-color-primary-700));
567
- border-color: rgba(var(--ax-color-primary-700));
568
- }
569
- .ax-el-primary-outline.ax-state-selected {
570
- border-color: rgba(var(--ax-color-primary-500));
571
- color: rgba(var(--ax-color-primary-fore));
572
- background-color: rgba(var(--ax-color-primary-500));
573
- }
574
- .ax-el-primary-outline .ax-ripple {
575
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
576
- }
577
- .ax-el-primary-outline ax-loading-spinner .ax-loader {
578
- border-color: rgba(var(--ax-color-primary-500));
579
- border-bottom-color: transparent;
580
- }
581
- .ax-el-primary-outline:is(.ax-el-primary-outline:focus-visible, .ax-el-primary-outline.ax-state-focus) {
582
- outline-offset: -2px;
583
- outline-color: rgba(var(--ax-color-primary-500));
584
- color: rgba(var(--ax-color-primary-fore-tint));
585
- }
586
- .ax-el-primary-outline > button:is(.ax-el-primary-outline > button:focus-visible, .ax-el-primary-outline > button.ax-state-focus) {
587
- outline-offset: -2px;
588
- outline-color: rgba(var(--ax-color-primary-500));
589
- color: rgba(var(--ax-color-primary-fore-tint));
590
- }
591
- .ax-el-primary-outline.ax-dropdown-button-marker {
592
- border-inline-start-color: rgba(var(--ax-color-primary-500));
593
- }
594
-
595
- .ax-el-primary-blank {
596
- color: rgba(var(--ax-color-primary-500));
597
- }
598
- .ax-el-primary-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
599
- background-color: rgba(var(--ax-color-primary-100));
600
- color: rgba(var(--ax-color-primary-fore-tint));
601
- }
602
- .ax-el-primary-blank.ax-state-selected {
603
- background-color: rgba(var(--ax-color-primary-700));
604
- color: rgba(var(--ax-color-primary-fore));
605
- }
606
- .ax-el-primary-blank .ax-ripple {
607
- background-color: rgba(var(--ax-color-primary-500), 0.3);
608
- }
609
- .ax-el-primary-blank ax-loading-spinner .ax-loader {
610
- border-color: rgba(var(--ax-color-primary-500));
611
- border-bottom-color: transparent;
612
- }
613
- .ax-el-primary-blank:is(.ax-el-primary-blank:focus-visible, .ax-el-primary-blank.ax-state-focus) {
614
- outline-color: rgba(var(--ax-color-primary-300));
615
- outline-offset: 0;
616
- }
617
- .ax-el-primary-blank > button:is(.ax-el-primary-blank > button:focus-visible, .ax-el-primary-blank > button.ax-state-focus) {
618
- outline-color: rgba(var(--ax-color-primary-300));
619
- outline-offset: 0;
620
- }
621
- .ax-el-primary-blank.ax-dropdown-button-marker {
622
- border-inline-start-color: transparent;
623
- }
624
-
625
- .ax-el-primary-link {
626
- color: rgba(var(--ax-color-primary-500));
627
- }
628
- .ax-el-primary-link.ax-el-interactive:hover:not(.ax-state-disabled) {
629
- color: rgba(var(--ax-color-primary-700));
630
- }
631
- .ax-el-primary-link.ax-state-selected {
632
- background-color: rgba(var(--ax-color-primary-700));
633
- color: rgba(var(--ax-color-primary-fore));
634
- }
635
- .ax-el-primary-link .ax-ripple {
636
- background-color: rgba(var(--ax-color-primary-500), 0.3);
637
- }
638
- .ax-el-primary-link ax-loading-spinner .ax-loader {
639
- border-color: rgba(var(--ax-color-primary-500));
640
- border-bottom-color: transparent;
641
- }
642
- .ax-el-primary-link:is(.ax-el-primary-link:focus-visible, .ax-el-primary-link.ax-state-focus) {
643
- outline-color: rgba(var(--ax-color-primary-300));
644
- outline-offset: 0;
645
- }
646
- .ax-el-primary-link > button:is(.ax-el-primary-link > button:focus-visible, .ax-el-primary-link > button.ax-state-focus) {
647
- outline-color: rgba(var(--ax-color-primary-300));
648
- outline-offset: 0;
649
- }
650
- .ax-el-primary-link.ax-dropdown-button-marker {
651
- border-inline-start-color: transparent;
652
- }
653
-
654
- .ax-el-success-solid {
655
- background-color: rgba(var(--ax-color-success-500));
656
- color: rgba(var(--ax-color-success-fore));
657
- border-color: rgba(var(--ax-color-success-500));
658
- }
659
- .ax-el-success-solid.ax-el-interactive:hover:not(.ax-state-disabled) {
660
- background-color: rgba(var(--ax-color-success-600));
661
- }
662
- .ax-el-success-solid.ax-state-selected {
663
- background-color: rgba(var(--ax-color-success-700));
664
- }
665
- .ax-el-success-solid .ax-ripple {
666
- background-color: rgba(var(--ax-color-success-300), 0.3) !important;
667
- }
668
- .ax-el-success-solid ax-loading-spinner .ax-loader {
669
- border-color: rgba(var(--ax-color-success-fore));
670
- border-bottom-color: transparent;
671
- }
672
- .ax-el-success-solid:is(.ax-el-success-solid:focus-visible, .ax-el-success-solid.ax-state-focus) {
673
- outline-color: rgba(var(--ax-color-success-500));
674
- }
675
- .ax-el-success-solid > button:is(.ax-el-success-solid > button:focus-visible, .ax-el-success-solid > button.ax-state-focus) {
676
- outline-color: rgba(var(--ax-color-success-500));
677
- }
678
- .ax-el-success-solid.ax-dropdown-button-marker {
679
- border-inline-start-color: rgba(var(--ax-color-success-600));
680
- }
681
-
682
- .ax-el-success-twotone {
683
- background-color: rgba(var(--ax-color-success-100));
684
- color: rgba(var(--ax-color-success-fore-tint));
685
- border-color: rgba(var(--ax-color-success-100));
686
- }
687
- .ax-el-success-twotone.ax-el-interactive:hover:not(.ax-state-disabled) {
688
- background-color: rgba(var(--ax-color-success-200));
689
- }
690
- .ax-el-success-twotone.ax-state-selected {
691
- background-color: rgba(var(--ax-color-success-300));
692
- }
693
- .ax-el-success-twotone .ax-ripple {
694
- background-color: rgba(var(--ax-color-success-500), 0.3) !important;
695
- }
696
- .ax-el-success-twotone ax-loading-spinner .ax-loader {
697
- border-color: rgba(var(--ax-color-success-fore-tint));
698
- border-bottom-color: transparent;
699
- }
700
- .ax-el-success-twotone:is(.ax-el-success-twotone:focus-visible, .ax-el-success-twotone.ax-state-focus) {
701
- outline-color: rgba(var(--ax-color-success-500));
702
- }
703
- .ax-el-success-twotone > button:is(.ax-el-success-twotone > button:focus-visible, .ax-el-success-twotone > button.ax-state-focus) {
704
- outline-color: rgba(var(--ax-color-success-500));
705
- }
706
- .ax-el-success-twotone.ax-dropdown-button-marker {
707
- border-inline-start-color: rgba(var(--ax-color-success-50));
708
- }
709
-
710
- .ax-el-success-outline {
711
- background-color: transparent;
712
- color: rgba(var(--ax-color-success-500));
713
- border-color: rgba(var(--ax-color-success-500));
714
- border-width: 1px;
715
- }
716
- .ax-el-success-outline.ax-el-interactive:hover:not(.ax-state-disabled) {
717
- color: rgba(var(--ax-color-success-700));
718
- border-color: rgba(var(--ax-color-success-700));
719
- }
720
- .ax-el-success-outline.ax-state-selected {
721
- border-color: rgba(var(--ax-color-success-500));
722
- color: rgba(var(--ax-color-success-fore));
723
- background-color: rgba(var(--ax-color-success-500));
724
- }
725
- .ax-el-success-outline .ax-ripple {
726
- background-color: rgba(var(--ax-color-success-500), 0.3) !important;
727
- }
728
- .ax-el-success-outline ax-loading-spinner .ax-loader {
729
- border-color: rgba(var(--ax-color-success-500));
730
- border-bottom-color: transparent;
731
- }
732
- .ax-el-success-outline:is(.ax-el-success-outline:focus-visible, .ax-el-success-outline.ax-state-focus) {
733
- outline-offset: -2px;
734
- outline-color: rgba(var(--ax-color-success-500));
735
- color: rgba(var(--ax-color-success-fore-tint));
736
- }
737
- .ax-el-success-outline > button:is(.ax-el-success-outline > button:focus-visible, .ax-el-success-outline > button.ax-state-focus) {
738
- outline-offset: -2px;
739
- outline-color: rgba(var(--ax-color-success-500));
740
- color: rgba(var(--ax-color-success-fore-tint));
741
- }
742
- .ax-el-success-outline.ax-dropdown-button-marker {
743
- border-inline-start-color: rgba(var(--ax-color-success-500));
744
- }
745
-
746
- .ax-el-success-blank {
747
- color: rgba(var(--ax-color-success-500));
748
- }
749
- .ax-el-success-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
750
- background-color: rgba(var(--ax-color-success-100));
751
- color: rgba(var(--ax-color-success-fore-tint));
752
- }
753
- .ax-el-success-blank.ax-state-selected {
754
- background-color: rgba(var(--ax-color-success-700));
755
- color: rgba(var(--ax-color-success-fore));
756
- }
757
- .ax-el-success-blank .ax-ripple {
758
- background-color: rgba(var(--ax-color-success-500), 0.3);
759
- }
760
- .ax-el-success-blank ax-loading-spinner .ax-loader {
761
- border-color: rgba(var(--ax-color-success-500));
762
- border-bottom-color: transparent;
763
- }
764
- .ax-el-success-blank:is(.ax-el-success-blank:focus-visible, .ax-el-success-blank.ax-state-focus) {
765
- outline-color: rgba(var(--ax-color-success-300));
766
- outline-offset: 0;
767
- }
768
- .ax-el-success-blank > button:is(.ax-el-success-blank > button:focus-visible, .ax-el-success-blank > button.ax-state-focus) {
769
- outline-color: rgba(var(--ax-color-success-300));
770
- outline-offset: 0;
771
- }
772
- .ax-el-success-blank.ax-dropdown-button-marker {
773
- border-inline-start-color: transparent;
774
- }
775
-
776
- .ax-el-success-link {
777
- color: rgba(var(--ax-color-success-500));
778
- }
779
- .ax-el-success-link.ax-el-interactive:hover:not(.ax-state-disabled) {
780
- color: rgba(var(--ax-color-success-700));
781
- }
782
- .ax-el-success-link.ax-state-selected {
783
- background-color: rgba(var(--ax-color-success-700));
784
- color: rgba(var(--ax-color-success-fore));
785
- }
786
- .ax-el-success-link .ax-ripple {
787
- background-color: rgba(var(--ax-color-success-500), 0.3);
788
- }
789
- .ax-el-success-link ax-loading-spinner .ax-loader {
790
- border-color: rgba(var(--ax-color-success-500));
791
- border-bottom-color: transparent;
792
- }
793
- .ax-el-success-link:is(.ax-el-success-link:focus-visible, .ax-el-success-link.ax-state-focus) {
794
- outline-color: rgba(var(--ax-color-success-300));
795
- outline-offset: 0;
796
- }
797
- .ax-el-success-link > button:is(.ax-el-success-link > button:focus-visible, .ax-el-success-link > button.ax-state-focus) {
798
- outline-color: rgba(var(--ax-color-success-300));
799
- outline-offset: 0;
800
- }
801
- .ax-el-success-link.ax-dropdown-button-marker {
802
- border-inline-start-color: transparent;
803
- }
804
-
805
- .ax-el-warning-solid {
806
- background-color: rgba(var(--ax-color-warning-500));
807
- color: rgba(var(--ax-color-warning-fore));
808
- border-color: rgba(var(--ax-color-warning-500));
809
- }
810
- .ax-el-warning-solid.ax-el-interactive:hover:not(.ax-state-disabled) {
811
- background-color: rgba(var(--ax-color-warning-600));
812
- }
813
- .ax-el-warning-solid.ax-state-selected {
814
- background-color: rgba(var(--ax-color-warning-700));
815
- }
816
- .ax-el-warning-solid .ax-ripple {
817
- background-color: rgba(var(--ax-color-warning-300), 0.3) !important;
818
- }
819
- .ax-el-warning-solid ax-loading-spinner .ax-loader {
820
- border-color: rgba(var(--ax-color-warning-fore));
821
- border-bottom-color: transparent;
822
- }
823
- .ax-el-warning-solid:is(.ax-el-warning-solid:focus-visible, .ax-el-warning-solid.ax-state-focus) {
824
- outline-color: rgba(var(--ax-color-warning-500));
825
- }
826
- .ax-el-warning-solid > button:is(.ax-el-warning-solid > button:focus-visible, .ax-el-warning-solid > button.ax-state-focus) {
827
- outline-color: rgba(var(--ax-color-warning-500));
828
- }
829
- .ax-el-warning-solid.ax-dropdown-button-marker {
830
- border-inline-start-color: rgba(var(--ax-color-warning-600));
831
- }
832
-
833
- .ax-el-warning-twotone {
834
- background-color: rgba(var(--ax-color-warning-100));
835
- color: rgba(var(--ax-color-warning-fore-tint));
836
- border-color: rgba(var(--ax-color-warning-100));
837
- }
838
- .ax-el-warning-twotone.ax-el-interactive:hover:not(.ax-state-disabled) {
839
- background-color: rgba(var(--ax-color-warning-200));
840
- }
841
- .ax-el-warning-twotone.ax-state-selected {
842
- background-color: rgba(var(--ax-color-warning-300));
843
- }
844
- .ax-el-warning-twotone .ax-ripple {
845
- background-color: rgba(var(--ax-color-warning-500), 0.3) !important;
846
- }
847
- .ax-el-warning-twotone ax-loading-spinner .ax-loader {
848
- border-color: rgba(var(--ax-color-warning-fore-tint));
849
- border-bottom-color: transparent;
850
- }
851
- .ax-el-warning-twotone:is(.ax-el-warning-twotone:focus-visible, .ax-el-warning-twotone.ax-state-focus) {
852
- outline-color: rgba(var(--ax-color-warning-500));
853
- }
854
- .ax-el-warning-twotone > button:is(.ax-el-warning-twotone > button:focus-visible, .ax-el-warning-twotone > button.ax-state-focus) {
855
- outline-color: rgba(var(--ax-color-warning-500));
856
- }
857
- .ax-el-warning-twotone.ax-dropdown-button-marker {
858
- border-inline-start-color: rgba(var(--ax-color-warning-50));
859
- }
860
-
861
- .ax-el-warning-outline {
862
- background-color: transparent;
863
- color: rgba(var(--ax-color-warning-500));
864
- border-color: rgba(var(--ax-color-warning-500));
865
- border-width: 1px;
866
- }
867
- .ax-el-warning-outline.ax-el-interactive:hover:not(.ax-state-disabled) {
868
- color: rgba(var(--ax-color-warning-700));
869
- border-color: rgba(var(--ax-color-warning-700));
870
- }
871
- .ax-el-warning-outline.ax-state-selected {
872
- border-color: rgba(var(--ax-color-warning-500));
873
- color: rgba(var(--ax-color-warning-fore));
874
- background-color: rgba(var(--ax-color-warning-500));
875
- }
876
- .ax-el-warning-outline .ax-ripple {
877
- background-color: rgba(var(--ax-color-warning-500), 0.3) !important;
878
- }
879
- .ax-el-warning-outline ax-loading-spinner .ax-loader {
880
- border-color: rgba(var(--ax-color-warning-500));
881
- border-bottom-color: transparent;
882
- }
883
- .ax-el-warning-outline:is(.ax-el-warning-outline:focus-visible, .ax-el-warning-outline.ax-state-focus) {
884
- outline-offset: -2px;
885
- outline-color: rgba(var(--ax-color-warning-500));
886
- color: rgba(var(--ax-color-warning-fore-tint));
887
- }
888
- .ax-el-warning-outline > button:is(.ax-el-warning-outline > button:focus-visible, .ax-el-warning-outline > button.ax-state-focus) {
889
- outline-offset: -2px;
890
- outline-color: rgba(var(--ax-color-warning-500));
891
- color: rgba(var(--ax-color-warning-fore-tint));
892
- }
893
- .ax-el-warning-outline.ax-dropdown-button-marker {
894
- border-inline-start-color: rgba(var(--ax-color-warning-500));
895
- }
896
-
897
- .ax-el-warning-blank {
898
- color: rgba(var(--ax-color-warning-500));
899
- }
900
- .ax-el-warning-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
901
- background-color: rgba(var(--ax-color-warning-100));
902
- color: rgba(var(--ax-color-warning-fore-tint));
903
- }
904
- .ax-el-warning-blank.ax-state-selected {
905
- background-color: rgba(var(--ax-color-warning-700));
906
- color: rgba(var(--ax-color-warning-fore));
907
- }
908
- .ax-el-warning-blank .ax-ripple {
909
- background-color: rgba(var(--ax-color-warning-500), 0.3);
910
- }
911
- .ax-el-warning-blank ax-loading-spinner .ax-loader {
912
- border-color: rgba(var(--ax-color-warning-500));
913
- border-bottom-color: transparent;
914
- }
915
- .ax-el-warning-blank:is(.ax-el-warning-blank:focus-visible, .ax-el-warning-blank.ax-state-focus) {
916
- outline-color: rgba(var(--ax-color-warning-300));
917
- outline-offset: 0;
918
- }
919
- .ax-el-warning-blank > button:is(.ax-el-warning-blank > button:focus-visible, .ax-el-warning-blank > button.ax-state-focus) {
920
- outline-color: rgba(var(--ax-color-warning-300));
921
- outline-offset: 0;
922
- }
923
- .ax-el-warning-blank.ax-dropdown-button-marker {
924
- border-inline-start-color: transparent;
925
- }
926
-
927
- .ax-el-warning-link {
928
- color: rgba(var(--ax-color-warning-500));
929
- }
930
- .ax-el-warning-link.ax-el-interactive:hover:not(.ax-state-disabled) {
931
- color: rgba(var(--ax-color-warning-700));
932
- }
933
- .ax-el-warning-link.ax-state-selected {
934
- background-color: rgba(var(--ax-color-warning-700));
935
- color: rgba(var(--ax-color-warning-fore));
936
- }
937
- .ax-el-warning-link .ax-ripple {
938
- background-color: rgba(var(--ax-color-warning-500), 0.3);
939
- }
940
- .ax-el-warning-link ax-loading-spinner .ax-loader {
941
- border-color: rgba(var(--ax-color-warning-500));
942
- border-bottom-color: transparent;
943
- }
944
- .ax-el-warning-link:is(.ax-el-warning-link:focus-visible, .ax-el-warning-link.ax-state-focus) {
945
- outline-color: rgba(var(--ax-color-warning-300));
946
- outline-offset: 0;
947
- }
948
- .ax-el-warning-link > button:is(.ax-el-warning-link > button:focus-visible, .ax-el-warning-link > button.ax-state-focus) {
949
- outline-color: rgba(var(--ax-color-warning-300));
950
- outline-offset: 0;
951
- }
952
- .ax-el-warning-link.ax-dropdown-button-marker {
953
- border-inline-start-color: transparent;
954
- }
955
-
956
- .ax-el-danger-solid {
957
- background-color: rgba(var(--ax-color-danger-500));
958
- color: rgba(var(--ax-color-danger-fore));
959
- border-color: rgba(var(--ax-color-danger-500));
960
- }
961
- .ax-el-danger-solid.ax-el-interactive:hover:not(.ax-state-disabled) {
962
- background-color: rgba(var(--ax-color-danger-600));
963
- }
964
- .ax-el-danger-solid.ax-state-selected {
965
- background-color: rgba(var(--ax-color-danger-700));
966
- }
967
- .ax-el-danger-solid .ax-ripple {
968
- background-color: rgba(var(--ax-color-danger-300), 0.3) !important;
969
- }
970
- .ax-el-danger-solid ax-loading-spinner .ax-loader {
971
- border-color: rgba(var(--ax-color-danger-fore));
972
- border-bottom-color: transparent;
973
- }
974
- .ax-el-danger-solid:is(.ax-el-danger-solid:focus-visible, .ax-el-danger-solid.ax-state-focus) {
975
- outline-color: rgba(var(--ax-color-danger-500));
976
- }
977
- .ax-el-danger-solid > button:is(.ax-el-danger-solid > button:focus-visible, .ax-el-danger-solid > button.ax-state-focus) {
978
- outline-color: rgba(var(--ax-color-danger-500));
979
- }
980
- .ax-el-danger-solid.ax-dropdown-button-marker {
981
- border-inline-start-color: rgba(var(--ax-color-danger-600));
982
- }
983
-
984
- .ax-el-danger-twotone {
985
- background-color: rgba(var(--ax-color-danger-100));
986
- color: rgba(var(--ax-color-danger-fore-tint));
987
- border-color: rgba(var(--ax-color-danger-100));
988
- }
989
- .ax-el-danger-twotone.ax-el-interactive:hover:not(.ax-state-disabled) {
990
- background-color: rgba(var(--ax-color-danger-200));
991
- }
992
- .ax-el-danger-twotone.ax-state-selected {
993
- background-color: rgba(var(--ax-color-danger-300));
994
- }
995
- .ax-el-danger-twotone .ax-ripple {
996
- background-color: rgba(var(--ax-color-danger-500), 0.3) !important;
997
- }
998
- .ax-el-danger-twotone ax-loading-spinner .ax-loader {
999
- border-color: rgba(var(--ax-color-danger-fore-tint));
1000
- border-bottom-color: transparent;
1001
- }
1002
- .ax-el-danger-twotone:is(.ax-el-danger-twotone:focus-visible, .ax-el-danger-twotone.ax-state-focus) {
1003
- outline-color: rgba(var(--ax-color-danger-500));
1004
- }
1005
- .ax-el-danger-twotone > button:is(.ax-el-danger-twotone > button:focus-visible, .ax-el-danger-twotone > button.ax-state-focus) {
1006
- outline-color: rgba(var(--ax-color-danger-500));
1007
- }
1008
- .ax-el-danger-twotone.ax-dropdown-button-marker {
1009
- border-inline-start-color: rgba(var(--ax-color-danger-50));
1010
- }
1011
-
1012
- .ax-el-danger-outline {
1013
- background-color: transparent;
1014
- color: rgba(var(--ax-color-danger-500));
1015
- border-color: rgba(var(--ax-color-danger-500));
1016
- border-width: 1px;
1017
- }
1018
- .ax-el-danger-outline.ax-el-interactive:hover:not(.ax-state-disabled) {
1019
- color: rgba(var(--ax-color-danger-700));
1020
- border-color: rgba(var(--ax-color-danger-700));
1021
- }
1022
- .ax-el-danger-outline.ax-state-selected {
1023
- border-color: rgba(var(--ax-color-danger-500));
1024
- color: rgba(var(--ax-color-danger-fore));
1025
- background-color: rgba(var(--ax-color-danger-500));
1026
- }
1027
- .ax-el-danger-outline .ax-ripple {
1028
- background-color: rgba(var(--ax-color-danger-500), 0.3) !important;
1029
- }
1030
- .ax-el-danger-outline ax-loading-spinner .ax-loader {
1031
- border-color: rgba(var(--ax-color-danger-500));
1032
- border-bottom-color: transparent;
1033
- }
1034
- .ax-el-danger-outline:is(.ax-el-danger-outline:focus-visible, .ax-el-danger-outline.ax-state-focus) {
1035
- outline-offset: -2px;
1036
- outline-color: rgba(var(--ax-color-danger-500));
1037
- color: rgba(var(--ax-color-danger-fore-tint));
1038
- }
1039
- .ax-el-danger-outline > button:is(.ax-el-danger-outline > button:focus-visible, .ax-el-danger-outline > button.ax-state-focus) {
1040
- outline-offset: -2px;
1041
- outline-color: rgba(var(--ax-color-danger-500));
1042
- color: rgba(var(--ax-color-danger-fore-tint));
1043
- }
1044
- .ax-el-danger-outline.ax-dropdown-button-marker {
1045
- border-inline-start-color: rgba(var(--ax-color-danger-500));
1046
- }
1047
-
1048
- .ax-el-danger-blank {
1049
- color: rgba(var(--ax-color-danger-500));
1050
- }
1051
- .ax-el-danger-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
1052
- background-color: rgba(var(--ax-color-danger-100));
1053
- color: rgba(var(--ax-color-danger-fore-tint));
1054
- }
1055
- .ax-el-danger-blank.ax-state-selected {
1056
- background-color: rgba(var(--ax-color-danger-700));
1057
- color: rgba(var(--ax-color-danger-fore));
1058
- }
1059
- .ax-el-danger-blank .ax-ripple {
1060
- background-color: rgba(var(--ax-color-danger-500), 0.3);
1061
- }
1062
- .ax-el-danger-blank ax-loading-spinner .ax-loader {
1063
- border-color: rgba(var(--ax-color-danger-500));
1064
- border-bottom-color: transparent;
1065
- }
1066
- .ax-el-danger-blank:is(.ax-el-danger-blank:focus-visible, .ax-el-danger-blank.ax-state-focus) {
1067
- outline-color: rgba(var(--ax-color-danger-300));
1068
- outline-offset: 0;
1069
- }
1070
- .ax-el-danger-blank > button:is(.ax-el-danger-blank > button:focus-visible, .ax-el-danger-blank > button.ax-state-focus) {
1071
- outline-color: rgba(var(--ax-color-danger-300));
1072
- outline-offset: 0;
1073
- }
1074
- .ax-el-danger-blank.ax-dropdown-button-marker {
1075
- border-inline-start-color: transparent;
1076
- }
1077
-
1078
- .ax-el-danger-link {
1079
- color: rgba(var(--ax-color-danger-500));
1080
- }
1081
- .ax-el-danger-link.ax-el-interactive:hover:not(.ax-state-disabled) {
1082
- color: rgba(var(--ax-color-danger-700));
1083
- }
1084
- .ax-el-danger-link.ax-state-selected {
1085
- background-color: rgba(var(--ax-color-danger-700));
1086
- color: rgba(var(--ax-color-danger-fore));
1087
- }
1088
- .ax-el-danger-link .ax-ripple {
1089
- background-color: rgba(var(--ax-color-danger-500), 0.3);
1090
- }
1091
- .ax-el-danger-link ax-loading-spinner .ax-loader {
1092
- border-color: rgba(var(--ax-color-danger-500));
1093
- border-bottom-color: transparent;
1094
- }
1095
- .ax-el-danger-link:is(.ax-el-danger-link:focus-visible, .ax-el-danger-link.ax-state-focus) {
1096
- outline-color: rgba(var(--ax-color-danger-300));
1097
- outline-offset: 0;
1098
- }
1099
- .ax-el-danger-link > button:is(.ax-el-danger-link > button:focus-visible, .ax-el-danger-link > button.ax-state-focus) {
1100
- outline-color: rgba(var(--ax-color-danger-300));
1101
- outline-offset: 0;
1102
- }
1103
- .ax-el-danger-link.ax-dropdown-button-marker {
1104
- border-inline-start-color: transparent;
1105
- }
1106
-
1107
- .ax-el-neutral-solid {
1108
- background-color: rgba(var(--ax-color-neutral-500));
1109
- color: rgba(var(--ax-color-neutral-fore));
1110
- border-color: rgba(var(--ax-color-neutral-500));
1111
- }
1112
- .ax-el-neutral-solid.ax-el-interactive:hover:not(.ax-state-disabled) {
1113
- background-color: rgba(var(--ax-color-neutral-600));
1114
- }
1115
- .ax-el-neutral-solid.ax-state-selected {
1116
- background-color: rgba(var(--ax-color-neutral-700));
1117
- }
1118
- .ax-el-neutral-solid .ax-ripple {
1119
- background-color: rgba(var(--ax-color-neutral-300), 0.3) !important;
1120
- }
1121
- .ax-el-neutral-solid ax-loading-spinner .ax-loader {
1122
- border-color: rgba(var(--ax-color-neutral-fore));
1123
- border-bottom-color: transparent;
1124
- }
1125
- .ax-el-neutral-solid:is(.ax-el-neutral-solid:focus-visible, .ax-el-neutral-solid.ax-state-focus) {
1126
- outline-color: rgba(var(--ax-color-neutral-500));
1127
- }
1128
- .ax-el-neutral-solid > button:is(.ax-el-neutral-solid > button:focus-visible, .ax-el-neutral-solid > button.ax-state-focus) {
1129
- outline-color: rgba(var(--ax-color-neutral-500));
1130
- }
1131
- .ax-el-neutral-solid.ax-dropdown-button-marker {
1132
- border-inline-start-color: rgba(var(--ax-color-neutral-600));
1133
- }
1134
-
1135
- .ax-el-neutral-twotone {
1136
- background-color: rgba(var(--ax-color-neutral-100));
1137
- color: rgba(var(--ax-color-neutral-fore-tint));
1138
- border-color: rgba(var(--ax-color-neutral-100));
1139
- }
1140
- .ax-el-neutral-twotone.ax-el-interactive:hover:not(.ax-state-disabled) {
1141
- background-color: rgba(var(--ax-color-neutral-200));
1142
- }
1143
- .ax-el-neutral-twotone.ax-state-selected {
1144
- background-color: rgba(var(--ax-color-neutral-300));
1145
- }
1146
- .ax-el-neutral-twotone .ax-ripple {
1147
- background-color: rgba(var(--ax-color-neutral-500), 0.3) !important;
1148
- }
1149
- .ax-el-neutral-twotone ax-loading-spinner .ax-loader {
1150
- border-color: rgba(var(--ax-color-neutral-fore-tint));
1151
- border-bottom-color: transparent;
1152
- }
1153
- .ax-el-neutral-twotone:is(.ax-el-neutral-twotone:focus-visible, .ax-el-neutral-twotone.ax-state-focus) {
1154
- outline-color: rgba(var(--ax-color-neutral-500));
1155
- }
1156
- .ax-el-neutral-twotone > button:is(.ax-el-neutral-twotone > button:focus-visible, .ax-el-neutral-twotone > button.ax-state-focus) {
1157
- outline-color: rgba(var(--ax-color-neutral-500));
1158
- }
1159
- .ax-el-neutral-twotone.ax-dropdown-button-marker {
1160
- border-inline-start-color: rgba(var(--ax-color-neutral-50));
1161
- }
1162
-
1163
- .ax-el-neutral-outline {
1164
- background-color: transparent;
1165
- color: rgba(var(--ax-color-neutral-500));
1166
- border-color: rgba(var(--ax-color-neutral-500));
1167
- border-width: 1px;
1168
- }
1169
- .ax-el-neutral-outline.ax-el-interactive:hover:not(.ax-state-disabled) {
1170
- color: rgba(var(--ax-color-neutral-700));
1171
- border-color: rgba(var(--ax-color-neutral-700));
1172
- }
1173
- .ax-el-neutral-outline.ax-state-selected {
1174
- border-color: rgba(var(--ax-color-neutral-500));
1175
- color: rgba(var(--ax-color-neutral-fore));
1176
- background-color: rgba(var(--ax-color-neutral-500));
1177
- }
1178
- .ax-el-neutral-outline .ax-ripple {
1179
- background-color: rgba(var(--ax-color-neutral-500), 0.3) !important;
1180
- }
1181
- .ax-el-neutral-outline ax-loading-spinner .ax-loader {
1182
- border-color: rgba(var(--ax-color-neutral-500));
1183
- border-bottom-color: transparent;
1184
- }
1185
- .ax-el-neutral-outline:is(.ax-el-neutral-outline:focus-visible, .ax-el-neutral-outline.ax-state-focus) {
1186
- outline-offset: -2px;
1187
- outline-color: rgba(var(--ax-color-neutral-500));
1188
- color: rgba(var(--ax-color-neutral-fore-tint));
1189
- }
1190
- .ax-el-neutral-outline > button:is(.ax-el-neutral-outline > button:focus-visible, .ax-el-neutral-outline > button.ax-state-focus) {
1191
- outline-offset: -2px;
1192
- outline-color: rgba(var(--ax-color-neutral-500));
1193
- color: rgba(var(--ax-color-neutral-fore-tint));
1194
- }
1195
- .ax-el-neutral-outline.ax-dropdown-button-marker {
1196
- border-inline-start-color: rgba(var(--ax-color-neutral-500));
1197
- }
1198
-
1199
- .ax-el-neutral-blank {
1200
- color: rgba(var(--ax-color-neutral-500));
1201
- }
1202
- .ax-el-neutral-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
1203
- background-color: rgba(var(--ax-color-neutral-100));
1204
- color: rgba(var(--ax-color-neutral-fore-tint));
1205
- }
1206
- .ax-el-neutral-blank.ax-state-selected {
1207
- background-color: rgba(var(--ax-color-neutral-700));
1208
- color: rgba(var(--ax-color-neutral-fore));
1209
- }
1210
- .ax-el-neutral-blank .ax-ripple {
1211
- background-color: rgba(var(--ax-color-neutral-500), 0.3);
1212
- }
1213
- .ax-el-neutral-blank ax-loading-spinner .ax-loader {
1214
- border-color: rgba(var(--ax-color-neutral-500));
1215
- border-bottom-color: transparent;
1216
- }
1217
- .ax-el-neutral-blank:is(.ax-el-neutral-blank:focus-visible, .ax-el-neutral-blank.ax-state-focus) {
1218
- outline-color: rgba(var(--ax-color-neutral-300));
1219
- outline-offset: 0;
1220
- }
1221
- .ax-el-neutral-blank > button:is(.ax-el-neutral-blank > button:focus-visible, .ax-el-neutral-blank > button.ax-state-focus) {
1222
- outline-color: rgba(var(--ax-color-neutral-300));
1223
- outline-offset: 0;
1224
- }
1225
- .ax-el-neutral-blank.ax-dropdown-button-marker {
1226
- border-inline-start-color: transparent;
1227
- }
1228
-
1229
- .ax-el-neutral-link {
1230
- color: rgba(var(--ax-color-neutral-500));
1231
- }
1232
- .ax-el-neutral-link.ax-el-interactive:hover:not(.ax-state-disabled) {
1233
- color: rgba(var(--ax-color-neutral-700));
1234
- }
1235
- .ax-el-neutral-link.ax-state-selected {
1236
- background-color: rgba(var(--ax-color-neutral-700));
1237
- color: rgba(var(--ax-color-neutral-fore));
1238
- }
1239
- .ax-el-neutral-link .ax-ripple {
1240
- background-color: rgba(var(--ax-color-neutral-500), 0.3);
1241
- }
1242
- .ax-el-neutral-link ax-loading-spinner .ax-loader {
1243
- border-color: rgba(var(--ax-color-neutral-500));
1244
- border-bottom-color: transparent;
1245
- }
1246
- .ax-el-neutral-link:is(.ax-el-neutral-link:focus-visible, .ax-el-neutral-link.ax-state-focus) {
1247
- outline-color: rgba(var(--ax-color-neutral-300));
1248
- outline-offset: 0;
1249
- }
1250
- .ax-el-neutral-link > button:is(.ax-el-neutral-link > button:focus-visible, .ax-el-neutral-link > button.ax-state-focus) {
1251
- outline-color: rgba(var(--ax-color-neutral-300));
1252
- outline-offset: 0;
1253
- }
1254
- .ax-el-neutral-link.ax-dropdown-button-marker {
1255
- border-inline-start-color: transparent;
1256
- }
1257
-
1258
- .ax-el-ghost-solid {
1259
- border-width: 1px;
1260
- border-color: rgba(var(--ax-color-input-border));
1261
- background-color: rgba(var(--ax-color-ghost));
1262
- color: rgba(var(--ax-color-ghost-fore));
1263
- }
1264
- .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) {
1265
- background-color: rgba(var(--ax-color-ghost), 0.9);
1266
- }
1267
- .ax-el-ghost-solid.ax-el-interactive:active:not(.ax-el-ghost-solid.ax-el-interactive:active.ax-state-selected, .ax-el-ghost-solid.ax-el-interactive:active.ax-state-disabled) {
1268
- background-color: rgba(var(--ax-color-ghost), 0.8);
1269
- }
1270
- .ax-el-ghost-solid.ax-state-selected {
1271
- background-color: rgba(var(--ax-color-ghost-fore), 0.125);
1272
- color: rgba(var(--ax-color-ghost-fore));
1273
- border-style: none;
1274
- }
1275
- .ax-el-ghost-solid .ax-ripple {
1276
- background-color: rgba(var(--ax-color-ghost-fore), 0.3) !important;
1277
- }
1278
- .ax-el-ghost-solid ax-loading-spinner .ax-loader {
1279
- border-color: rgba(var(--ax-color-ghost-fore));
1280
- border-bottom-color: transparent;
1281
- }
1282
- .ax-el-ghost-solid.ax-dropdown-button-marker {
1283
- border-inline-start-color: rgba(var(--ax-color-input-border));
1284
- }
1285
-
1286
- .ax-el-ghost-outline {
1287
- border-width: 1px;
1288
- border-color: rgba(var(--ax-color-input-border));
1289
- background-color: transparent;
1290
- color: rgba(var(--ax-color-ghost-fore));
1291
- }
1292
- .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) {
1293
- border-color: rgba(var(--ax-color-ghost-fore), 0.4);
1294
- }
1295
- .ax-el-ghost-outline.ax-el-interactive:hover + .ax-dropdown-button-marker {
1296
- border-inline-start-color: rgba(var(--ax-color-ghost-fore), 0.4);
1297
- }
1298
- .ax-el-ghost-outline.ax-state-selected {
1299
- background-color: rgba(var(--ax-color-ghost-fore), 0.125);
1300
- color: rgba(var(--ax-color-ghost-fore));
1301
- border-style: none;
1302
- }
1303
- .ax-el-ghost-outline .ax-ripple {
1304
- background-color: rgba(var(--ax-color-ghost-fore), 0.3) !important;
1305
- }
1306
- .ax-el-ghost-outline ax-loading-spinner .ax-loader {
1307
- border-color: rgba(var(--ax-color-ghost-fore));
1308
- border-bottom-color: transparent;
1309
- }
1310
- .ax-el-ghost-outline.ax-dropdown-button-marker {
1311
- border-inline-start-color: rgba(var(--ax-color-input-border));
1312
- }
1313
-
1314
- .ax-el-ghost-blank {
1315
- border-style: none;
1316
- background-color: transparent;
1317
- color: rgba(var(--ax-color-ghost-fore));
1318
- }
1319
- .ax-el-ghost-blank.ax-state-selected {
1320
- background-color: rgba(var(--ax-color-ghost-fore), 0.125);
1321
- color: rgba(var(--ax-color-ghost-fore));
1322
- border-style: none;
1323
- }
1324
- .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) {
1325
- background-color: rgba(var(--ax-color-ghost-fore), 0.05);
1326
- border-color: rgba(var(--ax-color-ghost-fore), 0.05);
1327
- }
1328
- .ax-el-ghost-blank.ax-el-interactive:active:not(.ax-el-ghost-blank.ax-el-interactive:active.ax-state-selected, .ax-el-ghost-blank.ax-el-interactive:active.ax-state-disabled) {
1329
- background-color: rgba(var(--ax-color-ghost-fore), 0.1);
1330
- border-color: rgba(var(--ax-color-ghost-fore), 0.1);
1331
- color: rgba(var(--ax-color-ghost-fore));
1332
- }
1333
- .ax-el-ghost-blank .ax-ripple {
1334
- background-color: rgba(var(--ax-color-ghost-fore), 0.3) !important;
1335
- }
1336
- .ax-el-ghost-blank ax-loading-spinner .ax-loader {
1337
- border-color: rgba(var(--ax-color-ghost-fore));
1338
- border-bottom-color: transparent;
1339
- }
1340
- .ax-el-ghost-blank > button:is(.ax-el-ghost-blank > button:focus-visible, .ax-el-ghost-blank > button.ax-state-focus) {
1341
- border-color: rgba(var(--ax-color-ghost-fore), 0.2);
1342
- }
1343
- .ax-el-ghost-blank.ax-dropdown-button-marker {
1344
- border-inline-start-color: rgba(var(--ax-color-input-border));
1345
- }
1346
-
1347
- .ax-el-ghost-twotone {
1348
- border-color: transparent;
1349
- background-color: rgba(var(--ax-color-ghost-fore), 0.1);
1350
- color: rgba(var(--ax-color-ghost-fore));
1351
- }
1352
- .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) {
1353
- background-color: rgba(var(--ax-color-ghost-fore), 0.15);
1354
- }
1355
- .ax-el-ghost-twotone.ax-el-interactive:hover + .ax-dropdown-button-marker {
1356
- background-color: rgba(var(--ax-color-ghost-fore), 0.15);
1357
- }
1358
- .ax-el-ghost-twotone.ax-el-interactive:active:not(.ax-el-ghost-twotone.ax-el-interactive:active.ax-state-selected, .ax-el-ghost-twotone.ax-el-interactive:active.ax-state-disabled) {
1359
- background-color: rgba(var(--ax-color-ghost-fore), 0.25);
1360
- }
1361
- .ax-el-ghost-twotone.ax-state-selected {
1362
- background-color: rgba(var(--ax-color-ghost-fore), 0.25);
1363
- color: rgba(var(--ax-color-ghost-fore));
1364
- border-style: none;
1365
- }
1366
- .ax-el-ghost-twotone .ax-ripple {
1367
- background-color: rgba(var(--ax-color-ghost-fore), 0.3) !important;
1368
- }
1369
- .ax-el-ghost-twotone ax-loading-spinner .ax-loader {
1370
- border-color: rgba(var(--ax-color-ghost-fore));
1371
- border-bottom-color: transparent;
1372
- }
1373
- .ax-el-ghost-twotone > button:is(.ax-el-ghost-twotone > button:focus-visible, .ax-el-ghost-twotone > button.ax-state-focus) {
1374
- outline-color: rgba(var(--ax-color-primary-500));
1375
- }
1376
- .ax-el-ghost-twotone.ax-dropdown-button-marker {
1377
- border-inline-start-color: rgba(var(--ax-color-input-border));
1378
- }
1379
-
1380
- .ax-el-ghost-link {
1381
- border-style: none;
1382
- background-color: transparent;
1383
- color: rgba(var(--ax-color-ghost-fore), 0.8);
1384
- }
1385
- .ax-el-ghost-link.ax-state-selected {
1386
- text-decoration: underline;
1387
- }
1388
- .ax-el-ghost-link .ax-ripple {
1389
- background-color: rgba(var(--ax-color-ghost-fore), 0.3) !important;
1390
- }
1391
- .ax-el-ghost-link ax-loading-spinner .ax-loader {
1392
- border-color: rgba(var(--ax-color-ghost-fore));
1393
- border-bottom-color: transparent;
1394
- }
1395
- .ax-el-ghost-link > button:is(.ax-el-ghost-link > button:focus-visible, .ax-el-ghost-link > button.ax-state-focus) {
1396
- outline-color: rgba(var(--ax-color-primary-500));
1397
- }
1398
- .ax-el-ghost-link.ax-dropdown-button-marker {
1399
- border-inline-start-color: rgba(var(--ax-color-input-border));
1400
- }
1401
-
1402
- .ax-dark .ax-el-primary-solid {
1403
- background-color: rgba(var(--ax-color-primary-200));
1404
- color: rgba(var(--ax-color-primary-fore-tint));
1405
- border-color: rgba(var(--ax-color-primary-200));
1406
- }
1407
- .ax-dark .ax-el-primary-solid.ax-el-interactive .ax-action-item-suffix ax-text {
1408
- color: rgba(var(--ax-color-primary-800));
1409
- }
1410
- .ax-dark .ax-el-primary-solid.ax-el-interactive:hover:not(.ax-state-disabled) {
1411
- background-color: rgba(var(--ax-color-primary-300));
1412
- color: rgba(var(--ax-color-primary-fore-tint));
1413
- }
1414
- .ax-dark .ax-el-primary-solid.ax-state-selected {
1415
- background-color: rgba(var(--ax-color-primary-400));
1416
- }
1417
- .ax-dark .ax-el-primary-solid .ax-ripple {
1418
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
1419
- }
1420
- .ax-dark .ax-el-primary-solid ax-loading-spinner .ax-loader {
1421
- border-color: rgba(var(--ax-color-primary-fore-tint));
1422
- border-bottom-color: transparent;
1423
- }
1424
- .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) {
1425
- outline-color: rgba(var(--ax-color-primary-200));
1426
- }
1427
- .ax-dark .ax-el-primary-solid.ax-dropdown-button-marker {
1428
- border-inline-start-color: rgba(var(--ax-color-primary-900));
1429
- }
1430
- .ax-dark .ax-el-primary-twotone {
1431
- background-color: rgba(var(--ax-color-primary-200));
1432
- color: rgba(var(--ax-color-primary-fore-tint));
1433
- border-color: rgba(var(--ax-color-primary-200));
1434
- }
1435
- .ax-dark .ax-el-primary-twotone .ax-action-item-suffix ax-text {
1436
- color: rgba(var(--ax-color-primary-800));
1437
- }
1438
- .ax-dark .ax-el-primary-twotone.ax-state-interactive:hover:not(.ax-state-disabled) {
1439
- background-color: rgba(var(--ax-color-primary-300));
1440
- }
1441
- .ax-dark .ax-el-primary-twotone.ax-state-selected {
1442
- background-color: rgba(var(--ax-color-primary-400));
1443
- }
1444
- .ax-dark .ax-el-primary-twotone .ax-ripple {
1445
- background-color: rgba(var(--ax-color-primary-500), 0.3);
1446
- }
1447
- .ax-dark .ax-el-primary-twotone ax-loading-spinner .ax-loader {
1448
- border-color: rgba(var(--ax-color-primary-fore-tint));
1449
- border-bottom-color: transparent;
1450
- }
1451
- .ax-dark .ax-el-primary-twotone.ax-dropdown-button-marker {
1452
- border-inline-start-color: rgba(var(--ax-color-primary-950));
1453
- }
1454
- .ax-dark .ax-el-primary-outline {
1455
- border-color: rgba(var(--ax-color-primary-200));
1456
- color: rgba(var(--ax-color-primary-200));
1457
- }
1458
- .ax-dark .ax-el-primary-outline.ax-el-interactive:hover:not(.ax-state-disabled) {
1459
- border-color: rgba(var(--ax-color-primary-300));
1460
- color: rgba(var(--ax-color-primary-300));
1461
- background-color: transparent;
1462
- }
1463
- .ax-dark .ax-el-primary-outline.ax-state-selected {
1464
- border-color: rgba(var(--ax-color-primary-300));
1465
- color: rgba(var(--ax-color-primary-300));
1466
- }
1467
- .ax-dark .ax-el-primary-outline .ax-ripple {
1468
- border-color: rgba(var(--ax-color-primary-500), 0.3);
1469
- }
1470
- .ax-dark .ax-el-primary-outline ax-loading-spinner .ax-loader {
1471
- border-color: rgba(var(--ax-color-primary-fore-tint));
1472
- border-bottom-color: transparent;
1473
- }
1474
- .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) {
1475
- border-color: rgba(var(--ax-color-primary-300));
1476
- color: rgba(var(--ax-color-primary-300));
1477
- }
1478
- .ax-dark .ax-el-primary-blank {
1479
- color: rgba(var(--ax-color-primary-300));
1480
- background-color: transparent;
1481
- }
1482
- .ax-dark .ax-el-primary-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
1483
- background-color: rgba(var(--ax-color-primary-200));
1484
- color: rgba(var(--ax-color-primary-fore-tint));
1485
- }
1486
- .ax-dark .ax-el-primary-blank.ax-el-interactive:hover:not(.ax-state-disabled) .ax-action-item-suffix ax-text {
1487
- color: rgba(var(--ax-color-primary-800));
1488
- }
1489
- .ax-dark .ax-el-primary-blank.ax-state-selected {
1490
- background-color: rgba(var(--ax-color-primary-500));
1491
- color: rgba(var(--ax-color-primary-fore));
1492
- }
1493
- .ax-dark .ax-el-primary-blank .ax-ripple {
1494
- background-color: rgba(var(--ax-color-primary-300), 0.3) !important;
1495
- }
1496
- .ax-dark .ax-el-primary-blank ax-loading-spinner .ax-loader {
1497
- border-color: rgba(var(--ax-color-primary-fore-tint));
1498
- border-bottom-color: transparent;
1499
- }
1500
- .ax-dark .ax-el-primary-link {
1501
- color: rgba(var(--ax-color-primary-300));
1502
- background-color: transparent;
1503
- }
1504
- .ax-dark .ax-el-primary-link.ax-el-interactive:hover:not(.ax-state-disabled) {
1505
- color: rgba(var(--ax-color-primary-400));
1506
- }
1507
- .ax-dark .ax-el-primary-link.ax-state-selected {
1508
- background-color: rgba(var(--ax-color-primary-500));
1509
- color: rgba(var(--ax-color-primary-fore));
1510
- }
1511
- .ax-dark .ax-el-primary-link .ax-ripple {
1512
- background-color: rgba(var(--ax-color-primary-300), 0.3) !important;
1513
- }
1514
- .ax-dark .ax-el-primary-link ax-loading-spinner .ax-loader {
1515
- border-color: rgba(var(--ax-color-primary-fore-tint));
1516
- border-bottom-color: transparent;
1517
- }
1518
- .ax-dark .ax-el-success-solid {
1519
- background-color: rgba(var(--ax-color-success-200));
1520
- color: rgba(var(--ax-color-success-fore-tint));
1521
- border-color: rgba(var(--ax-color-success-200));
1522
- }
1523
- .ax-dark .ax-el-success-solid.ax-el-interactive .ax-action-item-suffix ax-text {
1524
- color: rgba(var(--ax-color-success-800));
1525
- }
1526
- .ax-dark .ax-el-success-solid.ax-el-interactive:hover:not(.ax-state-disabled) {
1527
- background-color: rgba(var(--ax-color-success-300));
1528
- color: rgba(var(--ax-color-success-fore-tint));
1529
- }
1530
- .ax-dark .ax-el-success-solid.ax-state-selected {
1531
- background-color: rgba(var(--ax-color-success-400));
1532
- }
1533
- .ax-dark .ax-el-success-solid .ax-ripple {
1534
- background-color: rgba(var(--ax-color-success-500), 0.3) !important;
1535
- }
1536
- .ax-dark .ax-el-success-solid ax-loading-spinner .ax-loader {
1537
- border-color: rgba(var(--ax-color-success-fore-tint));
1538
- border-bottom-color: transparent;
1539
- }
1540
- .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) {
1541
- outline-color: rgba(var(--ax-color-primary-200));
1542
- }
1543
- .ax-dark .ax-el-success-solid.ax-dropdown-button-marker {
1544
- border-inline-start-color: rgba(var(--ax-color-success-900));
1545
- }
1546
- .ax-dark .ax-el-success-twotone {
1547
- background-color: rgba(var(--ax-color-success-200));
1548
- color: rgba(var(--ax-color-success-fore-tint));
1549
- border-color: rgba(var(--ax-color-success-200));
1550
- }
1551
- .ax-dark .ax-el-success-twotone .ax-action-item-suffix ax-text {
1552
- color: rgba(var(--ax-color-success-800));
1553
- }
1554
- .ax-dark .ax-el-success-twotone.ax-state-interactive:hover:not(.ax-state-disabled) {
1555
- background-color: rgba(var(--ax-color-success-300));
1556
- }
1557
- .ax-dark .ax-el-success-twotone.ax-state-selected {
1558
- background-color: rgba(var(--ax-color-success-400));
1559
- }
1560
- .ax-dark .ax-el-success-twotone .ax-ripple {
1561
- background-color: rgba(var(--ax-color-success-500), 0.3);
1562
- }
1563
- .ax-dark .ax-el-success-twotone ax-loading-spinner .ax-loader {
1564
- border-color: rgba(var(--ax-color-success-fore-tint));
1565
- border-bottom-color: transparent;
1566
- }
1567
- .ax-dark .ax-el-success-twotone.ax-dropdown-button-marker {
1568
- border-inline-start-color: rgba(var(--ax-color-success-950));
1569
- }
1570
- .ax-dark .ax-el-success-outline {
1571
- border-color: rgba(var(--ax-color-success-200));
1572
- color: rgba(var(--ax-color-success-200));
1573
- }
1574
- .ax-dark .ax-el-success-outline.ax-el-interactive:hover:not(.ax-state-disabled) {
1575
- border-color: rgba(var(--ax-color-success-300));
1576
- color: rgba(var(--ax-color-success-300));
1577
- background-color: transparent;
1578
- }
1579
- .ax-dark .ax-el-success-outline.ax-state-selected {
1580
- border-color: rgba(var(--ax-color-success-300));
1581
- color: rgba(var(--ax-color-success-300));
1582
- }
1583
- .ax-dark .ax-el-success-outline .ax-ripple {
1584
- border-color: rgba(var(--ax-color-success-500), 0.3);
1585
- }
1586
- .ax-dark .ax-el-success-outline ax-loading-spinner .ax-loader {
1587
- border-color: rgba(var(--ax-color-success-fore-tint));
1588
- border-bottom-color: transparent;
1589
- }
1590
- .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) {
1591
- border-color: rgba(var(--ax-color-success-300));
1592
- color: rgba(var(--ax-color-success-300));
1593
- }
1594
- .ax-dark .ax-el-success-blank {
1595
- color: rgba(var(--ax-color-success-300));
1596
- background-color: transparent;
1597
- }
1598
- .ax-dark .ax-el-success-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
1599
- background-color: rgba(var(--ax-color-success-200));
1600
- color: rgba(var(--ax-color-success-fore-tint));
1601
- }
1602
- .ax-dark .ax-el-success-blank.ax-el-interactive:hover:not(.ax-state-disabled) .ax-action-item-suffix ax-text {
1603
- color: rgba(var(--ax-color-success-800));
1604
- }
1605
- .ax-dark .ax-el-success-blank.ax-state-selected {
1606
- background-color: rgba(var(--ax-color-success-500));
1607
- color: rgba(var(--ax-color-success-fore));
1608
- }
1609
- .ax-dark .ax-el-success-blank .ax-ripple {
1610
- background-color: rgba(var(--ax-color-success-300), 0.3) !important;
1611
- }
1612
- .ax-dark .ax-el-success-blank ax-loading-spinner .ax-loader {
1613
- border-color: rgba(var(--ax-color-success-fore-tint));
1614
- border-bottom-color: transparent;
1615
- }
1616
- .ax-dark .ax-el-success-link {
1617
- color: rgba(var(--ax-color-success-300));
1618
- background-color: transparent;
1619
- }
1620
- .ax-dark .ax-el-success-link.ax-el-interactive:hover:not(.ax-state-disabled) {
1621
- color: rgba(var(--ax-color-success-400));
1622
- }
1623
- .ax-dark .ax-el-success-link.ax-state-selected {
1624
- background-color: rgba(var(--ax-color-success-500));
1625
- color: rgba(var(--ax-color-success-fore));
1626
- }
1627
- .ax-dark .ax-el-success-link .ax-ripple {
1628
- background-color: rgba(var(--ax-color-success-300), 0.3) !important;
1629
- }
1630
- .ax-dark .ax-el-success-link ax-loading-spinner .ax-loader {
1631
- border-color: rgba(var(--ax-color-success-fore-tint));
1632
- border-bottom-color: transparent;
1633
- }
1634
- .ax-dark .ax-el-warning-solid {
1635
- background-color: rgba(var(--ax-color-warning-200));
1636
- color: rgba(var(--ax-color-warning-fore-tint));
1637
- border-color: rgba(var(--ax-color-warning-200));
1638
- }
1639
- .ax-dark .ax-el-warning-solid.ax-el-interactive .ax-action-item-suffix ax-text {
1640
- color: rgba(var(--ax-color-warning-800));
1641
- }
1642
- .ax-dark .ax-el-warning-solid.ax-el-interactive:hover:not(.ax-state-disabled) {
1643
- background-color: rgba(var(--ax-color-warning-300));
1644
- color: rgba(var(--ax-color-warning-fore-tint));
1645
- }
1646
- .ax-dark .ax-el-warning-solid.ax-state-selected {
1647
- background-color: rgba(var(--ax-color-warning-400));
1648
- }
1649
- .ax-dark .ax-el-warning-solid .ax-ripple {
1650
- background-color: rgba(var(--ax-color-warning-500), 0.3) !important;
1651
- }
1652
- .ax-dark .ax-el-warning-solid ax-loading-spinner .ax-loader {
1653
- border-color: rgba(var(--ax-color-warning-fore-tint));
1654
- border-bottom-color: transparent;
1655
- }
1656
- .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) {
1657
- outline-color: rgba(var(--ax-color-primary-200));
1658
- }
1659
- .ax-dark .ax-el-warning-solid.ax-dropdown-button-marker {
1660
- border-inline-start-color: rgba(var(--ax-color-warning-900));
1661
- }
1662
- .ax-dark .ax-el-warning-twotone {
1663
- background-color: rgba(var(--ax-color-warning-200));
1664
- color: rgba(var(--ax-color-warning-fore-tint));
1665
- border-color: rgba(var(--ax-color-warning-200));
1666
- }
1667
- .ax-dark .ax-el-warning-twotone .ax-action-item-suffix ax-text {
1668
- color: rgba(var(--ax-color-warning-800));
1669
- }
1670
- .ax-dark .ax-el-warning-twotone.ax-state-interactive:hover:not(.ax-state-disabled) {
1671
- background-color: rgba(var(--ax-color-warning-300));
1672
- }
1673
- .ax-dark .ax-el-warning-twotone.ax-state-selected {
1674
- background-color: rgba(var(--ax-color-warning-400));
1675
- }
1676
- .ax-dark .ax-el-warning-twotone .ax-ripple {
1677
- background-color: rgba(var(--ax-color-warning-500), 0.3);
1678
- }
1679
- .ax-dark .ax-el-warning-twotone ax-loading-spinner .ax-loader {
1680
- border-color: rgba(var(--ax-color-warning-fore-tint));
1681
- border-bottom-color: transparent;
1682
- }
1683
- .ax-dark .ax-el-warning-twotone.ax-dropdown-button-marker {
1684
- border-inline-start-color: rgba(var(--ax-color-warning-950));
1685
- }
1686
- .ax-dark .ax-el-warning-outline {
1687
- border-color: rgba(var(--ax-color-warning-200));
1688
- color: rgba(var(--ax-color-warning-200));
1689
- }
1690
- .ax-dark .ax-el-warning-outline.ax-el-interactive:hover:not(.ax-state-disabled) {
1691
- border-color: rgba(var(--ax-color-warning-300));
1692
- color: rgba(var(--ax-color-warning-300));
1693
- background-color: transparent;
1694
- }
1695
- .ax-dark .ax-el-warning-outline.ax-state-selected {
1696
- border-color: rgba(var(--ax-color-warning-300));
1697
- color: rgba(var(--ax-color-warning-300));
1698
- }
1699
- .ax-dark .ax-el-warning-outline .ax-ripple {
1700
- border-color: rgba(var(--ax-color-warning-500), 0.3);
1701
- }
1702
- .ax-dark .ax-el-warning-outline ax-loading-spinner .ax-loader {
1703
- border-color: rgba(var(--ax-color-warning-fore-tint));
1704
- border-bottom-color: transparent;
1705
- }
1706
- .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) {
1707
- border-color: rgba(var(--ax-color-warning-300));
1708
- color: rgba(var(--ax-color-warning-300));
1709
- }
1710
- .ax-dark .ax-el-warning-blank {
1711
- color: rgba(var(--ax-color-warning-300));
1712
- background-color: transparent;
1713
- }
1714
- .ax-dark .ax-el-warning-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
1715
- background-color: rgba(var(--ax-color-warning-200));
1716
- color: rgba(var(--ax-color-warning-fore-tint));
1717
- }
1718
- .ax-dark .ax-el-warning-blank.ax-el-interactive:hover:not(.ax-state-disabled) .ax-action-item-suffix ax-text {
1719
- color: rgba(var(--ax-color-warning-800));
1720
- }
1721
- .ax-dark .ax-el-warning-blank.ax-state-selected {
1722
- background-color: rgba(var(--ax-color-warning-500));
1723
- color: rgba(var(--ax-color-warning-fore));
1724
- }
1725
- .ax-dark .ax-el-warning-blank .ax-ripple {
1726
- background-color: rgba(var(--ax-color-warning-300), 0.3) !important;
1727
- }
1728
- .ax-dark .ax-el-warning-blank ax-loading-spinner .ax-loader {
1729
- border-color: rgba(var(--ax-color-warning-fore-tint));
1730
- border-bottom-color: transparent;
1731
- }
1732
- .ax-dark .ax-el-warning-link {
1733
- color: rgba(var(--ax-color-warning-300));
1734
- background-color: transparent;
1735
- }
1736
- .ax-dark .ax-el-warning-link.ax-el-interactive:hover:not(.ax-state-disabled) {
1737
- color: rgba(var(--ax-color-warning-400));
1738
- }
1739
- .ax-dark .ax-el-warning-link.ax-state-selected {
1740
- background-color: rgba(var(--ax-color-warning-500));
1741
- color: rgba(var(--ax-color-warning-fore));
1742
- }
1743
- .ax-dark .ax-el-warning-link .ax-ripple {
1744
- background-color: rgba(var(--ax-color-warning-300), 0.3) !important;
1745
- }
1746
- .ax-dark .ax-el-warning-link ax-loading-spinner .ax-loader {
1747
- border-color: rgba(var(--ax-color-warning-fore-tint));
1748
- border-bottom-color: transparent;
1749
- }
1750
- .ax-dark .ax-el-danger-solid {
1751
- background-color: rgba(var(--ax-color-danger-200));
1752
- color: rgba(var(--ax-color-danger-fore-tint));
1753
- border-color: rgba(var(--ax-color-danger-200));
1754
- }
1755
- .ax-dark .ax-el-danger-solid.ax-el-interactive .ax-action-item-suffix ax-text {
1756
- color: rgba(var(--ax-color-danger-800));
1757
- }
1758
- .ax-dark .ax-el-danger-solid.ax-el-interactive:hover:not(.ax-state-disabled) {
1759
- background-color: rgba(var(--ax-color-danger-300));
1760
- color: rgba(var(--ax-color-danger-fore-tint));
1761
- }
1762
- .ax-dark .ax-el-danger-solid.ax-state-selected {
1763
- background-color: rgba(var(--ax-color-danger-400));
1764
- }
1765
- .ax-dark .ax-el-danger-solid .ax-ripple {
1766
- background-color: rgba(var(--ax-color-danger-500), 0.3) !important;
1767
- }
1768
- .ax-dark .ax-el-danger-solid ax-loading-spinner .ax-loader {
1769
- border-color: rgba(var(--ax-color-danger-fore-tint));
1770
- border-bottom-color: transparent;
1771
- }
1772
- .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) {
1773
- outline-color: rgba(var(--ax-color-primary-200));
1774
- }
1775
- .ax-dark .ax-el-danger-solid.ax-dropdown-button-marker {
1776
- border-inline-start-color: rgba(var(--ax-color-danger-900));
1777
- }
1778
- .ax-dark .ax-el-danger-twotone {
1779
- background-color: rgba(var(--ax-color-danger-200));
1780
- color: rgba(var(--ax-color-danger-fore-tint));
1781
- border-color: rgba(var(--ax-color-danger-200));
1782
- }
1783
- .ax-dark .ax-el-danger-twotone .ax-action-item-suffix ax-text {
1784
- color: rgba(var(--ax-color-danger-800));
1785
- }
1786
- .ax-dark .ax-el-danger-twotone.ax-state-interactive:hover:not(.ax-state-disabled) {
1787
- background-color: rgba(var(--ax-color-danger-300));
1788
- }
1789
- .ax-dark .ax-el-danger-twotone.ax-state-selected {
1790
- background-color: rgba(var(--ax-color-danger-400));
1791
- }
1792
- .ax-dark .ax-el-danger-twotone .ax-ripple {
1793
- background-color: rgba(var(--ax-color-danger-500), 0.3);
1794
- }
1795
- .ax-dark .ax-el-danger-twotone ax-loading-spinner .ax-loader {
1796
- border-color: rgba(var(--ax-color-danger-fore-tint));
1797
- border-bottom-color: transparent;
1798
- }
1799
- .ax-dark .ax-el-danger-twotone.ax-dropdown-button-marker {
1800
- border-inline-start-color: rgba(var(--ax-color-danger-950));
1801
- }
1802
- .ax-dark .ax-el-danger-outline {
1803
- border-color: rgba(var(--ax-color-danger-200));
1804
- color: rgba(var(--ax-color-danger-200));
1805
- }
1806
- .ax-dark .ax-el-danger-outline.ax-el-interactive:hover:not(.ax-state-disabled) {
1807
- border-color: rgba(var(--ax-color-danger-300));
1808
- color: rgba(var(--ax-color-danger-300));
1809
- background-color: transparent;
1810
- }
1811
- .ax-dark .ax-el-danger-outline.ax-state-selected {
1812
- border-color: rgba(var(--ax-color-danger-300));
1813
- color: rgba(var(--ax-color-danger-300));
1814
- }
1815
- .ax-dark .ax-el-danger-outline .ax-ripple {
1816
- border-color: rgba(var(--ax-color-danger-500), 0.3);
1817
- }
1818
- .ax-dark .ax-el-danger-outline ax-loading-spinner .ax-loader {
1819
- border-color: rgba(var(--ax-color-danger-fore-tint));
1820
- border-bottom-color: transparent;
1821
- }
1822
- .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) {
1823
- border-color: rgba(var(--ax-color-danger-300));
1824
- color: rgba(var(--ax-color-danger-300));
1825
- }
1826
- .ax-dark .ax-el-danger-blank {
1827
- color: rgba(var(--ax-color-danger-300));
1828
- background-color: transparent;
1829
- }
1830
- .ax-dark .ax-el-danger-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
1831
- background-color: rgba(var(--ax-color-danger-200));
1832
- color: rgba(var(--ax-color-danger-fore-tint));
1833
- }
1834
- .ax-dark .ax-el-danger-blank.ax-el-interactive:hover:not(.ax-state-disabled) .ax-action-item-suffix ax-text {
1835
- color: rgba(var(--ax-color-danger-800));
1836
- }
1837
- .ax-dark .ax-el-danger-blank.ax-state-selected {
1838
- background-color: rgba(var(--ax-color-danger-500));
1839
- color: rgba(var(--ax-color-danger-fore));
1840
- }
1841
- .ax-dark .ax-el-danger-blank .ax-ripple {
1842
- background-color: rgba(var(--ax-color-danger-300), 0.3) !important;
1843
- }
1844
- .ax-dark .ax-el-danger-blank ax-loading-spinner .ax-loader {
1845
- border-color: rgba(var(--ax-color-danger-fore-tint));
1846
- border-bottom-color: transparent;
1847
- }
1848
- .ax-dark .ax-el-danger-link {
1849
- color: rgba(var(--ax-color-danger-300));
1850
- background-color: transparent;
1851
- }
1852
- .ax-dark .ax-el-danger-link.ax-el-interactive:hover:not(.ax-state-disabled) {
1853
- color: rgba(var(--ax-color-danger-400));
1854
- }
1855
- .ax-dark .ax-el-danger-link.ax-state-selected {
1856
- background-color: rgba(var(--ax-color-danger-500));
1857
- color: rgba(var(--ax-color-danger-fore));
1858
- }
1859
- .ax-dark .ax-el-danger-link .ax-ripple {
1860
- background-color: rgba(var(--ax-color-danger-300), 0.3) !important;
1861
- }
1862
- .ax-dark .ax-el-danger-link ax-loading-spinner .ax-loader {
1863
- border-color: rgba(var(--ax-color-danger-fore-tint));
1864
- border-bottom-color: transparent;
1865
- }
1866
- .ax-dark .ax-el-neutral-solid {
1867
- background-color: rgba(var(--ax-color-neutral-200));
1868
- color: rgba(var(--ax-color-neutral-fore-tint));
1869
- border-color: rgba(var(--ax-color-neutral-200));
1870
- }
1871
- .ax-dark .ax-el-neutral-solid.ax-el-interactive .ax-action-item-suffix ax-text {
1872
- color: rgba(var(--ax-color-neutral-800));
1873
- }
1874
- .ax-dark .ax-el-neutral-solid.ax-el-interactive:hover:not(.ax-state-disabled) {
1875
- background-color: rgba(var(--ax-color-neutral-300));
1876
- color: rgba(var(--ax-color-neutral-fore-tint));
1877
- }
1878
- .ax-dark .ax-el-neutral-solid.ax-state-selected {
1879
- background-color: rgba(var(--ax-color-neutral-400));
1880
- }
1881
- .ax-dark .ax-el-neutral-solid .ax-ripple {
1882
- background-color: rgba(var(--ax-color-neutral-500), 0.3) !important;
1883
- }
1884
- .ax-dark .ax-el-neutral-solid ax-loading-spinner .ax-loader {
1885
- border-color: rgba(var(--ax-color-neutral-fore-tint));
1886
- border-bottom-color: transparent;
1887
- }
1888
- .ax-dark .ax-el-neutral-solid > button:is(.ax-dark .ax-el-neutral-solid > button:focus-visible, .ax-dark .ax-el-neutral-solid > button.ax-state-focus) {
1889
- outline-color: rgba(var(--ax-color-primary-200));
1890
- }
1891
- .ax-dark .ax-el-neutral-solid.ax-dropdown-button-marker {
1892
- border-inline-start-color: rgba(var(--ax-color-neutral-900));
1893
- }
1894
- .ax-dark .ax-el-neutral-twotone {
1895
- background-color: rgba(var(--ax-color-neutral-200));
1896
- color: rgba(var(--ax-color-neutral-fore-tint));
1897
- border-color: rgba(var(--ax-color-neutral-200));
1898
- }
1899
- .ax-dark .ax-el-neutral-twotone .ax-action-item-suffix ax-text {
1900
- color: rgba(var(--ax-color-neutral-800));
1901
- }
1902
- .ax-dark .ax-el-neutral-twotone.ax-state-interactive:hover:not(.ax-state-disabled) {
1903
- background-color: rgba(var(--ax-color-neutral-300));
1904
- }
1905
- .ax-dark .ax-el-neutral-twotone.ax-state-selected {
1906
- background-color: rgba(var(--ax-color-neutral-400));
1907
- }
1908
- .ax-dark .ax-el-neutral-twotone .ax-ripple {
1909
- background-color: rgba(var(--ax-color-neutral-500), 0.3);
1910
- }
1911
- .ax-dark .ax-el-neutral-twotone ax-loading-spinner .ax-loader {
1912
- border-color: rgba(var(--ax-color-neutral-fore-tint));
1913
- border-bottom-color: transparent;
1914
- }
1915
- .ax-dark .ax-el-neutral-twotone.ax-dropdown-button-marker {
1916
- border-inline-start-color: rgba(var(--ax-color-neutral-950));
1917
- }
1918
- .ax-dark .ax-el-neutral-outline {
1919
- border-color: rgba(var(--ax-color-neutral-200));
1920
- color: rgba(var(--ax-color-neutral-200));
1921
- }
1922
- .ax-dark .ax-el-neutral-outline.ax-el-interactive:hover:not(.ax-state-disabled) {
1923
- border-color: rgba(var(--ax-color-neutral-300));
1924
- color: rgba(var(--ax-color-neutral-300));
1925
- background-color: transparent;
1926
- }
1927
- .ax-dark .ax-el-neutral-outline.ax-state-selected {
1928
- border-color: rgba(var(--ax-color-neutral-300));
1929
- color: rgba(var(--ax-color-neutral-300));
1930
- }
1931
- .ax-dark .ax-el-neutral-outline .ax-ripple {
1932
- border-color: rgba(var(--ax-color-neutral-500), 0.3);
1933
- }
1934
- .ax-dark .ax-el-neutral-outline ax-loading-spinner .ax-loader {
1935
- border-color: rgba(var(--ax-color-neutral-fore-tint));
1936
- border-bottom-color: transparent;
1937
- }
1938
- .ax-dark .ax-el-neutral-outline > button:is(.ax-dark .ax-el-neutral-outline > button:focus-visible, .ax-dark .ax-el-neutral-outline > button.ax-state-focus) {
1939
- border-color: rgba(var(--ax-color-neutral-300));
1940
- color: rgba(var(--ax-color-neutral-300));
1941
- }
1942
- .ax-dark .ax-el-neutral-blank {
1943
- color: rgba(var(--ax-color-neutral-300));
1944
- background-color: transparent;
1945
- }
1946
- .ax-dark .ax-el-neutral-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
1947
- background-color: rgba(var(--ax-color-neutral-200));
1948
- color: rgba(var(--ax-color-neutral-fore-tint));
1949
- }
1950
- .ax-dark .ax-el-neutral-blank.ax-el-interactive:hover:not(.ax-state-disabled) .ax-action-item-suffix ax-text {
1951
- color: rgba(var(--ax-color-neutral-800));
1952
- }
1953
- .ax-dark .ax-el-neutral-blank.ax-state-selected {
1954
- background-color: rgba(var(--ax-color-neutral-500));
1955
- color: rgba(var(--ax-color-neutral-fore));
1956
- }
1957
- .ax-dark .ax-el-neutral-blank .ax-ripple {
1958
- background-color: rgba(var(--ax-color-neutral-300), 0.3) !important;
1959
- }
1960
- .ax-dark .ax-el-neutral-blank ax-loading-spinner .ax-loader {
1961
- border-color: rgba(var(--ax-color-neutral-fore-tint));
1962
- border-bottom-color: transparent;
1963
- }
1964
- .ax-dark .ax-el-neutral-link {
1965
- color: rgba(var(--ax-color-neutral-300));
1966
- background-color: transparent;
1967
- }
1968
- .ax-dark .ax-el-neutral-link.ax-el-interactive:hover:not(.ax-state-disabled) {
1969
- color: rgba(var(--ax-color-neutral-400));
1970
- }
1971
- .ax-dark .ax-el-neutral-link.ax-state-selected {
1972
- background-color: rgba(var(--ax-color-neutral-500));
1973
- color: rgba(var(--ax-color-neutral-fore));
1974
- }
1975
- .ax-dark .ax-el-neutral-link .ax-ripple {
1976
- background-color: rgba(var(--ax-color-neutral-300), 0.3) !important;
1977
- }
1978
- .ax-dark .ax-el-neutral-link ax-loading-spinner .ax-loader {
1979
- border-color: rgba(var(--ax-color-neutral-fore-tint));
1980
- border-bottom-color: transparent;
1981
- }
1982
- .ax-dark .ax-el-ghost-solid {
1983
- border-color: rgba(var(--ax-color-ghost), 0.5);
1984
- background-color: rgba(var(--ax-color-ghost), 0.5);
1985
- }
1986
- .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) {
1987
- background-color: rgba(var(--ax-color-ghost), 0.75);
1988
- border-color: rgba(var(--ax-color-ghost), 0.75);
1989
- color: rgba(var(--ax-color-ghost-fore));
1990
- }
1991
- .ax-dark .ax-el-ghost-solid.ax-el-interactive:hover + .ax-dropdown-button-marker {
1992
- border-color: rgba(var(--ax-color-ghost), 0.75);
1993
- background-color: rgba(var(--ax-color-ghost), 0.75);
1994
- color: rgba(var(--ax-color-ghost-fore));
1995
- }
1996
- .ax-dark .ax-el-ghost-solid.ax-el-interactive:active:not(.ax-dark .ax-el-ghost-solid.ax-el-interactive:active.ax-state-selected, .ax-dark .ax-el-ghost-solid.ax-el-interactive:active.ax-state-disabled) {
1997
- border-color: rgba(var(--ax-color-ghost));
1998
- background-color: rgba(var(--ax-color-ghost));
1999
- color: rgba(var(--ax-color-ghost-fore));
2000
- }
2001
- .ax-dark .ax-el-ghost-solid.ax-state-selected {
2002
- border-color: rgba(var(--ax-color-ghost));
2003
- background-color: rgba(var(--ax-color-ghost));
2004
- color: rgba(var(--ax-color-ghost-fore));
2005
- }
2006
- .ax-dark .ax-el-ghost-solid .ax-ripple {
2007
- background-color: rgba(var(--ax-color-ghost-fore), 0.2) !important;
2008
- }
2009
- .ax-dark .ax-el-ghost-outline {
2010
- border-color: rgba(var(--ax-color-ghost-fore), 0.5);
2011
- }
2012
- .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) {
2013
- border-color: rgba(var(--ax-color-ghost-fore), 0.75);
2014
- }
2015
- .ax-dark .ax-el-ghost-outline.ax-el-interactive:hover + .ax-dropdown-button-marker {
2016
- border-color: rgba(var(--ax-color-ghost-fore), 0.75);
2017
- }
2018
- .ax-dark .ax-el-ghost-outline.ax-state-selected {
2019
- border-color: rgba(var(--ax-color-ghost-fore));
2020
- background-color: rgba(var(--ax-color-ghost));
2021
- color: rgba(var(--ax-color-ghost-fore));
2022
- }
2023
- .ax-dark .ax-el-ghost-outline .ax-ripple {
2024
- background-color: rgba(var(--ax-color-ghost-fore), 0.2) !important;
2025
- }
2026
- .ax-dark .ax-el-ghost-outline ax-loading-spinner .ax-loader {
2027
- border-color: rgba(var(--ax-color-ghost-fore));
2028
- border-bottom-color: transparent;
2029
- }
2030
- .ax-dark .ax-el-ghost-blank.ax-state-selected {
2031
- background-color: rgba(var(--ax-color-ghost));
2032
- color: rgba(var(--ax-color-ghost-fore));
2033
- }
2034
- .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) {
2035
- background-color: rgba(var(--ax-color-ghost), 0.5);
2036
- }
2037
- .ax-dark .ax-el-ghost-blank.ax-el-interactive:active:not(.ax-dark .ax-el-ghost-blank.ax-el-interactive:active.ax-state-selected, .ax-dark .ax-el-ghost-blank.ax-el-interactive:active.ax-state-disabled) {
2038
- background-color: rgba(var(--ax-color-ghost));
2039
- }
2040
- .ax-dark .ax-el-ghost-blank .ax-ripple {
2041
- background-color: rgba(var(--ax-color-ghost-fore), 0.2) !important;
2042
- }
2043
- .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) {
2044
- outline-color: rgba(var(--ax-color-ghost-fore));
2045
- }
2046
- .ax-dark .ax-el-ghost-twotone {
2047
- background-color: rgba(var(--ax-color-ghost), 0.3);
2048
- }
2049
- .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) {
2050
- background-color: rgba(var(--ax-color-ghost), 0.5);
2051
- }
2052
- .ax-dark .ax-el-ghost-twotone.ax-el-interactive:hover + .ax-dropdown-button-marker {
2053
- background-color: rgba(var(--ax-color-ghost), 0.5);
2054
- }
2055
- .ax-dark .ax-el-ghost-twotone.ax-el-interactive:active:not(.ax-dark .ax-el-ghost-twotone.ax-el-interactive:active.ax-state-selected, .ax-dark .ax-el-ghost-twotone.ax-el-interactive:active.ax-state-disabled) {
2056
- background-color: rgba(var(--ax-color-ghost), 0.8);
2057
- }
2058
- .ax-dark .ax-el-ghost-twotone.ax-state-selected {
2059
- background-color: rgba(var(--ax-color-ghost), 0.8);
2060
- color: rgba(var(--ax-color-ghost-fore));
2061
- }
2062
- .ax-dark .ax-el-ghost-twotone .ax-ripple {
2063
- background-color: rgba(var(--ax-color-ghost-fore), 0.2) !important;
2064
- }
2065
- .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) {
2066
- outline-color: rgba(var(--ax-color-ghost-fore));
2067
- }
2068
- .ax-dark .ax-el-ghost-link .ax-ripple {
2069
- background-color: rgba(var(--ax-color-ghost-fore), 0.2) !important;
2070
- }
2071
- .ax-dark .ax-el-ghost-link > button:is(.ax-dark .ax-el-ghost-link > button:focus-visible, .ax-dark .ax-el-ghost-link > button.ax-state-focus) {
2072
- outline-color: rgba(var(--ax-color-ghost-fore));
2073
- }
2074
-
2075
- .ax-drop-down {
2076
- display: contents;
2077
- }
2078
- .ax-drop-down .ax-dropdown-content {
2079
- display: flex;
2080
- flex: 1 1 0%;
2081
- align-items: center;
2082
- overflow-x: auto;
2083
- overflow-y: hidden;
2084
- font-size: 0.875rem;
2085
- line-height: 1.25rem;
2086
- text-transform: capitalize;
2087
- }
2088
- .ax-drop-down .ax-dropdown-content.ax-state-disabled {
2089
- cursor: not-allowed;
2090
- opacity: 0.5;
2091
- }
2092
-
2093
- .ax-overlay-pane {
2094
- margin: 0.25rem 0;
2095
- min-width: 10rem;
2096
- height: fit-content;
2097
- overflow: hidden;
2098
- border-width: 1px;
2099
- border-color: rgba(var(--ax-color-border-default));
2100
- background-color: rgba(var(--ax-color-surface));
2101
- --ax-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
2102
- --ax-shadow-colored: 0 4px 6px -1px var(--ax-shadow-color), 0 2px 4px -2px var(--ax-shadow-color);
2103
- 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);
2104
- border-radius: var(--ax-rounded-border-default);
2105
- }
2106
- @media (min-width: 320px) and (max-width: 640px) {
2107
- .ax-overlay-pane {
2108
- margin: 0;
2109
- }
2110
- }
2111
- .ax-overlay-pane ax-header,
2112
- .ax-overlay-pane ax-footer {
2113
- background-color: rgba(var(--ax-color-surface));
2114
- padding: 0.75rem;
2115
- }
2116
- .ax-overlay-pane.ax-overlay-center {
2117
- height: fit-content;
2118
- width: 80vw;
2119
- max-width: 90vh;
2120
- }
2121
- .ax-overlay-pane.ax-overlay-actionsheet {
2122
- height: auto;
2123
- max-height: 85vh;
2124
- width: 100%;
2125
- background-color: rgba(var(--ax-color-surface));
2126
- border-top-left-radius: var(--ax-rounded-border-default);
2127
- border-top-right-radius: var(--ax-rounded-border-default);
2128
- }
2129
- .ax-overlay-pane.ax-overlay-actionsheet.ax-full {
2130
- height: 95vh;
2131
- max-height: 95vh;
2132
- }
2133
- .ax-overlay-pane.ax-overlay-full {
2134
- width: 100vw;
2135
- height: 100vh;
2136
- }
2137
-
2138
- :root {
2139
- --ax-editor-font-size: 1rem;
2140
- --ax-editor-space-size: 1rem;
2141
- }
2142
-
2143
- .ax-dark .ax-editor-container.ax-look-fill:focus-within {
2144
- box-shadow: 0px 0px 0 2px rgba(var(--ax-color-primary-200));
2145
- }
2146
- .ax-dark .ax-editor-container.ax-look-fill.ax-state-error {
2147
- background-color: rgba(var(--ax-color-danger-200));
2148
- color: rgba(var(--ax-color-danger-fore));
2149
- }
2150
- .ax-dark .ax-editor-container.ax-look-fill.ax-state-error:focus-within {
2151
- box-shadow: 0px 0px 0 2px rgba(var(--ax-color-danger-200));
2152
- }
2153
- .ax-dark .ax-editor-container.ax-look-fill.ax-state-error .ax-input::placeholder {
2154
- color: rgba(var(--ax-color-danger-200));
2155
- }
2156
- .ax-dark .ax-editor-container.ax-look-flat:focus-within {
2157
- border-color: rgba(var(--ax-color-primary-200));
2158
- }
2159
- .ax-dark .ax-editor-container.ax-look-flat.ax-state-error {
2160
- border-color: rgba(var(--ax-color-danger-200));
2161
- }
2162
- .ax-dark .ax-editor-container.ax-look-flat.ax-state-error .ax-input::placeholder {
2163
- color: rgba(var(--ax-color-danger-200));
2164
- }
2165
- .ax-dark .ax-editor-container.ax-look-solid:focus-within, .ax-dark .ax-editor-container.ax-look-outline:focus-within {
2166
- box-shadow: 0px 0px 0 1px rgba(var(--ax-color-primary-200));
2167
- border-color: rgba(var(--ax-color-primary-200));
2168
- }
2169
- .ax-dark .ax-editor-container.ax-look-solid.ax-state-error, .ax-dark .ax-editor-container.ax-look-outline.ax-state-error {
2170
- border-color: rgba(var(--ax-color-danger-200));
2171
- }
2172
- .ax-dark .ax-editor-container.ax-look-solid.ax-state-error:focus-within, .ax-dark .ax-editor-container.ax-look-outline.ax-state-error:focus-within {
2173
- box-shadow: 0px 0px 0 1px rgba(var(--ax-color-danger-200));
2174
- border-color: rgba(var(--ax-color-danger-200));
2175
- }
2176
- .ax-dark .ax-editor-container.ax-look-solid.ax-state-error .ax-input::placeholder, .ax-dark .ax-editor-container.ax-look-outline.ax-state-error .ax-input::placeholder {
2177
- color: rgba(var(--ax-color-danger-200));
2178
- }
2179
-
2180
- .ax-editor-container {
2181
- display: flex;
2182
- height: var(--ax-size-default);
2183
- width: 100%;
2184
- align-items: center;
2185
- overflow: hidden;
2186
- font-size: 0.875rem;
2187
- line-height: 1;
2188
- color: rgba(var(--ax-color-input-surface-fore));
2189
- }
2190
- .ax-editor-container .ax-editor-container {
2191
- border-radius: 0 !important;
2192
- border: 0px !important;
2193
- height: 100% !important;
2194
- }
2195
- .ax-editor-container .ax-editor-container:focus-within {
2196
- box-shadow: none !important;
2197
- }
2198
- .ax-editor-container .ax-editor-container:focus {
2199
- box-shadow: 0px 0px 0 1px rgba(var(--ax-color-primary-500));
2200
- }
2201
- .ax-editor-container.ax-state-disabled {
2202
- opacity: 0.5;
2203
- cursor: not-allowed;
2204
- }
2205
- .ax-editor-container.ax-look-solid, .ax-editor-container.ax-look-outline {
2206
- border-radius: var(--ax-rounded-border-default);
2207
- border-width: 1px;
2208
- border-color: rgba(var(--ax-color-input-border));
2209
- background-color: rgba(var(--ax-color-input-surface));
2210
- }
2211
- .ax-editor-container.ax-look-solid:focus-within, .ax-editor-container.ax-look-outline:focus-within {
2212
- box-shadow: 0px 0px 0 1px rgba(var(--ax-color-primary-500));
2213
- border-color: rgba(var(--ax-color-primary-500));
2214
- }
2215
- .ax-editor-container.ax-look-solid.ax-state-error, .ax-editor-container.ax-look-outline.ax-state-error {
2216
- border-color: rgba(var(--ax-color-danger-500));
2217
- }
2218
- .ax-editor-container.ax-look-solid.ax-state-error:focus-within, .ax-editor-container.ax-look-outline.ax-state-error:focus-within {
2219
- box-shadow: 0px 0px 0 1px rgba(var(--ax-color-danger-500));
2220
- border-color: rgba(var(--ax-color-danger-500));
2221
- }
2222
- .ax-editor-container.ax-look-solid.ax-state-error .ax-input::placeholder, .ax-editor-container.ax-look-outline.ax-state-error .ax-input::placeholder {
2223
- color: rgba(var(--ax-color-danger-500));
2224
- }
2225
- .ax-editor-container.ax-look-flat {
2226
- border-radius: 0px;
2227
- border-bottom-width: 1px;
2228
- border-color: rgba(var(--ax-color-input-border));
2229
- }
2230
- .ax-editor-container.ax-look-flat:focus-within {
2231
- border-color: rgba(var(--ax-color-primary-500));
2232
- }
2233
- .ax-editor-container.ax-look-flat.ax-state-error {
2234
- border-color: rgba(var(--ax-color-danger-500));
2235
- }
2236
- .ax-editor-container.ax-look-flat.ax-state-error .ax-input::placeholder {
2237
- color: rgba(var(--ax-color-danger-500));
2238
- }
2239
- .ax-editor-container.ax-look-outline {
2240
- background-color: transparent !important;
2241
- }
2242
- .ax-editor-container.ax-look-fill {
2243
- border-radius: var(--ax-rounded-border-default);
2244
- background-color: rgba(var(--ax-color-on-surface));
2245
- }
2246
- .ax-editor-container.ax-look-fill:focus-within {
2247
- box-shadow: 0px 0px 0 2px rgba(var(--ax-color-primary-500));
2248
- }
2249
- .ax-editor-container.ax-look-fill.ax-state-error {
2250
- background-color: rgba(var(--ax-color-danger-50));
2251
- color: rgba(var(--ax-color-danger-fore-tint));
2252
- }
2253
- .ax-editor-container.ax-look-fill.ax-state-error:focus-within {
2254
- box-shadow: 0px 0px 0 2px rgba(var(--ax-color-danger-500));
2255
- }
2256
- .ax-editor-container.ax-look-fill.ax-state-error .ax-input::placeholder {
2257
- color: rgba(var(--ax-color-danger-500));
2258
- }
2259
- .ax-editor-container .ax-editor-input {
2260
- height: 100%;
2261
- flex: 1 1 0%;
2262
- }
2263
- .ax-editor-container .ax-editor-input .ax-input {
2264
- height: 100%;
2265
- }
2266
- .ax-editor-container .ax-input {
2267
- padding: 0 calc(var(--ax-editor-font-size) - 4px);
2268
- font-size: var(--ax-editor-font-size);
2269
- line-height: var(--ax-editor-font-size);
2270
- cursor: inherit;
2271
- }
2272
- .ax-editor-container .ax-input::placeholder {
2273
- font-size: inherit;
2274
- font-weight: 400;
2275
- color: rgb(var(--ax-color-input-surface-fore), 0.5);
2276
- }
2277
- .ax-editor-container .ax-input:focus, .ax-editor-container .ax-input:focus-visible, .ax-editor-container .ax-input:focus-within {
2278
- outline: none;
2279
- }
2280
- .ax-editor-container.ax-xs .ax-input {
2281
- padding: 0 calc(var(--ax-editor-space-size) - 8px);
2282
- font-size: calc(var(--ax-editor-font-size) - 4px);
2283
- line-height: 1rem;
2284
- }
2285
- .ax-editor-container.ax-sm .ax-input {
2286
- padding: 0 calc(var(--ax-editor-space-size) - 4px);
2287
- font-size: calc(var(--ax-editor-font-size) - 2px);
2288
- line-height: calc(var(--ax-editor-font-size) - 2px);
2289
- }
2290
- .ax-editor-container.ax-md .ax-input {
2291
- padding: 0 calc(var(--ax-editor-space-size) - 4px);
2292
- font-size: var(--ax-editor-font-size);
2293
- line-height: var(--ax-editor-font-size);
2294
- }
2295
- .ax-editor-container.ax-lg .ax-input {
2296
- padding: 0 var(--ax-editor-space-size);
2297
- font-size: calc(var(--ax-editor-font-size) + 2px);
2298
- line-height: calc(var(--ax-editor-font-size) + 2px);
2299
- }
2300
- .ax-editor-container.ax-xl .ax-input {
2301
- padding: 0 var(--ax-editor-space-size);
2302
- font-size: calc(var(--ax-editor-font-size) + 4px);
2303
- line-height: calc(var(--ax-editor-font-size) + 4px);
2304
- }
2305
- .ax-editor-container .ax-editor-control {
2306
- display: flex;
2307
- height: 100%;
2308
- align-items: center;
2309
- justify-content: center;
2310
- padding-inline-start: 0.5rem;
2311
- font-size: 1.125rem;
2312
- line-height: 1.75rem;
2313
- color: rgba(var(--ax-color-input-surface-fore));
2314
- }
2315
- .ax-editor-container.ax-button-icon {
2316
- padding: 0 0.5rem;
2317
- }
2318
- .ax-editor-container .ax-input,
2319
- .ax-editor-container .ax-text-area {
2320
- text-align: inherit;
2321
- font-family: inherit;
2322
- font-size: inherit;
2323
- line-height: inherit;
2324
- height: 100%;
2325
- width: 100%;
2326
- flex: 1 1 0%;
2327
- background-color: transparent;
2328
- font-weight: 400;
2329
- }
2330
- .ax-editor-container .ax-input:focus,
2331
- .ax-editor-container .ax-text-area:focus {
2332
- box-shadow: none;
2333
- }
2334
- .ax-editor-container .ax-text-area {
2335
- padding: 0.625rem;
2336
- }
2337
- .ax-editor-container > ax-prefix *,
2338
- .ax-editor-container > ax-prefix .ax-button,
2339
- .ax-editor-container > ax-prefix ax-title {
2340
- border-end-start-radius: 0.25rem;
2341
- border-start-start-radius: 0.25rem;
2342
- }
2343
- .ax-editor-container > ax-prefix ax-icon {
2344
- padding-left: 0.75rem;
2345
- padding-right: 0.75rem;
2346
- }
2347
- .ax-editor-container > ax-suffix *,
2348
- .ax-editor-container > ax-suffix .ax-button,
2349
- .ax-editor-container > ax-suffix ax-title {
2350
- border-end-end-radius: 0.25rem;
2351
- border-start-end-radius: 0.25rem;
2352
- }
2353
- .ax-editor-container > ax-prefix, .ax-editor-container > ax-suffix {
2354
- height: 100%;
2355
- }
2356
- .ax-editor-container > ax-prefix + .ax-input, .ax-editor-container > ax-suffix + .ax-input {
2357
- padding-left: 0.375rem !important;
2358
- padding-right: 0.375rem !important;
2359
- }
2360
- .ax-editor-container > ax-prefix *, .ax-editor-container > ax-suffix * {
2361
- display: flex;
2362
- height: 100%;
2363
- align-items: center;
2364
- justify-content: center;
2365
- border-radius: 0px;
2366
- }
2367
- .ax-editor-container > ax-prefix ax-title, .ax-editor-container > ax-suffix ax-title {
2368
- padding-left: 1rem;
2369
- padding-right: 1rem;
2370
- }
2371
- .ax-editor-container > ax-prefix > ax-text, .ax-editor-container > ax-suffix > ax-text {
2372
- display: flex;
2373
- align-items: center;
2374
- justify-content: center;
2375
- background-color: transparent;
2376
- padding-left: 0.5rem;
2377
- padding-right: 0.5rem;
2378
- font-size: 0.875rem;
2379
- line-height: 1.25rem;
2380
- }
2381
- .ax-editor-container .ax-button {
2382
- height: 100% !important;
2383
- border-radius: 0px !important;
2384
- }
2385
- .ax-editor-container .ax-button.ax-button-icon {
2386
- height: 100%;
2387
- width: var(--ax-size-default);
2388
- }
2389
-
2390
- .ax-ripple {
2391
- transform: scale(0);
2392
- animation: ripple 500ms linear;
2393
- position: absolute;
2394
- border-radius: 9999rem !important;
2395
- }
2396
- @keyframes ripple {
2397
- to {
2398
- transform: scale(4);
2399
- opacity: 0;
2400
- }
2401
- }
2402
-
2403
- .ax-general-button {
2404
- display: inline-flex;
2405
- height: var(--ax-size-default);
2406
- cursor: pointer;
2407
- align-items: center;
2408
- justify-content: center;
2409
- border-radius: var(--ax-rounded-border-default);
2410
- padding-left: 1rem;
2411
- padding-right: 1rem;
2412
- font-size: 0.875rem;
2413
- line-height: 1.25rem;
2414
- color: rgb(var(--ax-color-input-surface-fore), 0.75);
2415
- }
2416
- .ax-general-button:hover:not(.ax-general-button:hover:disabled, .ax-state-disabled) {
2417
- color: rgba(var(--ax-color-primary-500), var(--tw-text-opacity));
2418
- }
2419
- .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) {
2420
- color: rgba(var(--ax-color-primary-700), var(--tw-text-opacity));
2421
- }
2422
- .ax-general-button:active:not(.ax-general-button:active:disabled, .ax-state-disabled) {
2423
- color: rgba(var(--ax-color-primary-300), var(--tw-text-opacity));
2424
- }
2425
- .ax-general-button.ax-button-icon {
2426
- padding-left: 0.5rem;
2427
- padding-right: 0.5rem;
2428
- font-size: 100%;
2429
- }
2430
- .ax-general-button.ax-button-icon > button {
2431
- display: flex;
2432
- }
2433
- .ax-general-button.ax-button-rounded {
2434
- border-radius: var(--ax-rounded-border-default);
2435
- }
2436
- .ax-general-button:disabled, .ax-general-button.ax-state-disabled {
2437
- cursor: not-allowed;
2438
- opacity: 0.5;
2439
- }
2440
-
2441
- .ax-clear-button {
2442
- display: inline-flex;
2443
- height: var(--ax-size-default);
2444
- align-items: center;
2445
- justify-content: center;
2446
- margin-left: 0.25rem;
2447
- margin-right: 0.25rem;
2448
- font-size: 1rem;
2449
- line-height: 1.5rem;
2450
- line-height: 1;
2451
- color: rgb(var(--ax-color-text-default), 0.75);
2452
- }
2453
- .ax-clear-button > button {
2454
- display: flex;
2455
- }
2456
- .ax-clear-button:hover:not(.ax-clear-button:hover:disabled, .ax-state-disabled) {
2457
- color: rgb(var(--ax-color-text-default), 0.5);
2458
- }
2459
- .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) {
2460
- color: rgb(var(--ax-color-text-default));
2461
- }
2462
-
2463
- .ax-input {
2464
- font-size: inherit;
2465
- padding: 0px;
2466
- outline-width: 0px;
2467
- }
2468
- .ax-input:focus {
2469
- outline-color: transparent;
2470
- }
2471
-
2472
- .ax-dark .ax-list-item.ax-state-selected {
2473
- background-color: rgba(var(--ax-color-primary-800)) !important;
2474
- color: rgba(var(--ax-color-primary-fore)) !important;
2475
- }
2476
-
2477
- .ax-list {
2478
- display: flex;
2479
- height: 100%;
2480
- flex-direction: column;
2481
- overflow: hidden;
2482
- background-color: rgba(var(--ax-color-surface));
2483
- font-size: 0.875rem;
2484
- line-height: 1.25rem;
2485
- }
2486
- @media (min-width: 768px) {
2487
- .ax-list {
2488
- max-height: 20rem;
2489
- }
2490
- }
2491
- .ax-list ax-header,
2492
- .ax-list ax-footer {
2493
- display: flex;
2494
- align-items: center;
2495
- justify-content: space-between;
2496
- border-color: rgba(var(--ax-color-border-default), var(--tw-border-opacity));
2497
- background-color: rgba(var(--ax-color-surface), var(--tw-bg-opacity));
2498
- }
2499
- .ax-list ax-header {
2500
- border-bottom-width: 1px;
2501
- border-color: rgba(var(--ax-color-border-default), var(--tw-border-opacity));
2502
- padding: 1rem;
2503
- font-size: 1rem;
2504
- line-height: 1.5rem;
2505
- font-weight: 500;
2506
- }
2507
- @media (min-width: 768px) {
2508
- .ax-list ax-header {
2509
- font-size: 1.125rem;
2510
- line-height: 1.75rem;
2511
- }
2512
- }
2513
- .ax-list ax-header ax-prefix,
2514
- .ax-list ax-header ax-suffix {
2515
- display: flex;
2516
- flex-direction: column;
2517
- justify-items: start;
2518
- }
2519
- .ax-list ax-header ax-prefix {
2520
- align-items: flex-start;
2521
- }
2522
- .ax-list ax-header ax-suffix {
2523
- align-items: flex-end;
2524
- }
2525
- .ax-list ax-footer {
2526
- border-top-width: 1px;
2527
- }
2528
- .ax-list .ax-content {
2529
- flex: 1 1 0%;
2530
- overflow-y: auto;
2531
- overflow-x: hidden;
2532
- }
2533
- .ax-list .ax-content.ax-list-items-container {
2534
- height: 100%;
2535
- overflow-y: auto;
2536
- padding-top: 0.5rem;
2537
- padding-bottom: 0.5rem;
2538
- }
2539
- .ax-list .ax-content.ax-list-items-container.ax-vertical {
2540
- display: grid;
2541
- grid-template-columns: repeat(1, minmax(0, 1fr));
2542
- }
2543
- .ax-list .ax-content.ax-list-items-container.ax-vertical.ax-divide {
2544
- border-top-width: 1px;
2545
- border-bottom-width: 1px;
2546
- }
2547
- .ax-list .ax-content.ax-list-items-container.ax-default {
2548
- cursor: pointer;
2549
- }
2550
- .ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item-group > span {
2551
- display: flex;
2552
- align-items: center;
2553
- padding: 0.75rem;
2554
- font-weight: 500;
2555
- }
2556
- .ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item-group > ul {
2557
- padding-left: 0.75rem;
2558
- padding-right: 0.75rem;
2559
- }
2560
- .ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item-group .ax-list-item {
2561
- margin-bottom: 0.25rem;
2562
- border-radius: var(--ax-rounded-border-default);
2563
- }
2564
- .ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item {
2565
- position: relative;
2566
- display: flex;
2567
- height: var(--ax-size-default);
2568
- user-select: none;
2569
- align-items: center;
2570
- justify-content: space-between;
2571
- padding-inline-end: 1rem;
2572
- padding-inline-start: 0.75rem;
2573
- font-size: 1rem;
2574
- line-height: 1.5rem;
2575
- }
2576
- .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 {
2577
- outline-width: 2px;
2578
- outline-offset: 2px;
2579
- }
2580
- .ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item.ax-state-checkbox .ax-checkbox-label {
2581
- margin-inline-start: 0.5rem;
2582
- }
2583
- .ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item.ax-state-selected {
2584
- background-color: rgba(var(--ax-color-primary-500), var(--tw-bg-opacity)) !important;
2585
- color: rgba(var(--ax-color-primary-fore), var(--tw-text-opacity)) !important;
2586
- }
2587
- .ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item.ax-state-disabled {
2588
- cursor: not-allowed;
2589
- opacity: 0.5;
2590
- }
2591
- .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 {
2592
- background-color: rgba(var(--ax-color-on-surface));
2593
- }
2594
- .ax-list .ax-content.ax-list-items-container.ax-default .ax-list-item.ax-state-focus {
2595
- background-color: rgba(var(--ax-color-on-surface));
2596
- }
2597
- .ax-list .ax-content.ax-list-items-container .ax-list-loading-container {
2598
- display: flex;
2599
- justify-content: center;
2600
- padding: 0.5rem;
2601
- }
2602
- .ax-list .ax-search-box-container {
2603
- padding: 0.5rem;
2604
- }
2605
- .ax-list .ax-search-box-container.ax-state-hidden {
2606
- display: none;
2607
- }
2608
-
2609
- .ax-radio {
2610
- margin: 0px;
2611
- height: 1rem;
2612
- min-height: 1rem;
2613
- min-width: 1rem;
2614
- width: 1rem;
2615
- cursor: pointer;
2616
- appearance: none;
2617
- border-radius: 9999px;
2618
- border-width: 1px;
2619
- border-color: rgba(var(--ax-color-input-border));
2620
- background-color: rgba(var(--ax-color-input-surface));
2621
- vertical-align: middle;
2622
- outline: 2px solid transparent;
2623
- outline-offset: 2px;
2624
- }
2625
- .ax-radio:checked {
2626
- border-color: rgba(var(--ax-color-primary-500)) !important;
2627
- background-color: rgba(var(--ax-color-primary-500)) !important;
2628
- background-size: contain;
2629
- background-repeat: no-repeat;
2630
- }
2631
- .ax-radio:checked {
2632
- 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");
2633
- }
2634
- .ax-radio:focus-visible, .ax-radio:focus {
2635
- box-shadow: 0px 0px 0px 2px rgba(var(--ax-color-surface)), 0px 0px 0px 4px rgba(var(--ax-color-primary-500));
2636
- }
2637
- .ax-radio:disabled {
2638
- cursor: not-allowed;
2639
- opacity: 0.5;
2640
- }
2641
-
2642
- .ax-dark .ax-table thead {
2643
- background-color: rgba(var(--ax-color-on-surface));
2644
- }
2645
-
2646
- .ax-table {
2647
- width: 100%;
2648
- border-collapse: collapse;
2649
- border-spacing: 0;
2650
- overflow: hidden;
2651
- border-radius: var(--ax-rounded-border-default);
2652
- border-width: 1px;
2653
- border-color: rgba(var(--ax-color-border-default));
2654
- font-size: 0.875rem;
2655
- line-height: 1.25rem;
2656
- }
2657
- .ax-table td {
2658
- border-bottom-width: 1px;
2659
- border-color: rgba(var(--ax-color-border-default));
2660
- padding-left: 1rem;
2661
- padding-right: 1rem;
2662
- padding-top: 0.75rem;
2663
- padding-bottom: 0.75rem;
2664
- }
2665
- .ax-table thead {
2666
- border-bottom-width: 1px;
2667
- border-color: rgba(var(--ax-color-border-default));
2668
- background-color: rgba(var(--ax-color-on-surface));
2669
- }
2670
- .ax-table thead th {
2671
- padding-left: 1rem;
2672
- padding-right: 1rem;
2673
- padding-top: 0.875rem;
2674
- padding-bottom: 0.875rem;
2675
- text-align: start;
2676
- font-weight: 500;
2677
- text-transform: uppercase;
2678
- }
2679
- .ax-table.ax-table-alternate tbody tr:nth-child(even) {
2680
- background-color: rgba(var(--ax-color-on-surface));
2681
- }
2682
- .ax-table.ax-table-bordered thead th {
2683
- border-top-width: 0px !important;
2684
- }
2685
- .ax-table.ax-table-bordered tbody tr:last-child td {
2686
- border-bottom-width: 0px !important;
2687
- }
2688
- .ax-table.ax-table-bordered tbody tr td:last-child {
2689
- border-bottom-width: 0px !important;
2690
- }
2691
- .ax-table.ax-table-bordered td,
2692
- .ax-table.ax-table-bordered th {
2693
- border-width: 1px;
2694
- border-color: rgba(var(--ax-color-border-default));
2695
- }
2696
- .ax-table.ax-table-bordered td:first-child,
2697
- .ax-table.ax-table-bordered th:first-child {
2698
- border-inline-start-width: 0px;
2699
- }
2700
- .ax-table.ax-table-bordered td:last-child,
2701
- .ax-table.ax-table-bordered th:last-child {
2702
- border-inline-end-width: 0px;
2703
- }
2704
- @media screen and (max-width: 640px) {
2705
- .ax-table.ax-table-responsive {
2706
- display: block;
2707
- overflow-wrap: break-word;
2708
- border-width: 0px;
2709
- }
2710
- .ax-table.ax-table-responsive thead {
2711
- position: absolute;
2712
- inset-inline-start: -100%;
2713
- top: -100%;
2714
- }
2715
- .ax-table.ax-table-responsive td {
2716
- float: inline-start;
2717
- clear: both;
2718
- box-sizing: border-box;
2719
- display: block;
2720
- width: 100%;
2721
- padding-left: 0.625rem;
2722
- padding-right: 0.625rem;
2723
- padding-top: 0.375rem;
2724
- padding-bottom: 0.375rem;
2725
- }
2726
- .ax-table.ax-table-responsive td:last-child {
2727
- border-width: 0px;
2728
- }
2729
- .ax-table.ax-table-responsive td:before {
2730
- content: attr(data-label);
2731
- display: block;
2732
- font-weight: 700;
2733
- }
2734
- .ax-table.ax-table-responsive tr {
2735
- border-width: 1px;
2736
- border-color: rgba(var(--ax-color-border-default));
2737
- }
2738
- .ax-table.ax-table-responsive tr,
2739
- .ax-table.ax-table-responsive tbody {
2740
- float: inline-start;
2741
- margin-bottom: 0.625rem;
2742
- width: 100%;
2743
- }
2744
- }
2745
-
2746
- [class*=" ax-icon-"],
2747
- [class^=ax-icon-] {
2748
- vertical-align: middle;
2749
- }
2750
-
2751
- .ax-bold {
2752
- font-weight: bold !important;
2753
- }
2754
-
2755
- .ax-fieldset {
2756
- border-radius: var(--ax-rounded-border-default);
2757
- border-width: 1px;
2758
- border-color: rgba(var(--ax-color-input-border));
2759
- padding: 0.75rem;
2760
- }
2761
- .ax-fieldset legend {
2762
- padding-left: 0.25rem;
2763
- padding-right: 0.25rem;
2764
- font-size: 0.875rem;
2765
- line-height: 1.25rem;
2766
- }
2767
-
2768
- .ax-card {
2769
- border-radius: var(--ax-rounded-border-default);
2770
- border-width: 1px;
2771
- border-color: rgba(var(--ax-color-input-border));
2772
- background-color: rgba(var(--ax-color-surface));
2773
- }
2774
-
2775
- .ax-drop-zone > input {
2776
- position: absolute;
2777
- height: 100%;
2778
- width: 100%;
2779
- cursor: pointer;
2780
- opacity: 0;
2781
- }
2782
-
2783
- .ax-uploader-overlay-state {
2784
- border-radius: inherit;
2785
- pointer-events: none;
2786
- position: absolute;
2787
- inset-inline-start: 0px;
2788
- top: 0px;
2789
- z-index: 10;
2790
- display: flex;
2791
- height: 100%;
2792
- width: 100%;
2793
- cursor: pointer;
2794
- flex-direction: column;
2795
- align-items: center;
2796
- justify-content: center;
2797
- gap: 0.5rem;
2798
- background-color: rgba(var(--ax-color-primary-200), 0.75);
2799
- font-size: 0.875rem;
2800
- line-height: 1.25rem;
2801
- color: rgba(var(--ax-color-primary-fore-tint));
2802
- outline-style: dashed;
2803
- outline-offset: -4px;
2804
- transition-property: all;
2805
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2806
- transition-duration: 150ms;
2807
- }
2808
-
2809
- .ax-select-none,
2810
- .ax-select-none * {
2811
- user-select: none !important;
2812
- }
2813
-
2814
- .ax-dark .ax-uploader-overlay-state {
2815
- background-color: rgba(var(--ax-color-primary-800), 0.75);
2816
- color: rgba(var(--ax-color-primary-fore));
2817
- outline-color: rgba(var(--ax-color-primary-fore));
2818
- }
2819
-
2820
- .ax-xs {
2821
- --ax-size-default: calc(var(--ax-size-base) - 0.75rem);
2822
- }
2823
-
2824
- .ax-sm {
2825
- --ax-size-default: calc(var(--ax-size-base) - 0.5rem);
2826
- }
2827
-
2828
- .ax-md {
2829
- --ax-size-default: var(--ax-size-base);
2830
- }
2831
-
2832
- .ax-lg {
2833
- --ax-size-default: calc(var(--ax-size-base) + 0.5rem);
2834
- }
2835
-
2836
- .ax-xl {
2837
- --ax-size-default: calc(var(--ax-size-base) + 1rem);
2838
- }
2839
-
2840
- .ax-placeholder {
2841
- color: rgba(var(--ax-color-input-surface-fore), 0.5);
2842
- font-weight: 500;
2843
- }