@vsn-ux/gaia-styles 0.6.3 → 0.6.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/all-10pt.css +282 -0
  2. package/dist/all-no-reset-10pt.css +282 -0
  3. package/dist/all-no-reset.css +282 -0
  4. package/dist/all.css +282 -0
  5. package/dist/components/breadcrumbs.css +301 -0
  6. package/dist/components.css +282 -0
  7. package/dist/docs/Breadcrumbs.md +712 -0
  8. package/package.json +1 -1
  9. package/src/styles/components/breadcrumbs.css +158 -0
  10. package/src/styles/components.css +1 -0
package/dist/all-10pt.css CHANGED
@@ -645,6 +645,288 @@
645
645
  }
646
646
  }
647
647
  }
648
+ .ga-breadcrumb {
649
+ display: flex;
650
+ flex-wrap: wrap;
651
+ align-content: flex-start;
652
+ align-items: flex-start;
653
+ gap: calc(0.4rem * 6);
654
+ }
655
+ .ga-breadcrumb-item {
656
+ position: relative;
657
+ display: inline-flex;
658
+ align-items: center;
659
+ gap: calc(0.4rem * 6);
660
+ .ga-breadcrumb-item__explorer {
661
+ cursor: pointer;
662
+ border-radius: var(--ga-radius);
663
+ font-size: calc(
664
+ var(--ga-text-lg-font-size) * var(--ga-base-scaling-factor, 1)
665
+ );
666
+ line-height: var(--tw-leading, calc(
667
+ var(--ga-text-lg-line-height) * var(--ga-base-scaling-factor, 1)
668
+ ));
669
+ letter-spacing: var(--tw-tracking, calc(
670
+ var(--ga-text-lg-letter-spacing) * var(--ga-base-scaling-factor, 1)
671
+ ));
672
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
673
+ transition-timing-function: var(--tw-ease, ease);
674
+ transition-duration: var(--tw-duration, 0s);
675
+ transition-duration: var(--ga-duration-instant);
676
+ transition-timing-function: var(--ga-easing-standard);
677
+ --tw-outline-style: none;
678
+ outline-style: none;
679
+ .ga-icon {
680
+ color: var(--ga-color-icon-action);
681
+ }
682
+ &:hover .ga-icon {
683
+ color: var(--ga-color-icon-action-hover);
684
+ }
685
+ }
686
+ &.ga-breadcrumb-item--overflow {
687
+ align-items: center;
688
+ gap: calc(0.4rem * 3);
689
+ .ga-breadcrumb-item__menu {
690
+ left: calc(var(--ga-size-spacing-02) * -1);
691
+ }
692
+ .ga-breadcrumb-item__trigger {
693
+ display: flex;
694
+ cursor: pointer;
695
+ align-items: center;
696
+ justify-content: center;
697
+ gap: calc(0.4rem * 2);
698
+ border-radius: var(--ga-radius);
699
+ font-size: calc(
700
+ var(--ga-text-lg-font-size) * var(--ga-base-scaling-factor, 1)
701
+ );
702
+ line-height: var(--tw-leading, calc(
703
+ var(--ga-text-lg-line-height) * var(--ga-base-scaling-factor, 1)
704
+ ));
705
+ letter-spacing: var(--tw-tracking, calc(
706
+ var(--ga-text-lg-letter-spacing) * var(--ga-base-scaling-factor, 1)
707
+ ));
708
+ --tw-font-weight: 400;
709
+ font-weight: 400;
710
+ color: var(--ga-color-text-action);
711
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
712
+ transition-timing-function: var(--tw-ease, ease);
713
+ transition-duration: var(--tw-duration, 0s);
714
+ transition-duration: var(--ga-duration-instant);
715
+ transition-timing-function: var(--ga-easing-standard);
716
+ .ga-breadcrumb-item__label {
717
+ max-width: calc(0.4rem * 80);
718
+ overflow: hidden;
719
+ text-overflow: ellipsis;
720
+ white-space: nowrap;
721
+ color: var(--ga-color-text-action);
722
+ }
723
+ .ga-icon {
724
+ color: var(--ga-color-icon-action);
725
+ }
726
+ &:hover {
727
+ .ga-breadcrumb-item__label {
728
+ text-decoration-line: underline;
729
+ }
730
+ }
731
+ &:focus-visible {
732
+ --tw-outline-style: none;
733
+ outline-style: none;
734
+ .ga-breadcrumb-item__label {
735
+ border-radius: 2px;
736
+ text-decoration-line: none;
737
+ outline-style: var(--tw-outline-style);
738
+ outline-width: 2px;
739
+ outline-offset: 2px;
740
+ outline-color: var(--ga-color-border-focus);
741
+ }
742
+ }
743
+ &[aria-expanded='true'] {
744
+ --tw-outline-style: none;
745
+ outline-style: none;
746
+ .ga-breadcrumb-item__label {
747
+ border-radius: 2px;
748
+ text-decoration-line: none;
749
+ outline-style: var(--tw-outline-style);
750
+ outline-width: 2px;
751
+ outline-offset: 2px;
752
+ outline-color: var(--ga-color-border-focus);
753
+ }
754
+ }
755
+ }
756
+ .ga-breadcrumb-item__separator {
757
+ font-size: calc(
758
+ var(--ga-text-lg-font-size) * var(--ga-base-scaling-factor, 1)
759
+ );
760
+ line-height: var(--tw-leading, calc(
761
+ var(--ga-text-lg-line-height) * var(--ga-base-scaling-factor, 1)
762
+ ));
763
+ letter-spacing: var(--tw-tracking, calc(
764
+ var(--ga-text-lg-letter-spacing) * var(--ga-base-scaling-factor, 1)
765
+ ));
766
+ color: var(--ga-color-text-body);
767
+ }
768
+ }
769
+ &.ga-breadcrumb-item--current-page {
770
+ gap: calc(0.4rem * 3);
771
+ .ga-breadcrumb-item__trigger {
772
+ padding-right: calc(0.4rem * 1);
773
+ font-size: calc(
774
+ var(--ga-text-lg-font-size) * var(--ga-base-scaling-factor, 1)
775
+ );
776
+ line-height: var(--tw-leading, calc(
777
+ var(--ga-text-lg-line-height) * var(--ga-base-scaling-factor, 1)
778
+ ));
779
+ letter-spacing: var(--tw-tracking, calc(
780
+ var(--ga-text-lg-letter-spacing) * var(--ga-base-scaling-factor, 1)
781
+ ));
782
+ --tw-font-weight: 600;
783
+ font-weight: 600;
784
+ color: var(--ga-color-text-body);
785
+ .ga-breadcrumb-item__label {
786
+ max-width: calc(0.4rem * 80);
787
+ overflow: hidden;
788
+ text-overflow: ellipsis;
789
+ white-space: nowrap;
790
+ }
791
+ }
792
+ }
793
+ &.ga-breadcrumb-item--back {
794
+ align-items: center;
795
+ gap: calc(0.4rem * 2);
796
+ .ga-breadcrumb-item__trigger {
797
+ display: inline-flex;
798
+ cursor: pointer;
799
+ align-items: center;
800
+ border-radius: var(--ga-radius);
801
+ font-size: calc(
802
+ var(--ga-text-lg-font-size) * var(--ga-base-scaling-factor, 1)
803
+ );
804
+ line-height: var(--tw-leading, calc(
805
+ var(--ga-text-lg-line-height) * var(--ga-base-scaling-factor, 1)
806
+ ));
807
+ letter-spacing: var(--tw-tracking, calc(
808
+ var(--ga-text-lg-letter-spacing) * var(--ga-base-scaling-factor, 1)
809
+ ));
810
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
811
+ transition-timing-function: var(--tw-ease, ease);
812
+ transition-duration: var(--tw-duration, 0s);
813
+ transition-duration: var(--ga-duration-instant);
814
+ transition-timing-function: var(--ga-easing-standard);
815
+ .ga-icon {
816
+ color: var(--ga-color-icon-action);
817
+ }
818
+ &:hover {
819
+ .ga-icon {
820
+ color: var(--ga-color-icon-action-hover);
821
+ }
822
+ }
823
+ &:focus-visible {
824
+ outline-style: var(--tw-outline-style);
825
+ outline-width: 2px;
826
+ outline-offset: 2px;
827
+ outline-color: var(--ga-color-border-focus);
828
+ }
829
+ }
830
+ .ga-breadcrumb-item__label {
831
+ font-size: calc(
832
+ var(--ga-text-lg-font-size) * var(--ga-base-scaling-factor, 1)
833
+ );
834
+ line-height: var(--tw-leading, calc(
835
+ var(--ga-text-lg-line-height) * var(--ga-base-scaling-factor, 1)
836
+ ));
837
+ letter-spacing: var(--tw-tracking, calc(
838
+ var(--ga-text-lg-letter-spacing) * var(--ga-base-scaling-factor, 1)
839
+ ));
840
+ --tw-font-weight: 600;
841
+ font-weight: 600;
842
+ color: var(--ga-color-text-body);
843
+ }
844
+ }
845
+ &.ga-breadcrumb-item--link {
846
+ gap: calc(0.4rem * 3);
847
+ .ga-breadcrumb-item__trigger {
848
+ display: inline-flex;
849
+ cursor: pointer;
850
+ align-items: center;
851
+ border-radius: var(--ga-radius);
852
+ padding-right: calc(0.4rem * 1);
853
+ font-size: calc(
854
+ var(--ga-text-lg-font-size) * var(--ga-base-scaling-factor, 1)
855
+ );
856
+ line-height: var(--tw-leading, calc(
857
+ var(--ga-text-lg-line-height) * var(--ga-base-scaling-factor, 1)
858
+ ));
859
+ letter-spacing: var(--tw-tracking, calc(
860
+ var(--ga-text-lg-letter-spacing) * var(--ga-base-scaling-factor, 1)
861
+ ));
862
+ --tw-font-weight: 400;
863
+ font-weight: 400;
864
+ color: var(--ga-color-text-action);
865
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
866
+ transition-timing-function: var(--tw-ease, ease);
867
+ transition-duration: var(--tw-duration, 0s);
868
+ transition-duration: var(--ga-duration-instant);
869
+ transition-timing-function: var(--ga-easing-standard);
870
+ .ga-breadcrumb-item__label {
871
+ max-width: calc(0.4rem * 80);
872
+ overflow: hidden;
873
+ text-overflow: ellipsis;
874
+ white-space: nowrap;
875
+ color: var(--ga-color-text-action);
876
+ }
877
+ &:hover {
878
+ color: var(--ga-color-text-action-hover);
879
+ text-decoration-line: underline;
880
+ .ga-breadcrumb-item__label {
881
+ color: var(--ga-color-text-action-hover);
882
+ text-decoration-line: underline;
883
+ }
884
+ }
885
+ &:active {
886
+ color: var(--ga-color-text-action-hover);
887
+ .ga-breadcrumb-item__label {
888
+ color: var(--ga-color-text-action-hover);
889
+ }
890
+ }
891
+ &:focus-visible {
892
+ outline-style: var(--tw-outline-style);
893
+ outline-width: 2px;
894
+ outline-offset: 2px;
895
+ outline-color: var(--ga-color-border-focus);
896
+ }
897
+ }
898
+ .ga-breadcrumb-item__explorer {
899
+ padding-right: calc(0.4rem * 1);
900
+ }
901
+ .ga-breadcrumb-item__separator {
902
+ font-size: calc(
903
+ var(--ga-text-lg-font-size) * var(--ga-base-scaling-factor, 1)
904
+ );
905
+ line-height: var(--tw-leading, calc(
906
+ var(--ga-text-lg-line-height) * var(--ga-base-scaling-factor, 1)
907
+ ));
908
+ letter-spacing: var(--tw-tracking, calc(
909
+ var(--ga-text-lg-letter-spacing) * var(--ga-base-scaling-factor, 1)
910
+ ));
911
+ color: var(--ga-color-text-body);
912
+ }
913
+ }
914
+ .ga-breadcrumb-item__group {
915
+ display: inline-flex;
916
+ align-items: center;
917
+ border-radius: var(--ga-radius);
918
+ &:focus-within {
919
+ outline-style: var(--tw-outline-style);
920
+ outline-width: 2px;
921
+ outline-offset: 2px;
922
+ outline-color: var(--ga-color-border-focus);
923
+ }
924
+ .ga-breadcrumb-item__trigger:focus-visible {
925
+ --tw-outline-style: none;
926
+ outline-style: none;
927
+ }
928
+ }
929
+ }
648
930
  .ga-button {
649
931
  display: inline-flex;
650
932
  height: calc(0.4rem * 10);
package/dist/all-no-reset-10pt.css CHANGED
@@ -492,6 +492,288 @@
492
492
  }
