@acorex/styles 7.21.0 → 7.21.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/index.css CHANGED
@@ -437,117 +437,14 @@ body {
437
437
  border-color: rgba(var(--ax-color-primary-fore));
438
438
  border-bottom-color: transparent;
439
439
  }
440
- .ax-el-primary-solid > button:is(.ax-el-primary-solid > button:focus-visible, .ax-el-primary-solid > button.ax-state-focus) {
440
+ .ax-el-primary-solid:is(.ax-el-primary-solid:focus-visible, .ax-el-primary-solid.ax-state-focus) {
441
441
  outline-color: rgba(var(--ax-color-primary-500));
442
442
  }
443
-
444
- .ax-el-ghost-solid {
445
- border-width: 1px;
446
- border-color: rgba(var(--ax-color-border-default));
447
- background-color: rgba(var(--ax-color-ghost));
448
- color: rgba(var(--ax-color-ghost-fore));
449
- --ax-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
450
- --ax-shadow-colored: 0 1px 2px 0 var(--ax-shadow-color);
451
- 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);
452
- }
453
- .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) {
454
- border-color: rgba(var(--ax-color-primary-500));
455
- color: rgba(var(--ax-color-primary-500));
456
- }
457
- .ax-el-ghost-solid.ax-el-interactive:active {
458
- border-color: rgba(var(--ax-color-primary-700));
459
- color: rgba(var(--ax-color-primary-700));
460
- }
461
- .ax-el-ghost-solid.ax-state-selected {
462
- border-color: rgba(var(--ax-color-primary-500));
463
- background-color: rgba(var(--ax-color-primary-500));
464
- color: rgba(var(--ax-color-primary-fore));
465
- }
466
- .ax-el-ghost-solid .ax-ripple {
467
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
468
- }
469
- .ax-el-ghost-solid ax-loading-spinner .ax-loader {
470
- border-color: rgba(var(--ax-color-ghost-fore));
471
- border-bottom-color: transparent;
472
- }
473
-
474
- .ax-el-ghost-outline {
475
- border-width: 1px;
476
- border-color: rgba(var(--ax-color-border-default));
477
- background-color: transparent;
478
- color: rgba(var(--ax-color-ghost-fore));
479
- }
480
- .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) {
481
- border-color: rgba(var(--ax-color-primary-500));
482
- color: rgba(var(--ax-color-primary-500));
483
- }
484
- .ax-el-ghost-outline.ax-state-selected {
485
- border-color: rgba(var(--ax-color-primary-500));
486
- color: rgba(var(--ax-color-primary-fore));
487
- }
488
- .ax-el-ghost-outline .ax-ripple {
489
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
490
- }
491
- .ax-el-ghost-outline ax-loading-spinner .ax-loader {
492
- border-color: rgba(var(--ax-color-ghost-fore));
493
- border-bottom-color: transparent;
494
- }
495
-
496
- .ax-el-ghost-blank {
497
- border-style: none;
498
- background-color: transparent;
499
- color: rgba(var(--ax-color-ghost-fore));
500
- }
501
- .ax-el-ghost-blank.ax-state-selected {
502
- background-color: rgba(var(--ax-color-primary-500));
503
- color: rgba(var(--ax-color-primary-fore));
504
- }
505
- .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) {
506
- border-color: rgba(var(--ax-color-primary-700));
507
- color: rgba(var(--ax-color-primary-700));
508
- }
509
- .ax-el-ghost-blank.ax-el-interactive:active {
510
- border-color: rgba(var(--ax-color-primary-800));
511
- color: rgba(var(--ax-color-primary-800));
512
- }
513
- .ax-el-ghost-blank .ax-ripple {
514
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
515
- }
516
- .ax-el-ghost-blank ax-loading-spinner .ax-loader {
517
- border-color: rgba(var(--ax-color-ghost-fore));
518
- border-bottom-color: transparent;
519
- }
520
- .ax-el-ghost-blank > button:is(.ax-el-ghost-blank > button:focus-visible, .ax-el-ghost-blank > button.ax-state-focus) {
443
+ .ax-el-primary-solid > button:is(.ax-el-primary-solid > button:focus-visible, .ax-el-primary-solid > button.ax-state-focus) {
521
444
  outline-color: rgba(var(--ax-color-primary-500));
522
445
  }
523
-
524
- .ax-el-ghost-twotone {
525
- border-color: transparent;
526
- background-color: rgba(var(--ax-color-ghost-fore), 0.05);
527
- color: rgba(var(--ax-color-ghost-fore));
528
- }
529
- .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) {
530
- background-color: rgba(var(--ax-color-primary-200));
531
- color: rgba(var(--ax-color-primary-fore-tint));
532
- }
533
- .ax-el-ghost-twotone.ax-el-interactive:active {
534
- background-color: rgba(var(--ax-color-primary-300));
535
- color: rgba(var(--ax-color-primary-fore-tint));
536
- }
537
- .ax-el-ghost-twotone.ax-state-selected {
538
- border-color: rgba(var(--ax-color-primary-300));
539
- background-color: rgba(var(--ax-color-primary-400));
540
- color: rgba(var(--ax-color-primary-fore-tint));
541
- }
542
- .ax-el-ghost-twotone .ax-ripple {
543
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
544
- }
545
- .ax-el-ghost-twotone ax-loading-spinner .ax-loader {
546
- border-color: rgba(var(--ax-color-ghost-fore));
547
- border-bottom-color: transparent;
548
- }
549
- .ax-el-ghost-twotone > button:is(.ax-el-ghost-twotone > button:focus-visible, .ax-el-ghost-twotone > button.ax-state-focus) {
550
- outline-color: rgba(var(--ax-color-primary-500));
446
+ .ax-el-primary-solid.ax-dropdown-button-marker {
447
+ border-inline-start-color: rgba(var(--ax-color-primary-600));
551
448
  }
552
449
 
553
450
  .ax-el-primary-twotone {
@@ -568,117 +465,14 @@ body {
568
465
  border-color: rgba(var(--ax-color-primary-fore-tint));
569
466
  border-bottom-color: transparent;
570
467
  }
571
- .ax-el-primary-twotone > button:is(.ax-el-primary-twotone > button:focus-visible, .ax-el-primary-twotone > button.ax-state-focus) {
468
+ .ax-el-primary-twotone:is(.ax-el-primary-twotone:focus-visible, .ax-el-primary-twotone.ax-state-focus) {
572
469
  outline-color: rgba(var(--ax-color-primary-500));
573
470
  }
574
-
575
- .ax-el-ghost-solid {
576
- border-width: 1px;
577
- border-color: rgba(var(--ax-color-border-default));
578
- background-color: rgba(var(--ax-color-ghost));
579
- color: rgba(var(--ax-color-ghost-fore));
580
- --ax-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
581
- --ax-shadow-colored: 0 1px 2px 0 var(--ax-shadow-color);
582
- 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);
583
- }
584
- .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) {
585
- border-color: rgba(var(--ax-color-primary-500));
586
- color: rgba(var(--ax-color-primary-500));
587
- }
588
- .ax-el-ghost-solid.ax-el-interactive:active {
589
- border-color: rgba(var(--ax-color-primary-700));
590
- color: rgba(var(--ax-color-primary-700));
591
- }
592
- .ax-el-ghost-solid.ax-state-selected {
593
- border-color: rgba(var(--ax-color-primary-500));
594
- background-color: rgba(var(--ax-color-primary-500));
595
- color: rgba(var(--ax-color-primary-fore));
596
- }
597
- .ax-el-ghost-solid .ax-ripple {
598
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
599
- }
600
- .ax-el-ghost-solid ax-loading-spinner .ax-loader {
601
- border-color: rgba(var(--ax-color-ghost-fore));
602
- border-bottom-color: transparent;
603
- }
604
-
605
- .ax-el-ghost-outline {
606
- border-width: 1px;
607
- border-color: rgba(var(--ax-color-border-default));
608
- background-color: transparent;
609
- color: rgba(var(--ax-color-ghost-fore));
610
- }
611
- .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) {
612
- border-color: rgba(var(--ax-color-primary-500));
613
- color: rgba(var(--ax-color-primary-500));
614
- }
615
- .ax-el-ghost-outline.ax-state-selected {
616
- border-color: rgba(var(--ax-color-primary-500));
617
- color: rgba(var(--ax-color-primary-fore));
618
- }
619
- .ax-el-ghost-outline .ax-ripple {
620
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
621
- }
622
- .ax-el-ghost-outline ax-loading-spinner .ax-loader {
623
- border-color: rgba(var(--ax-color-ghost-fore));
624
- border-bottom-color: transparent;
625
- }
626
-
627
- .ax-el-ghost-blank {
628
- border-style: none;
629
- background-color: transparent;
630
- color: rgba(var(--ax-color-ghost-fore));
631
- }
632
- .ax-el-ghost-blank.ax-state-selected {
633
- background-color: rgba(var(--ax-color-primary-500));
634
- color: rgba(var(--ax-color-primary-fore));
635
- }
636
- .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) {
637
- border-color: rgba(var(--ax-color-primary-700));
638
- color: rgba(var(--ax-color-primary-700));
639
- }
640
- .ax-el-ghost-blank.ax-el-interactive:active {
641
- border-color: rgba(var(--ax-color-primary-800));
642
- color: rgba(var(--ax-color-primary-800));
643
- }
644
- .ax-el-ghost-blank .ax-ripple {
645
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
646
- }
647
- .ax-el-ghost-blank ax-loading-spinner .ax-loader {
648
- border-color: rgba(var(--ax-color-ghost-fore));
649
- border-bottom-color: transparent;
650
- }
651
- .ax-el-ghost-blank > button:is(.ax-el-ghost-blank > button:focus-visible, .ax-el-ghost-blank > button.ax-state-focus) {
471
+ .ax-el-primary-twotone > button:is(.ax-el-primary-twotone > button:focus-visible, .ax-el-primary-twotone > button.ax-state-focus) {
652
472
  outline-color: rgba(var(--ax-color-primary-500));
653
473
  }
654
-
655
- .ax-el-ghost-twotone {
656
- border-color: transparent;
657
- background-color: rgba(var(--ax-color-ghost-fore), 0.05);
658
- color: rgba(var(--ax-color-ghost-fore));
659
- }
660
- .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) {
661
- background-color: rgba(var(--ax-color-primary-200));
662
- color: rgba(var(--ax-color-primary-fore-tint));
663
- }
664
- .ax-el-ghost-twotone.ax-el-interactive:active {
665
- background-color: rgba(var(--ax-color-primary-300));
666
- color: rgba(var(--ax-color-primary-fore-tint));
667
- }
668
- .ax-el-ghost-twotone.ax-state-selected {
669
- border-color: rgba(var(--ax-color-primary-300));
670
- background-color: rgba(var(--ax-color-primary-400));
671
- color: rgba(var(--ax-color-primary-fore-tint));
672
- }
673
- .ax-el-ghost-twotone .ax-ripple {
674
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
675
- }
676
- .ax-el-ghost-twotone ax-loading-spinner .ax-loader {
677
- border-color: rgba(var(--ax-color-ghost-fore));
678
- border-bottom-color: transparent;
679
- }
680
- .ax-el-ghost-twotone > button:is(.ax-el-ghost-twotone > button:focus-visible, .ax-el-ghost-twotone > button.ax-state-focus) {
681
- outline-color: rgba(var(--ax-color-primary-500));
474
+ .ax-el-primary-twotone.ax-dropdown-button-marker {
475
+ border-inline-start-color: rgba(var(--ax-color-primary-50));
682
476
  }
683
477
 
684
478
  .ax-el-primary-outline {
@@ -703,250 +497,47 @@ body {
703
497
  border-color: rgba(var(--ax-color-primary-500));
704
498
  border-bottom-color: transparent;
705
499
  }
500
+ .ax-el-primary-outline:is(.ax-el-primary-outline:focus-visible, .ax-el-primary-outline.ax-state-focus) {
501
+ outline-offset: -2px;
502
+ outline-color: rgba(var(--ax-color-primary-500));
503
+ color: rgba(var(--ax-color-primary-fore-tint));
504
+ }
706
505
  .ax-el-primary-outline > button:is(.ax-el-primary-outline > button:focus-visible, .ax-el-primary-outline > button.ax-state-focus) {
707
506
  outline-offset: -2px;
708
507
  outline-color: rgba(var(--ax-color-primary-500));
709
508
  color: rgba(var(--ax-color-primary-fore-tint));
710
509
  }
711
-
712
- .ax-el-ghost-solid {
713
- border-width: 1px;
714
- border-color: rgba(var(--ax-color-border-default));
715
- background-color: rgba(var(--ax-color-ghost));
716
- color: rgba(var(--ax-color-ghost-fore));
717
- --ax-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
718
- --ax-shadow-colored: 0 1px 2px 0 var(--ax-shadow-color);
719
- 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);
510
+ .ax-el-primary-outline.ax-dropdown-button-marker {
511
+ border-inline-start-color: rgba(var(--ax-color-primary-500));
720
512
  }
721
- .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) {
722
- border-color: rgba(var(--ax-color-primary-500));
513
+
514
+ .ax-el-primary-blank {
723
515
  color: rgba(var(--ax-color-primary-500));
724
516
  }
725
- .ax-el-ghost-solid.ax-el-interactive:active {
726
- border-color: rgba(var(--ax-color-primary-700));
727
- color: rgba(var(--ax-color-primary-700));
517
+ .ax-el-primary-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
518
+ color: rgba(var(--ax-color-primary-fore-tint));
728
519
  }
729
- .ax-el-ghost-solid.ax-state-selected {
730
- border-color: rgba(var(--ax-color-primary-500));
731
- background-color: rgba(var(--ax-color-primary-500));
520
+ .ax-el-primary-blank.ax-state-selected {
521
+ background-color: rgba(var(--ax-color-primary-700));
732
522
  color: rgba(var(--ax-color-primary-fore));
733
523
  }
734
- .ax-el-ghost-solid .ax-ripple {
735
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
524
+ .ax-el-primary-blank .ax-ripple {
525
+ background-color: rgba(var(--ax-color-primary-500), 0.3);
736
526
  }
737
- .ax-el-ghost-solid ax-loading-spinner .ax-loader {
738
- border-color: rgba(var(--ax-color-ghost-fore));
527
+ .ax-el-primary-blank ax-loading-spinner .ax-loader {
528
+ border-color: rgba(var(--ax-color-primary-500));
739
529
  border-bottom-color: transparent;
740
530
  }
741
-
742
- .ax-el-ghost-outline {
743
- border-width: 1px;
744
- border-color: rgba(var(--ax-color-border-default));
745
- background-color: transparent;
746
- color: rgba(var(--ax-color-ghost-fore));
747
- }
748
- .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) {
749
- border-color: rgba(var(--ax-color-primary-500));
750
- color: rgba(var(--ax-color-primary-500));
751
- }
752
- .ax-el-ghost-outline.ax-state-selected {
753
- border-color: rgba(var(--ax-color-primary-500));
754
- color: rgba(var(--ax-color-primary-fore));
755
- }
756
- .ax-el-ghost-outline .ax-ripple {
757
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
758
- }
759
- .ax-el-ghost-outline ax-loading-spinner .ax-loader {
760
- border-color: rgba(var(--ax-color-ghost-fore));
761
- border-bottom-color: transparent;
762
- }
763
-
764
- .ax-el-ghost-blank {
765
- border-style: none;
766
- background-color: transparent;
767
- color: rgba(var(--ax-color-ghost-fore));
768
- }
769
- .ax-el-ghost-blank.ax-state-selected {
770
- background-color: rgba(var(--ax-color-primary-500));
771
- color: rgba(var(--ax-color-primary-fore));
772
- }
773
- .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) {
774
- border-color: rgba(var(--ax-color-primary-700));
775
- color: rgba(var(--ax-color-primary-700));
776
- }
777
- .ax-el-ghost-blank.ax-el-interactive:active {
778
- border-color: rgba(var(--ax-color-primary-800));
779
- color: rgba(var(--ax-color-primary-800));
780
- }
781
- .ax-el-ghost-blank .ax-ripple {
782
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
783
- }
784
- .ax-el-ghost-blank ax-loading-spinner .ax-loader {
785
- border-color: rgba(var(--ax-color-ghost-fore));
786
- border-bottom-color: transparent;
787
- }
788
- .ax-el-ghost-blank > button:is(.ax-el-ghost-blank > button:focus-visible, .ax-el-ghost-blank > button.ax-state-focus) {
789
- outline-color: rgba(var(--ax-color-primary-500));
790
- }
791
-
792
- .ax-el-ghost-twotone {
793
- border-color: transparent;
794
- background-color: rgba(var(--ax-color-ghost-fore), 0.05);
795
- color: rgba(var(--ax-color-ghost-fore));
796
- }
797
- .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) {
798
- background-color: rgba(var(--ax-color-primary-200));
799
- color: rgba(var(--ax-color-primary-fore-tint));
800
- }
801
- .ax-el-ghost-twotone.ax-el-interactive:active {
802
- background-color: rgba(var(--ax-color-primary-300));
803
- color: rgba(var(--ax-color-primary-fore-tint));
804
- }
805
- .ax-el-ghost-twotone.ax-state-selected {
806
- border-color: rgba(var(--ax-color-primary-300));
807
- background-color: rgba(var(--ax-color-primary-400));
808
- color: rgba(var(--ax-color-primary-fore-tint));
809
- }
810
- .ax-el-ghost-twotone .ax-ripple {
811
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
812
- }
813
- .ax-el-ghost-twotone ax-loading-spinner .ax-loader {
814
- border-color: rgba(var(--ax-color-ghost-fore));
815
- border-bottom-color: transparent;
816
- }
817
- .ax-el-ghost-twotone > button:is(.ax-el-ghost-twotone > button:focus-visible, .ax-el-ghost-twotone > button.ax-state-focus) {
818
- outline-color: rgba(var(--ax-color-primary-500));
819
- }
820
-
821
- .ax-el-primary-blank {
822
- color: rgba(var(--ax-color-primary-500));
823
- }
824
- .ax-el-primary-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
825
- color: rgba(var(--ax-color-primary-fore-tint));
826
- }
827
- .ax-el-primary-blank.ax-state-selected {
828
- background-color: rgba(var(--ax-color-primary-700));
829
- color: rgba(var(--ax-color-primary-fore));
830
- }
831
- .ax-el-primary-blank .ax-ripple {
832
- background-color: rgba(var(--ax-color-primary-500), 0.3);
833
- }
834
- .ax-el-primary-blank ax-loading-spinner .ax-loader {
835
- border-color: rgba(var(--ax-color-primary-500));
836
- border-bottom-color: transparent;
531
+ .ax-el-primary-blank:is(.ax-el-primary-blank:focus-visible, .ax-el-primary-blank.ax-state-focus) {
532
+ outline-color: rgba(var(--ax-color-primary-300));
533
+ outline-offset: 0;
837
534
  }
838
535
  .ax-el-primary-blank > button:is(.ax-el-primary-blank > button:focus-visible, .ax-el-primary-blank > button.ax-state-focus) {
839
536
  outline-color: rgba(var(--ax-color-primary-300));
840
537
  outline-offset: 0;
841
538
  }
842
-
843
- .ax-el-ghost-solid {
844
- border-width: 1px;
845
- border-color: rgba(var(--ax-color-border-default));
846
- background-color: rgba(var(--ax-color-ghost));
847
- color: rgba(var(--ax-color-ghost-fore));
848
- --ax-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
849
- --ax-shadow-colored: 0 1px 2px 0 var(--ax-shadow-color);
850
- 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);
851
- }
852
- .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) {
853
- border-color: rgba(var(--ax-color-primary-500));
854
- color: rgba(var(--ax-color-primary-500));
855
- }
856
- .ax-el-ghost-solid.ax-el-interactive:active {
857
- border-color: rgba(var(--ax-color-primary-700));
858
- color: rgba(var(--ax-color-primary-700));
859
- }
860
- .ax-el-ghost-solid.ax-state-selected {
861
- border-color: rgba(var(--ax-color-primary-500));
862
- background-color: rgba(var(--ax-color-primary-500));
863
- color: rgba(var(--ax-color-primary-fore));
864
- }
865
- .ax-el-ghost-solid .ax-ripple {
866
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
867
- }
868
- .ax-el-ghost-solid ax-loading-spinner .ax-loader {
869
- border-color: rgba(var(--ax-color-ghost-fore));
870
- border-bottom-color: transparent;
871
- }
872
-
873
- .ax-el-ghost-outline {
874
- border-width: 1px;
875
- border-color: rgba(var(--ax-color-border-default));
876
- background-color: transparent;
877
- color: rgba(var(--ax-color-ghost-fore));
878
- }
879
- .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) {
880
- border-color: rgba(var(--ax-color-primary-500));
881
- color: rgba(var(--ax-color-primary-500));
882
- }
883
- .ax-el-ghost-outline.ax-state-selected {
884
- border-color: rgba(var(--ax-color-primary-500));
885
- color: rgba(var(--ax-color-primary-fore));
886
- }
887
- .ax-el-ghost-outline .ax-ripple {
888
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
889
- }
890
- .ax-el-ghost-outline ax-loading-spinner .ax-loader {
891
- border-color: rgba(var(--ax-color-ghost-fore));
892
- border-bottom-color: transparent;
893
- }
894
-
895
- .ax-el-ghost-blank {
896
- border-style: none;
897
- background-color: transparent;
898
- color: rgba(var(--ax-color-ghost-fore));
899
- }
900
- .ax-el-ghost-blank.ax-state-selected {
901
- background-color: rgba(var(--ax-color-primary-500));
902
- color: rgba(var(--ax-color-primary-fore));
903
- }
904
- .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) {
905
- border-color: rgba(var(--ax-color-primary-700));
906
- color: rgba(var(--ax-color-primary-700));
907
- }
908
- .ax-el-ghost-blank.ax-el-interactive:active {
909
- border-color: rgba(var(--ax-color-primary-800));
910
- color: rgba(var(--ax-color-primary-800));
911
- }
912
- .ax-el-ghost-blank .ax-ripple {
913
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
914
- }
915
- .ax-el-ghost-blank ax-loading-spinner .ax-loader {
916
- border-color: rgba(var(--ax-color-ghost-fore));
917
- border-bottom-color: transparent;
918
- }
919
- .ax-el-ghost-blank > button:is(.ax-el-ghost-blank > button:focus-visible, .ax-el-ghost-blank > button.ax-state-focus) {
920
- outline-color: rgba(var(--ax-color-primary-500));
921
- }
922
-
923
- .ax-el-ghost-twotone {
924
- border-color: transparent;
925
- background-color: rgba(var(--ax-color-ghost-fore), 0.05);
926
- color: rgba(var(--ax-color-ghost-fore));
927
- }
928
- .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) {
929
- background-color: rgba(var(--ax-color-primary-200));
930
- color: rgba(var(--ax-color-primary-fore-tint));
931
- }
932
- .ax-el-ghost-twotone.ax-el-interactive:active {
933
- background-color: rgba(var(--ax-color-primary-300));
934
- color: rgba(var(--ax-color-primary-fore-tint));
935
- }
936
- .ax-el-ghost-twotone.ax-state-selected {
937
- border-color: rgba(var(--ax-color-primary-300));
938
- background-color: rgba(var(--ax-color-primary-400));
939
- color: rgba(var(--ax-color-primary-fore-tint));
940
- }
941
- .ax-el-ghost-twotone .ax-ripple {
942
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
943
- }
944
- .ax-el-ghost-twotone ax-loading-spinner .ax-loader {
945
- border-color: rgba(var(--ax-color-ghost-fore));
946
- border-bottom-color: transparent;
947
- }
948
- .ax-el-ghost-twotone > button:is(.ax-el-ghost-twotone > button:focus-visible, .ax-el-ghost-twotone > button.ax-state-focus) {
949
- outline-color: rgba(var(--ax-color-primary-500));
539
+ .ax-el-primary-blank.ax-dropdown-button-marker {
540
+ border-inline-start-color: transparent;
950
541
  }
951
542
 
952
543
  .ax-el-secondary-solid {
@@ -967,248 +558,42 @@ body {
967
558
  border-color: rgba(var(--ax-color-secondary-fore));
968
559
  border-bottom-color: transparent;
969
560
  }
561
+ .ax-el-secondary-solid:is(.ax-el-secondary-solid:focus-visible, .ax-el-secondary-solid.ax-state-focus) {
562
+ outline-color: rgba(var(--ax-color-secondary-500));
563
+ }
970
564
  .ax-el-secondary-solid > button:is(.ax-el-secondary-solid > button:focus-visible, .ax-el-secondary-solid > button.ax-state-focus) {
971
565
  outline-color: rgba(var(--ax-color-secondary-500));
972
566
  }
973
-
974
- .ax-el-ghost-solid {
975
- border-width: 1px;
976
- border-color: rgba(var(--ax-color-border-default));
977
- background-color: rgba(var(--ax-color-ghost));
978
- color: rgba(var(--ax-color-ghost-fore));
979
- --ax-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
980
- --ax-shadow-colored: 0 1px 2px 0 var(--ax-shadow-color);
981
- 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);
567
+ .ax-el-secondary-solid.ax-dropdown-button-marker {
568
+ border-inline-start-color: rgba(var(--ax-color-secondary-600));
982
569
  }
983
- .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) {
984
- border-color: rgba(var(--ax-color-primary-500));
985
- color: rgba(var(--ax-color-primary-500));
570
+
571
+ .ax-el-secondary-twotone {
572
+ background-color: rgba(var(--ax-color-secondary-100));
573
+ color: rgba(var(--ax-color-secondary-fore-tint));
574
+ border-color: rgba(var(--ax-color-secondary-100));
986
575
  }
987
- .ax-el-ghost-solid.ax-el-interactive:active {
988
- border-color: rgba(var(--ax-color-primary-700));
989
- color: rgba(var(--ax-color-primary-700));
576
+ .ax-el-secondary-twotone.ax-el-interactive:hover:not(.ax-state-disabled) {
577
+ background-color: rgba(var(--ax-color-secondary-200));
990
578
  }
991
- .ax-el-ghost-solid.ax-state-selected {
992
- border-color: rgba(var(--ax-color-primary-500));
993
- background-color: rgba(var(--ax-color-primary-500));
994
- color: rgba(var(--ax-color-primary-fore));
579
+ .ax-el-secondary-twotone.ax-state-selected {
580
+ background-color: rgba(var(--ax-color-secondary-300));
995
581
  }
996
- .ax-el-ghost-solid .ax-ripple {
997
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
582
+ .ax-el-secondary-twotone .ax-ripple {
583
+ background-color: rgba(var(--ax-color-secondary-500), 0.3) !important;
998
584
  }
999
- .ax-el-ghost-solid ax-loading-spinner .ax-loader {
1000
- border-color: rgba(var(--ax-color-ghost-fore));
585
+ .ax-el-secondary-twotone ax-loading-spinner .ax-loader {
586
+ border-color: rgba(var(--ax-color-secondary-fore-tint));
1001
587
  border-bottom-color: transparent;
1002
588
  }
1003
-
1004
- .ax-el-ghost-outline {
1005
- border-width: 1px;
1006
- border-color: rgba(var(--ax-color-border-default));
1007
- background-color: transparent;
1008
- color: rgba(var(--ax-color-ghost-fore));
589
+ .ax-el-secondary-twotone:is(.ax-el-secondary-twotone:focus-visible, .ax-el-secondary-twotone.ax-state-focus) {
590
+ outline-color: rgba(var(--ax-color-secondary-500));
1009
591
  }
1010
- .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) {
1011
- border-color: rgba(var(--ax-color-primary-500));
1012
- color: rgba(var(--ax-color-primary-500));
592
+ .ax-el-secondary-twotone > button:is(.ax-el-secondary-twotone > button:focus-visible, .ax-el-secondary-twotone > button.ax-state-focus) {
593
+ outline-color: rgba(var(--ax-color-secondary-500));
1013
594
  }
1014
- .ax-el-ghost-outline.ax-state-selected {
1015
- border-color: rgba(var(--ax-color-primary-500));
1016
- color: rgba(var(--ax-color-primary-fore));
1017
- }
1018
- .ax-el-ghost-outline .ax-ripple {
1019
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
1020
- }
1021
- .ax-el-ghost-outline ax-loading-spinner .ax-loader {
1022
- border-color: rgba(var(--ax-color-ghost-fore));
1023
- border-bottom-color: transparent;
1024
- }
1025
-
1026
- .ax-el-ghost-blank {
1027
- border-style: none;
1028
- background-color: transparent;
1029
- color: rgba(var(--ax-color-ghost-fore));
1030
- }
1031
- .ax-el-ghost-blank.ax-state-selected {
1032
- background-color: rgba(var(--ax-color-primary-500));
1033
- color: rgba(var(--ax-color-primary-fore));
1034
- }
1035
- .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) {
1036
- border-color: rgba(var(--ax-color-primary-700));
1037
- color: rgba(var(--ax-color-primary-700));
1038
- }
1039
- .ax-el-ghost-blank.ax-el-interactive:active {
1040
- border-color: rgba(var(--ax-color-primary-800));
1041
- color: rgba(var(--ax-color-primary-800));
1042
- }
1043
- .ax-el-ghost-blank .ax-ripple {
1044
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
1045
- }
1046
- .ax-el-ghost-blank ax-loading-spinner .ax-loader {
1047
- border-color: rgba(var(--ax-color-ghost-fore));
1048
- border-bottom-color: transparent;
1049
- }
1050
- .ax-el-ghost-blank > button:is(.ax-el-ghost-blank > button:focus-visible, .ax-el-ghost-blank > button.ax-state-focus) {
1051
- outline-color: rgba(var(--ax-color-primary-500));
1052
- }
1053
-
1054
- .ax-el-ghost-twotone {
1055
- border-color: transparent;
1056
- background-color: rgba(var(--ax-color-ghost-fore), 0.05);
1057
- color: rgba(var(--ax-color-ghost-fore));
1058
- }
1059
- .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) {
1060
- background-color: rgba(var(--ax-color-primary-200));
1061
- color: rgba(var(--ax-color-primary-fore-tint));
1062
- }
1063
- .ax-el-ghost-twotone.ax-el-interactive:active {
1064
- background-color: rgba(var(--ax-color-primary-300));
1065
- color: rgba(var(--ax-color-primary-fore-tint));
1066
- }
1067
- .ax-el-ghost-twotone.ax-state-selected {
1068
- border-color: rgba(var(--ax-color-primary-300));
1069
- background-color: rgba(var(--ax-color-primary-400));
1070
- color: rgba(var(--ax-color-primary-fore-tint));
1071
- }
1072
- .ax-el-ghost-twotone .ax-ripple {
1073
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
1074
- }
1075
- .ax-el-ghost-twotone ax-loading-spinner .ax-loader {
1076
- border-color: rgba(var(--ax-color-ghost-fore));
1077
- border-bottom-color: transparent;
1078
- }
1079
- .ax-el-ghost-twotone > button:is(.ax-el-ghost-twotone > button:focus-visible, .ax-el-ghost-twotone > button.ax-state-focus) {
1080
- outline-color: rgba(var(--ax-color-primary-500));
1081
- }
1082
-
1083
- .ax-el-secondary-twotone {
1084
- background-color: rgba(var(--ax-color-secondary-100));
1085
- color: rgba(var(--ax-color-secondary-fore-tint));
1086
- border-color: rgba(var(--ax-color-secondary-100));
1087
- }
1088
- .ax-el-secondary-twotone.ax-el-interactive:hover:not(.ax-state-disabled) {
1089
- background-color: rgba(var(--ax-color-secondary-200));
1090
- }
1091
- .ax-el-secondary-twotone.ax-state-selected {
1092
- background-color: rgba(var(--ax-color-secondary-300));
1093
- }
1094
- .ax-el-secondary-twotone .ax-ripple {
1095
- background-color: rgba(var(--ax-color-secondary-500), 0.3) !important;
1096
- }
1097
- .ax-el-secondary-twotone ax-loading-spinner .ax-loader {
1098
- border-color: rgba(var(--ax-color-secondary-fore-tint));
1099
- border-bottom-color: transparent;
1100
- }
1101
- .ax-el-secondary-twotone > button:is(.ax-el-secondary-twotone > button:focus-visible, .ax-el-secondary-twotone > button.ax-state-focus) {
1102
- outline-color: rgba(var(--ax-color-secondary-500));
1103
- }
1104
-
1105
- .ax-el-ghost-solid {
1106
- border-width: 1px;
1107
- border-color: rgba(var(--ax-color-border-default));
1108
- background-color: rgba(var(--ax-color-ghost));
1109
- color: rgba(var(--ax-color-ghost-fore));
1110
- --ax-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
1111
- --ax-shadow-colored: 0 1px 2px 0 var(--ax-shadow-color);
1112
- 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);
1113
- }
1114
- .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) {
1115
- border-color: rgba(var(--ax-color-primary-500));
1116
- color: rgba(var(--ax-color-primary-500));
1117
- }
1118
- .ax-el-ghost-solid.ax-el-interactive:active {
1119
- border-color: rgba(var(--ax-color-primary-700));
1120
- color: rgba(var(--ax-color-primary-700));
1121
- }
1122
- .ax-el-ghost-solid.ax-state-selected {
1123
- border-color: rgba(var(--ax-color-primary-500));
1124
- background-color: rgba(var(--ax-color-primary-500));
1125
- color: rgba(var(--ax-color-primary-fore));
1126
- }
1127
- .ax-el-ghost-solid .ax-ripple {
1128
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
1129
- }
1130
- .ax-el-ghost-solid ax-loading-spinner .ax-loader {
1131
- border-color: rgba(var(--ax-color-ghost-fore));
1132
- border-bottom-color: transparent;
1133
- }
1134
-
1135
- .ax-el-ghost-outline {
1136
- border-width: 1px;
1137
- border-color: rgba(var(--ax-color-border-default));
1138
- background-color: transparent;
1139
- color: rgba(var(--ax-color-ghost-fore));
1140
- }
1141
- .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) {
1142
- border-color: rgba(var(--ax-color-primary-500));
1143
- color: rgba(var(--ax-color-primary-500));
1144
- }
1145
- .ax-el-ghost-outline.ax-state-selected {
1146
- border-color: rgba(var(--ax-color-primary-500));
1147
- color: rgba(var(--ax-color-primary-fore));
1148
- }
1149
- .ax-el-ghost-outline .ax-ripple {
1150
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
1151
- }
1152
- .ax-el-ghost-outline ax-loading-spinner .ax-loader {
1153
- border-color: rgba(var(--ax-color-ghost-fore));
1154
- border-bottom-color: transparent;
1155
- }
1156
-
1157
- .ax-el-ghost-blank {
1158
- border-style: none;
1159
- background-color: transparent;
1160
- color: rgba(var(--ax-color-ghost-fore));
1161
- }
1162
- .ax-el-ghost-blank.ax-state-selected {
1163
- background-color: rgba(var(--ax-color-primary-500));
1164
- color: rgba(var(--ax-color-primary-fore));
1165
- }
1166
- .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) {
1167
- border-color: rgba(var(--ax-color-primary-700));
1168
- color: rgba(var(--ax-color-primary-700));
1169
- }
1170
- .ax-el-ghost-blank.ax-el-interactive:active {
1171
- border-color: rgba(var(--ax-color-primary-800));
1172
- color: rgba(var(--ax-color-primary-800));
1173
- }
1174
- .ax-el-ghost-blank .ax-ripple {
1175
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
1176
- }
1177
- .ax-el-ghost-blank ax-loading-spinner .ax-loader {
1178
- border-color: rgba(var(--ax-color-ghost-fore));
1179
- border-bottom-color: transparent;
1180
- }
1181
- .ax-el-ghost-blank > button:is(.ax-el-ghost-blank > button:focus-visible, .ax-el-ghost-blank > button.ax-state-focus) {
1182
- outline-color: rgba(var(--ax-color-primary-500));
1183
- }
1184
-
1185
- .ax-el-ghost-twotone {
1186
- border-color: transparent;
1187
- background-color: rgba(var(--ax-color-ghost-fore), 0.05);
1188
- color: rgba(var(--ax-color-ghost-fore));
1189
- }
1190
- .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) {
1191
- background-color: rgba(var(--ax-color-primary-200));
1192
- color: rgba(var(--ax-color-primary-fore-tint));
1193
- }
1194
- .ax-el-ghost-twotone.ax-el-interactive:active {
1195
- background-color: rgba(var(--ax-color-primary-300));
1196
- color: rgba(var(--ax-color-primary-fore-tint));
1197
- }
1198
- .ax-el-ghost-twotone.ax-state-selected {
1199
- border-color: rgba(var(--ax-color-primary-300));
1200
- background-color: rgba(var(--ax-color-primary-400));
1201
- color: rgba(var(--ax-color-primary-fore-tint));
1202
- }
1203
- .ax-el-ghost-twotone .ax-ripple {
1204
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
1205
- }
1206
- .ax-el-ghost-twotone ax-loading-spinner .ax-loader {
1207
- border-color: rgba(var(--ax-color-ghost-fore));
1208
- border-bottom-color: transparent;
1209
- }
1210
- .ax-el-ghost-twotone > button:is(.ax-el-ghost-twotone > button:focus-visible, .ax-el-ghost-twotone > button.ax-state-focus) {
1211
- outline-color: rgba(var(--ax-color-primary-500));
595
+ .ax-el-secondary-twotone.ax-dropdown-button-marker {
596
+ border-inline-start-color: rgba(var(--ax-color-secondary-50));
1212
597
  }
1213
598
 
1214
599
  .ax-el-secondary-outline {
@@ -1229,2106 +614,470 @@ body {
1229
614
  .ax-el-secondary-outline .ax-ripple {
1230
615
  background-color: rgba(var(--ax-color-secondary-500), 0.3) !important;
1231
616
  }
1232
- .ax-el-secondary-outline ax-loading-spinner .ax-loader {
1233
- border-color: rgba(var(--ax-color-secondary-500));
1234
- border-bottom-color: transparent;
1235
- }
1236
- .ax-el-secondary-outline > button:is(.ax-el-secondary-outline > button:focus-visible, .ax-el-secondary-outline > button.ax-state-focus) {
1237
- outline-offset: -2px;
1238
- outline-color: rgba(var(--ax-color-secondary-500));
1239
- color: rgba(var(--ax-color-secondary-fore-tint));
1240
- }
1241
-
1242
- .ax-el-ghost-solid {
1243
- border-width: 1px;
1244
- border-color: rgba(var(--ax-color-border-default));
1245
- background-color: rgba(var(--ax-color-ghost));
1246
- color: rgba(var(--ax-color-ghost-fore));
1247
- --ax-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
1248
- --ax-shadow-colored: 0 1px 2px 0 var(--ax-shadow-color);
1249
- 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);
1250
- }
1251
- .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) {
1252
- border-color: rgba(var(--ax-color-primary-500));
1253
- color: rgba(var(--ax-color-primary-500));
1254
- }
1255
- .ax-el-ghost-solid.ax-el-interactive:active {
1256
- border-color: rgba(var(--ax-color-primary-700));
1257
- color: rgba(var(--ax-color-primary-700));
1258
- }
1259
- .ax-el-ghost-solid.ax-state-selected {
1260
- border-color: rgba(var(--ax-color-primary-500));
1261
- background-color: rgba(var(--ax-color-primary-500));
1262
- color: rgba(var(--ax-color-primary-fore));
1263
- }
1264
- .ax-el-ghost-solid .ax-ripple {
1265
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
1266
- }
1267
- .ax-el-ghost-solid ax-loading-spinner .ax-loader {
1268
- border-color: rgba(var(--ax-color-ghost-fore));
1269
- border-bottom-color: transparent;
1270
- }
1271
-
1272
- .ax-el-ghost-outline {
1273
- border-width: 1px;
1274
- border-color: rgba(var(--ax-color-border-default));
1275
- background-color: transparent;
1276
- color: rgba(var(--ax-color-ghost-fore));
1277
- }
1278
- .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) {
1279
- border-color: rgba(var(--ax-color-primary-500));
1280
- color: rgba(var(--ax-color-primary-500));
1281
- }
1282
- .ax-el-ghost-outline.ax-state-selected {
1283
- border-color: rgba(var(--ax-color-primary-500));
1284
- color: rgba(var(--ax-color-primary-fore));
1285
- }
1286
- .ax-el-ghost-outline .ax-ripple {
1287
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
1288
- }
1289
- .ax-el-ghost-outline ax-loading-spinner .ax-loader {
1290
- border-color: rgba(var(--ax-color-ghost-fore));
1291
- border-bottom-color: transparent;
1292
- }
1293
-
1294
- .ax-el-ghost-blank {
1295
- border-style: none;
1296
- background-color: transparent;
1297
- color: rgba(var(--ax-color-ghost-fore));
1298
- }
1299
- .ax-el-ghost-blank.ax-state-selected {
1300
- background-color: rgba(var(--ax-color-primary-500));
1301
- color: rgba(var(--ax-color-primary-fore));
1302
- }
1303
- .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) {
1304
- border-color: rgba(var(--ax-color-primary-700));
1305
- color: rgba(var(--ax-color-primary-700));
1306
- }
1307
- .ax-el-ghost-blank.ax-el-interactive:active {
1308
- border-color: rgba(var(--ax-color-primary-800));
1309
- color: rgba(var(--ax-color-primary-800));
1310
- }
1311
- .ax-el-ghost-blank .ax-ripple {
1312
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
1313
- }
1314
- .ax-el-ghost-blank ax-loading-spinner .ax-loader {
1315
- border-color: rgba(var(--ax-color-ghost-fore));
1316
- border-bottom-color: transparent;
1317
- }
1318
- .ax-el-ghost-blank > button:is(.ax-el-ghost-blank > button:focus-visible, .ax-el-ghost-blank > button.ax-state-focus) {
1319
- outline-color: rgba(var(--ax-color-primary-500));
1320
- }
1321
-
1322
- .ax-el-ghost-twotone {
1323
- border-color: transparent;
1324
- background-color: rgba(var(--ax-color-ghost-fore), 0.05);
1325
- color: rgba(var(--ax-color-ghost-fore));
1326
- }
1327
- .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) {
1328
- background-color: rgba(var(--ax-color-primary-200));
1329
- color: rgba(var(--ax-color-primary-fore-tint));
1330
- }
1331
- .ax-el-ghost-twotone.ax-el-interactive:active {
1332
- background-color: rgba(var(--ax-color-primary-300));
1333
- color: rgba(var(--ax-color-primary-fore-tint));
1334
- }
1335
- .ax-el-ghost-twotone.ax-state-selected {
1336
- border-color: rgba(var(--ax-color-primary-300));
1337
- background-color: rgba(var(--ax-color-primary-400));
1338
- color: rgba(var(--ax-color-primary-fore-tint));
1339
- }
1340
- .ax-el-ghost-twotone .ax-ripple {
1341
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
1342
- }
1343
- .ax-el-ghost-twotone ax-loading-spinner .ax-loader {
1344
- border-color: rgba(var(--ax-color-ghost-fore));
1345
- border-bottom-color: transparent;
1346
- }
1347
- .ax-el-ghost-twotone > button:is(.ax-el-ghost-twotone > button:focus-visible, .ax-el-ghost-twotone > button.ax-state-focus) {
1348
- outline-color: rgba(var(--ax-color-primary-500));
1349
- }
1350
-
1351
- .ax-el-secondary-blank {
1352
- color: rgba(var(--ax-color-secondary-500));
1353
- }
1354
- .ax-el-secondary-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
1355
- color: rgba(var(--ax-color-secondary-fore-tint));
1356
- }
1357
- .ax-el-secondary-blank.ax-state-selected {
1358
- background-color: rgba(var(--ax-color-secondary-700));
1359
- color: rgba(var(--ax-color-secondary-fore));
1360
- }
1361
- .ax-el-secondary-blank .ax-ripple {
1362
- background-color: rgba(var(--ax-color-secondary-500), 0.3);
1363
- }
1364
- .ax-el-secondary-blank ax-loading-spinner .ax-loader {
1365
- border-color: rgba(var(--ax-color-secondary-500));
1366
- border-bottom-color: transparent;
1367
- }
1368
- .ax-el-secondary-blank > button:is(.ax-el-secondary-blank > button:focus-visible, .ax-el-secondary-blank > button.ax-state-focus) {
1369
- outline-color: rgba(var(--ax-color-secondary-300));
1370
- outline-offset: 0;
1371
- }
1372
-
1373
- .ax-el-ghost-solid {
1374
- border-width: 1px;
1375
- border-color: rgba(var(--ax-color-border-default));
1376
- background-color: rgba(var(--ax-color-ghost));
1377
- color: rgba(var(--ax-color-ghost-fore));
1378
- --ax-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
1379
- --ax-shadow-colored: 0 1px 2px 0 var(--ax-shadow-color);
1380
- 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);
1381
- }
1382
- .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) {
1383
- border-color: rgba(var(--ax-color-primary-500));
1384
- color: rgba(var(--ax-color-primary-500));
1385
- }
1386
- .ax-el-ghost-solid.ax-el-interactive:active {
1387
- border-color: rgba(var(--ax-color-primary-700));
1388
- color: rgba(var(--ax-color-primary-700));
1389
- }
1390
- .ax-el-ghost-solid.ax-state-selected {
1391
- border-color: rgba(var(--ax-color-primary-500));
1392
- background-color: rgba(var(--ax-color-primary-500));
1393
- color: rgba(var(--ax-color-primary-fore));
1394
- }
1395
- .ax-el-ghost-solid .ax-ripple {
1396
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
1397
- }
1398
- .ax-el-ghost-solid ax-loading-spinner .ax-loader {
1399
- border-color: rgba(var(--ax-color-ghost-fore));
1400
- border-bottom-color: transparent;
1401
- }
1402
-
1403
- .ax-el-ghost-outline {
1404
- border-width: 1px;
1405
- border-color: rgba(var(--ax-color-border-default));
1406
- background-color: transparent;
1407
- color: rgba(var(--ax-color-ghost-fore));
1408
- }
1409
- .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) {
1410
- border-color: rgba(var(--ax-color-primary-500));
1411
- color: rgba(var(--ax-color-primary-500));
1412
- }
1413
- .ax-el-ghost-outline.ax-state-selected {
1414
- border-color: rgba(var(--ax-color-primary-500));
1415
- color: rgba(var(--ax-color-primary-fore));
1416
- }
1417
- .ax-el-ghost-outline .ax-ripple {
1418
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
1419
- }
1420
- .ax-el-ghost-outline ax-loading-spinner .ax-loader {
1421
- border-color: rgba(var(--ax-color-ghost-fore));
1422
- border-bottom-color: transparent;
1423
- }
1424
-
1425
- .ax-el-ghost-blank {
1426
- border-style: none;
1427
- background-color: transparent;
1428
- color: rgba(var(--ax-color-ghost-fore));
1429
- }
1430
- .ax-el-ghost-blank.ax-state-selected {
1431
- background-color: rgba(var(--ax-color-primary-500));
1432
- color: rgba(var(--ax-color-primary-fore));
1433
- }
1434
- .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) {
1435
- border-color: rgba(var(--ax-color-primary-700));
1436
- color: rgba(var(--ax-color-primary-700));
1437
- }
1438
- .ax-el-ghost-blank.ax-el-interactive:active {
1439
- border-color: rgba(var(--ax-color-primary-800));
1440
- color: rgba(var(--ax-color-primary-800));
1441
- }
1442
- .ax-el-ghost-blank .ax-ripple {
1443
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
1444
- }
1445
- .ax-el-ghost-blank ax-loading-spinner .ax-loader {
1446
- border-color: rgba(var(--ax-color-ghost-fore));
1447
- border-bottom-color: transparent;
1448
- }
1449
- .ax-el-ghost-blank > button:is(.ax-el-ghost-blank > button:focus-visible, .ax-el-ghost-blank > button.ax-state-focus) {
1450
- outline-color: rgba(var(--ax-color-primary-500));
1451
- }
1452
-
1453
- .ax-el-ghost-twotone {
1454
- border-color: transparent;
1455
- background-color: rgba(var(--ax-color-ghost-fore), 0.05);
1456
- color: rgba(var(--ax-color-ghost-fore));
1457
- }
1458
- .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) {
1459
- background-color: rgba(var(--ax-color-primary-200));
1460
- color: rgba(var(--ax-color-primary-fore-tint));
1461
- }
1462
- .ax-el-ghost-twotone.ax-el-interactive:active {
1463
- background-color: rgba(var(--ax-color-primary-300));
1464
- color: rgba(var(--ax-color-primary-fore-tint));
1465
- }
1466
- .ax-el-ghost-twotone.ax-state-selected {
1467
- border-color: rgba(var(--ax-color-primary-300));
1468
- background-color: rgba(var(--ax-color-primary-400));
1469
- color: rgba(var(--ax-color-primary-fore-tint));
1470
- }
1471
- .ax-el-ghost-twotone .ax-ripple {
1472
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
1473
- }
1474
- .ax-el-ghost-twotone ax-loading-spinner .ax-loader {
1475
- border-color: rgba(var(--ax-color-ghost-fore));
1476
- border-bottom-color: transparent;
1477
- }
1478
- .ax-el-ghost-twotone > button:is(.ax-el-ghost-twotone > button:focus-visible, .ax-el-ghost-twotone > button.ax-state-focus) {
1479
- outline-color: rgba(var(--ax-color-primary-500));
1480
- }
1481
-
1482
- .ax-el-success-solid {
1483
- background-color: rgba(var(--ax-color-success-500));
1484
- color: rgba(var(--ax-color-success-fore));
1485
- border-color: rgba(var(--ax-color-success-500));
1486
- }
1487
- .ax-el-success-solid.ax-el-interactive:hover:not(.ax-state-disabled) {
1488
- background-color: rgba(var(--ax-color-success-600));
1489
- }
1490
- .ax-el-success-solid.ax-state-selected {
1491
- background-color: rgba(var(--ax-color-success-700));
1492
- }
1493
- .ax-el-success-solid .ax-ripple {
1494
- background-color: rgba(var(--ax-color-success-300), 0.3) !important;
1495
- }
1496
- .ax-el-success-solid ax-loading-spinner .ax-loader {
1497
- border-color: rgba(var(--ax-color-success-fore));
1498
- border-bottom-color: transparent;
1499
- }
1500
- .ax-el-success-solid > button:is(.ax-el-success-solid > button:focus-visible, .ax-el-success-solid > button.ax-state-focus) {
1501
- outline-color: rgba(var(--ax-color-success-500));
1502
- }
1503
-
1504
- .ax-el-ghost-solid {
1505
- border-width: 1px;
1506
- border-color: rgba(var(--ax-color-border-default));
1507
- background-color: rgba(var(--ax-color-ghost));
1508
- color: rgba(var(--ax-color-ghost-fore));
1509
- --ax-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
1510
- --ax-shadow-colored: 0 1px 2px 0 var(--ax-shadow-color);
1511
- 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);
1512
- }
1513
- .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) {
1514
- border-color: rgba(var(--ax-color-primary-500));
1515
- color: rgba(var(--ax-color-primary-500));
1516
- }
1517
- .ax-el-ghost-solid.ax-el-interactive:active {
1518
- border-color: rgba(var(--ax-color-primary-700));
1519
- color: rgba(var(--ax-color-primary-700));
1520
- }
1521
- .ax-el-ghost-solid.ax-state-selected {
1522
- border-color: rgba(var(--ax-color-primary-500));
1523
- background-color: rgba(var(--ax-color-primary-500));
1524
- color: rgba(var(--ax-color-primary-fore));
1525
- }
1526
- .ax-el-ghost-solid .ax-ripple {
1527
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
1528
- }
1529
- .ax-el-ghost-solid ax-loading-spinner .ax-loader {
1530
- border-color: rgba(var(--ax-color-ghost-fore));
1531
- border-bottom-color: transparent;
1532
- }
1533
-
1534
- .ax-el-ghost-outline {
1535
- border-width: 1px;
1536
- border-color: rgba(var(--ax-color-border-default));
1537
- background-color: transparent;
1538
- color: rgba(var(--ax-color-ghost-fore));
1539
- }
1540
- .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) {
1541
- border-color: rgba(var(--ax-color-primary-500));
1542
- color: rgba(var(--ax-color-primary-500));
1543
- }
1544
- .ax-el-ghost-outline.ax-state-selected {
1545
- border-color: rgba(var(--ax-color-primary-500));
1546
- color: rgba(var(--ax-color-primary-fore));
1547
- }
1548
- .ax-el-ghost-outline .ax-ripple {
1549
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
1550
- }
1551
- .ax-el-ghost-outline ax-loading-spinner .ax-loader {
1552
- border-color: rgba(var(--ax-color-ghost-fore));
1553
- border-bottom-color: transparent;
1554
- }
1555
-
1556
- .ax-el-ghost-blank {
1557
- border-style: none;
1558
- background-color: transparent;
1559
- color: rgba(var(--ax-color-ghost-fore));
1560
- }
1561
- .ax-el-ghost-blank.ax-state-selected {
1562
- background-color: rgba(var(--ax-color-primary-500));
1563
- color: rgba(var(--ax-color-primary-fore));
1564
- }
1565
- .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) {
1566
- border-color: rgba(var(--ax-color-primary-700));
1567
- color: rgba(var(--ax-color-primary-700));
1568
- }
1569
- .ax-el-ghost-blank.ax-el-interactive:active {
1570
- border-color: rgba(var(--ax-color-primary-800));
1571
- color: rgba(var(--ax-color-primary-800));
1572
- }
1573
- .ax-el-ghost-blank .ax-ripple {
1574
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
1575
- }
1576
- .ax-el-ghost-blank ax-loading-spinner .ax-loader {
1577
- border-color: rgba(var(--ax-color-ghost-fore));
1578
- border-bottom-color: transparent;
1579
- }
1580
- .ax-el-ghost-blank > button:is(.ax-el-ghost-blank > button:focus-visible, .ax-el-ghost-blank > button.ax-state-focus) {
1581
- outline-color: rgba(var(--ax-color-primary-500));
1582
- }
1583
-
1584
- .ax-el-ghost-twotone {
1585
- border-color: transparent;
1586
- background-color: rgba(var(--ax-color-ghost-fore), 0.05);
1587
- color: rgba(var(--ax-color-ghost-fore));
1588
- }
1589
- .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) {
1590
- background-color: rgba(var(--ax-color-primary-200));
1591
- color: rgba(var(--ax-color-primary-fore-tint));
1592
- }
1593
- .ax-el-ghost-twotone.ax-el-interactive:active {
1594
- background-color: rgba(var(--ax-color-primary-300));
1595
- color: rgba(var(--ax-color-primary-fore-tint));
1596
- }
1597
- .ax-el-ghost-twotone.ax-state-selected {
1598
- border-color: rgba(var(--ax-color-primary-300));
1599
- background-color: rgba(var(--ax-color-primary-400));
1600
- color: rgba(var(--ax-color-primary-fore-tint));
1601
- }
1602
- .ax-el-ghost-twotone .ax-ripple {
1603
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
1604
- }
1605
- .ax-el-ghost-twotone ax-loading-spinner .ax-loader {
1606
- border-color: rgba(var(--ax-color-ghost-fore));
1607
- border-bottom-color: transparent;
1608
- }
1609
- .ax-el-ghost-twotone > button:is(.ax-el-ghost-twotone > button:focus-visible, .ax-el-ghost-twotone > button.ax-state-focus) {
1610
- outline-color: rgba(var(--ax-color-primary-500));
1611
- }
1612
-
1613
- .ax-el-success-twotone {
1614
- background-color: rgba(var(--ax-color-success-100));
1615
- color: rgba(var(--ax-color-success-fore-tint));
1616
- border-color: rgba(var(--ax-color-success-100));
1617
- }
1618
- .ax-el-success-twotone.ax-el-interactive:hover:not(.ax-state-disabled) {
1619
- background-color: rgba(var(--ax-color-success-200));
1620
- }
1621
- .ax-el-success-twotone.ax-state-selected {
1622
- background-color: rgba(var(--ax-color-success-300));
1623
- }
1624
- .ax-el-success-twotone .ax-ripple {
1625
- background-color: rgba(var(--ax-color-success-500), 0.3) !important;
1626
- }
1627
- .ax-el-success-twotone ax-loading-spinner .ax-loader {
1628
- border-color: rgba(var(--ax-color-success-fore-tint));
1629
- border-bottom-color: transparent;
1630
- }
1631
- .ax-el-success-twotone > button:is(.ax-el-success-twotone > button:focus-visible, .ax-el-success-twotone > button.ax-state-focus) {
1632
- outline-color: rgba(var(--ax-color-success-500));
1633
- }
1634
-
1635
- .ax-el-ghost-solid {
1636
- border-width: 1px;
1637
- border-color: rgba(var(--ax-color-border-default));
1638
- background-color: rgba(var(--ax-color-ghost));
1639
- color: rgba(var(--ax-color-ghost-fore));
1640
- --ax-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
1641
- --ax-shadow-colored: 0 1px 2px 0 var(--ax-shadow-color);
1642
- 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);
1643
- }
1644
- .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) {
1645
- border-color: rgba(var(--ax-color-primary-500));
1646
- color: rgba(var(--ax-color-primary-500));
1647
- }
1648
- .ax-el-ghost-solid.ax-el-interactive:active {
1649
- border-color: rgba(var(--ax-color-primary-700));
1650
- color: rgba(var(--ax-color-primary-700));
1651
- }
1652
- .ax-el-ghost-solid.ax-state-selected {
1653
- border-color: rgba(var(--ax-color-primary-500));
1654
- background-color: rgba(var(--ax-color-primary-500));
1655
- color: rgba(var(--ax-color-primary-fore));
1656
- }
1657
- .ax-el-ghost-solid .ax-ripple {
1658
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
1659
- }
1660
- .ax-el-ghost-solid ax-loading-spinner .ax-loader {
1661
- border-color: rgba(var(--ax-color-ghost-fore));
1662
- border-bottom-color: transparent;
1663
- }
1664
-
1665
- .ax-el-ghost-outline {
1666
- border-width: 1px;
1667
- border-color: rgba(var(--ax-color-border-default));
1668
- background-color: transparent;
1669
- color: rgba(var(--ax-color-ghost-fore));
1670
- }
1671
- .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) {
1672
- border-color: rgba(var(--ax-color-primary-500));
1673
- color: rgba(var(--ax-color-primary-500));
1674
- }
1675
- .ax-el-ghost-outline.ax-state-selected {
1676
- border-color: rgba(var(--ax-color-primary-500));
1677
- color: rgba(var(--ax-color-primary-fore));
1678
- }
1679
- .ax-el-ghost-outline .ax-ripple {
1680
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
1681
- }
1682
- .ax-el-ghost-outline ax-loading-spinner .ax-loader {
1683
- border-color: rgba(var(--ax-color-ghost-fore));
1684
- border-bottom-color: transparent;
1685
- }
1686
-
1687
- .ax-el-ghost-blank {
1688
- border-style: none;
1689
- background-color: transparent;
1690
- color: rgba(var(--ax-color-ghost-fore));
1691
- }
1692
- .ax-el-ghost-blank.ax-state-selected {
1693
- background-color: rgba(var(--ax-color-primary-500));
1694
- color: rgba(var(--ax-color-primary-fore));
1695
- }
1696
- .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) {
1697
- border-color: rgba(var(--ax-color-primary-700));
1698
- color: rgba(var(--ax-color-primary-700));
1699
- }
1700
- .ax-el-ghost-blank.ax-el-interactive:active {
1701
- border-color: rgba(var(--ax-color-primary-800));
1702
- color: rgba(var(--ax-color-primary-800));
1703
- }
1704
- .ax-el-ghost-blank .ax-ripple {
1705
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
1706
- }
1707
- .ax-el-ghost-blank ax-loading-spinner .ax-loader {
1708
- border-color: rgba(var(--ax-color-ghost-fore));
1709
- border-bottom-color: transparent;
1710
- }
1711
- .ax-el-ghost-blank > button:is(.ax-el-ghost-blank > button:focus-visible, .ax-el-ghost-blank > button.ax-state-focus) {
1712
- outline-color: rgba(var(--ax-color-primary-500));
1713
- }
1714
-
1715
- .ax-el-ghost-twotone {
1716
- border-color: transparent;
1717
- background-color: rgba(var(--ax-color-ghost-fore), 0.05);
1718
- color: rgba(var(--ax-color-ghost-fore));
1719
- }
1720
- .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) {
1721
- background-color: rgba(var(--ax-color-primary-200));
1722
- color: rgba(var(--ax-color-primary-fore-tint));
1723
- }
1724
- .ax-el-ghost-twotone.ax-el-interactive:active {
1725
- background-color: rgba(var(--ax-color-primary-300));
1726
- color: rgba(var(--ax-color-primary-fore-tint));
1727
- }
1728
- .ax-el-ghost-twotone.ax-state-selected {
1729
- border-color: rgba(var(--ax-color-primary-300));
1730
- background-color: rgba(var(--ax-color-primary-400));
1731
- color: rgba(var(--ax-color-primary-fore-tint));
1732
- }
1733
- .ax-el-ghost-twotone .ax-ripple {
1734
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
1735
- }
1736
- .ax-el-ghost-twotone ax-loading-spinner .ax-loader {
1737
- border-color: rgba(var(--ax-color-ghost-fore));
1738
- border-bottom-color: transparent;
1739
- }
1740
- .ax-el-ghost-twotone > button:is(.ax-el-ghost-twotone > button:focus-visible, .ax-el-ghost-twotone > button.ax-state-focus) {
1741
- outline-color: rgba(var(--ax-color-primary-500));
1742
- }
1743
-
1744
- .ax-el-success-outline {
1745
- background-color: transparent;
1746
- color: rgba(var(--ax-color-success-500));
1747
- border-color: rgba(var(--ax-color-success-500));
1748
- border-width: 1px;
1749
- }
1750
- .ax-el-success-outline.ax-el-interactive:hover:not(.ax-state-disabled) {
1751
- color: rgba(var(--ax-color-success-700));
1752
- border-color: rgba(var(--ax-color-success-700));
1753
- }
1754
- .ax-el-success-outline.ax-state-selected {
1755
- border-color: rgba(var(--ax-color-success-500));
1756
- color: rgba(var(--ax-color-success-fore));
1757
- background-color: rgba(var(--ax-color-success-500));
1758
- }
1759
- .ax-el-success-outline .ax-ripple {
1760
- background-color: rgba(var(--ax-color-success-500), 0.3) !important;
1761
- }
1762
- .ax-el-success-outline ax-loading-spinner .ax-loader {
1763
- border-color: rgba(var(--ax-color-success-500));
1764
- border-bottom-color: transparent;
1765
- }
1766
- .ax-el-success-outline > button:is(.ax-el-success-outline > button:focus-visible, .ax-el-success-outline > button.ax-state-focus) {
1767
- outline-offset: -2px;
1768
- outline-color: rgba(var(--ax-color-success-500));
1769
- color: rgba(var(--ax-color-success-fore-tint));
1770
- }
1771
-
1772
- .ax-el-ghost-solid {
1773
- border-width: 1px;
1774
- border-color: rgba(var(--ax-color-border-default));
1775
- background-color: rgba(var(--ax-color-ghost));
1776
- color: rgba(var(--ax-color-ghost-fore));
1777
- --ax-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
1778
- --ax-shadow-colored: 0 1px 2px 0 var(--ax-shadow-color);
1779
- 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);
1780
- }
1781
- .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) {
1782
- border-color: rgba(var(--ax-color-primary-500));
1783
- color: rgba(var(--ax-color-primary-500));
1784
- }
1785
- .ax-el-ghost-solid.ax-el-interactive:active {
1786
- border-color: rgba(var(--ax-color-primary-700));
1787
- color: rgba(var(--ax-color-primary-700));
1788
- }
1789
- .ax-el-ghost-solid.ax-state-selected {
1790
- border-color: rgba(var(--ax-color-primary-500));
1791
- background-color: rgba(var(--ax-color-primary-500));
1792
- color: rgba(var(--ax-color-primary-fore));
1793
- }
1794
- .ax-el-ghost-solid .ax-ripple {
1795
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
1796
- }
1797
- .ax-el-ghost-solid ax-loading-spinner .ax-loader {
1798
- border-color: rgba(var(--ax-color-ghost-fore));
1799
- border-bottom-color: transparent;
1800
- }
1801
-
1802
- .ax-el-ghost-outline {
1803
- border-width: 1px;
1804
- border-color: rgba(var(--ax-color-border-default));
1805
- background-color: transparent;
1806
- color: rgba(var(--ax-color-ghost-fore));
1807
- }
1808
- .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) {
1809
- border-color: rgba(var(--ax-color-primary-500));
1810
- color: rgba(var(--ax-color-primary-500));
1811
- }
1812
- .ax-el-ghost-outline.ax-state-selected {
1813
- border-color: rgba(var(--ax-color-primary-500));
1814
- color: rgba(var(--ax-color-primary-fore));
1815
- }
1816
- .ax-el-ghost-outline .ax-ripple {
1817
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
1818
- }
1819
- .ax-el-ghost-outline ax-loading-spinner .ax-loader {
1820
- border-color: rgba(var(--ax-color-ghost-fore));
1821
- border-bottom-color: transparent;
1822
- }
1823
-
1824
- .ax-el-ghost-blank {
1825
- border-style: none;
1826
- background-color: transparent;
1827
- color: rgba(var(--ax-color-ghost-fore));
1828
- }
1829
- .ax-el-ghost-blank.ax-state-selected {
1830
- background-color: rgba(var(--ax-color-primary-500));
1831
- color: rgba(var(--ax-color-primary-fore));
1832
- }
1833
- .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) {
1834
- border-color: rgba(var(--ax-color-primary-700));
1835
- color: rgba(var(--ax-color-primary-700));
1836
- }
1837
- .ax-el-ghost-blank.ax-el-interactive:active {
1838
- border-color: rgba(var(--ax-color-primary-800));
1839
- color: rgba(var(--ax-color-primary-800));
1840
- }
1841
- .ax-el-ghost-blank .ax-ripple {
1842
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
1843
- }
1844
- .ax-el-ghost-blank ax-loading-spinner .ax-loader {
1845
- border-color: rgba(var(--ax-color-ghost-fore));
1846
- border-bottom-color: transparent;
1847
- }
1848
- .ax-el-ghost-blank > button:is(.ax-el-ghost-blank > button:focus-visible, .ax-el-ghost-blank > button.ax-state-focus) {
1849
- outline-color: rgba(var(--ax-color-primary-500));
1850
- }
1851
-
1852
- .ax-el-ghost-twotone {
1853
- border-color: transparent;
1854
- background-color: rgba(var(--ax-color-ghost-fore), 0.05);
1855
- color: rgba(var(--ax-color-ghost-fore));
1856
- }
1857
- .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) {
1858
- background-color: rgba(var(--ax-color-primary-200));
1859
- color: rgba(var(--ax-color-primary-fore-tint));
1860
- }
1861
- .ax-el-ghost-twotone.ax-el-interactive:active {
1862
- background-color: rgba(var(--ax-color-primary-300));
1863
- color: rgba(var(--ax-color-primary-fore-tint));
1864
- }
1865
- .ax-el-ghost-twotone.ax-state-selected {
1866
- border-color: rgba(var(--ax-color-primary-300));
1867
- background-color: rgba(var(--ax-color-primary-400));
1868
- color: rgba(var(--ax-color-primary-fore-tint));
1869
- }
1870
- .ax-el-ghost-twotone .ax-ripple {
1871
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
1872
- }
1873
- .ax-el-ghost-twotone ax-loading-spinner .ax-loader {
1874
- border-color: rgba(var(--ax-color-ghost-fore));
1875
- border-bottom-color: transparent;
1876
- }
1877
- .ax-el-ghost-twotone > button:is(.ax-el-ghost-twotone > button:focus-visible, .ax-el-ghost-twotone > button.ax-state-focus) {
1878
- outline-color: rgba(var(--ax-color-primary-500));
1879
- }
1880
-
1881
- .ax-el-success-blank {
1882
- color: rgba(var(--ax-color-success-500));
1883
- }
1884
- .ax-el-success-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
1885
- color: rgba(var(--ax-color-success-fore-tint));
1886
- }
1887
- .ax-el-success-blank.ax-state-selected {
1888
- background-color: rgba(var(--ax-color-success-700));
1889
- color: rgba(var(--ax-color-success-fore));
1890
- }
1891
- .ax-el-success-blank .ax-ripple {
1892
- background-color: rgba(var(--ax-color-success-500), 0.3);
1893
- }
1894
- .ax-el-success-blank ax-loading-spinner .ax-loader {
1895
- border-color: rgba(var(--ax-color-success-500));
1896
- border-bottom-color: transparent;
1897
- }
1898
- .ax-el-success-blank > button:is(.ax-el-success-blank > button:focus-visible, .ax-el-success-blank > button.ax-state-focus) {
1899
- outline-color: rgba(var(--ax-color-success-300));
1900
- outline-offset: 0;
1901
- }
1902
-
1903
- .ax-el-ghost-solid {
1904
- border-width: 1px;
1905
- border-color: rgba(var(--ax-color-border-default));
1906
- background-color: rgba(var(--ax-color-ghost));
1907
- color: rgba(var(--ax-color-ghost-fore));
1908
- --ax-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
1909
- --ax-shadow-colored: 0 1px 2px 0 var(--ax-shadow-color);
1910
- 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);
1911
- }
1912
- .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) {
1913
- border-color: rgba(var(--ax-color-primary-500));
1914
- color: rgba(var(--ax-color-primary-500));
1915
- }
1916
- .ax-el-ghost-solid.ax-el-interactive:active {
1917
- border-color: rgba(var(--ax-color-primary-700));
1918
- color: rgba(var(--ax-color-primary-700));
1919
- }
1920
- .ax-el-ghost-solid.ax-state-selected {
1921
- border-color: rgba(var(--ax-color-primary-500));
1922
- background-color: rgba(var(--ax-color-primary-500));
1923
- color: rgba(var(--ax-color-primary-fore));
1924
- }
1925
- .ax-el-ghost-solid .ax-ripple {
1926
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
1927
- }
1928
- .ax-el-ghost-solid ax-loading-spinner .ax-loader {
1929
- border-color: rgba(var(--ax-color-ghost-fore));
1930
- border-bottom-color: transparent;
1931
- }
1932
-
1933
- .ax-el-ghost-outline {
1934
- border-width: 1px;
1935
- border-color: rgba(var(--ax-color-border-default));
1936
- background-color: transparent;
1937
- color: rgba(var(--ax-color-ghost-fore));
1938
- }
1939
- .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) {
1940
- border-color: rgba(var(--ax-color-primary-500));
1941
- color: rgba(var(--ax-color-primary-500));
1942
- }
1943
- .ax-el-ghost-outline.ax-state-selected {
1944
- border-color: rgba(var(--ax-color-primary-500));
1945
- color: rgba(var(--ax-color-primary-fore));
1946
- }
1947
- .ax-el-ghost-outline .ax-ripple {
1948
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
1949
- }
1950
- .ax-el-ghost-outline ax-loading-spinner .ax-loader {
1951
- border-color: rgba(var(--ax-color-ghost-fore));
1952
- border-bottom-color: transparent;
1953
- }
1954
-
1955
- .ax-el-ghost-blank {
1956
- border-style: none;
1957
- background-color: transparent;
1958
- color: rgba(var(--ax-color-ghost-fore));
1959
- }
1960
- .ax-el-ghost-blank.ax-state-selected {
1961
- background-color: rgba(var(--ax-color-primary-500));
1962
- color: rgba(var(--ax-color-primary-fore));
1963
- }
1964
- .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) {
1965
- border-color: rgba(var(--ax-color-primary-700));
1966
- color: rgba(var(--ax-color-primary-700));
1967
- }
1968
- .ax-el-ghost-blank.ax-el-interactive:active {
1969
- border-color: rgba(var(--ax-color-primary-800));
1970
- color: rgba(var(--ax-color-primary-800));
1971
- }
1972
- .ax-el-ghost-blank .ax-ripple {
1973
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
1974
- }
1975
- .ax-el-ghost-blank ax-loading-spinner .ax-loader {
1976
- border-color: rgba(var(--ax-color-ghost-fore));
1977
- border-bottom-color: transparent;
1978
- }
1979
- .ax-el-ghost-blank > button:is(.ax-el-ghost-blank > button:focus-visible, .ax-el-ghost-blank > button.ax-state-focus) {
1980
- outline-color: rgba(var(--ax-color-primary-500));
1981
- }
1982
-
1983
- .ax-el-ghost-twotone {
1984
- border-color: transparent;
1985
- background-color: rgba(var(--ax-color-ghost-fore), 0.05);
1986
- color: rgba(var(--ax-color-ghost-fore));
1987
- }
1988
- .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) {
1989
- background-color: rgba(var(--ax-color-primary-200));
1990
- color: rgba(var(--ax-color-primary-fore-tint));
1991
- }
1992
- .ax-el-ghost-twotone.ax-el-interactive:active {
1993
- background-color: rgba(var(--ax-color-primary-300));
1994
- color: rgba(var(--ax-color-primary-fore-tint));
1995
- }
1996
- .ax-el-ghost-twotone.ax-state-selected {
1997
- border-color: rgba(var(--ax-color-primary-300));
1998
- background-color: rgba(var(--ax-color-primary-400));
1999
- color: rgba(var(--ax-color-primary-fore-tint));
2000
- }
2001
- .ax-el-ghost-twotone .ax-ripple {
2002
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
2003
- }
2004
- .ax-el-ghost-twotone ax-loading-spinner .ax-loader {
2005
- border-color: rgba(var(--ax-color-ghost-fore));
2006
- border-bottom-color: transparent;
2007
- }
2008
- .ax-el-ghost-twotone > button:is(.ax-el-ghost-twotone > button:focus-visible, .ax-el-ghost-twotone > button.ax-state-focus) {
2009
- outline-color: rgba(var(--ax-color-primary-500));
2010
- }
2011
-
2012
- .ax-el-warning-solid {
2013
- background-color: rgba(var(--ax-color-warning-500));
2014
- color: rgba(var(--ax-color-warning-fore));
2015
- border-color: rgba(var(--ax-color-warning-500));
2016
- }
2017
- .ax-el-warning-solid.ax-el-interactive:hover:not(.ax-state-disabled) {
2018
- background-color: rgba(var(--ax-color-warning-600));
2019
- }
2020
- .ax-el-warning-solid.ax-state-selected {
2021
- background-color: rgba(var(--ax-color-warning-700));
2022
- }
2023
- .ax-el-warning-solid .ax-ripple {
2024
- background-color: rgba(var(--ax-color-warning-300), 0.3) !important;
2025
- }
2026
- .ax-el-warning-solid ax-loading-spinner .ax-loader {
2027
- border-color: rgba(var(--ax-color-warning-fore));
2028
- border-bottom-color: transparent;
2029
- }
2030
- .ax-el-warning-solid > button:is(.ax-el-warning-solid > button:focus-visible, .ax-el-warning-solid > button.ax-state-focus) {
2031
- outline-color: rgba(var(--ax-color-warning-500));
2032
- }
2033
-
2034
- .ax-el-ghost-solid {
2035
- border-width: 1px;
2036
- border-color: rgba(var(--ax-color-border-default));
2037
- background-color: rgba(var(--ax-color-ghost));
2038
- color: rgba(var(--ax-color-ghost-fore));
2039
- --ax-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
2040
- --ax-shadow-colored: 0 1px 2px 0 var(--ax-shadow-color);
2041
- 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);
2042
- }
2043
- .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) {
2044
- border-color: rgba(var(--ax-color-primary-500));
2045
- color: rgba(var(--ax-color-primary-500));
2046
- }
2047
- .ax-el-ghost-solid.ax-el-interactive:active {
2048
- border-color: rgba(var(--ax-color-primary-700));
2049
- color: rgba(var(--ax-color-primary-700));
2050
- }
2051
- .ax-el-ghost-solid.ax-state-selected {
2052
- border-color: rgba(var(--ax-color-primary-500));
2053
- background-color: rgba(var(--ax-color-primary-500));
2054
- color: rgba(var(--ax-color-primary-fore));
2055
- }
2056
- .ax-el-ghost-solid .ax-ripple {
2057
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
2058
- }
2059
- .ax-el-ghost-solid ax-loading-spinner .ax-loader {
2060
- border-color: rgba(var(--ax-color-ghost-fore));
2061
- border-bottom-color: transparent;
2062
- }
2063
-
2064
- .ax-el-ghost-outline {
2065
- border-width: 1px;
2066
- border-color: rgba(var(--ax-color-border-default));
2067
- background-color: transparent;
2068
- color: rgba(var(--ax-color-ghost-fore));
2069
- }
2070
- .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) {
2071
- border-color: rgba(var(--ax-color-primary-500));
2072
- color: rgba(var(--ax-color-primary-500));
2073
- }
2074
- .ax-el-ghost-outline.ax-state-selected {
2075
- border-color: rgba(var(--ax-color-primary-500));
2076
- color: rgba(var(--ax-color-primary-fore));
2077
- }
2078
- .ax-el-ghost-outline .ax-ripple {
2079
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
2080
- }
2081
- .ax-el-ghost-outline ax-loading-spinner .ax-loader {
2082
- border-color: rgba(var(--ax-color-ghost-fore));
2083
- border-bottom-color: transparent;
2084
- }
2085
-
2086
- .ax-el-ghost-blank {
2087
- border-style: none;
2088
- background-color: transparent;
2089
- color: rgba(var(--ax-color-ghost-fore));
2090
- }
2091
- .ax-el-ghost-blank.ax-state-selected {
2092
- background-color: rgba(var(--ax-color-primary-500));
2093
- color: rgba(var(--ax-color-primary-fore));
2094
- }
2095
- .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) {
2096
- border-color: rgba(var(--ax-color-primary-700));
2097
- color: rgba(var(--ax-color-primary-700));
2098
- }
2099
- .ax-el-ghost-blank.ax-el-interactive:active {
2100
- border-color: rgba(var(--ax-color-primary-800));
2101
- color: rgba(var(--ax-color-primary-800));
2102
- }
2103
- .ax-el-ghost-blank .ax-ripple {
2104
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
2105
- }
2106
- .ax-el-ghost-blank ax-loading-spinner .ax-loader {
2107
- border-color: rgba(var(--ax-color-ghost-fore));
2108
- border-bottom-color: transparent;
2109
- }
2110
- .ax-el-ghost-blank > button:is(.ax-el-ghost-blank > button:focus-visible, .ax-el-ghost-blank > button.ax-state-focus) {
2111
- outline-color: rgba(var(--ax-color-primary-500));
2112
- }
2113
-
2114
- .ax-el-ghost-twotone {
2115
- border-color: transparent;
2116
- background-color: rgba(var(--ax-color-ghost-fore), 0.05);
2117
- color: rgba(var(--ax-color-ghost-fore));
2118
- }
2119
- .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) {
2120
- background-color: rgba(var(--ax-color-primary-200));
2121
- color: rgba(var(--ax-color-primary-fore-tint));
2122
- }
2123
- .ax-el-ghost-twotone.ax-el-interactive:active {
2124
- background-color: rgba(var(--ax-color-primary-300));
2125
- color: rgba(var(--ax-color-primary-fore-tint));
2126
- }
2127
- .ax-el-ghost-twotone.ax-state-selected {
2128
- border-color: rgba(var(--ax-color-primary-300));
2129
- background-color: rgba(var(--ax-color-primary-400));
2130
- color: rgba(var(--ax-color-primary-fore-tint));
2131
- }
2132
- .ax-el-ghost-twotone .ax-ripple {
2133
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
2134
- }
2135
- .ax-el-ghost-twotone ax-loading-spinner .ax-loader {
2136
- border-color: rgba(var(--ax-color-ghost-fore));
2137
- border-bottom-color: transparent;
2138
- }
2139
- .ax-el-ghost-twotone > button:is(.ax-el-ghost-twotone > button:focus-visible, .ax-el-ghost-twotone > button.ax-state-focus) {
2140
- outline-color: rgba(var(--ax-color-primary-500));
2141
- }
2142
-
2143
- .ax-el-warning-twotone {
2144
- background-color: rgba(var(--ax-color-warning-100));
2145
- color: rgba(var(--ax-color-warning-fore-tint));
2146
- border-color: rgba(var(--ax-color-warning-100));
2147
- }
2148
- .ax-el-warning-twotone.ax-el-interactive:hover:not(.ax-state-disabled) {
2149
- background-color: rgba(var(--ax-color-warning-200));
2150
- }
2151
- .ax-el-warning-twotone.ax-state-selected {
2152
- background-color: rgba(var(--ax-color-warning-300));
2153
- }
2154
- .ax-el-warning-twotone .ax-ripple {
2155
- background-color: rgba(var(--ax-color-warning-500), 0.3) !important;
2156
- }
2157
- .ax-el-warning-twotone ax-loading-spinner .ax-loader {
2158
- border-color: rgba(var(--ax-color-warning-fore-tint));
2159
- border-bottom-color: transparent;
2160
- }
2161
- .ax-el-warning-twotone > button:is(.ax-el-warning-twotone > button:focus-visible, .ax-el-warning-twotone > button.ax-state-focus) {
2162
- outline-color: rgba(var(--ax-color-warning-500));
2163
- }
2164
-
2165
- .ax-el-ghost-solid {
2166
- border-width: 1px;
2167
- border-color: rgba(var(--ax-color-border-default));
2168
- background-color: rgba(var(--ax-color-ghost));
2169
- color: rgba(var(--ax-color-ghost-fore));
2170
- --ax-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
2171
- --ax-shadow-colored: 0 1px 2px 0 var(--ax-shadow-color);
2172
- 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);
2173
- }
2174
- .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) {
2175
- border-color: rgba(var(--ax-color-primary-500));
2176
- color: rgba(var(--ax-color-primary-500));
2177
- }
2178
- .ax-el-ghost-solid.ax-el-interactive:active {
2179
- border-color: rgba(var(--ax-color-primary-700));
2180
- color: rgba(var(--ax-color-primary-700));
2181
- }
2182
- .ax-el-ghost-solid.ax-state-selected {
2183
- border-color: rgba(var(--ax-color-primary-500));
2184
- background-color: rgba(var(--ax-color-primary-500));
2185
- color: rgba(var(--ax-color-primary-fore));
2186
- }
2187
- .ax-el-ghost-solid .ax-ripple {
2188
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
2189
- }
2190
- .ax-el-ghost-solid ax-loading-spinner .ax-loader {
2191
- border-color: rgba(var(--ax-color-ghost-fore));
2192
- border-bottom-color: transparent;
2193
- }
2194
-
2195
- .ax-el-ghost-outline {
2196
- border-width: 1px;
2197
- border-color: rgba(var(--ax-color-border-default));
2198
- background-color: transparent;
2199
- color: rgba(var(--ax-color-ghost-fore));
2200
- }
2201
- .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) {
2202
- border-color: rgba(var(--ax-color-primary-500));
2203
- color: rgba(var(--ax-color-primary-500));
2204
- }
2205
- .ax-el-ghost-outline.ax-state-selected {
2206
- border-color: rgba(var(--ax-color-primary-500));
2207
- color: rgba(var(--ax-color-primary-fore));
2208
- }
2209
- .ax-el-ghost-outline .ax-ripple {
2210
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
2211
- }
2212
- .ax-el-ghost-outline ax-loading-spinner .ax-loader {
2213
- border-color: rgba(var(--ax-color-ghost-fore));
2214
- border-bottom-color: transparent;
2215
- }
2216
-
2217
- .ax-el-ghost-blank {
2218
- border-style: none;
2219
- background-color: transparent;
2220
- color: rgba(var(--ax-color-ghost-fore));
2221
- }
2222
- .ax-el-ghost-blank.ax-state-selected {
2223
- background-color: rgba(var(--ax-color-primary-500));
2224
- color: rgba(var(--ax-color-primary-fore));
2225
- }
2226
- .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) {
2227
- border-color: rgba(var(--ax-color-primary-700));
2228
- color: rgba(var(--ax-color-primary-700));
2229
- }
2230
- .ax-el-ghost-blank.ax-el-interactive:active {
2231
- border-color: rgba(var(--ax-color-primary-800));
2232
- color: rgba(var(--ax-color-primary-800));
2233
- }
2234
- .ax-el-ghost-blank .ax-ripple {
2235
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
2236
- }
2237
- .ax-el-ghost-blank ax-loading-spinner .ax-loader {
2238
- border-color: rgba(var(--ax-color-ghost-fore));
2239
- border-bottom-color: transparent;
2240
- }
2241
- .ax-el-ghost-blank > button:is(.ax-el-ghost-blank > button:focus-visible, .ax-el-ghost-blank > button.ax-state-focus) {
2242
- outline-color: rgba(var(--ax-color-primary-500));
2243
- }
2244
-
2245
- .ax-el-ghost-twotone {
2246
- border-color: transparent;
2247
- background-color: rgba(var(--ax-color-ghost-fore), 0.05);
2248
- color: rgba(var(--ax-color-ghost-fore));
2249
- }
2250
- .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) {
2251
- background-color: rgba(var(--ax-color-primary-200));
2252
- color: rgba(var(--ax-color-primary-fore-tint));
2253
- }
2254
- .ax-el-ghost-twotone.ax-el-interactive:active {
2255
- background-color: rgba(var(--ax-color-primary-300));
2256
- color: rgba(var(--ax-color-primary-fore-tint));
2257
- }
2258
- .ax-el-ghost-twotone.ax-state-selected {
2259
- border-color: rgba(var(--ax-color-primary-300));
2260
- background-color: rgba(var(--ax-color-primary-400));
2261
- color: rgba(var(--ax-color-primary-fore-tint));
2262
- }
2263
- .ax-el-ghost-twotone .ax-ripple {
2264
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
2265
- }
2266
- .ax-el-ghost-twotone ax-loading-spinner .ax-loader {
2267
- border-color: rgba(var(--ax-color-ghost-fore));
2268
- border-bottom-color: transparent;
2269
- }
2270
- .ax-el-ghost-twotone > button:is(.ax-el-ghost-twotone > button:focus-visible, .ax-el-ghost-twotone > button.ax-state-focus) {
2271
- outline-color: rgba(var(--ax-color-primary-500));
2272
- }
2273
-
2274
- .ax-el-warning-outline {
2275
- background-color: transparent;
2276
- color: rgba(var(--ax-color-warning-500));
2277
- border-color: rgba(var(--ax-color-warning-500));
2278
- border-width: 1px;
2279
- }
2280
- .ax-el-warning-outline.ax-el-interactive:hover:not(.ax-state-disabled) {
2281
- color: rgba(var(--ax-color-warning-700));
2282
- border-color: rgba(var(--ax-color-warning-700));
2283
- }
2284
- .ax-el-warning-outline.ax-state-selected {
2285
- border-color: rgba(var(--ax-color-warning-500));
2286
- color: rgba(var(--ax-color-warning-fore));
2287
- background-color: rgba(var(--ax-color-warning-500));
2288
- }
2289
- .ax-el-warning-outline .ax-ripple {
2290
- background-color: rgba(var(--ax-color-warning-500), 0.3) !important;
2291
- }
2292
- .ax-el-warning-outline ax-loading-spinner .ax-loader {
2293
- border-color: rgba(var(--ax-color-warning-500));
2294
- border-bottom-color: transparent;
2295
- }
2296
- .ax-el-warning-outline > button:is(.ax-el-warning-outline > button:focus-visible, .ax-el-warning-outline > button.ax-state-focus) {
2297
- outline-offset: -2px;
2298
- outline-color: rgba(var(--ax-color-warning-500));
2299
- color: rgba(var(--ax-color-warning-fore-tint));
2300
- }
2301
-
2302
- .ax-el-ghost-solid {
2303
- border-width: 1px;
2304
- border-color: rgba(var(--ax-color-border-default));
2305
- background-color: rgba(var(--ax-color-ghost));
2306
- color: rgba(var(--ax-color-ghost-fore));
2307
- --ax-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
2308
- --ax-shadow-colored: 0 1px 2px 0 var(--ax-shadow-color);
2309
- 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);
2310
- }
2311
- .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) {
2312
- border-color: rgba(var(--ax-color-primary-500));
2313
- color: rgba(var(--ax-color-primary-500));
2314
- }
2315
- .ax-el-ghost-solid.ax-el-interactive:active {
2316
- border-color: rgba(var(--ax-color-primary-700));
2317
- color: rgba(var(--ax-color-primary-700));
2318
- }
2319
- .ax-el-ghost-solid.ax-state-selected {
2320
- border-color: rgba(var(--ax-color-primary-500));
2321
- background-color: rgba(var(--ax-color-primary-500));
2322
- color: rgba(var(--ax-color-primary-fore));
2323
- }
2324
- .ax-el-ghost-solid .ax-ripple {
2325
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
2326
- }
2327
- .ax-el-ghost-solid ax-loading-spinner .ax-loader {
2328
- border-color: rgba(var(--ax-color-ghost-fore));
2329
- border-bottom-color: transparent;
2330
- }
2331
-
2332
- .ax-el-ghost-outline {
2333
- border-width: 1px;
2334
- border-color: rgba(var(--ax-color-border-default));
2335
- background-color: transparent;
2336
- color: rgba(var(--ax-color-ghost-fore));
2337
- }
2338
- .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) {
2339
- border-color: rgba(var(--ax-color-primary-500));
2340
- color: rgba(var(--ax-color-primary-500));
2341
- }
2342
- .ax-el-ghost-outline.ax-state-selected {
2343
- border-color: rgba(var(--ax-color-primary-500));
2344
- color: rgba(var(--ax-color-primary-fore));
2345
- }
2346
- .ax-el-ghost-outline .ax-ripple {
2347
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
2348
- }
2349
- .ax-el-ghost-outline ax-loading-spinner .ax-loader {
2350
- border-color: rgba(var(--ax-color-ghost-fore));
2351
- border-bottom-color: transparent;
2352
- }
2353
-
2354
- .ax-el-ghost-blank {
2355
- border-style: none;
2356
- background-color: transparent;
2357
- color: rgba(var(--ax-color-ghost-fore));
2358
- }
2359
- .ax-el-ghost-blank.ax-state-selected {
2360
- background-color: rgba(var(--ax-color-primary-500));
2361
- color: rgba(var(--ax-color-primary-fore));
2362
- }
2363
- .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) {
2364
- border-color: rgba(var(--ax-color-primary-700));
2365
- color: rgba(var(--ax-color-primary-700));
2366
- }
2367
- .ax-el-ghost-blank.ax-el-interactive:active {
2368
- border-color: rgba(var(--ax-color-primary-800));
2369
- color: rgba(var(--ax-color-primary-800));
2370
- }
2371
- .ax-el-ghost-blank .ax-ripple {
2372
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
2373
- }
2374
- .ax-el-ghost-blank ax-loading-spinner .ax-loader {
2375
- border-color: rgba(var(--ax-color-ghost-fore));
2376
- border-bottom-color: transparent;
2377
- }
2378
- .ax-el-ghost-blank > button:is(.ax-el-ghost-blank > button:focus-visible, .ax-el-ghost-blank > button.ax-state-focus) {
2379
- outline-color: rgba(var(--ax-color-primary-500));
2380
- }
2381
-
2382
- .ax-el-ghost-twotone {
2383
- border-color: transparent;
2384
- background-color: rgba(var(--ax-color-ghost-fore), 0.05);
2385
- color: rgba(var(--ax-color-ghost-fore));
2386
- }
2387
- .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) {
2388
- background-color: rgba(var(--ax-color-primary-200));
2389
- color: rgba(var(--ax-color-primary-fore-tint));
2390
- }
2391
- .ax-el-ghost-twotone.ax-el-interactive:active {
2392
- background-color: rgba(var(--ax-color-primary-300));
2393
- color: rgba(var(--ax-color-primary-fore-tint));
2394
- }
2395
- .ax-el-ghost-twotone.ax-state-selected {
2396
- border-color: rgba(var(--ax-color-primary-300));
2397
- background-color: rgba(var(--ax-color-primary-400));
2398
- color: rgba(var(--ax-color-primary-fore-tint));
2399
- }
2400
- .ax-el-ghost-twotone .ax-ripple {
2401
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
2402
- }
2403
- .ax-el-ghost-twotone ax-loading-spinner .ax-loader {
2404
- border-color: rgba(var(--ax-color-ghost-fore));
2405
- border-bottom-color: transparent;
2406
- }
2407
- .ax-el-ghost-twotone > button:is(.ax-el-ghost-twotone > button:focus-visible, .ax-el-ghost-twotone > button.ax-state-focus) {
2408
- outline-color: rgba(var(--ax-color-primary-500));
2409
- }
2410
-
2411
- .ax-el-warning-blank {
2412
- color: rgba(var(--ax-color-warning-500));
2413
- }
2414
- .ax-el-warning-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
2415
- color: rgba(var(--ax-color-warning-fore-tint));
2416
- }
2417
- .ax-el-warning-blank.ax-state-selected {
2418
- background-color: rgba(var(--ax-color-warning-700));
2419
- color: rgba(var(--ax-color-warning-fore));
2420
- }
2421
- .ax-el-warning-blank .ax-ripple {
2422
- background-color: rgba(var(--ax-color-warning-500), 0.3);
2423
- }
2424
- .ax-el-warning-blank ax-loading-spinner .ax-loader {
2425
- border-color: rgba(var(--ax-color-warning-500));
2426
- border-bottom-color: transparent;
2427
- }
2428
- .ax-el-warning-blank > button:is(.ax-el-warning-blank > button:focus-visible, .ax-el-warning-blank > button.ax-state-focus) {
2429
- outline-color: rgba(var(--ax-color-warning-300));
2430
- outline-offset: 0;
2431
- }
2432
-
2433
- .ax-el-ghost-solid {
2434
- border-width: 1px;
2435
- border-color: rgba(var(--ax-color-border-default));
2436
- background-color: rgba(var(--ax-color-ghost));
2437
- color: rgba(var(--ax-color-ghost-fore));
2438
- --ax-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
2439
- --ax-shadow-colored: 0 1px 2px 0 var(--ax-shadow-color);
2440
- 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);
2441
- }
2442
- .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) {
2443
- border-color: rgba(var(--ax-color-primary-500));
2444
- color: rgba(var(--ax-color-primary-500));
2445
- }
2446
- .ax-el-ghost-solid.ax-el-interactive:active {
2447
- border-color: rgba(var(--ax-color-primary-700));
2448
- color: rgba(var(--ax-color-primary-700));
2449
- }
2450
- .ax-el-ghost-solid.ax-state-selected {
2451
- border-color: rgba(var(--ax-color-primary-500));
2452
- background-color: rgba(var(--ax-color-primary-500));
2453
- color: rgba(var(--ax-color-primary-fore));
2454
- }
2455
- .ax-el-ghost-solid .ax-ripple {
2456
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
2457
- }
2458
- .ax-el-ghost-solid ax-loading-spinner .ax-loader {
2459
- border-color: rgba(var(--ax-color-ghost-fore));
2460
- border-bottom-color: transparent;
2461
- }
2462
-
2463
- .ax-el-ghost-outline {
2464
- border-width: 1px;
2465
- border-color: rgba(var(--ax-color-border-default));
2466
- background-color: transparent;
2467
- color: rgba(var(--ax-color-ghost-fore));
2468
- }
2469
- .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) {
2470
- border-color: rgba(var(--ax-color-primary-500));
2471
- color: rgba(var(--ax-color-primary-500));
2472
- }
2473
- .ax-el-ghost-outline.ax-state-selected {
2474
- border-color: rgba(var(--ax-color-primary-500));
2475
- color: rgba(var(--ax-color-primary-fore));
2476
- }
2477
- .ax-el-ghost-outline .ax-ripple {
2478
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
2479
- }
2480
- .ax-el-ghost-outline ax-loading-spinner .ax-loader {
2481
- border-color: rgba(var(--ax-color-ghost-fore));
2482
- border-bottom-color: transparent;
2483
- }
2484
-
2485
- .ax-el-ghost-blank {
2486
- border-style: none;
2487
- background-color: transparent;
2488
- color: rgba(var(--ax-color-ghost-fore));
2489
- }
2490
- .ax-el-ghost-blank.ax-state-selected {
2491
- background-color: rgba(var(--ax-color-primary-500));
2492
- color: rgba(var(--ax-color-primary-fore));
2493
- }
2494
- .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) {
2495
- border-color: rgba(var(--ax-color-primary-700));
2496
- color: rgba(var(--ax-color-primary-700));
2497
- }
2498
- .ax-el-ghost-blank.ax-el-interactive:active {
2499
- border-color: rgba(var(--ax-color-primary-800));
2500
- color: rgba(var(--ax-color-primary-800));
2501
- }
2502
- .ax-el-ghost-blank .ax-ripple {
2503
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
2504
- }
2505
- .ax-el-ghost-blank ax-loading-spinner .ax-loader {
2506
- border-color: rgba(var(--ax-color-ghost-fore));
2507
- border-bottom-color: transparent;
2508
- }
2509
- .ax-el-ghost-blank > button:is(.ax-el-ghost-blank > button:focus-visible, .ax-el-ghost-blank > button.ax-state-focus) {
2510
- outline-color: rgba(var(--ax-color-primary-500));
2511
- }
2512
-
2513
- .ax-el-ghost-twotone {
2514
- border-color: transparent;
2515
- background-color: rgba(var(--ax-color-ghost-fore), 0.05);
2516
- color: rgba(var(--ax-color-ghost-fore));
2517
- }
2518
- .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) {
2519
- background-color: rgba(var(--ax-color-primary-200));
2520
- color: rgba(var(--ax-color-primary-fore-tint));
2521
- }
2522
- .ax-el-ghost-twotone.ax-el-interactive:active {
2523
- background-color: rgba(var(--ax-color-primary-300));
2524
- color: rgba(var(--ax-color-primary-fore-tint));
2525
- }
2526
- .ax-el-ghost-twotone.ax-state-selected {
2527
- border-color: rgba(var(--ax-color-primary-300));
2528
- background-color: rgba(var(--ax-color-primary-400));
2529
- color: rgba(var(--ax-color-primary-fore-tint));
2530
- }
2531
- .ax-el-ghost-twotone .ax-ripple {
2532
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
2533
- }
2534
- .ax-el-ghost-twotone ax-loading-spinner .ax-loader {
2535
- border-color: rgba(var(--ax-color-ghost-fore));
2536
- border-bottom-color: transparent;
2537
- }
2538
- .ax-el-ghost-twotone > button:is(.ax-el-ghost-twotone > button:focus-visible, .ax-el-ghost-twotone > button.ax-state-focus) {
2539
- outline-color: rgba(var(--ax-color-primary-500));
2540
- }
2541
-
2542
- .ax-el-danger-solid {
2543
- background-color: rgba(var(--ax-color-danger-500));
2544
- color: rgba(var(--ax-color-danger-fore));
2545
- border-color: rgba(var(--ax-color-danger-500));
2546
- }
2547
- .ax-el-danger-solid.ax-el-interactive:hover:not(.ax-state-disabled) {
2548
- background-color: rgba(var(--ax-color-danger-600));
2549
- }
2550
- .ax-el-danger-solid.ax-state-selected {
2551
- background-color: rgba(var(--ax-color-danger-700));
2552
- }
2553
- .ax-el-danger-solid .ax-ripple {
2554
- background-color: rgba(var(--ax-color-danger-300), 0.3) !important;
2555
- }
2556
- .ax-el-danger-solid ax-loading-spinner .ax-loader {
2557
- border-color: rgba(var(--ax-color-danger-fore));
2558
- border-bottom-color: transparent;
2559
- }
2560
- .ax-el-danger-solid > button:is(.ax-el-danger-solid > button:focus-visible, .ax-el-danger-solid > button.ax-state-focus) {
2561
- outline-color: rgba(var(--ax-color-danger-500));
2562
- }
2563
-
2564
- .ax-el-ghost-solid {
2565
- border-width: 1px;
2566
- border-color: rgba(var(--ax-color-border-default));
2567
- background-color: rgba(var(--ax-color-ghost));
2568
- color: rgba(var(--ax-color-ghost-fore));
2569
- --ax-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
2570
- --ax-shadow-colored: 0 1px 2px 0 var(--ax-shadow-color);
2571
- 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);
2572
- }
2573
- .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) {
2574
- border-color: rgba(var(--ax-color-primary-500));
2575
- color: rgba(var(--ax-color-primary-500));
2576
- }
2577
- .ax-el-ghost-solid.ax-el-interactive:active {
2578
- border-color: rgba(var(--ax-color-primary-700));
2579
- color: rgba(var(--ax-color-primary-700));
2580
- }
2581
- .ax-el-ghost-solid.ax-state-selected {
2582
- border-color: rgba(var(--ax-color-primary-500));
2583
- background-color: rgba(var(--ax-color-primary-500));
2584
- color: rgba(var(--ax-color-primary-fore));
2585
- }
2586
- .ax-el-ghost-solid .ax-ripple {
2587
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
2588
- }
2589
- .ax-el-ghost-solid ax-loading-spinner .ax-loader {
2590
- border-color: rgba(var(--ax-color-ghost-fore));
2591
- border-bottom-color: transparent;
2592
- }
2593
-
2594
- .ax-el-ghost-outline {
2595
- border-width: 1px;
2596
- border-color: rgba(var(--ax-color-border-default));
2597
- background-color: transparent;
2598
- color: rgba(var(--ax-color-ghost-fore));
2599
- }
2600
- .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) {
2601
- border-color: rgba(var(--ax-color-primary-500));
2602
- color: rgba(var(--ax-color-primary-500));
2603
- }
2604
- .ax-el-ghost-outline.ax-state-selected {
2605
- border-color: rgba(var(--ax-color-primary-500));
2606
- color: rgba(var(--ax-color-primary-fore));
2607
- }
2608
- .ax-el-ghost-outline .ax-ripple {
2609
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
2610
- }
2611
- .ax-el-ghost-outline ax-loading-spinner .ax-loader {
2612
- border-color: rgba(var(--ax-color-ghost-fore));
2613
- border-bottom-color: transparent;
2614
- }
2615
-
2616
- .ax-el-ghost-blank {
2617
- border-style: none;
2618
- background-color: transparent;
2619
- color: rgba(var(--ax-color-ghost-fore));
2620
- }
2621
- .ax-el-ghost-blank.ax-state-selected {
2622
- background-color: rgba(var(--ax-color-primary-500));
2623
- color: rgba(var(--ax-color-primary-fore));
2624
- }
2625
- .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) {
2626
- border-color: rgba(var(--ax-color-primary-700));
2627
- color: rgba(var(--ax-color-primary-700));
2628
- }
2629
- .ax-el-ghost-blank.ax-el-interactive:active {
2630
- border-color: rgba(var(--ax-color-primary-800));
2631
- color: rgba(var(--ax-color-primary-800));
2632
- }
2633
- .ax-el-ghost-blank .ax-ripple {
2634
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
2635
- }
2636
- .ax-el-ghost-blank ax-loading-spinner .ax-loader {
2637
- border-color: rgba(var(--ax-color-ghost-fore));
2638
- border-bottom-color: transparent;
2639
- }
2640
- .ax-el-ghost-blank > button:is(.ax-el-ghost-blank > button:focus-visible, .ax-el-ghost-blank > button.ax-state-focus) {
2641
- outline-color: rgba(var(--ax-color-primary-500));
2642
- }
2643
-
2644
- .ax-el-ghost-twotone {
2645
- border-color: transparent;
2646
- background-color: rgba(var(--ax-color-ghost-fore), 0.05);
2647
- color: rgba(var(--ax-color-ghost-fore));
2648
- }
2649
- .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) {
2650
- background-color: rgba(var(--ax-color-primary-200));
2651
- color: rgba(var(--ax-color-primary-fore-tint));
2652
- }
2653
- .ax-el-ghost-twotone.ax-el-interactive:active {
2654
- background-color: rgba(var(--ax-color-primary-300));
2655
- color: rgba(var(--ax-color-primary-fore-tint));
2656
- }
2657
- .ax-el-ghost-twotone.ax-state-selected {
2658
- border-color: rgba(var(--ax-color-primary-300));
2659
- background-color: rgba(var(--ax-color-primary-400));
2660
- color: rgba(var(--ax-color-primary-fore-tint));
2661
- }
2662
- .ax-el-ghost-twotone .ax-ripple {
2663
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
2664
- }
2665
- .ax-el-ghost-twotone ax-loading-spinner .ax-loader {
2666
- border-color: rgba(var(--ax-color-ghost-fore));
2667
- border-bottom-color: transparent;
2668
- }
2669
- .ax-el-ghost-twotone > button:is(.ax-el-ghost-twotone > button:focus-visible, .ax-el-ghost-twotone > button.ax-state-focus) {
2670
- outline-color: rgba(var(--ax-color-primary-500));
2671
- }
2672
-
2673
- .ax-el-danger-twotone {
2674
- background-color: rgba(var(--ax-color-danger-100));
2675
- color: rgba(var(--ax-color-danger-fore-tint));
2676
- border-color: rgba(var(--ax-color-danger-100));
2677
- }
2678
- .ax-el-danger-twotone.ax-el-interactive:hover:not(.ax-state-disabled) {
2679
- background-color: rgba(var(--ax-color-danger-200));
2680
- }
2681
- .ax-el-danger-twotone.ax-state-selected {
2682
- background-color: rgba(var(--ax-color-danger-300));
2683
- }
2684
- .ax-el-danger-twotone .ax-ripple {
2685
- background-color: rgba(var(--ax-color-danger-500), 0.3) !important;
2686
- }
2687
- .ax-el-danger-twotone ax-loading-spinner .ax-loader {
2688
- border-color: rgba(var(--ax-color-danger-fore-tint));
2689
- border-bottom-color: transparent;
2690
- }
2691
- .ax-el-danger-twotone > button:is(.ax-el-danger-twotone > button:focus-visible, .ax-el-danger-twotone > button.ax-state-focus) {
2692
- outline-color: rgba(var(--ax-color-danger-500));
2693
- }
2694
-
2695
- .ax-el-ghost-solid {
2696
- border-width: 1px;
2697
- border-color: rgba(var(--ax-color-border-default));
2698
- background-color: rgba(var(--ax-color-ghost));
2699
- color: rgba(var(--ax-color-ghost-fore));
2700
- --ax-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
2701
- --ax-shadow-colored: 0 1px 2px 0 var(--ax-shadow-color);
2702
- 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);
2703
- }
2704
- .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) {
2705
- border-color: rgba(var(--ax-color-primary-500));
2706
- color: rgba(var(--ax-color-primary-500));
2707
- }
2708
- .ax-el-ghost-solid.ax-el-interactive:active {
2709
- border-color: rgba(var(--ax-color-primary-700));
2710
- color: rgba(var(--ax-color-primary-700));
2711
- }
2712
- .ax-el-ghost-solid.ax-state-selected {
2713
- border-color: rgba(var(--ax-color-primary-500));
2714
- background-color: rgba(var(--ax-color-primary-500));
2715
- color: rgba(var(--ax-color-primary-fore));
2716
- }
2717
- .ax-el-ghost-solid .ax-ripple {
2718
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
2719
- }
2720
- .ax-el-ghost-solid ax-loading-spinner .ax-loader {
2721
- border-color: rgba(var(--ax-color-ghost-fore));
2722
- border-bottom-color: transparent;
2723
- }
2724
-
2725
- .ax-el-ghost-outline {
2726
- border-width: 1px;
2727
- border-color: rgba(var(--ax-color-border-default));
2728
- background-color: transparent;
2729
- color: rgba(var(--ax-color-ghost-fore));
2730
- }
2731
- .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) {
2732
- border-color: rgba(var(--ax-color-primary-500));
2733
- color: rgba(var(--ax-color-primary-500));
2734
- }
2735
- .ax-el-ghost-outline.ax-state-selected {
2736
- border-color: rgba(var(--ax-color-primary-500));
2737
- color: rgba(var(--ax-color-primary-fore));
2738
- }
2739
- .ax-el-ghost-outline .ax-ripple {
2740
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
2741
- }
2742
- .ax-el-ghost-outline ax-loading-spinner .ax-loader {
2743
- border-color: rgba(var(--ax-color-ghost-fore));
2744
- border-bottom-color: transparent;
2745
- }
2746
-
2747
- .ax-el-ghost-blank {
2748
- border-style: none;
2749
- background-color: transparent;
2750
- color: rgba(var(--ax-color-ghost-fore));
2751
- }
2752
- .ax-el-ghost-blank.ax-state-selected {
2753
- background-color: rgba(var(--ax-color-primary-500));
2754
- color: rgba(var(--ax-color-primary-fore));
2755
- }
2756
- .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) {
2757
- border-color: rgba(var(--ax-color-primary-700));
2758
- color: rgba(var(--ax-color-primary-700));
2759
- }
2760
- .ax-el-ghost-blank.ax-el-interactive:active {
2761
- border-color: rgba(var(--ax-color-primary-800));
2762
- color: rgba(var(--ax-color-primary-800));
2763
- }
2764
- .ax-el-ghost-blank .ax-ripple {
2765
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
2766
- }
2767
- .ax-el-ghost-blank ax-loading-spinner .ax-loader {
2768
- border-color: rgba(var(--ax-color-ghost-fore));
2769
- border-bottom-color: transparent;
2770
- }
2771
- .ax-el-ghost-blank > button:is(.ax-el-ghost-blank > button:focus-visible, .ax-el-ghost-blank > button.ax-state-focus) {
2772
- outline-color: rgba(var(--ax-color-primary-500));
2773
- }
2774
-
2775
- .ax-el-ghost-twotone {
2776
- border-color: transparent;
2777
- background-color: rgba(var(--ax-color-ghost-fore), 0.05);
2778
- color: rgba(var(--ax-color-ghost-fore));
2779
- }
2780
- .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) {
2781
- background-color: rgba(var(--ax-color-primary-200));
2782
- color: rgba(var(--ax-color-primary-fore-tint));
2783
- }
2784
- .ax-el-ghost-twotone.ax-el-interactive:active {
2785
- background-color: rgba(var(--ax-color-primary-300));
2786
- color: rgba(var(--ax-color-primary-fore-tint));
2787
- }
2788
- .ax-el-ghost-twotone.ax-state-selected {
2789
- border-color: rgba(var(--ax-color-primary-300));
2790
- background-color: rgba(var(--ax-color-primary-400));
2791
- color: rgba(var(--ax-color-primary-fore-tint));
2792
- }
2793
- .ax-el-ghost-twotone .ax-ripple {
2794
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
2795
- }
2796
- .ax-el-ghost-twotone ax-loading-spinner .ax-loader {
2797
- border-color: rgba(var(--ax-color-ghost-fore));
2798
- border-bottom-color: transparent;
2799
- }
2800
- .ax-el-ghost-twotone > button:is(.ax-el-ghost-twotone > button:focus-visible, .ax-el-ghost-twotone > button.ax-state-focus) {
2801
- outline-color: rgba(var(--ax-color-primary-500));
2802
- }
2803
-
2804
- .ax-el-danger-outline {
2805
- background-color: transparent;
2806
- color: rgba(var(--ax-color-danger-500));
2807
- border-color: rgba(var(--ax-color-danger-500));
2808
- border-width: 1px;
2809
- }
2810
- .ax-el-danger-outline.ax-el-interactive:hover:not(.ax-state-disabled) {
2811
- color: rgba(var(--ax-color-danger-700));
2812
- border-color: rgba(var(--ax-color-danger-700));
2813
- }
2814
- .ax-el-danger-outline.ax-state-selected {
2815
- border-color: rgba(var(--ax-color-danger-500));
2816
- color: rgba(var(--ax-color-danger-fore));
2817
- background-color: rgba(var(--ax-color-danger-500));
2818
- }
2819
- .ax-el-danger-outline .ax-ripple {
2820
- background-color: rgba(var(--ax-color-danger-500), 0.3) !important;
2821
- }
2822
- .ax-el-danger-outline ax-loading-spinner .ax-loader {
2823
- border-color: rgba(var(--ax-color-danger-500));
2824
- border-bottom-color: transparent;
2825
- }
2826
- .ax-el-danger-outline > button:is(.ax-el-danger-outline > button:focus-visible, .ax-el-danger-outline > button.ax-state-focus) {
2827
- outline-offset: -2px;
2828
- outline-color: rgba(var(--ax-color-danger-500));
2829
- color: rgba(var(--ax-color-danger-fore-tint));
2830
- }
2831
-
2832
- .ax-el-ghost-solid {
2833
- border-width: 1px;
2834
- border-color: rgba(var(--ax-color-border-default));
2835
- background-color: rgba(var(--ax-color-ghost));
2836
- color: rgba(var(--ax-color-ghost-fore));
2837
- --ax-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
2838
- --ax-shadow-colored: 0 1px 2px 0 var(--ax-shadow-color);
2839
- 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);
2840
- }
2841
- .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) {
2842
- border-color: rgba(var(--ax-color-primary-500));
2843
- color: rgba(var(--ax-color-primary-500));
2844
- }
2845
- .ax-el-ghost-solid.ax-el-interactive:active {
2846
- border-color: rgba(var(--ax-color-primary-700));
2847
- color: rgba(var(--ax-color-primary-700));
2848
- }
2849
- .ax-el-ghost-solid.ax-state-selected {
2850
- border-color: rgba(var(--ax-color-primary-500));
2851
- background-color: rgba(var(--ax-color-primary-500));
2852
- color: rgba(var(--ax-color-primary-fore));
2853
- }
2854
- .ax-el-ghost-solid .ax-ripple {
2855
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
2856
- }
2857
- .ax-el-ghost-solid ax-loading-spinner .ax-loader {
2858
- border-color: rgba(var(--ax-color-ghost-fore));
2859
- border-bottom-color: transparent;
2860
- }
2861
-
2862
- .ax-el-ghost-outline {
2863
- border-width: 1px;
2864
- border-color: rgba(var(--ax-color-border-default));
2865
- background-color: transparent;
2866
- color: rgba(var(--ax-color-ghost-fore));
2867
- }
2868
- .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) {
2869
- border-color: rgba(var(--ax-color-primary-500));
2870
- color: rgba(var(--ax-color-primary-500));
617
+ .ax-el-secondary-outline ax-loading-spinner .ax-loader {
618
+ border-color: rgba(var(--ax-color-secondary-500));
619
+ border-bottom-color: transparent;
2871
620
  }
2872
- .ax-el-ghost-outline.ax-state-selected {
2873
- border-color: rgba(var(--ax-color-primary-500));
2874
- color: rgba(var(--ax-color-primary-fore));
621
+ .ax-el-secondary-outline:is(.ax-el-secondary-outline:focus-visible, .ax-el-secondary-outline.ax-state-focus) {
622
+ outline-offset: -2px;
623
+ outline-color: rgba(var(--ax-color-secondary-500));
624
+ color: rgba(var(--ax-color-secondary-fore-tint));
2875
625
  }
2876
- .ax-el-ghost-outline .ax-ripple {
2877
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
626
+ .ax-el-secondary-outline > button:is(.ax-el-secondary-outline > button:focus-visible, .ax-el-secondary-outline > button.ax-state-focus) {
627
+ outline-offset: -2px;
628
+ outline-color: rgba(var(--ax-color-secondary-500));
629
+ color: rgba(var(--ax-color-secondary-fore-tint));
2878
630
  }
2879
- .ax-el-ghost-outline ax-loading-spinner .ax-loader {
2880
- border-color: rgba(var(--ax-color-ghost-fore));
2881
- border-bottom-color: transparent;
631
+ .ax-el-secondary-outline.ax-dropdown-button-marker {
632
+ border-inline-start-color: rgba(var(--ax-color-secondary-500));
2882
633
  }
2883
634
 
2884
- .ax-el-ghost-blank {
2885
- border-style: none;
2886
- background-color: transparent;
2887
- color: rgba(var(--ax-color-ghost-fore));
2888
- }
2889
- .ax-el-ghost-blank.ax-state-selected {
2890
- background-color: rgba(var(--ax-color-primary-500));
2891
- color: rgba(var(--ax-color-primary-fore));
635
+ .ax-el-secondary-blank {
636
+ color: rgba(var(--ax-color-secondary-500));
2892
637
  }
2893
- .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) {
2894
- border-color: rgba(var(--ax-color-primary-700));
2895
- color: rgba(var(--ax-color-primary-700));
638
+ .ax-el-secondary-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
639
+ color: rgba(var(--ax-color-secondary-fore-tint));
2896
640
  }
2897
- .ax-el-ghost-blank.ax-el-interactive:active {
2898
- border-color: rgba(var(--ax-color-primary-800));
2899
- color: rgba(var(--ax-color-primary-800));
641
+ .ax-el-secondary-blank.ax-state-selected {
642
+ background-color: rgba(var(--ax-color-secondary-700));
643
+ color: rgba(var(--ax-color-secondary-fore));
2900
644
  }
2901
- .ax-el-ghost-blank .ax-ripple {
2902
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
645
+ .ax-el-secondary-blank .ax-ripple {
646
+ background-color: rgba(var(--ax-color-secondary-500), 0.3);
2903
647
  }
2904
- .ax-el-ghost-blank ax-loading-spinner .ax-loader {
2905
- border-color: rgba(var(--ax-color-ghost-fore));
648
+ .ax-el-secondary-blank ax-loading-spinner .ax-loader {
649
+ border-color: rgba(var(--ax-color-secondary-500));
2906
650
  border-bottom-color: transparent;
2907
651
  }
2908
- .ax-el-ghost-blank > button:is(.ax-el-ghost-blank > button:focus-visible, .ax-el-ghost-blank > button.ax-state-focus) {
2909
- outline-color: rgba(var(--ax-color-primary-500));
652
+ .ax-el-secondary-blank:is(.ax-el-secondary-blank:focus-visible, .ax-el-secondary-blank.ax-state-focus) {
653
+ outline-color: rgba(var(--ax-color-secondary-300));
654
+ outline-offset: 0;
2910
655
  }
2911
-
2912
- .ax-el-ghost-twotone {
2913
- border-color: transparent;
2914
- background-color: rgba(var(--ax-color-ghost-fore), 0.05);
2915
- color: rgba(var(--ax-color-ghost-fore));
656
+ .ax-el-secondary-blank > button:is(.ax-el-secondary-blank > button:focus-visible, .ax-el-secondary-blank > button.ax-state-focus) {
657
+ outline-color: rgba(var(--ax-color-secondary-300));
658
+ outline-offset: 0;
2916
659
  }
2917
- .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) {
2918
- background-color: rgba(var(--ax-color-primary-200));
2919
- color: rgba(var(--ax-color-primary-fore-tint));
660
+ .ax-el-secondary-blank.ax-dropdown-button-marker {
661
+ border-inline-start-color: transparent;
2920
662
  }
2921
- .ax-el-ghost-twotone.ax-el-interactive:active {
2922
- background-color: rgba(var(--ax-color-primary-300));
2923
- color: rgba(var(--ax-color-primary-fore-tint));
663
+
664
+ .ax-el-success-solid {
665
+ background-color: rgba(var(--ax-color-success-500));
666
+ color: rgba(var(--ax-color-success-fore));
667
+ border-color: rgba(var(--ax-color-success-500));
2924
668
  }
2925
- .ax-el-ghost-twotone.ax-state-selected {
2926
- border-color: rgba(var(--ax-color-primary-300));
2927
- background-color: rgba(var(--ax-color-primary-400));
2928
- color: rgba(var(--ax-color-primary-fore-tint));
669
+ .ax-el-success-solid.ax-el-interactive:hover:not(.ax-state-disabled) {
670
+ background-color: rgba(var(--ax-color-success-600));
2929
671
  }
2930
- .ax-el-ghost-twotone .ax-ripple {
2931
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
672
+ .ax-el-success-solid.ax-state-selected {
673
+ background-color: rgba(var(--ax-color-success-700));
2932
674
  }
2933
- .ax-el-ghost-twotone ax-loading-spinner .ax-loader {
2934
- border-color: rgba(var(--ax-color-ghost-fore));
675
+ .ax-el-success-solid .ax-ripple {
676
+ background-color: rgba(var(--ax-color-success-300), 0.3) !important;
677
+ }
678
+ .ax-el-success-solid ax-loading-spinner .ax-loader {
679
+ border-color: rgba(var(--ax-color-success-fore));
2935
680
  border-bottom-color: transparent;
2936
681
  }
2937
- .ax-el-ghost-twotone > button:is(.ax-el-ghost-twotone > button:focus-visible, .ax-el-ghost-twotone > button.ax-state-focus) {
2938
- outline-color: rgba(var(--ax-color-primary-500));
682
+ .ax-el-success-solid:is(.ax-el-success-solid:focus-visible, .ax-el-success-solid.ax-state-focus) {
683
+ outline-color: rgba(var(--ax-color-success-500));
684
+ }
685
+ .ax-el-success-solid > button:is(.ax-el-success-solid > button:focus-visible, .ax-el-success-solid > button.ax-state-focus) {
686
+ outline-color: rgba(var(--ax-color-success-500));
687
+ }
688
+ .ax-el-success-solid.ax-dropdown-button-marker {
689
+ border-inline-start-color: rgba(var(--ax-color-success-600));
2939
690
  }
2940
691
 
2941
- .ax-el-danger-blank {
2942
- color: rgba(var(--ax-color-danger-500));
692
+ .ax-el-success-twotone {
693
+ background-color: rgba(var(--ax-color-success-100));
694
+ color: rgba(var(--ax-color-success-fore-tint));
695
+ border-color: rgba(var(--ax-color-success-100));
2943
696
  }
2944
- .ax-el-danger-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
2945
- color: rgba(var(--ax-color-danger-fore-tint));
697
+ .ax-el-success-twotone.ax-el-interactive:hover:not(.ax-state-disabled) {
698
+ background-color: rgba(var(--ax-color-success-200));
2946
699
  }
2947
- .ax-el-danger-blank.ax-state-selected {
2948
- background-color: rgba(var(--ax-color-danger-700));
2949
- color: rgba(var(--ax-color-danger-fore));
700
+ .ax-el-success-twotone.ax-state-selected {
701
+ background-color: rgba(var(--ax-color-success-300));
2950
702
  }
2951
- .ax-el-danger-blank .ax-ripple {
2952
- background-color: rgba(var(--ax-color-danger-500), 0.3);
703
+ .ax-el-success-twotone .ax-ripple {
704
+ background-color: rgba(var(--ax-color-success-500), 0.3) !important;
2953
705
  }
2954
- .ax-el-danger-blank ax-loading-spinner .ax-loader {
2955
- border-color: rgba(var(--ax-color-danger-500));
706
+ .ax-el-success-twotone ax-loading-spinner .ax-loader {
707
+ border-color: rgba(var(--ax-color-success-fore-tint));
2956
708
  border-bottom-color: transparent;
2957
709
  }
2958
- .ax-el-danger-blank > button:is(.ax-el-danger-blank > button:focus-visible, .ax-el-danger-blank > button.ax-state-focus) {
2959
- outline-color: rgba(var(--ax-color-danger-300));
2960
- outline-offset: 0;
710
+ .ax-el-success-twotone:is(.ax-el-success-twotone:focus-visible, .ax-el-success-twotone.ax-state-focus) {
711
+ outline-color: rgba(var(--ax-color-success-500));
712
+ }
713
+ .ax-el-success-twotone > button:is(.ax-el-success-twotone > button:focus-visible, .ax-el-success-twotone > button.ax-state-focus) {
714
+ outline-color: rgba(var(--ax-color-success-500));
715
+ }
716
+ .ax-el-success-twotone.ax-dropdown-button-marker {
717
+ border-inline-start-color: rgba(var(--ax-color-success-50));
2961
718
  }
2962
719
 
2963
- .ax-el-ghost-solid {
720
+ .ax-el-success-outline {
721
+ background-color: transparent;
722
+ color: rgba(var(--ax-color-success-500));
723
+ border-color: rgba(var(--ax-color-success-500));
2964
724
  border-width: 1px;
2965
- border-color: rgba(var(--ax-color-border-default));
2966
- background-color: rgba(var(--ax-color-ghost));
2967
- color: rgba(var(--ax-color-ghost-fore));
2968
- --ax-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
2969
- --ax-shadow-colored: 0 1px 2px 0 var(--ax-shadow-color);
2970
- 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);
2971
- }
2972
- .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) {
2973
- border-color: rgba(var(--ax-color-primary-500));
2974
- color: rgba(var(--ax-color-primary-500));
2975
725
  }
2976
- .ax-el-ghost-solid.ax-el-interactive:active {
2977
- border-color: rgba(var(--ax-color-primary-700));
2978
- color: rgba(var(--ax-color-primary-700));
726
+ .ax-el-success-outline.ax-el-interactive:hover:not(.ax-state-disabled) {
727
+ color: rgba(var(--ax-color-success-700));
728
+ border-color: rgba(var(--ax-color-success-700));
2979
729
  }
2980
- .ax-el-ghost-solid.ax-state-selected {
2981
- border-color: rgba(var(--ax-color-primary-500));
2982
- background-color: rgba(var(--ax-color-primary-500));
2983
- color: rgba(var(--ax-color-primary-fore));
730
+ .ax-el-success-outline.ax-state-selected {
731
+ border-color: rgba(var(--ax-color-success-500));
732
+ color: rgba(var(--ax-color-success-fore));
733
+ background-color: rgba(var(--ax-color-success-500));
2984
734
  }
2985
- .ax-el-ghost-solid .ax-ripple {
2986
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
735
+ .ax-el-success-outline .ax-ripple {
736
+ background-color: rgba(var(--ax-color-success-500), 0.3) !important;
2987
737
  }
2988
- .ax-el-ghost-solid ax-loading-spinner .ax-loader {
2989
- border-color: rgba(var(--ax-color-ghost-fore));
738
+ .ax-el-success-outline ax-loading-spinner .ax-loader {
739
+ border-color: rgba(var(--ax-color-success-500));
2990
740
  border-bottom-color: transparent;
2991
741
  }
2992
-
2993
- .ax-el-ghost-outline {
2994
- border-width: 1px;
2995
- border-color: rgba(var(--ax-color-border-default));
2996
- background-color: transparent;
2997
- color: rgba(var(--ax-color-ghost-fore));
2998
- }
2999
- .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) {
3000
- border-color: rgba(var(--ax-color-primary-500));
3001
- color: rgba(var(--ax-color-primary-500));
3002
- }
3003
- .ax-el-ghost-outline.ax-state-selected {
3004
- border-color: rgba(var(--ax-color-primary-500));
3005
- color: rgba(var(--ax-color-primary-fore));
742
+ .ax-el-success-outline:is(.ax-el-success-outline:focus-visible, .ax-el-success-outline.ax-state-focus) {
743
+ outline-offset: -2px;
744
+ outline-color: rgba(var(--ax-color-success-500));
745
+ color: rgba(var(--ax-color-success-fore-tint));
3006
746
  }
3007
- .ax-el-ghost-outline .ax-ripple {
3008
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
747
+ .ax-el-success-outline > button:is(.ax-el-success-outline > button:focus-visible, .ax-el-success-outline > button.ax-state-focus) {
748
+ outline-offset: -2px;
749
+ outline-color: rgba(var(--ax-color-success-500));
750
+ color: rgba(var(--ax-color-success-fore-tint));
3009
751
  }
3010
- .ax-el-ghost-outline ax-loading-spinner .ax-loader {
3011
- border-color: rgba(var(--ax-color-ghost-fore));
3012
- border-bottom-color: transparent;
752
+ .ax-el-success-outline.ax-dropdown-button-marker {
753
+ border-inline-start-color: rgba(var(--ax-color-success-500));
3013
754
  }
3014
755
 
3015
- .ax-el-ghost-blank {
3016
- border-style: none;
3017
- background-color: transparent;
3018
- color: rgba(var(--ax-color-ghost-fore));
3019
- }
3020
- .ax-el-ghost-blank.ax-state-selected {
3021
- background-color: rgba(var(--ax-color-primary-500));
3022
- color: rgba(var(--ax-color-primary-fore));
756
+ .ax-el-success-blank {
757
+ color: rgba(var(--ax-color-success-500));
3023
758
  }
3024
- .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) {
3025
- border-color: rgba(var(--ax-color-primary-700));
3026
- color: rgba(var(--ax-color-primary-700));
759
+ .ax-el-success-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
760
+ color: rgba(var(--ax-color-success-fore-tint));
3027
761
  }
3028
- .ax-el-ghost-blank.ax-el-interactive:active {
3029
- border-color: rgba(var(--ax-color-primary-800));
3030
- color: rgba(var(--ax-color-primary-800));
762
+ .ax-el-success-blank.ax-state-selected {
763
+ background-color: rgba(var(--ax-color-success-700));
764
+ color: rgba(var(--ax-color-success-fore));
3031
765
  }
3032
- .ax-el-ghost-blank .ax-ripple {
3033
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
766
+ .ax-el-success-blank .ax-ripple {
767
+ background-color: rgba(var(--ax-color-success-500), 0.3);
3034
768
  }
3035
- .ax-el-ghost-blank ax-loading-spinner .ax-loader {
3036
- border-color: rgba(var(--ax-color-ghost-fore));
769
+ .ax-el-success-blank ax-loading-spinner .ax-loader {
770
+ border-color: rgba(var(--ax-color-success-500));
3037
771
  border-bottom-color: transparent;
3038
772
  }
3039
- .ax-el-ghost-blank > button:is(.ax-el-ghost-blank > button:focus-visible, .ax-el-ghost-blank > button.ax-state-focus) {
3040
- outline-color: rgba(var(--ax-color-primary-500));
773
+ .ax-el-success-blank:is(.ax-el-success-blank:focus-visible, .ax-el-success-blank.ax-state-focus) {
774
+ outline-color: rgba(var(--ax-color-success-300));
775
+ outline-offset: 0;
3041
776
  }
3042
-
3043
- .ax-el-ghost-twotone {
3044
- border-color: transparent;
3045
- background-color: rgba(var(--ax-color-ghost-fore), 0.05);
3046
- color: rgba(var(--ax-color-ghost-fore));
777
+ .ax-el-success-blank > button:is(.ax-el-success-blank > button:focus-visible, .ax-el-success-blank > button.ax-state-focus) {
778
+ outline-color: rgba(var(--ax-color-success-300));
779
+ outline-offset: 0;
3047
780
  }
3048
- .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) {
3049
- background-color: rgba(var(--ax-color-primary-200));
3050
- color: rgba(var(--ax-color-primary-fore-tint));
781
+ .ax-el-success-blank.ax-dropdown-button-marker {
782
+ border-inline-start-color: transparent;
3051
783
  }
3052
- .ax-el-ghost-twotone.ax-el-interactive:active {
3053
- background-color: rgba(var(--ax-color-primary-300));
3054
- color: rgba(var(--ax-color-primary-fore-tint));
784
+
785
+ .ax-el-warning-solid {
786
+ background-color: rgba(var(--ax-color-warning-500));
787
+ color: rgba(var(--ax-color-warning-fore));
788
+ border-color: rgba(var(--ax-color-warning-500));
3055
789
  }
3056
- .ax-el-ghost-twotone.ax-state-selected {
3057
- border-color: rgba(var(--ax-color-primary-300));
3058
- background-color: rgba(var(--ax-color-primary-400));
3059
- color: rgba(var(--ax-color-primary-fore-tint));
790
+ .ax-el-warning-solid.ax-el-interactive:hover:not(.ax-state-disabled) {
791
+ background-color: rgba(var(--ax-color-warning-600));
3060
792
  }
3061
- .ax-el-ghost-twotone .ax-ripple {
3062
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
793
+ .ax-el-warning-solid.ax-state-selected {
794
+ background-color: rgba(var(--ax-color-warning-700));
795
+ }
796
+ .ax-el-warning-solid .ax-ripple {
797
+ background-color: rgba(var(--ax-color-warning-300), 0.3) !important;
3063
798
  }
3064
- .ax-el-ghost-twotone ax-loading-spinner .ax-loader {
3065
- border-color: rgba(var(--ax-color-ghost-fore));
799
+ .ax-el-warning-solid ax-loading-spinner .ax-loader {
800
+ border-color: rgba(var(--ax-color-warning-fore));
3066
801
  border-bottom-color: transparent;
3067
802
  }
3068
- .ax-el-ghost-twotone > button:is(.ax-el-ghost-twotone > button:focus-visible, .ax-el-ghost-twotone > button.ax-state-focus) {
3069
- outline-color: rgba(var(--ax-color-primary-500));
803
+ .ax-el-warning-solid:is(.ax-el-warning-solid:focus-visible, .ax-el-warning-solid.ax-state-focus) {
804
+ outline-color: rgba(var(--ax-color-warning-500));
805
+ }
806
+ .ax-el-warning-solid > button:is(.ax-el-warning-solid > button:focus-visible, .ax-el-warning-solid > button.ax-state-focus) {
807
+ outline-color: rgba(var(--ax-color-warning-500));
808
+ }
809
+ .ax-el-warning-solid.ax-dropdown-button-marker {
810
+ border-inline-start-color: rgba(var(--ax-color-warning-600));
3070
811
  }
3071
812
 
3072
- .ax-el-info-solid {
3073
- background-color: rgba(var(--ax-color-info-500));
3074
- color: rgba(var(--ax-color-info-fore));
3075
- border-color: rgba(var(--ax-color-info-500));
813
+ .ax-el-warning-twotone {
814
+ background-color: rgba(var(--ax-color-warning-100));
815
+ color: rgba(var(--ax-color-warning-fore-tint));
816
+ border-color: rgba(var(--ax-color-warning-100));
3076
817
  }
3077
- .ax-el-info-solid.ax-el-interactive:hover:not(.ax-state-disabled) {
3078
- background-color: rgba(var(--ax-color-info-600));
818
+ .ax-el-warning-twotone.ax-el-interactive:hover:not(.ax-state-disabled) {
819
+ background-color: rgba(var(--ax-color-warning-200));
3079
820
  }
3080
- .ax-el-info-solid.ax-state-selected {
3081
- background-color: rgba(var(--ax-color-info-700));
821
+ .ax-el-warning-twotone.ax-state-selected {
822
+ background-color: rgba(var(--ax-color-warning-300));
3082
823
  }
3083
- .ax-el-info-solid .ax-ripple {
3084
- background-color: rgba(var(--ax-color-info-300), 0.3) !important;
824
+ .ax-el-warning-twotone .ax-ripple {
825
+ background-color: rgba(var(--ax-color-warning-500), 0.3) !important;
3085
826
  }
3086
- .ax-el-info-solid ax-loading-spinner .ax-loader {
3087
- border-color: rgba(var(--ax-color-info-fore));
827
+ .ax-el-warning-twotone ax-loading-spinner .ax-loader {
828
+ border-color: rgba(var(--ax-color-warning-fore-tint));
3088
829
  border-bottom-color: transparent;
3089
830
  }
3090
- .ax-el-info-solid > button:is(.ax-el-info-solid > button:focus-visible, .ax-el-info-solid > button.ax-state-focus) {
3091
- outline-color: rgba(var(--ax-color-info-500));
831
+ .ax-el-warning-twotone:is(.ax-el-warning-twotone:focus-visible, .ax-el-warning-twotone.ax-state-focus) {
832
+ outline-color: rgba(var(--ax-color-warning-500));
833
+ }
834
+ .ax-el-warning-twotone > button:is(.ax-el-warning-twotone > button:focus-visible, .ax-el-warning-twotone > button.ax-state-focus) {
835
+ outline-color: rgba(var(--ax-color-warning-500));
836
+ }
837
+ .ax-el-warning-twotone.ax-dropdown-button-marker {
838
+ border-inline-start-color: rgba(var(--ax-color-warning-50));
3092
839
  }
3093
840
 
3094
- .ax-el-ghost-solid {
841
+ .ax-el-warning-outline {
842
+ background-color: transparent;
843
+ color: rgba(var(--ax-color-warning-500));
844
+ border-color: rgba(var(--ax-color-warning-500));
3095
845
  border-width: 1px;
3096
- border-color: rgba(var(--ax-color-border-default));
3097
- background-color: rgba(var(--ax-color-ghost));
3098
- color: rgba(var(--ax-color-ghost-fore));
3099
- --ax-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
3100
- --ax-shadow-colored: 0 1px 2px 0 var(--ax-shadow-color);
3101
- 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);
3102
- }
3103
- .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) {
3104
- border-color: rgba(var(--ax-color-primary-500));
3105
- color: rgba(var(--ax-color-primary-500));
3106
846
  }
3107
- .ax-el-ghost-solid.ax-el-interactive:active {
3108
- border-color: rgba(var(--ax-color-primary-700));
3109
- color: rgba(var(--ax-color-primary-700));
847
+ .ax-el-warning-outline.ax-el-interactive:hover:not(.ax-state-disabled) {
848
+ color: rgba(var(--ax-color-warning-700));
849
+ border-color: rgba(var(--ax-color-warning-700));
3110
850
  }
3111
- .ax-el-ghost-solid.ax-state-selected {
3112
- border-color: rgba(var(--ax-color-primary-500));
3113
- background-color: rgba(var(--ax-color-primary-500));
3114
- color: rgba(var(--ax-color-primary-fore));
851
+ .ax-el-warning-outline.ax-state-selected {
852
+ border-color: rgba(var(--ax-color-warning-500));
853
+ color: rgba(var(--ax-color-warning-fore));
854
+ background-color: rgba(var(--ax-color-warning-500));
3115
855
  }
3116
- .ax-el-ghost-solid .ax-ripple {
3117
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
856
+ .ax-el-warning-outline .ax-ripple {
857
+ background-color: rgba(var(--ax-color-warning-500), 0.3) !important;
3118
858
  }
3119
- .ax-el-ghost-solid ax-loading-spinner .ax-loader {
3120
- border-color: rgba(var(--ax-color-ghost-fore));
859
+ .ax-el-warning-outline ax-loading-spinner .ax-loader {
860
+ border-color: rgba(var(--ax-color-warning-500));
3121
861
  border-bottom-color: transparent;
3122
862
  }
3123
-
3124
- .ax-el-ghost-outline {
3125
- border-width: 1px;
3126
- border-color: rgba(var(--ax-color-border-default));
3127
- background-color: transparent;
3128
- color: rgba(var(--ax-color-ghost-fore));
3129
- }
3130
- .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) {
3131
- border-color: rgba(var(--ax-color-primary-500));
3132
- color: rgba(var(--ax-color-primary-500));
3133
- }
3134
- .ax-el-ghost-outline.ax-state-selected {
3135
- border-color: rgba(var(--ax-color-primary-500));
3136
- color: rgba(var(--ax-color-primary-fore));
863
+ .ax-el-warning-outline:is(.ax-el-warning-outline:focus-visible, .ax-el-warning-outline.ax-state-focus) {
864
+ outline-offset: -2px;
865
+ outline-color: rgba(var(--ax-color-warning-500));
866
+ color: rgba(var(--ax-color-warning-fore-tint));
3137
867
  }
3138
- .ax-el-ghost-outline .ax-ripple {
3139
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
868
+ .ax-el-warning-outline > button:is(.ax-el-warning-outline > button:focus-visible, .ax-el-warning-outline > button.ax-state-focus) {
869
+ outline-offset: -2px;
870
+ outline-color: rgba(var(--ax-color-warning-500));
871
+ color: rgba(var(--ax-color-warning-fore-tint));
3140
872
  }
3141
- .ax-el-ghost-outline ax-loading-spinner .ax-loader {
3142
- border-color: rgba(var(--ax-color-ghost-fore));
3143
- border-bottom-color: transparent;
873
+ .ax-el-warning-outline.ax-dropdown-button-marker {
874
+ border-inline-start-color: rgba(var(--ax-color-warning-500));
3144
875
  }
3145
876
 
3146
- .ax-el-ghost-blank {
3147
- border-style: none;
3148
- background-color: transparent;
3149
- color: rgba(var(--ax-color-ghost-fore));
3150
- }
3151
- .ax-el-ghost-blank.ax-state-selected {
3152
- background-color: rgba(var(--ax-color-primary-500));
3153
- color: rgba(var(--ax-color-primary-fore));
877
+ .ax-el-warning-blank {
878
+ color: rgba(var(--ax-color-warning-500));
3154
879
  }
3155
- .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) {
3156
- border-color: rgba(var(--ax-color-primary-700));
3157
- color: rgba(var(--ax-color-primary-700));
880
+ .ax-el-warning-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
881
+ color: rgba(var(--ax-color-warning-fore-tint));
3158
882
  }
3159
- .ax-el-ghost-blank.ax-el-interactive:active {
3160
- border-color: rgba(var(--ax-color-primary-800));
3161
- color: rgba(var(--ax-color-primary-800));
883
+ .ax-el-warning-blank.ax-state-selected {
884
+ background-color: rgba(var(--ax-color-warning-700));
885
+ color: rgba(var(--ax-color-warning-fore));
3162
886
  }
3163
- .ax-el-ghost-blank .ax-ripple {
3164
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
887
+ .ax-el-warning-blank .ax-ripple {
888
+ background-color: rgba(var(--ax-color-warning-500), 0.3);
3165
889
  }
3166
- .ax-el-ghost-blank ax-loading-spinner .ax-loader {
3167
- border-color: rgba(var(--ax-color-ghost-fore));
890
+ .ax-el-warning-blank ax-loading-spinner .ax-loader {
891
+ border-color: rgba(var(--ax-color-warning-500));
3168
892
  border-bottom-color: transparent;
3169
893
  }
3170
- .ax-el-ghost-blank > button:is(.ax-el-ghost-blank > button:focus-visible, .ax-el-ghost-blank > button.ax-state-focus) {
3171
- outline-color: rgba(var(--ax-color-primary-500));
894
+ .ax-el-warning-blank:is(.ax-el-warning-blank:focus-visible, .ax-el-warning-blank.ax-state-focus) {
895
+ outline-color: rgba(var(--ax-color-warning-300));
896
+ outline-offset: 0;
3172
897
  }
3173
-
3174
- .ax-el-ghost-twotone {
3175
- border-color: transparent;
3176
- background-color: rgba(var(--ax-color-ghost-fore), 0.05);
3177
- color: rgba(var(--ax-color-ghost-fore));
898
+ .ax-el-warning-blank > button:is(.ax-el-warning-blank > button:focus-visible, .ax-el-warning-blank > button.ax-state-focus) {
899
+ outline-color: rgba(var(--ax-color-warning-300));
900
+ outline-offset: 0;
3178
901
  }
3179
- .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) {
3180
- background-color: rgba(var(--ax-color-primary-200));
3181
- color: rgba(var(--ax-color-primary-fore-tint));
902
+ .ax-el-warning-blank.ax-dropdown-button-marker {
903
+ border-inline-start-color: transparent;
3182
904
  }
3183
- .ax-el-ghost-twotone.ax-el-interactive:active {
3184
- background-color: rgba(var(--ax-color-primary-300));
3185
- color: rgba(var(--ax-color-primary-fore-tint));
905
+
906
+ .ax-el-danger-solid {
907
+ background-color: rgba(var(--ax-color-danger-500));
908
+ color: rgba(var(--ax-color-danger-fore));
909
+ border-color: rgba(var(--ax-color-danger-500));
3186
910
  }
3187
- .ax-el-ghost-twotone.ax-state-selected {
3188
- border-color: rgba(var(--ax-color-primary-300));
3189
- background-color: rgba(var(--ax-color-primary-400));
3190
- color: rgba(var(--ax-color-primary-fore-tint));
911
+ .ax-el-danger-solid.ax-el-interactive:hover:not(.ax-state-disabled) {
912
+ background-color: rgba(var(--ax-color-danger-600));
3191
913
  }
3192
- .ax-el-ghost-twotone .ax-ripple {
3193
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
914
+ .ax-el-danger-solid.ax-state-selected {
915
+ background-color: rgba(var(--ax-color-danger-700));
3194
916
  }
3195
- .ax-el-ghost-twotone ax-loading-spinner .ax-loader {
3196
- border-color: rgba(var(--ax-color-ghost-fore));
917
+ .ax-el-danger-solid .ax-ripple {
918
+ background-color: rgba(var(--ax-color-danger-300), 0.3) !important;
919
+ }
920
+ .ax-el-danger-solid ax-loading-spinner .ax-loader {
921
+ border-color: rgba(var(--ax-color-danger-fore));
3197
922
  border-bottom-color: transparent;
3198
923
  }
3199
- .ax-el-ghost-twotone > button:is(.ax-el-ghost-twotone > button:focus-visible, .ax-el-ghost-twotone > button.ax-state-focus) {
3200
- outline-color: rgba(var(--ax-color-primary-500));
924
+ .ax-el-danger-solid:is(.ax-el-danger-solid:focus-visible, .ax-el-danger-solid.ax-state-focus) {
925
+ outline-color: rgba(var(--ax-color-danger-500));
926
+ }
927
+ .ax-el-danger-solid > button:is(.ax-el-danger-solid > button:focus-visible, .ax-el-danger-solid > button.ax-state-focus) {
928
+ outline-color: rgba(var(--ax-color-danger-500));
929
+ }
930
+ .ax-el-danger-solid.ax-dropdown-button-marker {
931
+ border-inline-start-color: rgba(var(--ax-color-danger-600));
3201
932
  }
3202
933
 
3203
- .ax-el-info-twotone {
3204
- background-color: rgba(var(--ax-color-info-100));
3205
- color: rgba(var(--ax-color-info-fore-tint));
3206
- border-color: rgba(var(--ax-color-info-100));
934
+ .ax-el-danger-twotone {
935
+ background-color: rgba(var(--ax-color-danger-100));
936
+ color: rgba(var(--ax-color-danger-fore-tint));
937
+ border-color: rgba(var(--ax-color-danger-100));
3207
938
  }
3208
- .ax-el-info-twotone.ax-el-interactive:hover:not(.ax-state-disabled) {
3209
- background-color: rgba(var(--ax-color-info-200));
939
+ .ax-el-danger-twotone.ax-el-interactive:hover:not(.ax-state-disabled) {
940
+ background-color: rgba(var(--ax-color-danger-200));
3210
941
  }
3211
- .ax-el-info-twotone.ax-state-selected {
3212
- background-color: rgba(var(--ax-color-info-300));
942
+ .ax-el-danger-twotone.ax-state-selected {
943
+ background-color: rgba(var(--ax-color-danger-300));
3213
944
  }
3214
- .ax-el-info-twotone .ax-ripple {
3215
- background-color: rgba(var(--ax-color-info-500), 0.3) !important;
945
+ .ax-el-danger-twotone .ax-ripple {
946
+ background-color: rgba(var(--ax-color-danger-500), 0.3) !important;
3216
947
  }
3217
- .ax-el-info-twotone ax-loading-spinner .ax-loader {
3218
- border-color: rgba(var(--ax-color-info-fore-tint));
948
+ .ax-el-danger-twotone ax-loading-spinner .ax-loader {
949
+ border-color: rgba(var(--ax-color-danger-fore-tint));
3219
950
  border-bottom-color: transparent;
3220
951
  }
3221
- .ax-el-info-twotone > button:is(.ax-el-info-twotone > button:focus-visible, .ax-el-info-twotone > button.ax-state-focus) {
3222
- outline-color: rgba(var(--ax-color-info-500));
952
+ .ax-el-danger-twotone:is(.ax-el-danger-twotone:focus-visible, .ax-el-danger-twotone.ax-state-focus) {
953
+ outline-color: rgba(var(--ax-color-danger-500));
954
+ }
955
+ .ax-el-danger-twotone > button:is(.ax-el-danger-twotone > button:focus-visible, .ax-el-danger-twotone > button.ax-state-focus) {
956
+ outline-color: rgba(var(--ax-color-danger-500));
957
+ }
958
+ .ax-el-danger-twotone.ax-dropdown-button-marker {
959
+ border-inline-start-color: rgba(var(--ax-color-danger-50));
3223
960
  }
3224
961
 
3225
- .ax-el-ghost-solid {
962
+ .ax-el-danger-outline {
963
+ background-color: transparent;
964
+ color: rgba(var(--ax-color-danger-500));
965
+ border-color: rgba(var(--ax-color-danger-500));
3226
966
  border-width: 1px;
3227
- border-color: rgba(var(--ax-color-border-default));
3228
- background-color: rgba(var(--ax-color-ghost));
3229
- color: rgba(var(--ax-color-ghost-fore));
3230
- --ax-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
3231
- --ax-shadow-colored: 0 1px 2px 0 var(--ax-shadow-color);
3232
- 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);
3233
967
  }
3234
- .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) {
3235
- border-color: rgba(var(--ax-color-primary-500));
3236
- color: rgba(var(--ax-color-primary-500));
968
+ .ax-el-danger-outline.ax-el-interactive:hover:not(.ax-state-disabled) {
969
+ color: rgba(var(--ax-color-danger-700));
970
+ border-color: rgba(var(--ax-color-danger-700));
3237
971
  }
3238
- .ax-el-ghost-solid.ax-el-interactive:active {
3239
- border-color: rgba(var(--ax-color-primary-700));
3240
- color: rgba(var(--ax-color-primary-700));
972
+ .ax-el-danger-outline.ax-state-selected {
973
+ border-color: rgba(var(--ax-color-danger-500));
974
+ color: rgba(var(--ax-color-danger-fore));
975
+ background-color: rgba(var(--ax-color-danger-500));
3241
976
  }
3242
- .ax-el-ghost-solid.ax-state-selected {
3243
- border-color: rgba(var(--ax-color-primary-500));
3244
- background-color: rgba(var(--ax-color-primary-500));
3245
- color: rgba(var(--ax-color-primary-fore));
977
+ .ax-el-danger-outline .ax-ripple {
978
+ background-color: rgba(var(--ax-color-danger-500), 0.3) !important;
3246
979
  }
3247
- .ax-el-ghost-solid .ax-ripple {
3248
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
980
+ .ax-el-danger-outline ax-loading-spinner .ax-loader {
981
+ border-color: rgba(var(--ax-color-danger-500));
982
+ border-bottom-color: transparent;
983
+ }
984
+ .ax-el-danger-outline:is(.ax-el-danger-outline:focus-visible, .ax-el-danger-outline.ax-state-focus) {
985
+ outline-offset: -2px;
986
+ outline-color: rgba(var(--ax-color-danger-500));
987
+ color: rgba(var(--ax-color-danger-fore-tint));
988
+ }
989
+ .ax-el-danger-outline > button:is(.ax-el-danger-outline > button:focus-visible, .ax-el-danger-outline > button.ax-state-focus) {
990
+ outline-offset: -2px;
991
+ outline-color: rgba(var(--ax-color-danger-500));
992
+ color: rgba(var(--ax-color-danger-fore-tint));
3249
993
  }
3250
- .ax-el-ghost-solid ax-loading-spinner .ax-loader {
3251
- border-color: rgba(var(--ax-color-ghost-fore));
3252
- border-bottom-color: transparent;
994
+ .ax-el-danger-outline.ax-dropdown-button-marker {
995
+ border-inline-start-color: rgba(var(--ax-color-danger-500));
3253
996
  }
3254
997
 
3255
- .ax-el-ghost-outline {
3256
- border-width: 1px;
3257
- border-color: rgba(var(--ax-color-border-default));
3258
- background-color: transparent;
3259
- color: rgba(var(--ax-color-ghost-fore));
998
+ .ax-el-danger-blank {
999
+ color: rgba(var(--ax-color-danger-500));
3260
1000
  }
3261
- .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) {
3262
- border-color: rgba(var(--ax-color-primary-500));
3263
- color: rgba(var(--ax-color-primary-500));
1001
+ .ax-el-danger-blank.ax-el-interactive:hover:not(.ax-state-disabled) {
1002
+ color: rgba(var(--ax-color-danger-fore-tint));
3264
1003
  }
3265
- .ax-el-ghost-outline.ax-state-selected {
3266
- border-color: rgba(var(--ax-color-primary-500));
3267
- color: rgba(var(--ax-color-primary-fore));
1004
+ .ax-el-danger-blank.ax-state-selected {
1005
+ background-color: rgba(var(--ax-color-danger-700));
1006
+ color: rgba(var(--ax-color-danger-fore));
3268
1007
  }
3269
- .ax-el-ghost-outline .ax-ripple {
3270
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
1008
+ .ax-el-danger-blank .ax-ripple {
1009
+ background-color: rgba(var(--ax-color-danger-500), 0.3);
3271
1010
  }
3272
- .ax-el-ghost-outline ax-loading-spinner .ax-loader {
3273
- border-color: rgba(var(--ax-color-ghost-fore));
1011
+ .ax-el-danger-blank ax-loading-spinner .ax-loader {
1012
+ border-color: rgba(var(--ax-color-danger-500));
3274
1013
  border-bottom-color: transparent;
3275
1014
  }
3276
-
3277
- .ax-el-ghost-blank {
3278
- border-style: none;
3279
- background-color: transparent;
3280
- color: rgba(var(--ax-color-ghost-fore));
1015
+ .ax-el-danger-blank:is(.ax-el-danger-blank:focus-visible, .ax-el-danger-blank.ax-state-focus) {
1016
+ outline-color: rgba(var(--ax-color-danger-300));
1017
+ outline-offset: 0;
3281
1018
  }
3282
- .ax-el-ghost-blank.ax-state-selected {
3283
- background-color: rgba(var(--ax-color-primary-500));
3284
- color: rgba(var(--ax-color-primary-fore));
1019
+ .ax-el-danger-blank > button:is(.ax-el-danger-blank > button:focus-visible, .ax-el-danger-blank > button.ax-state-focus) {
1020
+ outline-color: rgba(var(--ax-color-danger-300));
1021
+ outline-offset: 0;
3285
1022
  }
3286
- .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) {
3287
- border-color: rgba(var(--ax-color-primary-700));
3288
- color: rgba(var(--ax-color-primary-700));
1023
+ .ax-el-danger-blank.ax-dropdown-button-marker {
1024
+ border-inline-start-color: transparent;
3289
1025
  }
3290
- .ax-el-ghost-blank.ax-el-interactive:active {
3291
- border-color: rgba(var(--ax-color-primary-800));
3292
- color: rgba(var(--ax-color-primary-800));
1026
+
1027
+ .ax-el-info-solid {
1028
+ background-color: rgba(var(--ax-color-info-500));
1029
+ color: rgba(var(--ax-color-info-fore));
1030
+ border-color: rgba(var(--ax-color-info-500));
3293
1031
  }
3294
- .ax-el-ghost-blank .ax-ripple {
3295
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
1032
+ .ax-el-info-solid.ax-el-interactive:hover:not(.ax-state-disabled) {
1033
+ background-color: rgba(var(--ax-color-info-600));
3296
1034
  }
3297
- .ax-el-ghost-blank ax-loading-spinner .ax-loader {
3298
- border-color: rgba(var(--ax-color-ghost-fore));
1035
+ .ax-el-info-solid.ax-state-selected {
1036
+ background-color: rgba(var(--ax-color-info-700));
1037
+ }
1038
+ .ax-el-info-solid .ax-ripple {
1039
+ background-color: rgba(var(--ax-color-info-300), 0.3) !important;
1040
+ }
1041
+ .ax-el-info-solid ax-loading-spinner .ax-loader {
1042
+ border-color: rgba(var(--ax-color-info-fore));
3299
1043
  border-bottom-color: transparent;
3300
1044
  }
3301
- .ax-el-ghost-blank > button:is(.ax-el-ghost-blank > button:focus-visible, .ax-el-ghost-blank > button.ax-state-focus) {
3302
- outline-color: rgba(var(--ax-color-primary-500));
1045
+ .ax-el-info-solid:is(.ax-el-info-solid:focus-visible, .ax-el-info-solid.ax-state-focus) {
1046
+ outline-color: rgba(var(--ax-color-info-500));
3303
1047
  }
3304
-
3305
- .ax-el-ghost-twotone {
3306
- border-color: transparent;
3307
- background-color: rgba(var(--ax-color-ghost-fore), 0.05);
3308
- color: rgba(var(--ax-color-ghost-fore));
1048
+ .ax-el-info-solid > button:is(.ax-el-info-solid > button:focus-visible, .ax-el-info-solid > button.ax-state-focus) {
1049
+ outline-color: rgba(var(--ax-color-info-500));
3309
1050
  }
3310
- .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) {
3311
- background-color: rgba(var(--ax-color-primary-200));
3312
- color: rgba(var(--ax-color-primary-fore-tint));
1051
+ .ax-el-info-solid.ax-dropdown-button-marker {
1052
+ border-inline-start-color: rgba(var(--ax-color-info-600));
3313
1053
  }
3314
- .ax-el-ghost-twotone.ax-el-interactive:active {
3315
- background-color: rgba(var(--ax-color-primary-300));
3316
- color: rgba(var(--ax-color-primary-fore-tint));
1054
+
1055
+ .ax-el-info-twotone {
1056
+ background-color: rgba(var(--ax-color-info-100));
1057
+ color: rgba(var(--ax-color-info-fore-tint));
1058
+ border-color: rgba(var(--ax-color-info-100));
3317
1059
  }
3318
- .ax-el-ghost-twotone.ax-state-selected {
3319
- border-color: rgba(var(--ax-color-primary-300));
3320
- background-color: rgba(var(--ax-color-primary-400));
3321
- color: rgba(var(--ax-color-primary-fore-tint));
1060
+ .ax-el-info-twotone.ax-el-interactive:hover:not(.ax-state-disabled) {
1061
+ background-color: rgba(var(--ax-color-info-200));
3322
1062
  }
3323
- .ax-el-ghost-twotone .ax-ripple {
3324
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
1063
+ .ax-el-info-twotone.ax-state-selected {
1064
+ background-color: rgba(var(--ax-color-info-300));
3325
1065
  }
3326
- .ax-el-ghost-twotone ax-loading-spinner .ax-loader {
3327
- border-color: rgba(var(--ax-color-ghost-fore));
1066
+ .ax-el-info-twotone .ax-ripple {
1067
+ background-color: rgba(var(--ax-color-info-500), 0.3) !important;
1068
+ }
1069
+ .ax-el-info-twotone ax-loading-spinner .ax-loader {
1070
+ border-color: rgba(var(--ax-color-info-fore-tint));
3328
1071
  border-bottom-color: transparent;
3329
1072
  }
3330
- .ax-el-ghost-twotone > button:is(.ax-el-ghost-twotone > button:focus-visible, .ax-el-ghost-twotone > button.ax-state-focus) {
3331
- outline-color: rgba(var(--ax-color-primary-500));
1073
+ .ax-el-info-twotone:is(.ax-el-info-twotone:focus-visible, .ax-el-info-twotone.ax-state-focus) {
1074
+ outline-color: rgba(var(--ax-color-info-500));
1075
+ }
1076
+ .ax-el-info-twotone > button:is(.ax-el-info-twotone > button:focus-visible, .ax-el-info-twotone > button.ax-state-focus) {
1077
+ outline-color: rgba(var(--ax-color-info-500));
1078
+ }
1079
+ .ax-el-info-twotone.ax-dropdown-button-marker {
1080
+ border-inline-start-color: rgba(var(--ax-color-info-50));
3332
1081
  }
3333
1082
 
3334
1083
  .ax-el-info-outline {
@@ -3353,119 +1102,18 @@ body {
3353
1102
  border-color: rgba(var(--ax-color-info-500));
3354
1103
  border-bottom-color: transparent;
3355
1104
  }
3356
- .ax-el-info-outline > button:is(.ax-el-info-outline > button:focus-visible, .ax-el-info-outline > button.ax-state-focus) {
1105
+ .ax-el-info-outline:is(.ax-el-info-outline:focus-visible, .ax-el-info-outline.ax-state-focus) {
3357
1106
  outline-offset: -2px;
3358
1107
  outline-color: rgba(var(--ax-color-info-500));
3359
1108
  color: rgba(var(--ax-color-info-fore-tint));
3360
1109
  }
3361
-
3362
- .ax-el-ghost-solid {
3363
- border-width: 1px;
3364
- border-color: rgba(var(--ax-color-border-default));
3365
- background-color: rgba(var(--ax-color-ghost));
3366
- color: rgba(var(--ax-color-ghost-fore));
3367
- --ax-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
3368
- --ax-shadow-colored: 0 1px 2px 0 var(--ax-shadow-color);
3369
- 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);
3370
- }
3371
- .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) {
3372
- border-color: rgba(var(--ax-color-primary-500));
3373
- color: rgba(var(--ax-color-primary-500));
3374
- }
3375
- .ax-el-ghost-solid.ax-el-interactive:active {
3376
- border-color: rgba(var(--ax-color-primary-700));
3377
- color: rgba(var(--ax-color-primary-700));
3378
- }
3379
- .ax-el-ghost-solid.ax-state-selected {
3380
- border-color: rgba(var(--ax-color-primary-500));
3381
- background-color: rgba(var(--ax-color-primary-500));
3382
- color: rgba(var(--ax-color-primary-fore));
3383
- }
3384
- .ax-el-ghost-solid .ax-ripple {
3385
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
3386
- }
3387
- .ax-el-ghost-solid ax-loading-spinner .ax-loader {
3388
- border-color: rgba(var(--ax-color-ghost-fore));
3389
- border-bottom-color: transparent;
3390
- }
3391
-
3392
- .ax-el-ghost-outline {
3393
- border-width: 1px;
3394
- border-color: rgba(var(--ax-color-border-default));
3395
- background-color: transparent;
3396
- color: rgba(var(--ax-color-ghost-fore));
3397
- }
3398
- .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) {
3399
- border-color: rgba(var(--ax-color-primary-500));
3400
- color: rgba(var(--ax-color-primary-500));
3401
- }
3402
- .ax-el-ghost-outline.ax-state-selected {
3403
- border-color: rgba(var(--ax-color-primary-500));
3404
- color: rgba(var(--ax-color-primary-fore));
3405
- }
3406
- .ax-el-ghost-outline .ax-ripple {
3407
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
3408
- }
3409
- .ax-el-ghost-outline ax-loading-spinner .ax-loader {
3410
- border-color: rgba(var(--ax-color-ghost-fore));
3411
- border-bottom-color: transparent;
3412
- }
3413
-
3414
- .ax-el-ghost-blank {
3415
- border-style: none;
3416
- background-color: transparent;
3417
- color: rgba(var(--ax-color-ghost-fore));
3418
- }
3419
- .ax-el-ghost-blank.ax-state-selected {
3420
- background-color: rgba(var(--ax-color-primary-500));
3421
- color: rgba(var(--ax-color-primary-fore));
3422
- }
3423
- .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) {
3424
- border-color: rgba(var(--ax-color-primary-700));
3425
- color: rgba(var(--ax-color-primary-700));
3426
- }
3427
- .ax-el-ghost-blank.ax-el-interactive:active {
3428
- border-color: rgba(var(--ax-color-primary-800));
3429
- color: rgba(var(--ax-color-primary-800));
3430
- }
3431
- .ax-el-ghost-blank .ax-ripple {
3432
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
3433
- }
3434
- .ax-el-ghost-blank ax-loading-spinner .ax-loader {
3435
- border-color: rgba(var(--ax-color-ghost-fore));
3436
- border-bottom-color: transparent;
3437
- }
3438
- .ax-el-ghost-blank > button:is(.ax-el-ghost-blank > button:focus-visible, .ax-el-ghost-blank > button.ax-state-focus) {
3439
- outline-color: rgba(var(--ax-color-primary-500));
3440
- }
3441
-
3442
- .ax-el-ghost-twotone {
3443
- border-color: transparent;
3444
- background-color: rgba(var(--ax-color-ghost-fore), 0.05);
3445
- color: rgba(var(--ax-color-ghost-fore));
3446
- }
3447
- .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) {
3448
- background-color: rgba(var(--ax-color-primary-200));
3449
- color: rgba(var(--ax-color-primary-fore-tint));
3450
- }
3451
- .ax-el-ghost-twotone.ax-el-interactive:active {
3452
- background-color: rgba(var(--ax-color-primary-300));
3453
- color: rgba(var(--ax-color-primary-fore-tint));
3454
- }
3455
- .ax-el-ghost-twotone.ax-state-selected {
3456
- border-color: rgba(var(--ax-color-primary-300));
3457
- background-color: rgba(var(--ax-color-primary-400));
3458
- color: rgba(var(--ax-color-primary-fore-tint));
3459
- }
3460
- .ax-el-ghost-twotone .ax-ripple {
3461
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
3462
- }
3463
- .ax-el-ghost-twotone ax-loading-spinner .ax-loader {
3464
- border-color: rgba(var(--ax-color-ghost-fore));
3465
- border-bottom-color: transparent;
1110
+ .ax-el-info-outline > button:is(.ax-el-info-outline > button:focus-visible, .ax-el-info-outline > button.ax-state-focus) {
1111
+ outline-offset: -2px;
1112
+ outline-color: rgba(var(--ax-color-info-500));
1113
+ color: rgba(var(--ax-color-info-fore-tint));
3466
1114
  }
3467
- .ax-el-ghost-twotone > button:is(.ax-el-ghost-twotone > button:focus-visible, .ax-el-ghost-twotone > button.ax-state-focus) {
3468
- outline-color: rgba(var(--ax-color-primary-500));
1115
+ .ax-el-info-outline.ax-dropdown-button-marker {
1116
+ border-inline-start-color: rgba(var(--ax-color-info-500));
3469
1117
  }
3470
1118
 
3471
1119
  .ax-el-info-blank {
@@ -3485,10 +1133,17 @@ body {
3485
1133
  border-color: rgba(var(--ax-color-info-500));
3486
1134
  border-bottom-color: transparent;
3487
1135
  }
1136
+ .ax-el-info-blank:is(.ax-el-info-blank:focus-visible, .ax-el-info-blank.ax-state-focus) {
1137
+ outline-color: rgba(var(--ax-color-info-300));
1138
+ outline-offset: 0;
1139
+ }
3488
1140
  .ax-el-info-blank > button:is(.ax-el-info-blank > button:focus-visible, .ax-el-info-blank > button.ax-state-focus) {
3489
1141
  outline-color: rgba(var(--ax-color-info-300));
3490
1142
  outline-offset: 0;
3491
1143
  }
1144
+ .ax-el-info-blank.ax-dropdown-button-marker {
1145
+ border-inline-start-color: transparent;
1146
+ }
3492
1147
 
3493
1148
  .ax-el-ghost-solid {
3494
1149
  border-width: 1px;
@@ -3503,6 +1158,9 @@ body {
3503
1158
  border-color: rgba(var(--ax-color-primary-500));
3504
1159
  color: rgba(var(--ax-color-primary-500));
3505
1160
  }
1161
+ .ax-el-ghost-solid.ax-el-interactive:hover + .ax-dropdown-button-marker {
1162
+ border-inline-start-color: rgba(var(--ax-color-primary-500));
1163
+ }
3506
1164
  .ax-el-ghost-solid.ax-el-interactive:active {
3507
1165
  border-color: rgba(var(--ax-color-primary-700));
3508
1166
  color: rgba(var(--ax-color-primary-700));
@@ -3519,6 +1177,9 @@ body {
3519
1177
  border-color: rgba(var(--ax-color-ghost-fore));
3520
1178
  border-bottom-color: transparent;
3521
1179
  }
1180
+ .ax-el-ghost-solid.ax-dropdown-button-marker {
1181
+ border-inline-start-color: rgba(var(--ax-color-border-default));
1182
+ }
3522
1183
 
3523
1184
  .ax-el-ghost-outline {
3524
1185
  border-width: 1px;
@@ -3530,6 +1191,9 @@ body {
3530
1191
  border-color: rgba(var(--ax-color-primary-500));
3531
1192
  color: rgba(var(--ax-color-primary-500));
3532
1193
  }
1194
+ .ax-el-ghost-outline.ax-el-interactive:hover + .ax-dropdown-button-marker {
1195
+ border-inline-start-color: rgba(var(--ax-color-primary-500));
1196
+ }
3533
1197
  .ax-el-ghost-outline.ax-state-selected {
3534
1198
  border-color: rgba(var(--ax-color-primary-500));
3535
1199
  color: rgba(var(--ax-color-primary-fore));
@@ -3541,6 +1205,9 @@ body {
3541
1205
  border-color: rgba(var(--ax-color-ghost-fore));
3542
1206
  border-bottom-color: transparent;
3543
1207
  }
1208
+ .ax-el-ghost-outline.ax-dropdown-button-marker {
1209
+ border-inline-start-color: rgba(var(--ax-color-border-default));
1210
+ }
3544
1211
 
3545
1212
  .ax-el-ghost-blank {
3546
1213
  border-style: none;
@@ -3569,6 +1236,9 @@ body {
3569
1236
  .ax-el-ghost-blank > button:is(.ax-el-ghost-blank > button:focus-visible, .ax-el-ghost-blank > button.ax-state-focus) {
3570
1237
  outline-color: rgba(var(--ax-color-primary-500));
3571
1238
  }
1239
+ .ax-el-ghost-blank.ax-dropdown-button-marker {
1240
+ border-inline-start-color: rgba(var(--ax-color-border-default));
1241
+ }
3572
1242
 
3573
1243
  .ax-el-ghost-twotone {
3574
1244
  border-color: transparent;
@@ -3579,6 +1249,9 @@ body {
3579
1249
  background-color: rgba(var(--ax-color-primary-200));
3580
1250
  color: rgba(var(--ax-color-primary-fore-tint));
3581
1251
  }
1252
+ .ax-el-ghost-twotone.ax-el-interactive:hover + .ax-dropdown-button-marker {
1253
+ border-inline-start-color: rgba(var(--ax-color-primary-500));
1254
+ }
3582
1255
  .ax-el-ghost-twotone.ax-el-interactive:active {
3583
1256
  background-color: rgba(var(--ax-color-primary-300));
3584
1257
  color: rgba(var(--ax-color-primary-fore-tint));
@@ -3598,6 +1271,9 @@ body {
3598
1271
  .ax-el-ghost-twotone > button:is(.ax-el-ghost-twotone > button:focus-visible, .ax-el-ghost-twotone > button.ax-state-focus) {
3599
1272
  outline-color: rgba(var(--ax-color-primary-500));
3600
1273
  }
1274
+ .ax-el-ghost-twotone.ax-dropdown-button-marker {
1275
+ border-inline-start-color: rgba(var(--ax-color-border-default));
1276
+ }
3601
1277
 
3602
1278
  .ax-dark .ax-el-primary-solid {
3603
1279
  background-color: rgba(var(--ax-color-primary-200));
@@ -3621,6 +1297,9 @@ body {
3621
1297
  .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) {
3622
1298
  outline-color: rgba(var(--ax-color-primary-200));
3623
1299
  }
1300
+ .ax-dark .ax-el-primary-solid.ax-dropdown-button-marker {
1301
+ border-inline-start-color: rgba(var(--ax-color-primary-900));
1302
+ }
3624
1303
  .ax-dark .ax-el-primary-twotone {
3625
1304
  background-color: rgba(var(--ax-color-primary-200));
3626
1305
  color: rgba(var(--ax-color-primary-fore-tint));
@@ -3639,6 +1318,9 @@ body {
3639
1318
  border-color: rgba(var(--ax-color-primary-fore-tint));
3640
1319
  border-bottom-color: transparent;
3641
1320
  }
1321
+ .ax-dark .ax-el-primary-twotone.ax-dropdown-button-marker {
1322
+ border-inline-start-color: rgba(var(--ax-color-primary-950));
1323
+ }
3642
1324
  .ax-dark .ax-el-primary-outline {
3643
1325
  border-color: rgba(var(--ax-color-primary-200));
3644
1326
  color: rgba(var(--ax-color-primary-200));
@@ -3663,6 +1345,9 @@ body {
3663
1345
  border-color: rgba(var(--ax-color-primary-300));
3664
1346
  color: rgba(var(--ax-color-primary-300));
3665
1347
  }
1348
+ .ax-dark .ax-el-primary-outline.ax-dropdown-button-marker {
1349
+ border-inline-start-color: rgba(var(--ax-color-primary-800));
1350
+ }
3666
1351
  .ax-dark .ax-el-primary-blank {
3667
1352
  color: rgba(var(--ax-color-primary-300));
3668
1353
  background-color: transparent;
@@ -3703,6 +1388,9 @@ body {
3703
1388
  .ax-dark .ax-el-secondary-solid > button:is(.ax-dark .ax-el-secondary-solid > button:focus-visible, .ax-dark .ax-el-secondary-solid > button.ax-state-focus) {
3704
1389
  outline-color: rgba(var(--ax-color-primary-200));
3705
1390
  }
1391
+ .ax-dark .ax-el-secondary-solid.ax-dropdown-button-marker {
1392
+ border-inline-start-color: rgba(var(--ax-color-secondary-900));
1393
+ }
3706
1394
  .ax-dark .ax-el-secondary-twotone {
3707
1395
  background-color: rgba(var(--ax-color-secondary-200));
3708
1396
  color: rgba(var(--ax-color-secondary-fore-tint));
@@ -3721,6 +1409,9 @@ body {
3721
1409
  border-color: rgba(var(--ax-color-secondary-fore-tint));
3722
1410
  border-bottom-color: transparent;
3723
1411
  }
1412
+ .ax-dark .ax-el-secondary-twotone.ax-dropdown-button-marker {
1413
+ border-inline-start-color: rgba(var(--ax-color-secondary-950));
1414
+ }
3724
1415
  .ax-dark .ax-el-secondary-outline {
3725
1416
  border-color: rgba(var(--ax-color-secondary-200));
3726
1417
  color: rgba(var(--ax-color-secondary-200));
@@ -3745,6 +1436,9 @@ body {
3745
1436
  border-color: rgba(var(--ax-color-secondary-300));
3746
1437
  color: rgba(var(--ax-color-secondary-300));
3747
1438
  }
1439
+ .ax-dark .ax-el-secondary-outline.ax-dropdown-button-marker {
1440
+ border-inline-start-color: rgba(var(--ax-color-secondary-800));
1441
+ }
3748
1442
  .ax-dark .ax-el-secondary-blank {
3749
1443
  color: rgba(var(--ax-color-secondary-300));
3750
1444
  background-color: transparent;
@@ -3785,6 +1479,9 @@ body {
3785
1479
  .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) {
3786
1480
  outline-color: rgba(var(--ax-color-primary-200));
3787
1481
  }
1482
+ .ax-dark .ax-el-success-solid.ax-dropdown-button-marker {
1483
+ border-inline-start-color: rgba(var(--ax-color-success-900));
1484
+ }
3788
1485
  .ax-dark .ax-el-success-twotone {
3789
1486
  background-color: rgba(var(--ax-color-success-200));
3790
1487
  color: rgba(var(--ax-color-success-fore-tint));
@@ -3803,6 +1500,9 @@ body {
3803
1500
  border-color: rgba(var(--ax-color-success-fore-tint));
3804
1501
  border-bottom-color: transparent;
3805
1502
  }
1503
+ .ax-dark .ax-el-success-twotone.ax-dropdown-button-marker {
1504
+ border-inline-start-color: rgba(var(--ax-color-success-950));
1505
+ }
3806
1506
  .ax-dark .ax-el-success-outline {
3807
1507
  border-color: rgba(var(--ax-color-success-200));
3808
1508
  color: rgba(var(--ax-color-success-200));
@@ -3827,6 +1527,9 @@ body {
3827
1527
  border-color: rgba(var(--ax-color-success-300));
3828
1528
  color: rgba(var(--ax-color-success-300));
3829
1529
  }
1530
+ .ax-dark .ax-el-success-outline.ax-dropdown-button-marker {
1531
+ border-inline-start-color: rgba(var(--ax-color-success-800));
1532
+ }
3830
1533
  .ax-dark .ax-el-success-blank {
3831
1534
  color: rgba(var(--ax-color-success-300));
3832
1535
  background-color: transparent;
@@ -3867,6 +1570,9 @@ body {
3867
1570
  .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) {
3868
1571
  outline-color: rgba(var(--ax-color-primary-200));
3869
1572
  }
1573
+ .ax-dark .ax-el-warning-solid.ax-dropdown-button-marker {
1574
+ border-inline-start-color: rgba(var(--ax-color-warning-900));
1575
+ }
3870
1576
  .ax-dark .ax-el-warning-twotone {
3871
1577
  background-color: rgba(var(--ax-color-warning-200));
3872
1578
  color: rgba(var(--ax-color-warning-fore-tint));
@@ -3885,6 +1591,9 @@ body {
3885
1591
  border-color: rgba(var(--ax-color-warning-fore-tint));
3886
1592
  border-bottom-color: transparent;
3887
1593
  }
1594
+ .ax-dark .ax-el-warning-twotone.ax-dropdown-button-marker {
1595
+ border-inline-start-color: rgba(var(--ax-color-warning-950));
1596
+ }
3888
1597
  .ax-dark .ax-el-warning-outline {
3889
1598
  border-color: rgba(var(--ax-color-warning-200));
3890
1599
  color: rgba(var(--ax-color-warning-200));
@@ -3909,6 +1618,9 @@ body {
3909
1618
  border-color: rgba(var(--ax-color-warning-300));
3910
1619
  color: rgba(var(--ax-color-warning-300));
3911
1620
  }
1621
+ .ax-dark .ax-el-warning-outline.ax-dropdown-button-marker {
1622
+ border-inline-start-color: rgba(var(--ax-color-warning-800));
1623
+ }
3912
1624
  .ax-dark .ax-el-warning-blank {
3913
1625
  color: rgba(var(--ax-color-warning-300));
3914
1626
  background-color: transparent;
@@ -3949,6 +1661,9 @@ body {
3949
1661
  .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) {
3950
1662
  outline-color: rgba(var(--ax-color-primary-200));
3951
1663
  }
1664
+ .ax-dark .ax-el-danger-solid.ax-dropdown-button-marker {
1665
+ border-inline-start-color: rgba(var(--ax-color-danger-900));
1666
+ }
3952
1667
  .ax-dark .ax-el-danger-twotone {
3953
1668
  background-color: rgba(var(--ax-color-danger-200));
3954
1669
  color: rgba(var(--ax-color-danger-fore-tint));
@@ -3967,6 +1682,9 @@ body {
3967
1682
  border-color: rgba(var(--ax-color-danger-fore-tint));
3968
1683
  border-bottom-color: transparent;
3969
1684
  }
1685
+ .ax-dark .ax-el-danger-twotone.ax-dropdown-button-marker {
1686
+ border-inline-start-color: rgba(var(--ax-color-danger-950));
1687
+ }
3970
1688
  .ax-dark .ax-el-danger-outline {
3971
1689
  border-color: rgba(var(--ax-color-danger-200));
3972
1690
  color: rgba(var(--ax-color-danger-200));
@@ -3991,6 +1709,9 @@ body {
3991
1709
  border-color: rgba(var(--ax-color-danger-300));
3992
1710
  color: rgba(var(--ax-color-danger-300));
3993
1711
  }
1712
+ .ax-dark .ax-el-danger-outline.ax-dropdown-button-marker {
1713
+ border-inline-start-color: rgba(var(--ax-color-danger-800));
1714
+ }
3994
1715
  .ax-dark .ax-el-danger-blank {
3995
1716
  color: rgba(var(--ax-color-danger-300));
3996
1717
  background-color: transparent;
@@ -4031,6 +1752,9 @@ body {
4031
1752
  .ax-dark .ax-el-info-solid > button:is(.ax-dark .ax-el-info-solid > button:focus-visible, .ax-dark .ax-el-info-solid > button.ax-state-focus) {
4032
1753
  outline-color: rgba(var(--ax-color-primary-200));
4033
1754
  }
1755
+ .ax-dark .ax-el-info-solid.ax-dropdown-button-marker {
1756
+ border-inline-start-color: rgba(var(--ax-color-info-900));
1757
+ }
4034
1758
  .ax-dark .ax-el-info-twotone {
4035
1759
  background-color: rgba(var(--ax-color-info-200));
4036
1760
  color: rgba(var(--ax-color-info-fore-tint));
@@ -4049,6 +1773,9 @@ body {
4049
1773
  border-color: rgba(var(--ax-color-info-fore-tint));
4050
1774
  border-bottom-color: transparent;
4051
1775
  }
1776
+ .ax-dark .ax-el-info-twotone.ax-dropdown-button-marker {
1777
+ border-inline-start-color: rgba(var(--ax-color-info-950));
1778
+ }
4052
1779
  .ax-dark .ax-el-info-outline {
4053
1780
  border-color: rgba(var(--ax-color-info-200));
4054
1781
  color: rgba(var(--ax-color-info-200));
@@ -4073,6 +1800,9 @@ body {
4073
1800
  border-color: rgba(var(--ax-color-info-300));
4074
1801
  color: rgba(var(--ax-color-info-300));
4075
1802
  }
1803
+ .ax-dark .ax-el-info-outline.ax-dropdown-button-marker {
1804
+ border-inline-start-color: rgba(var(--ax-color-info-800));
1805
+ }
4076
1806
  .ax-dark .ax-el-info-blank {
4077
1807
  color: rgba(var(--ax-color-info-300));
4078
1808
  background-color: transparent;
@@ -4095,6 +1825,9 @@ body {
4095
1825
  border-color: rgba(var(--ax-color-primary-200));
4096
1826
  color: rgba(var(--ax-color-primary-200));
4097
1827
  }
1828
+ .ax-dark .ax-el-ghost-solid.ax-el-interactive:hover + .ax-dropdown-button-marker {
1829
+ border-inline-start-color: rgba(var(--ax-color-primary-200));
1830
+ }
4098
1831
  .ax-dark .ax-el-ghost-solid.ax-el-interactive:active {
4099
1832
  border-color: rgba(var(--ax-color-primary-300));
4100
1833
  color: rgba(var(--ax-color-primary-300));
@@ -4111,6 +1844,9 @@ body {
4111
1844
  border-color: rgba(var(--ax-color-primary-200));
4112
1845
  color: rgba(var(--ax-color-primary-200));
4113
1846
  }
1847
+ .ax-dark .ax-el-ghost-outline.ax-el-interactive:hover + .ax-dropdown-button-marker {
1848
+ border-inline-start-color: rgba(var(--ax-color-primary-200));
1849
+ }
4114
1850
  .ax-dark .ax-el-ghost-outline.ax-state-selected {
4115
1851
  border-color: rgba(var(--ax-color-primary-200));
4116
1852
  color: rgba(var(--ax-color-primary-fore-tint));
@@ -4154,6 +1890,9 @@ body {
4154
1890
  background-color: rgba(var(--ax-color-primary-200));
4155
1891
  color: rgba(var(--ax-color-primary-fore-tint));
4156
1892
  }
1893
+ .ax-dark .ax-el-ghost-twotone.ax-el-interactive:hover + .ax-dropdown-button-marker {
1894
+ border-inline-start-color: rgba(var(--ax-color-primary-200));
1895
+ }
4157
1896
  .ax-dark .ax-el-ghost-twotone.ax-el-interactive:active {
4158
1897
  background-color: rgba(var(--ax-color-primary-300));
4159
1898
  color: rgba(var(--ax-color-primary-fore-tint));