493
493
  }
494
494
  }
495
+ .ga-breadcrumb {
496
+ display: flex;
497
+ flex-wrap: wrap;
498
+ align-content: flex-start;
499
+ align-items: flex-start;
500
+ gap: calc(0.4rem * 6);
501
+ }
502
+ .ga-breadcrumb-item {
503
+ position: relative;
504
+ display: inline-flex;
505
+ align-items: center;
506
+ gap: calc(0.4rem * 6);
507
+ .ga-breadcrumb-item__explorer {
508
+ cursor: pointer;
509
+ border-radius: var(--ga-radius);
510
+ font-size: calc(
511
+ var(--ga-text-lg-font-size) * var(--ga-base-scaling-factor, 1)
512
+ );
513
+ line-height: var(--tw-leading, calc(
514
+ var(--ga-text-lg-line-height) * var(--ga-base-scaling-factor, 1)
515
+ ));
516
+ letter-spacing: var(--tw-tracking, calc(
517
+ var(--ga-text-lg-letter-spacing) * var(--ga-base-scaling-factor, 1)
518
+ ));
519
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
520
+ transition-timing-function: var(--tw-ease, ease);
521
+ transition-duration: var(--tw-duration, 0s);
522
+ transition-duration: var(--ga-duration-instant);
523
+ transition-timing-function: var(--ga-easing-standard);
524
+ --tw-outline-style: none;
525
+ outline-style: none;
526
+ .ga-icon {
527
+ color: var(--ga-color-icon-action);
528
+ }
529
+ &:hover .ga-icon {
530
+ color: var(--ga-color-icon-action-hover);
531
+ }
532
+ }
533
+ &.ga-breadcrumb-item--overflow {
534
+ align-items: center;
535
+ gap: calc(0.4rem * 3);
536
+ .ga-breadcrumb-item__menu {
537
+ left: calc(var(--ga-size-spacing-02) * -1);
538
+ }
539
+ .ga-breadcrumb-item__trigger {
540
+ display: flex;
541
+ cursor: pointer;
542
+ align-items: center;
543
+ justify-content: center;
544
+ gap: calc(0.4rem * 2);
545
+ border-radius: var(--ga-radius);
546
+ font-size: calc(
547
+ var(--ga-text-lg-font-size) * var(--ga-base-scaling-factor, 1)
548
+ );
549
+ line-height: var(--tw-leading, calc(
550
+ var(--ga-text-lg-line-height) * var(--ga-base-scaling-factor, 1)
551
+ ));
552
+ letter-spacing: var(--tw-tracking, calc(
553
+ var(--ga-text-lg-letter-spacing) * var(--ga-base-scaling-factor, 1)
554
+ ));
555
+ --tw-font-weight: 400;
556
+ font-weight: 400;
557
+ color: var(--ga-color-text-action);
558
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
559
+ transition-timing-function: var(--tw-ease, ease);
560
+ transition-duration: var(--tw-duration, 0s);
561
+ transition-duration: var(--ga-duration-instant);
562
+ transition-timing-function: var(--ga-easing-standard);
563
+ .ga-breadcrumb-item__label {
564
+ max-width: calc(0.4rem * 80);
565
+ overflow: hidden;
566
+ text-overflow: ellipsis;
567
+ white-space: nowrap;
568
+ color: var(--ga-color-text-action);
569
+ }
570
+ .ga-icon {
571
+ color: var(--ga-color-icon-action);
572
+ }
573
+ &:hover {
574
+ .ga-breadcrumb-item__label {
575
+ text-decoration-line: underline;
576
+ }
577
+ }
578
+ &:focus-visible {
579
+ --tw-outline-style: none;
580
+ outline-style: none;
581
+ .ga-breadcrumb-item__label {
582
+ border-radius: 2px;
583
+ text-decoration-line: none;
584
+ outline-style: var(--tw-outline-style);
585
+ outline-width: 2px;
586
+ outline-offset: 2px;
587
+ outline-color: var(--ga-color-border-focus);
588
+ }
589
+ }
590
+ &[aria-expanded='true'] {
591
+ --tw-outline-style: none;
592
+ outline-style: none;
593
+ .ga-breadcrumb-item__label {
594
+ border-radius: 2px;
595
+ text-decoration-line: none;
596
+ outline-style: var(--tw-outline-style);
597
+ outline-width: 2px;
598
+ outline-offset: 2px;
599
+ outline-color: var(--ga-color-border-focus);
600
+ }
601
+ }
602
+ }
603
+ .ga-breadcrumb-item__separator {
604
+ font-size: calc(
605
+ var(--ga-text-lg-font-size) * var(--ga-base-scaling-factor, 1)
606
+ );
607
+ line-height: var(--tw-leading, calc(
608
+ var(--ga-text-lg-line-height) * var(--ga-base-scaling-factor, 1)
609
+ ));
610
+ letter-spacing: var(--tw-tracking, calc(
611
+ var(--ga-text-lg-letter-spacing) * var(--ga-base-scaling-factor, 1)
612
+ ));
613
+ color: var(--ga-color-text-body);
614
+ }
615
+ }
616
+ &.ga-breadcrumb-item--current-page {
617
+ gap: calc(0.4rem * 3);
618
+ .ga-breadcrumb-item__trigger {
619
+ padding-right: calc(0.4rem * 1);
620
+ font-size: calc(
621
+ var(--ga-text-lg-font-size) * var(--ga-base-scaling-factor, 1)
622
+ );
623
+ line-height: var(--tw-leading, calc(
624
+ var(--ga-text-lg-line-height) * var(--ga-base-scaling-factor, 1)
625
+ ));
626
+ letter-spacing: var(--tw-tracking, calc(
627
+ var(--ga-text-lg-letter-spacing) * var(--ga-base-scaling-factor, 1)
628
+ ));
629
+ --tw-font-weight: 600;
630
+ font-weight: 600;
631
+ color: var(--ga-color-text-body);
632
+ .ga-breadcrumb-item__label {
633
+ max-width: calc(0.4rem * 80);
634
+ overflow: hidden;
635
+ text-overflow: ellipsis;
636
+ white-space: nowrap;
637
+ }
638
+ }
639
+ }
640
+ &.ga-breadcrumb-item--back {
641
+ align-items: center;
642
+ gap: calc(0.4rem * 2);
643
+ .ga-breadcrumb-item__trigger {
644
+ display: inline-flex;
645
+ cursor: pointer;
646
+ align-items: center;
647
+ border-radius: var(--ga-radius);
648
+ font-size: calc(
649
+ var(--ga-text-lg-font-size) * var(--ga-base-scaling-factor, 1)
650
+ );
651
+ line-height: var(--tw-leading, calc(
652
+ var(--ga-text-lg-line-height) * var(--ga-base-scaling-factor, 1)
653
+ ));
654
+ letter-spacing: var(--tw-tracking, calc(
655
+ var(--ga-text-lg-letter-spacing) * var(--ga-base-scaling-factor, 1)
656
+ ));
657
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
658
+ transition-timing-function: var(--tw-ease, ease);
659
+ transition-duration: var(--tw-duration, 0s);
660
+ transition-duration: var(--ga-duration-instant);
661
+ transition-timing-function: var(--ga-easing-standard);
662
+ .ga-icon {
663
+ color: var(--ga-color-icon-action);
664
+ }
665
+ &:hover {
666
+ .ga-icon {
667
+ color: var(--ga-color-icon-action-hover);
668
+ }
669
+ }
670
+ &:focus-visible {
671
+ outline-style: var(--tw-outline-style);
672
+ outline-width: 2px;
673
+ outline-offset: 2px;
674
+ outline-color: var(--ga-color-border-focus);
675
+ }
676
+ }
677
+ .ga-breadcrumb-item__label {
678
+ font-size: calc(
679
+ var(--ga-text-lg-font-size) * var(--ga-base-scaling-factor, 1)
680
+ );
681
+ line-height: var(--tw-leading, calc(
682
+ var(--ga-text-lg-line-height) * var(--ga-base-scaling-factor, 1)
683
+ ));
684
+ letter-spacing: var(--tw-tracking, calc(
685
+ var(--ga-text-lg-letter-spacing) * var(--ga-base-scaling-factor, 1)
686
+ ));
687
+ --tw-font-weight: 600;
688
+ font-weight: 600;
689
+ color: var(--ga-color-text-body);
690
+ }
691
+ }
692
+ &.ga-breadcrumb-item--link {
693
+ gap: calc(0.4rem * 3);
694
+ .ga-breadcrumb-item__trigger {
695
+ display: inline-flex;
696
+ cursor: pointer;
697
+ align-items: center;
698
+ border-radius: var(--ga-radius);
699
+ padding-right: calc(0.4rem * 1);
700
+ font-size: calc(
701
+ var(--ga-text-lg-font-size) * var(--ga-base-scaling-factor, 1)
702
+ );
703
+ line-height: var(--tw-leading, calc(
704
+ var(--ga-text-lg-line-height) * var(--ga-base-scaling-factor, 1)
705
+ ));
706
+ letter-spacing: var(--tw-tracking, calc(
707
+ var(--ga-text-lg-letter-spacing) * var(--ga-base-scaling-factor, 1)
708
+ ));
709
+ --tw-font-weight: 400;
710
+ font-weight: 400;
711
+ color: var(--ga-color-text-action);
712
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
713
+ transition-timing-function: var(--tw-ease, ease);
714
+ transition-duration: var(--tw-duration, 0s);
715
+ transition-duration: var(--ga-duration-instant);
716
+ transition-timing-function: var(--ga-easing-standard);
717
+ .ga-breadcrumb-item__label {
718
+ max-width: calc(0.4rem * 80);
719
+ overflow: hidden;
720
+ text-overflow: ellipsis;
721
+ white-space: nowrap;
722
+ color: var(--ga-color-text-action);
723
+ }
724
+ &:hover {
725
+ color: var(--ga-color-text-action-hover);
726
+ text-decoration-line: underline;
727
+ .ga-breadcrumb-item__label {
728
+ color: var(--ga-color-text-action-hover);
729
+ text-decoration-line: underline;
730
+ }
731
+ }
732
+ &:active {
733
+ color: var(--ga-color-text-action-hover);
734
+ .ga-breadcrumb-item__label {
735
+ color: var(--ga-color-text-action-hover);
736
+ }
737
+ }
738
+ &:focus-visible {
739
+ outline-style: var(--tw-outline-style);
740
+ outline-width: 2px;
741
+ outline-offset: 2px;
742
+ outline-color: var(--ga-color-border-focus);
743
+ }
744
+ }
745
+ .ga-breadcrumb-item__explorer {
746
+ padding-right: calc(0.4rem * 1);
747
+ }
748
+ .ga-breadcrumb-item__separator {
749
+ font-size: calc(
750
+ var(--ga-text-lg-font-size) * var(--ga-base-scaling-factor, 1)
751
+ );
752
+ line-height: var(--tw-leading, calc(
753
+ var(--ga-text-lg-line-height) * var(--ga-base-scaling-factor, 1)
754
+ ));
755
+ letter-spacing: var(--tw-tracking, calc(
756
+ var(--ga-text-lg-letter-spacing) * var(--ga-base-scaling-factor, 1)
757
+ ));
758
+ color: var(--ga-color-text-body);
759
+ }
760
+ }
761
+ .ga-breadcrumb-item__group {
762
+ display: inline-flex;
763
+ align-items: center;
764
+ border-radius: var(--ga-radius);
765
+ &:focus-within {
766
+ outline-style: var(--tw-outline-style);
767
+ outline-width: 2px;
768
+ outline-offset: 2px;
769
+ outline-color: var(--ga-color-border-focus);
770
+ }
771
+ .ga-breadcrumb-item__trigger:focus-visible {
772
+ --tw-outline-style: none;
773
+ outline-style: none;
774
+ }
775
+ }
776
+ }
495
777
  .ga-button {
496
778
  display: inline-flex;
497
779
  height: calc(0.4rem * 10);