@cck-ui/core 0.3.3 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/styles.layer.css CHANGED
@@ -1,155 +1,98 @@
1
- @layer cck {.m_a244865c {
2
- --loader-size-xs: 18px;
3
- --loader-size-sm: 22px;
4
- --loader-size-md: 36px;
5
- --loader-size-lg: 44px;
6
- --loader-size-xl: 58px;
7
- --loader-size: var(--loader-size-md);
8
- --loader-color: var(--c-primary-color-filled);
1
+ @layer cck {:root,
2
+ :host {
3
+ color-scheme: var(--c-color-scheme);
9
4
  }
10
5
 
11
- .m_a244865c,
12
- .m_a244865c *,
13
- .m_a244865c::before,
14
- .m_a244865c::after {
6
+ *,
7
+ *::before,
8
+ *::after {
15
9
  box-sizing: border-box;
16
10
  }
17
11
 
18
- @keyframes m_774c277d {
19
- 0% {
20
- transform: scale(0.6);
21
- opacity: 0;
22
- }
23
-
24
- 50%,
25
- 100% {
26
- transform: scale(1);
27
- }
12
+ input,
13
+ button,
14
+ textarea,
15
+ select {
16
+ font: inherit;
28
17
  }
29
18
 
30
- .m_8f6794ed {
31
- position: relative;
32
- width: var(--loader-size);
33
- height: var(--loader-size);
34
- display: flex;
35
- gap: calc(var(--loader-size) / 5);
19
+ button,
20
+ select {
21
+ text-transform: none;
36
22
  }
37
23
 
38
- .m_919edf59 {
39
- flex: 1;
40
- background: var(--loader-color);
41
- animation: m_774c277d 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
42
- border-radius: 2px;
43
-
44
- &:nth-of-type(1) {
45
- animation-delay: -240ms;
46
- }
24
+ body,
25
+ :host {
26
+ margin: 0;
27
+ font-family: var(--c-font-family);
28
+ font-size: var(--c-font-size-md);
29
+ line-height: var(--c-line-height);
30
+ background-color: var(--c-color-body);
31
+ color: var(--c-color-text);
47
32
 
48
- &:nth-of-type(2) {
49
- animation-delay: -120ms;
50
- }
33
+ -webkit-font-smoothing: var(--c-webkit-font-smoothing);
34
+ -moz-osx-font-smoothing: var(--c-moz-font-smoothing);
51
35
 
52
- &:nth-of-type(3) {
53
- animation-delay: 0;
36
+ @media screen and (max-device-width: em(500px)) {
37
+ -webkit-text-size-adjust: 100%;
54
38
  }
55
39
  }
56
40
 
57
- @keyframes m_24cd2081 {
58
- 0%,
59
- 100% {
60
- transform: scale(1);
61
- opacity: 1;
62
- }
63
-
64
- 50% {
65
- transform: scale(0.6);
66
- opacity: 0.5;
41
+ [data-respect-reduced-motion] {
42
+ @media (prefers-reduced-motion: reduce) {
43
+ [data-reduce-motion] {
44
+ transition: none;
45
+ animation: none;
46
+ }
67
47
  }
68
48
  }
69
49
 
70
- .m_637ae2f7 {
71
- display: flex;
72
- justify-content: center;
73
- align-items: center;
74
- gap: calc(var(--loader-size) / 10);
75
- position: relative;
76
- width: var(--loader-size);
77
- height: var(--loader-size);
78
- }
79
-
80
- .m_919ee88f {
81
- width: calc(var(--loader-size) / 3 - var(--loader-size) / 15);
82
- height: calc(var(--loader-size) / 3 - var(--loader-size) / 15);
83
- border-radius: 50%;
84
- background: var(--loader-color);
85
- animation: m_24cd2081 0.8s infinite linear;
86
-
87
- &:nth-child(2) {
88
- animation-delay: 0.4s;
50
+ .c-light-hidden {
51
+ @mixin light {
52
+ display: none;
89
53
  }
90
54
  }
91
55
 
92
- @keyframes m_1309882b {
93
- 0% {
94
- transform: rotate(0deg);
56
+ .c-dark-hidden {
57
+ @mixin dark {
58
+ display: none;
95
59
  }
60
+ }
96
61
 
97
- 100% {
98
- transform: rotate(360deg);
62
+ .c-focus-auto {
63
+ &:focus-visible {
64
+ outline: 2px solid var(--c-primary-color-filled);
65
+ outline-offset: 2px;
99
66
  }
100
67
  }
101
68
 
102
- .m_c87fd4ff {
103
- display: inline-block;
104
- width: var(--loader-size);
105
- height: var(--loader-size);
106
-
107
- &::after {
108
- content: '';
109
- display: block;
110
- width: var(--loader-size);
111
- height: var(--loader-size);
112
- border-radius: 10000px;
113
- border-width: calc(var(--loader-size) / 8);
114
- border-style: solid;
115
- border-color: var(--loader-color) var(--loader-color) var(--loader-color)
116
- transparent;
117
- animation: m_1309882b 1.2s linear infinite;
69
+ .c-focus-always {
70
+ &:focus {
71
+ outline: 2px solid var(--c-primary-color-filled);
72
+ outline-offset: 2px;
118
73
  }
119
74
  }
120
75
 
121
- .m_c031daba {
122
- container: c-grid / inline-size;
76
+ .c-focus-never {
77
+ &:focus {
78
+ outline: none;
79
+ }
123
80
  }
124
81
 
125
- .m_c9913309 {
126
- --grid-overflow: visible;
127
- --grid-column-gap: var(--grid-gap);
128
- --grid-row-gap: var(--grid-gap);
129
-
130
- overflow: var(--grid-overflow);
131
- }
82
+ .c-active {
83
+ &:active {
84
+ transform: translateY(rem(1px));
85
+ }
132
86
 
133
- .m_6815e10f {
134
- display: flex;
135
- flex-wrap: wrap;
136
- justify-content: var(--grid-justify);
137
- align-items: var(--grid-align);
138
- gap: var(--grid-row-gap) var(--grid-column-gap);
87
+ fieldset:disabled &:active {
88
+ transform: none;
89
+ }
139
90
  }
140
91
 
141
- .m_92e36e79 {
142
- --col-flex-grow: 0;
143
- --col-offset: 0rem;
144
-
145
- flex-shrink: 0;
146
- order: var(--col-order);
147
- flex-basis: var(--col-flex-basis);
148
- width: var(--col-width);
149
- max-width: var(--col-max-width);
150
- flex-grow: var(--col-flex-grow);
151
- margin-inline-start: var(--col-offset);
152
- align-self: var(--col-align-self);
92
+ .c-rotate-rtl {
93
+ @mixin where-rtl {
94
+ transform: rotate(180deg);
95
+ }
153
96
  }
154
97
 
155
98
  /* This file is automatically generated, do not modify it directly. */
@@ -674,6 +617,54 @@
674
617
  --c-color-orange-outline-hover: rgba(253, 126, 20, 0.05);
675
618
  }
676
619
 
620
+ .m_537a2afc {
621
+ background-color: transparent;
622
+ cursor: pointer;
623
+ border: 0;
624
+ padding: 0;
625
+ appearance: none;
626
+ font-size: var(--c-font-size-md);
627
+ text-align: start;
628
+ text-decoration: none;
629
+ color: inherit;
630
+ touch-action: manipulation;
631
+ -webkit-tap-highlight-color: transparent;
632
+ }
633
+
634
+ .m_c031daba {
635
+ container: c-grid / inline-size;
636
+ }
637
+
638
+ .m_c9913309 {
639
+ --grid-overflow: visible;
640
+ --grid-column-gap: var(--grid-gap);
641
+ --grid-row-gap: var(--grid-gap);
642
+
643
+ overflow: var(--grid-overflow);
644
+ }
645
+
646
+ .m_6815e10f {
647
+ display: flex;
648
+ flex-wrap: wrap;
649
+ justify-content: var(--grid-justify);
650
+ align-items: var(--grid-align);
651
+ gap: var(--grid-row-gap) var(--grid-column-gap);
652
+ }
653
+
654
+ .m_92e36e79 {
655
+ --col-flex-grow: 0;
656
+ --col-offset: 0rem;
657
+
658
+ flex-shrink: 0;
659
+ order: var(--col-order);
660
+ flex-basis: var(--col-flex-basis);
661
+ width: var(--col-width);
662
+ max-width: var(--col-max-width);
663
+ flex-grow: var(--col-flex-grow);
664
+ margin-inline-start: var(--col-offset);
665
+ align-self: var(--col-align-self);
666
+ }
667
+
677
668
  .m_c9afe370 {
678
669
  display: flex;
679
670
  flex-direction: row;
@@ -690,43 +681,194 @@
690
681
  }
691
682
  }
692
683
 
693
- :root,
694
- :host {
695
- color-scheme: var(--c-color-scheme);
684
+ .m_a244865c {
685
+ --loader-size-xs: 18px;
686
+ --loader-size-sm: 22px;
687
+ --loader-size-md: 36px;
688
+ --loader-size-lg: 44px;
689
+ --loader-size-xl: 58px;
690
+ --loader-size: var(--loader-size-md);
691
+ --loader-color: var(--c-primary-color-filled);
696
692
  }
697
693
 
698
- *,
699
- *::before,
700
- *::after {
694
+ .m_a244865c,
695
+ .m_a244865c *,
696
+ .m_a244865c::before,
697
+ .m_a244865c::after {
701
698
  box-sizing: border-box;
702
699
  }
703
700
 
704
- input,
705
- button,
706
- textarea,
707
- select {
708
- font: inherit;
709
- }
701
+ @keyframes m_774c277d {
702
+ 0% {
703
+ transform: scale(0.6);
704
+ opacity: 0;
705
+ }
710
706
 
711
- button,
712
- select {
713
- text-transform: none;
707
+ 50%,
708
+ 100% {
709
+ transform: scale(1);
710
+ }
714
711
  }
715
712
 
716
- body,
717
- :host {
713
+ .m_8f6794ed {
714
+ position: relative;
715
+ width: var(--loader-size);
716
+ height: var(--loader-size);
717
+ display: flex;
718
+ gap: calc(var(--loader-size) / 5);
719
+ }
720
+
721
+ .m_919edf59 {
722
+ flex: 1;
723
+ background: var(--loader-color);
724
+ animation: m_774c277d 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
725
+ border-radius: 2px;
726
+
727
+ &:nth-of-type(1) {
728
+ animation-delay: -240ms;
729
+ }
730
+
731
+ &:nth-of-type(2) {
732
+ animation-delay: -120ms;
733
+ }
734
+
735
+ &:nth-of-type(3) {
736
+ animation-delay: 0;
737
+ }
738
+ }
739
+
740
+ @keyframes m_24cd2081 {
741
+ 0%,
742
+ 100% {
743
+ transform: scale(1);
744
+ opacity: 1;
745
+ }
746
+
747
+ 50% {
748
+ transform: scale(0.6);
749
+ opacity: 0.5;
750
+ }
751
+ }
752
+
753
+ .m_637ae2f7 {
754
+ display: flex;
755
+ justify-content: center;
756
+ align-items: center;
757
+ gap: calc(var(--loader-size) / 10);
758
+ position: relative;
759
+ width: var(--loader-size);
760
+ height: var(--loader-size);
761
+ }
762
+
763
+ .m_919ee88f {
764
+ width: calc(var(--loader-size) / 3 - var(--loader-size) / 15);
765
+ height: calc(var(--loader-size) / 3 - var(--loader-size) / 15);
766
+ border-radius: 50%;
767
+ background: var(--loader-color);
768
+ animation: m_24cd2081 0.8s infinite linear;
769
+
770
+ &:nth-child(2) {
771
+ animation-delay: 0.4s;
772
+ }
773
+ }
774
+
775
+ @keyframes m_1309882b {
776
+ 0% {
777
+ transform: rotate(0deg);
778
+ }
779
+
780
+ 100% {
781
+ transform: rotate(360deg);
782
+ }
783
+ }
784
+
785
+ .m_c87fd4ff {
786
+ display: inline-block;
787
+ width: var(--loader-size);
788
+ height: var(--loader-size);
789
+
790
+ &::after {
791
+ content: '';
792
+ display: block;
793
+ width: var(--loader-size);
794
+ height: var(--loader-size);
795
+ border-radius: 10000px;
796
+ border-width: calc(var(--loader-size) / 8);
797
+ border-style: solid;
798
+ border-color: var(--loader-color) var(--loader-color) var(--loader-color)
799
+ transparent;
800
+ animation: m_1309882b 1.2s linear infinite;
801
+ }
802
+ }
803
+
804
+ .m_cd6f7c35 {
805
+ container: simple-grid / inline-size;
806
+ }
807
+
808
+ .m_6bed50ae {
809
+ display: grid;
810
+ grid-template-columns: repeat(var(--sg-cols), minmax(0, 1fr));
811
+ grid-auto-rows: var(--sg-auto-rows, auto);
812
+ gap: var(--sg-spacing-y) var(--sg-spacing-x);
813
+ }
814
+
815
+ .m_6bed50ae[data-auto-cols='auto-fill'] {
816
+ grid-template-columns: repeat(auto-fill, minmax(var(--sg-min-col-width), 1fr));
817
+ }
818
+
819
+ .m_6bed50ae[data-auto-cols='auto-fit'] {
820
+ grid-template-columns: repeat(auto-fit, minmax(var(--sg-min-col-width), 1fr));
821
+ }
822
+
823
+ .m_3f669182 {
824
+ -webkit-tap-highlight-color: transparent;
825
+ text-decoration: none;
826
+ font-size: var(--text-fz, var(--c-font-size-md));
827
+ line-height: var(--text-lh, var(--c-line-height-md));
828
+ font-weight: var(--c-font-weight-regular);
829
+ text-wrap: var(--text-text-wrap, var(--c-text-wrap));
718
830
  margin: 0;
719
- font-family: var(--c-font-family);
720
- font-size: var(--c-font-size-md);
721
- line-height: var(--c-line-height);
722
- background-color: var(--c-color-body);
723
- color: var(--c-color-text);
831
+ padding: 0;
724
832
 
725
- -webkit-font-smoothing: var(--c-webkit-font-smoothing);
726
- -moz-osx-font-smoothing: var(--c-moz-font-smoothing);
833
+ &:where([data-truncate]) {
834
+ overflow: hidden;
835
+ text-overflow: ellipsis;
836
+ white-space: nowrap;
837
+ }
727
838
 
728
- @media screen and (max-device-width: em(500px)) {
729
- -webkit-text-size-adjust: 100%;
839
+ &:where([data-truncate='start']) {
840
+ direction: rtl;
841
+ text-align: end;
842
+
843
+ @mixin where-rtl {
844
+ direction: ltr;
845
+ text-align: start;
846
+ }
847
+ }
848
+
849
+ &:where([data-variant='gradient']) {
850
+ background-image: var(--text-gradient);
851
+ -webkit-text-fill-color: transparent;
852
+ -webkit-background-clip: text;
853
+ background-clip: text;
854
+ }
855
+
856
+ &:where([data-line-clamp]) {
857
+ overflow: hidden;
858
+ text-overflow: ellipsis;
859
+ display: -webkit-box;
860
+ -webkit-line-clamp: var(--text-line-clamp);
861
+ -webkit-box-orient: vertical;
862
+ }
863
+
864
+ &:where([data-inherit]) {
865
+ line-height: inherit;
866
+ font-weight: inherit;
867
+ font-size: inherit;
868
+ }
869
+
870
+ &:where([data-inline]) {
871
+ line-height: 1;
730
872
  }
731
873
  }
732
874
 
@@ -993,1284 +1135,4 @@ body,
993
1135
  align-items: center;
994
1136
  justify-content: center;
995
1137
  }
996
-
997
- [data-respect-reduced-motion] {
998
- @media (prefers-reduced-motion: reduce) {
999
- [data-reduce-motion] {
1000
- transition: none;
1001
- animation: none;
1002
- }
1003
- }
1004
- }
1005
-
1006
- .c-light-hidden {
1007
- @mixin light {
1008
- display: none;
1009
- }
1010
- }
1011
-
1012
- .c-dark-hidden {
1013
- @mixin dark {
1014
- display: none;
1015
- }
1016
- }
1017
-
1018
- .c-focus-auto {
1019
- &:focus-visible {
1020
- outline: 2px solid var(--c-primary-color-filled);
1021
- outline-offset: 2px;
1022
- }
1023
- }
1024
-
1025
- .c-focus-always {
1026
- &:focus {
1027
- outline: 2px solid var(--c-primary-color-filled);
1028
- outline-offset: 2px;
1029
- }
1030
- }
1031
-
1032
- .c-focus-never {
1033
- &:focus {
1034
- outline: none;
1035
- }
1036
- }
1037
-
1038
- .c-active {
1039
- &:active {
1040
- transform: translateY(rem(1px));
1041
- }
1042
-
1043
- fieldset:disabled &:active {
1044
- transform: none;
1045
- }
1046
- }
1047
-
1048
- .c-rotate-rtl {
1049
- @mixin where-rtl {
1050
- transform: rotate(180deg);
1051
- }
1052
- }
1053
-
1054
- .m_3f669182 {
1055
- -webkit-tap-highlight-color: transparent;
1056
- text-decoration: none;
1057
- font-size: var(--text-fz, var(--c-font-size-md));
1058
- line-height: var(--text-lh, var(--c-line-height-md));
1059
- font-weight: var(--c-font-weight-regular);
1060
- text-wrap: var(--text-text-wrap, var(--c-text-wrap));
1061
- margin: 0;
1062
- padding: 0;
1063
-
1064
- &:where([data-truncate]) {
1065
- overflow: hidden;
1066
- text-overflow: ellipsis;
1067
- white-space: nowrap;
1068
- }
1069
-
1070
- &:where([data-truncate='start']) {
1071
- direction: rtl;
1072
- text-align: end;
1073
-
1074
- @mixin where-rtl {
1075
- direction: ltr;
1076
- text-align: start;
1077
- }
1078
- }
1079
-
1080
- &:where([data-variant='gradient']) {
1081
- background-image: var(--text-gradient);
1082
- -webkit-text-fill-color: transparent;
1083
- -webkit-background-clip: text;
1084
- background-clip: text;
1085
- }
1086
-
1087
- &:where([data-line-clamp]) {
1088
- overflow: hidden;
1089
- text-overflow: ellipsis;
1090
- display: -webkit-box;
1091
- -webkit-line-clamp: var(--text-line-clamp);
1092
- -webkit-box-orient: vertical;
1093
- }
1094
-
1095
- &:where([data-inherit]) {
1096
- line-height: inherit;
1097
- font-weight: inherit;
1098
- font-size: inherit;
1099
- }
1100
-
1101
- &:where([data-inline]) {
1102
- line-height: 1;
1103
- }
1104
- }
1105
-
1106
- .m_cd6f7c35 {
1107
- container: simple-grid / inline-size;
1108
- }
1109
-
1110
- .m_6bed50ae {
1111
- display: grid;
1112
- grid-template-columns: repeat(var(--sg-cols), minmax(0, 1fr));
1113
- grid-auto-rows: var(--sg-auto-rows, auto);
1114
- gap: var(--sg-spacing-y) var(--sg-spacing-x);
1115
- }
1116
-
1117
- .m_6bed50ae[data-auto-cols='auto-fill'] {
1118
- grid-template-columns: repeat(auto-fill, minmax(var(--sg-min-col-width), 1fr));
1119
- }
1120
-
1121
- .m_6bed50ae[data-auto-cols='auto-fit'] {
1122
- grid-template-columns: repeat(auto-fit, minmax(var(--sg-min-col-width), 1fr));
1123
- }
1124
-
1125
- .m_c031daba {
1126
- container: c-grid / inline-size;
1127
- }
1128
-
1129
- .m_c9913309 {
1130
- --grid-overflow: visible;
1131
- --grid-column-gap: var(--grid-gap);
1132
- --grid-row-gap: var(--grid-gap);
1133
-
1134
- overflow: var(--grid-overflow);
1135
- }
1136
-
1137
- .m_6815e10f {
1138
- display: flex;
1139
- flex-wrap: wrap;
1140
- justify-content: var(--grid-justify);
1141
- align-items: var(--grid-align);
1142
- gap: var(--grid-row-gap) var(--grid-column-gap);
1143
- }
1144
-
1145
- .m_92e36e79 {
1146
- --col-flex-grow: 0;
1147
- --col-offset: 0rem;
1148
-
1149
- flex-shrink: 0;
1150
- order: var(--col-order);
1151
- flex-basis: var(--col-flex-basis);
1152
- width: var(--col-width);
1153
- max-width: var(--col-max-width);
1154
- flex-grow: var(--col-flex-grow);
1155
- margin-inline-start: var(--col-offset);
1156
- align-self: var(--col-align-self);
1157
- }
1158
-
1159
- .m_c9afe370 {
1160
- display: flex;
1161
- flex-direction: row;
1162
- flex-wrap: var(--group-wrap, wrap);
1163
- justify-content: var(--group-justify, flex-start);
1164
- align-items: var(--group-align, center);
1165
- gap: var(--group-gap, var(--c-spacing-md));
1166
-
1167
- &:where([data-grow]) {
1168
- & > * {
1169
- flex-grow: 1;
1170
- max-width: var(--group-child-width);
1171
- }
1172
- }
1173
- }
1174
-
1175
- .m_a244865c {
1176
- --loader-size-xs: 18px;
1177
- --loader-size-sm: 22px;
1178
- --loader-size-md: 36px;
1179
- --loader-size-lg: 44px;
1180
- --loader-size-xl: 58px;
1181
- --loader-size: var(--loader-size-md);
1182
- --loader-color: var(--c-primary-color-filled);
1183
- }
1184
-
1185
- .m_a244865c,
1186
- .m_a244865c *,
1187
- .m_a244865c::before,
1188
- .m_a244865c::after {
1189
- box-sizing: border-box;
1190
- }
1191
-
1192
- @keyframes m_774c277d {
1193
- 0% {
1194
- transform: scale(0.6);
1195
- opacity: 0;
1196
- }
1197
-
1198
- 50%,
1199
- 100% {
1200
- transform: scale(1);
1201
- }
1202
- }
1203
-
1204
- .m_8f6794ed {
1205
- position: relative;
1206
- width: var(--loader-size);
1207
- height: var(--loader-size);
1208
- display: flex;
1209
- gap: calc(var(--loader-size) / 5);
1210
- }
1211
-
1212
- .m_919edf59 {
1213
- flex: 1;
1214
- background: var(--loader-color);
1215
- animation: m_774c277d 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
1216
- border-radius: 2px;
1217
-
1218
- &:nth-of-type(1) {
1219
- animation-delay: -240ms;
1220
- }
1221
-
1222
- &:nth-of-type(2) {
1223
- animation-delay: -120ms;
1224
- }
1225
-
1226
- &:nth-of-type(3) {
1227
- animation-delay: 0;
1228
- }
1229
- }
1230
-
1231
- @keyframes m_24cd2081 {
1232
- 0%,
1233
- 100% {
1234
- transform: scale(1);
1235
- opacity: 1;
1236
- }
1237
-
1238
- 50% {
1239
- transform: scale(0.6);
1240
- opacity: 0.5;
1241
- }
1242
- }
1243
-
1244
- .m_637ae2f7 {
1245
- display: flex;
1246
- justify-content: center;
1247
- align-items: center;
1248
- gap: calc(var(--loader-size) / 10);
1249
- position: relative;
1250
- width: var(--loader-size);
1251
- height: var(--loader-size);
1252
- }
1253
-
1254
- .m_919ee88f {
1255
- width: calc(var(--loader-size) / 3 - var(--loader-size) / 15);
1256
- height: calc(var(--loader-size) / 3 - var(--loader-size) / 15);
1257
- border-radius: 50%;
1258
- background: var(--loader-color);
1259
- animation: m_24cd2081 0.8s infinite linear;
1260
-
1261
- &:nth-child(2) {
1262
- animation-delay: 0.4s;
1263
- }
1264
- }
1265
-
1266
- @keyframes m_1309882b {
1267
- 0% {
1268
- transform: rotate(0deg);
1269
- }
1270
-
1271
- 100% {
1272
- transform: rotate(360deg);
1273
- }
1274
- }
1275
-
1276
- .m_c87fd4ff {
1277
- display: inline-block;
1278
- width: var(--loader-size);
1279
- height: var(--loader-size);
1280
-
1281
- &::after {
1282
- content: '';
1283
- display: block;
1284
- width: var(--loader-size);
1285
- height: var(--loader-size);
1286
- border-radius: 10000px;
1287
- border-width: calc(var(--loader-size) / 8);
1288
- border-style: solid;
1289
- border-color: var(--loader-color) var(--loader-color) var(--loader-color)
1290
- transparent;
1291
- animation: m_1309882b 1.2s linear infinite;
1292
- }
1293
- }
1294
-
1295
- /* This file is automatically generated, do not modify it directly. */
1296
- :root,
1297
- :host {
1298
- --c-z-index-app: 100;
1299
- --c-z-index-modal: 200;
1300
- --c-z-index-popover: 300;
1301
- --c-z-index-overlay: 400;
1302
- --c-z-index-max: 9999;
1303
- --c-scale: 1;
1304
- --c-cursor-type: default;
1305
- --c-webkit-font-smoothing: antialiased;
1306
- --c-moz-font-smoothing: grayscale;
1307
- --c-color-white: #fff;
1308
- --c-color-black: #000;
1309
- --c-line-height: 1.55;
1310
- --c-font-family:
1311
- -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif,
1312
- Apple Color Emoji, Segoe UI Emoji;
1313
- --c-font-family-monospace:
1314
- ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
1315
- --c-font-family-headings:
1316
- -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif,
1317
- Apple Color Emoji, Segoe UI Emoji;
1318
- --c-heading-font-weight: 700;
1319
- --c-heading-text-wrap: wrap;
1320
- --c-radius-default: calc(0.5rem * var(--c-scale));
1321
- --c-primary-color-filled: var(--c-color-blue-filled);
1322
- --c-primary-color-filled-hover: var(--c-color-blue-filled-hover);
1323
- --c-primary-color-light: var(--c-color-blue-light);
1324
- --c-primary-color-light-hover: var(--c-color-blue-light-hover);
1325
- --c-primary-color-light-color: var(--c-color-blue-light-color);
1326
- --c-breakpoint-xs: 36em;
1327
- --c-breakpoint-sm: 48em;
1328
- --c-breakpoint-md: 62em;
1329
- --c-breakpoint-lg: 75em;
1330
- --c-breakpoint-xl: 88em;
1331
- --c-spacing-xs: calc(0.625rem * var(--c-scale));
1332
- --c-spacing-sm: calc(0.75rem * var(--c-scale));
1333
- --c-spacing-md: calc(1rem * var(--c-scale));
1334
- --c-spacing-lg: calc(1.25rem * var(--c-scale));
1335
- --c-spacing-xl: calc(2rem * var(--c-scale));
1336
- --c-font-size-xs: calc(0.75rem * var(--c-scale));
1337
- --c-font-size-sm: calc(0.875rem * var(--c-scale));
1338
- --c-font-size-md: calc(1rem * var(--c-scale));
1339
- --c-font-size-lg: calc(1.125rem * var(--c-scale));
1340
- --c-font-size-xl: calc(1.25rem * var(--c-scale));
1341
- --c-line-height-xs: 1.4;
1342
- --c-line-height-sm: 1.45;
1343
- --c-line-height-md: 1.55;
1344
- --c-line-height-lg: 1.6;
1345
- --c-line-height-xl: 1.65;
1346
- --c-shadow-xs:
1347
- 0 calc(0.0625rem * var(--c-scale)) calc(0.1875rem * var(--c-scale)) rgba(0, 0, 0, 0.05),
1348
- 0 calc(0.0625rem * var(--c-scale)) calc(0.125rem * var(--c-scale)) rgba(0, 0, 0, 0.1);
1349
- --c-shadow-sm:
1350
- 0 calc(0.0625rem * var(--c-scale)) calc(0.1875rem * var(--c-scale)) rgba(0, 0, 0, 0.05),
1351
- rgba(0, 0, 0, 0.05) 0 calc(0.625rem * var(--c-scale)) calc(0.9375rem * var(--c-scale))
1352
- calc(-0.3125rem * var(--c-scale)),
1353
- rgba(0, 0, 0, 0.04) 0 calc(0.4375rem * var(--c-scale)) calc(0.4375rem * var(--c-scale))
1354
- calc(-0.3125rem * var(--c-scale));
1355
- --c-shadow-md:
1356
- 0 calc(0.0625rem * var(--c-scale)) calc(0.1875rem * var(--c-scale)) rgba(0, 0, 0, 0.05),
1357
- rgba(0, 0, 0, 0.05) 0 calc(1.25rem * var(--c-scale)) calc(1.5625rem * var(--c-scale))
1358
- calc(-0.3125rem * var(--c-scale)),
1359
- rgba(0, 0, 0, 0.04) 0 calc(0.625rem * var(--c-scale)) calc(0.625rem * var(--c-scale))
1360
- calc(-0.3125rem * var(--c-scale));
1361
- --c-shadow-lg:
1362
- 0 calc(0.0625rem * var(--c-scale)) calc(0.1875rem * var(--c-scale)) rgba(0, 0, 0, 0.05),
1363
- rgba(0, 0, 0, 0.05) 0 calc(1.75rem * var(--c-scale)) calc(1.4375rem * var(--c-scale))
1364
- calc(-0.4375rem * var(--c-scale)),
1365
- rgba(0, 0, 0, 0.04) 0 calc(0.75rem * var(--c-scale)) calc(0.75rem * var(--c-scale))
1366
- calc(-0.4375rem * var(--c-scale));
1367
- --c-shadow-xl:
1368
- 0 calc(0.0625rem * var(--c-scale)) calc(0.1875rem * var(--c-scale)) rgba(0, 0, 0, 0.05),
1369
- rgba(0, 0, 0, 0.05) 0 calc(2.25rem * var(--c-scale)) calc(1.75rem * var(--c-scale))
1370
- calc(-0.4375rem * var(--c-scale)),
1371
- rgba(0, 0, 0, 0.04) 0 calc(1.0625rem * var(--c-scale)) calc(1.0625rem * var(--c-scale))
1372
- calc(-0.4375rem * var(--c-scale));
1373
- --c-radius-xs: calc(0.125rem * var(--c-scale));
1374
- --c-radius-sm: calc(0.25rem * var(--c-scale));
1375
- --c-radius-md: calc(0.5rem * var(--c-scale));
1376
- --c-radius-lg: calc(1rem * var(--c-scale));
1377
- --c-radius-xl: calc(2rem * var(--c-scale));
1378
- --c-font-weight-regular: 400;
1379
- --c-font-weight-medium: 600;
1380
- --c-font-weight-bold: 700;
1381
- --c-primary-color-0: var(--c-color-blue-0);
1382
- --c-primary-color-1: var(--c-color-blue-1);
1383
- --c-primary-color-2: var(--c-color-blue-2);
1384
- --c-primary-color-3: var(--c-color-blue-3);
1385
- --c-primary-color-4: var(--c-color-blue-4);
1386
- --c-primary-color-5: var(--c-color-blue-5);
1387
- --c-primary-color-6: var(--c-color-blue-6);
1388
- --c-primary-color-7: var(--c-color-blue-7);
1389
- --c-primary-color-8: var(--c-color-blue-8);
1390
- --c-primary-color-9: var(--c-color-blue-9);
1391
- --c-color-dark-0: #c9c9c9;
1392
- --c-color-dark-1: #b8b8b8;
1393
- --c-color-dark-2: #828282;
1394
- --c-color-dark-3: #696969;
1395
- --c-color-dark-4: #424242;
1396
- --c-color-dark-5: #3b3b3b;
1397
- --c-color-dark-6: #2e2e2e;
1398
- --c-color-dark-7: #242424;
1399
- --c-color-dark-8: #1f1f1f;
1400
- --c-color-dark-9: #141414;
1401
- --c-color-gray-0: #f8f9fa;
1402
- --c-color-gray-1: #f1f3f5;
1403
- --c-color-gray-2: #e9ecef;
1404
- --c-color-gray-3: #dee2e6;
1405
- --c-color-gray-4: #ced4da;
1406
- --c-color-gray-5: #adb5bd;
1407
- --c-color-gray-6: #868e96;
1408
- --c-color-gray-7: #495057;
1409
- --c-color-gray-8: #343a40;
1410
- --c-color-gray-9: #212529;
1411
- --c-color-red-0: #fff5f5;
1412
- --c-color-red-1: #ffe3e3;
1413
- --c-color-red-2: #ffc9c9;
1414
- --c-color-red-3: #ffa8a8;
1415
- --c-color-red-4: #ff8787;
1416
- --c-color-red-5: #ff6b6b;
1417
- --c-color-red-6: #fa5252;
1418
- --c-color-red-7: #f03e3e;
1419
- --c-color-red-8: #e03131;
1420
- --c-color-red-9: #c92a2a;
1421
- --c-color-pink-0: #fff0f6;
1422
- --c-color-pink-1: #ffdeeb;
1423
- --c-color-pink-2: #fcc2d7;
1424
- --c-color-pink-3: #faa2c1;
1425
- --c-color-pink-4: #f783ac;
1426
- --c-color-pink-5: #f06595;
1427
- --c-color-pink-6: #e64980;
1428
- --c-color-pink-7: #d6336c;
1429
- --c-color-pink-8: #c2255c;
1430
- --c-color-pink-9: #a61e4d;
1431
- --c-color-grape-0: #f8f0fc;
1432
- --c-color-grape-1: #f3d9fa;
1433
- --c-color-grape-2: #eebefa;
1434
- --c-color-grape-3: #e599f7;
1435
- --c-color-grape-4: #da77f2;
1436
- --c-color-grape-5: #cc5de8;
1437
- --c-color-grape-6: #be4bdb;
1438
- --c-color-grape-7: #ae3ec9;
1439
- --c-color-grape-8: #9c36b5;
1440
- --c-color-grape-9: #862e9c;
1441
- --c-color-violet-0: #f3f0ff;
1442
- --c-color-violet-1: #e5dbff;
1443
- --c-color-violet-2: #d0bfff;
1444
- --c-color-violet-3: #b197fc;
1445
- --c-color-violet-4: #9775fa;
1446
- --c-color-violet-5: #845ef7;
1447
- --c-color-violet-6: #7950f2;
1448
- --c-color-violet-7: #7048e8;
1449
- --c-color-violet-8: #6741d9;
1450
- --c-color-violet-9: #5f3dc4;
1451
- --c-color-indigo-0: #edf2ff;
1452
- --c-color-indigo-1: #dbe4ff;
1453
- --c-color-indigo-2: #bac8ff;
1454
- --c-color-indigo-3: #91a7ff;
1455
- --c-color-indigo-4: #748ffc;
1456
- --c-color-indigo-5: #5c7cfa;
1457
- --c-color-indigo-6: #4c6ef5;
1458
- --c-color-indigo-7: #4263eb;
1459
- --c-color-indigo-8: #3b5bdb;
1460
- --c-color-indigo-9: #364fc7;
1461
- --c-color-blue-0: #e7f5ff;
1462
- --c-color-blue-1: #d0ebff;
1463
- --c-color-blue-2: #a5d8ff;
1464
- --c-color-blue-3: #74c0fc;
1465
- --c-color-blue-4: #4dabf7;
1466
- --c-color-blue-5: #339af0;
1467
- --c-color-blue-6: #228be6;
1468
- --c-color-blue-7: #1c7ed6;
1469
- --c-color-blue-8: #1971c2;
1470
- --c-color-blue-9: #1864ab;
1471
- --c-color-cyan-0: #e3fafc;
1472
- --c-color-cyan-1: #c5f6fa;
1473
- --c-color-cyan-2: #99e9f2;
1474
- --c-color-cyan-3: #66d9e8;
1475
- --c-color-cyan-4: #3bc9db;
1476
- --c-color-cyan-5: #22b8cf;
1477
- --c-color-cyan-6: #15aabf;
1478
- --c-color-cyan-7: #1098ad;
1479
- --c-color-cyan-8: #0c8599;
1480
- --c-color-cyan-9: #0b7285;
1481
- --c-color-teal-0: #e6fcf5;
1482
- --c-color-teal-1: #c3fae8;
1483
- --c-color-teal-2: #96f2d7;
1484
- --c-color-teal-3: #63e6be;
1485
- --c-color-teal-4: #38d9a9;
1486
- --c-color-teal-5: #20c997;
1487
- --c-color-teal-6: #12b886;
1488
- --c-color-teal-7: #0ca678;
1489
- --c-color-teal-8: #099268;
1490
- --c-color-teal-9: #087f5b;
1491
- --c-color-green-0: #ebfbee;
1492
- --c-color-green-1: #d3f9d8;
1493
- --c-color-green-2: #b2f2bb;
1494
- --c-color-green-3: #8ce99a;
1495
- --c-color-green-4: #69db7c;
1496
- --c-color-green-5: #51cf66;
1497
- --c-color-green-6: #40c057;
1498
- --c-color-green-7: #37b24d;
1499
- --c-color-green-8: #2f9e44;
1500
- --c-color-green-9: #2b8a3e;
1501
- --c-color-lime-0: #f4fce3;
1502
- --c-color-lime-1: #e9fac8;
1503
- --c-color-lime-2: #d8f5a2;
1504
- --c-color-lime-3: #c0eb75;
1505
- --c-color-lime-4: #a9e34b;
1506
- --c-color-lime-5: #94d82d;
1507
- --c-color-lime-6: #82c91e;
1508
- --c-color-lime-7: #74b816;
1509
- --c-color-lime-8: #66a80f;
1510
- --c-color-lime-9: #5c940d;
1511
- --c-color-yellow-0: #fff9db;
1512
- --c-color-yellow-1: #fff3bf;
1513
- --c-color-yellow-2: #ffec99;
1514
- --c-color-yellow-3: #ffe066;
1515
- --c-color-yellow-4: #ffd43b;
1516
- --c-color-yellow-5: #fcc419;
1517
- --c-color-yellow-6: #fab005;
1518
- --c-color-yellow-7: #f59f00;
1519
- --c-color-yellow-8: #f08c00;
1520
- --c-color-yellow-9: #e67700;
1521
- --c-color-orange-0: #fff4e6;
1522
- --c-color-orange-1: #ffe8cc;
1523
- --c-color-orange-2: #ffd8a8;
1524
- --c-color-orange-3: #ffc078;
1525
- --c-color-orange-4: #ffa94d;
1526
- --c-color-orange-5: #ff922b;
1527
- --c-color-orange-6: #fd7e14;
1528
- --c-color-orange-7: #f76707;
1529
- --c-color-orange-8: #e8590c;
1530
- --c-color-orange-9: #d9480f;
1531
- --c-h1-font-size: calc(2.125rem * var(--c-scale));
1532
- --c-h1-line-height: 1.3;
1533
- --c-h1-font-weight: 700;
1534
- --c-h2-font-size: calc(1.625rem * var(--c-scale));
1535
- --c-h2-line-height: 1.35;
1536
- --c-h2-font-weight: 700;
1537
- --c-h3-font-size: calc(1.375rem * var(--c-scale));
1538
- --c-h3-line-height: 1.4;
1539
- --c-h3-font-weight: 700;
1540
- --c-h4-font-size: calc(1.125rem * var(--c-scale));
1541
- --c-h4-line-height: 1.45;
1542
- --c-h4-font-weight: 700;
1543
- --c-h5-font-size: calc(1rem * var(--c-scale));
1544
- --c-h5-line-height: 1.5;
1545
- --c-h5-font-weight: 700;
1546
- --c-h6-font-size: calc(0.875rem * var(--c-scale));
1547
- --c-h6-line-height: 1.5;
1548
- --c-h6-font-weight: 700;
1549
- }
1550
-
1551
- :root[data-c-color-scheme='dark'],
1552
- :host([data-c-color-scheme='dark']) {
1553
- --c-color-scheme: dark;
1554
- --c-primary-color-contrast: var(--c-color-white);
1555
- --c-color-bright: var(--c-color-white);
1556
- --c-color-text: var(--c-color-dark-0);
1557
- --c-color-body: var(--c-color-dark-7);
1558
- --c-color-error: var(--c-color-red-8);
1559
- --c-color-success: var(--c-color-teal-8);
1560
- --c-color-placeholder: var(--c-color-dark-3);
1561
- --c-color-anchor: var(--c-color-blue-4);
1562
- --c-color-default: var(--c-color-dark-6);
1563
- --c-color-default-hover: var(--c-color-dark-5);
1564
- --c-color-default-color: var(--c-color-white);
1565
- --c-color-default-border: var(--c-color-dark-4);
1566
- --c-color-dimmed: var(--c-color-dark-2);
1567
- --c-color-disabled: var(--c-color-dark-6);
1568
- --c-color-disabled-color: var(--c-color-dark-3);
1569
- --c-color-disabled-border: var(--c-color-dark-4);
1570
- --c-color-dark-text: var(--c-color-dark-4);
1571
- --c-color-dark-filled: var(--c-color-dark-8);
1572
- --c-color-dark-filled-hover: var(--c-color-dark-9);
1573
- --c-color-dark-light: rgba(10, 10, 10, 1);
1574
- --c-color-dark-light-hover: rgba(14, 14, 14, 1);
1575
- --c-color-dark-light-color: var(--c-color-dark-0);
1576
- --c-color-dark-outline: var(--c-color-dark-0);
1577
- --c-color-dark-outline-hover: rgba(66, 66, 66, 0.05);
1578
- --c-color-gray-text: var(--c-color-gray-4);
1579
- --c-color-gray-filled: var(--c-color-gray-8);
1580
- --c-color-gray-filled-hover: var(--c-color-gray-9);
1581
- --c-color-gray-light: rgba(17, 19, 21, 1);
1582
- --c-color-gray-light-hover: rgba(23, 26, 29, 1);
1583
- --c-color-gray-light-color: var(--c-color-gray-0);
1584
- --c-color-gray-outline: var(--c-color-gray-0);
1585
- --c-color-gray-outline-hover: rgba(206, 212, 218, 0.05);
1586
- --c-color-red-text: var(--c-color-red-4);
1587
- --c-color-red-filled: var(--c-color-red-8);
1588
- --c-color-red-filled-hover: var(--c-color-red-9);
1589
- --c-color-red-light: rgba(101, 21, 21, 1);
1590
- --c-color-red-light-hover: rgba(141, 29, 29, 1);
1591
- --c-color-red-light-color: var(--c-color-red-0);
1592
- --c-color-red-outline: var(--c-color-red-0);
1593
- --c-color-red-outline-hover: rgba(255, 135, 135, 0.05);
1594
- --c-color-pink-text: var(--c-color-pink-4);
1595
- --c-color-pink-filled: var(--c-color-pink-8);
1596
- --c-color-pink-filled-hover: var(--c-color-pink-9);
1597
- --c-color-pink-light: rgba(83, 15, 39, 1);
1598
- --c-color-pink-light-hover: rgba(116, 21, 54, 1);
1599
- --c-color-pink-light-color: var(--c-color-pink-0);
1600
- --c-color-pink-outline: var(--c-color-pink-0);
1601
- --c-color-pink-outline-hover: rgba(247, 131, 172, 0.05);
1602
- --c-color-grape-text: var(--c-color-grape-4);
1603
- --c-color-grape-filled: var(--c-color-grape-8);
1604
- --c-color-grape-filled-hover: var(--c-color-grape-9);
1605
- --c-color-grape-light: rgba(67, 23, 78, 1);
1606
- --c-color-grape-light-hover: rgba(94, 32, 109, 1);
1607
- --c-color-grape-light-color: var(--c-color-grape-0);
1608
- --c-color-grape-outline: var(--c-color-grape-0);
1609
- --c-color-grape-outline-hover: rgba(218, 119, 242, 0.05);
1610
- --c-color-violet-text: var(--c-color-violet-4);
1611
- --c-color-violet-filled: var(--c-color-violet-8);
1612
- --c-color-violet-filled-hover: var(--c-color-violet-9);
1613
- --c-color-violet-light: rgba(48, 31, 98, 1);
1614
- --c-color-violet-light-hover: rgba(67, 43, 137, 1);
1615
- --c-color-violet-light-color: var(--c-color-violet-0);
1616
- --c-color-violet-outline: var(--c-color-violet-0);
1617
- --c-color-violet-outline-hover: rgba(151, 117, 250, 0.05);
1618
- --c-color-indigo-text: var(--c-color-indigo-4);
1619
- --c-color-indigo-filled: var(--c-color-indigo-8);
1620
- --c-color-indigo-filled-hover: var(--c-color-indigo-9);
1621
- --c-color-indigo-light: rgba(27, 40, 100, 1);
1622
- --c-color-indigo-light-hover: rgba(38, 55, 139, 1);
1623
- --c-color-indigo-light-color: var(--c-color-indigo-0);
1624
- --c-color-indigo-outline: var(--c-color-indigo-0);
1625
- --c-color-indigo-outline-hover: rgba(116, 143, 252, 0.05);
1626
- --c-color-blue-text: var(--c-color-blue-4);
1627
- --c-color-blue-filled: var(--c-color-blue-8);
1628
- --c-color-blue-filled-hover: var(--c-color-blue-9);
1629
- --c-color-blue-light: rgba(12, 50, 86, 1);
1630
- --c-color-blue-light-hover: rgba(17, 70, 120, 1);
1631
- --c-color-blue-light-color: var(--c-color-blue-0);
1632
- --c-color-blue-outline: var(--c-color-blue-0);
1633
- --c-color-blue-outline-hover: rgba(77, 171, 247, 0.05);
1634
- --c-color-cyan-text: var(--c-color-cyan-4);
1635
- --c-color-cyan-filled: var(--c-color-cyan-8);
1636
- --c-color-cyan-filled-hover: var(--c-color-cyan-9);
1637
- --c-color-cyan-light: rgba(6, 57, 67, 1);
1638
- --c-color-cyan-light-hover: rgba(8, 80, 93, 1);
1639
- --c-color-cyan-light-color: var(--c-color-cyan-0);
1640
- --c-color-cyan-outline: var(--c-color-cyan-0);
1641
- --c-color-cyan-outline-hover: rgba(59, 201, 219, 0.05);
1642
- --c-color-teal-text: var(--c-color-teal-4);
1643
- --c-color-teal-filled: var(--c-color-teal-8);
1644
- --c-color-teal-filled-hover: var(--c-color-teal-9);
1645
- --c-color-teal-light: rgba(4, 64, 46, 1);
1646
- --c-color-teal-light-hover: rgba(6, 89, 64, 1);
1647
- --c-color-teal-light-color: var(--c-color-teal-0);
1648
- --c-color-teal-outline: var(--c-color-teal-0);
1649
- --c-color-teal-outline-hover: rgba(56, 217, 169, 0.05);
1650
- --c-color-green-text: var(--c-color-green-4);
1651
- --c-color-green-filled: var(--c-color-green-8);
1652
- --c-color-green-filled-hover: var(--c-color-green-9);
1653
- --c-color-green-light: rgba(22, 69, 31, 1);
1654
- --c-color-green-light-hover: rgba(30, 97, 43, 1);
1655
- --c-color-green-light-color: var(--c-color-green-0);
1656
- --c-color-green-outline: var(--c-color-green-0);
1657
- --c-color-green-outline-hover: rgba(105, 219, 124, 0.05);
1658
- --c-color-lime-text: var(--c-color-lime-4);
1659
- --c-color-lime-filled: var(--c-color-lime-8);
1660
- --c-color-lime-filled-hover: var(--c-color-lime-9);
1661
- --c-color-lime-light: rgba(46, 74, 7, 1);
1662
- --c-color-lime-light-hover: rgba(64, 104, 9, 1);
1663
- --c-color-lime-light-color: var(--c-color-lime-0);
1664
- --c-color-lime-outline: var(--c-color-lime-0);
1665
- --c-color-lime-outline-hover: rgba(169, 227, 75, 0.05);
1666
- --c-color-yellow-text: var(--c-color-yellow-4);
1667
- --c-color-yellow-filled: var(--c-color-yellow-8);
1668
- --c-color-yellow-filled-hover: var(--c-color-yellow-9);
1669
- --c-color-yellow-light: rgba(115, 60, 0, 1);
1670
- --c-color-yellow-light-hover: rgba(161, 83, 0, 1);
1671
- --c-color-yellow-light-color: var(--c-color-yellow-0);
1672
- --c-color-yellow-outline: var(--c-color-yellow-0);
1673
- --c-color-yellow-outline-hover: rgba(255, 212, 59, 0.05);
1674
- --c-color-orange-text: var(--c-color-orange-4);
1675
- --c-color-orange-filled: var(--c-color-orange-8);
1676
- --c-color-orange-filled-hover: var(--c-color-orange-9);
1677
- --c-color-orange-light: rgba(109, 36, 8, 1);
1678
- --c-color-orange-light-hover: rgba(152, 50, 11, 1);
1679
- --c-color-orange-light-color: var(--c-color-orange-0);
1680
- --c-color-orange-outline: var(--c-color-orange-0);
1681
- --c-color-orange-outline-hover: rgba(255, 169, 77, 0.05);
1682
- }
1683
-
1684
- :root[data-c-color-scheme='light'],
1685
- :host([data-c-color-scheme='light']) {
1686
- --c-color-scheme: light;
1687
- --c-primary-color-contrast: var(--c-color-white);
1688
- --c-color-bright: var(--c-color-black);
1689
- --c-color-text: #000;
1690
- --c-color-body: #fff;
1691
- --c-color-error: var(--c-color-red-6);
1692
- --c-color-success: var(--c-color-teal-8);
1693
- --c-color-placeholder: var(--c-color-gray-5);
1694
- --c-color-anchor: var(--c-color-blue-6);
1695
- --c-color-default: var(--c-color-white);
1696
- --c-color-default-hover: var(--c-color-gray-0);
1697
- --c-color-default-color: var(--c-color-black);
1698
- --c-color-default-border: var(--c-color-gray-4);
1699
- --c-color-dimmed: var(--c-color-gray-6);
1700
- --c-color-disabled: var(--c-color-gray-2);
1701
- --c-color-disabled-color: var(--c-color-gray-5);
1702
- --c-color-disabled-border: var(--c-color-gray-3);
1703
- --c-color-dark-text: var(--c-color-dark-filled);
1704
- --c-color-dark-filled: var(--c-color-dark-6);
1705
- --c-color-dark-filled-hover: var(--c-color-dark-7);
1706
- --c-color-dark-light: var(--c-color-dark-1);
1707
- --c-color-dark-light-hover: var(--c-color-dark-2);
1708
- --c-color-dark-light-color: var(--c-color-dark-9);
1709
- --c-color-dark-outline: var(--c-color-dark-6);
1710
- --c-color-dark-outline-hover: rgba(46, 46, 46, 0.05);
1711
- --c-color-gray-text: var(--c-color-gray-filled);
1712
- --c-color-gray-filled: var(--c-color-gray-6);
1713
- --c-color-gray-filled-hover: var(--c-color-gray-7);
1714
- --c-color-gray-light: var(--c-color-gray-1);
1715
- --c-color-gray-light-hover: var(--c-color-gray-2);
1716
- --c-color-gray-light-color: var(--c-color-gray-9);
1717
- --c-color-gray-outline: var(--c-color-gray-6);
1718
- --c-color-gray-outline-hover: rgba(134, 142, 150, 0.05);
1719
- --c-color-red-text: var(--c-color-red-filled);
1720
- --c-color-red-filled: var(--c-color-red-6);
1721
- --c-color-red-filled-hover: var(--c-color-red-7);
1722
- --c-color-red-light: var(--c-color-red-1);
1723
- --c-color-red-light-hover: var(--c-color-red-2);
1724
- --c-color-red-light-color: var(--c-color-red-9);
1725
- --c-color-red-outline: var(--c-color-red-6);
1726
- --c-color-red-outline-hover: rgba(250, 82, 82, 0.05);
1727
- --c-color-pink-text: var(--c-color-pink-filled);
1728
- --c-color-pink-filled: var(--c-color-pink-6);
1729
- --c-color-pink-filled-hover: var(--c-color-pink-7);
1730
- --c-color-pink-light: var(--c-color-pink-1);
1731
- --c-color-pink-light-hover: var(--c-color-pink-2);
1732
- --c-color-pink-light-color: var(--c-color-pink-9);
1733
- --c-color-pink-outline: var(--c-color-pink-6);
1734
- --c-color-pink-outline-hover: rgba(230, 73, 128, 0.05);
1735
- --c-color-grape-text: var(--c-color-grape-filled);
1736
- --c-color-grape-filled: var(--c-color-grape-6);
1737
- --c-color-grape-filled-hover: var(--c-color-grape-7);
1738
- --c-color-grape-light: var(--c-color-grape-1);
1739
- --c-color-grape-light-hover: var(--c-color-grape-2);
1740
- --c-color-grape-light-color: var(--c-color-grape-9);
1741
- --c-color-grape-outline: var(--c-color-grape-6);
1742
- --c-color-grape-outline-hover: rgba(190, 75, 219, 0.05);
1743
- --c-color-violet-text: var(--c-color-violet-filled);
1744
- --c-color-violet-filled: var(--c-color-violet-6);
1745
- --c-color-violet-filled-hover: var(--c-color-violet-7);
1746
- --c-color-violet-light: var(--c-color-violet-1);
1747
- --c-color-violet-light-hover: var(--c-color-violet-2);
1748
- --c-color-violet-light-color: var(--c-color-violet-9);
1749
- --c-color-violet-outline: var(--c-color-violet-6);
1750
- --c-color-violet-outline-hover: rgba(121, 80, 242, 0.05);
1751
- --c-color-indigo-text: var(--c-color-indigo-filled);
1752
- --c-color-indigo-filled: var(--c-color-indigo-6);
1753
- --c-color-indigo-filled-hover: var(--c-color-indigo-7);
1754
- --c-color-indigo-light: var(--c-color-indigo-1);
1755
- --c-color-indigo-light-hover: var(--c-color-indigo-2);
1756
- --c-color-indigo-light-color: var(--c-color-indigo-9);
1757
- --c-color-indigo-outline: var(--c-color-indigo-6);
1758
- --c-color-indigo-outline-hover: rgba(76, 110, 245, 0.05);
1759
- --c-color-blue-text: var(--c-color-blue-filled);
1760
- --c-color-blue-filled: var(--c-color-blue-6);
1761
- --c-color-blue-filled-hover: var(--c-color-blue-7);
1762
- --c-color-blue-light: var(--c-color-blue-1);
1763
- --c-color-blue-light-hover: var(--c-color-blue-2);
1764
- --c-color-blue-light-color: var(--c-color-blue-9);
1765
- --c-color-blue-outline: var(--c-color-blue-6);
1766
- --c-color-blue-outline-hover: rgba(34, 139, 230, 0.05);
1767
- --c-color-cyan-text: var(--c-color-cyan-filled);
1768
- --c-color-cyan-filled: var(--c-color-cyan-6);
1769
- --c-color-cyan-filled-hover: var(--c-color-cyan-7);
1770
- --c-color-cyan-light: var(--c-color-cyan-1);
1771
- --c-color-cyan-light-hover: var(--c-color-cyan-2);
1772
- --c-color-cyan-light-color: var(--c-color-cyan-9);
1773
- --c-color-cyan-outline: var(--c-color-cyan-6);
1774
- --c-color-cyan-outline-hover: rgba(21, 170, 191, 0.05);
1775
- --c-color-teal-text: var(--c-color-teal-filled);
1776
- --c-color-teal-filled: var(--c-color-teal-6);
1777
- --c-color-teal-filled-hover: var(--c-color-teal-7);
1778
- --c-color-teal-light: var(--c-color-teal-1);
1779
- --c-color-teal-light-hover: var(--c-color-teal-2);
1780
- --c-color-teal-light-color: var(--c-color-teal-9);
1781
- --c-color-teal-outline: var(--c-color-teal-6);
1782
- --c-color-teal-outline-hover: rgba(18, 184, 134, 0.05);
1783
- --c-color-green-text: var(--c-color-green-filled);
1784
- --c-color-green-filled: var(--c-color-green-6);
1785
- --c-color-green-filled-hover: var(--c-color-green-7);
1786
- --c-color-green-light: var(--c-color-green-1);
1787
- --c-color-green-light-hover: var(--c-color-green-2);
1788
- --c-color-green-light-color: var(--c-color-green-9);
1789
- --c-color-green-outline: var(--c-color-green-6);
1790
- --c-color-green-outline-hover: rgba(64, 192, 87, 0.05);
1791
- --c-color-lime-text: var(--c-color-lime-filled);
1792
- --c-color-lime-filled: var(--c-color-lime-6);
1793
- --c-color-lime-filled-hover: var(--c-color-lime-7);
1794
- --c-color-lime-light: var(--c-color-lime-1);
1795
- --c-color-lime-light-hover: var(--c-color-lime-2);
1796
- --c-color-lime-light-color: var(--c-color-lime-9);
1797
- --c-color-lime-outline: var(--c-color-lime-6);
1798
- --c-color-lime-outline-hover: rgba(130, 201, 30, 0.05);
1799
- --c-color-yellow-text: var(--c-color-yellow-filled);
1800
- --c-color-yellow-filled: var(--c-color-yellow-6);
1801
- --c-color-yellow-filled-hover: var(--c-color-yellow-7);
1802
- --c-color-yellow-light: var(--c-color-yellow-1);
1803
- --c-color-yellow-light-hover: var(--c-color-yellow-2);
1804
- --c-color-yellow-light-color: var(--c-color-yellow-9);
1805
- --c-color-yellow-outline: var(--c-color-yellow-6);
1806
- --c-color-yellow-outline-hover: rgba(250, 176, 5, 0.05);
1807
- --c-color-orange-text: var(--c-color-orange-filled);
1808
- --c-color-orange-filled: var(--c-color-orange-6);
1809
- --c-color-orange-filled-hover: var(--c-color-orange-7);
1810
- --c-color-orange-light: var(--c-color-orange-1);
1811
- --c-color-orange-light-hover: var(--c-color-orange-2);
1812
- --c-color-orange-light-color: var(--c-color-orange-9);
1813
- --c-color-orange-outline: var(--c-color-orange-6);
1814
- --c-color-orange-outline-hover: rgba(253, 126, 20, 0.05);
1815
- }
1816
-
1817
- .m_14602a9d {
1818
- --button-height-xs: 30px;
1819
- --button-height-sm: 36px;
1820
- --button-height-md: 42px;
1821
- --button-height-lg: 50px;
1822
- --button-height-xl: 60px;
1823
-
1824
- --button-height-compact-xs: 22px;
1825
- --button-height-compact-sm: 26px;
1826
- --button-height-compact-md: 30px;
1827
- --button-height-compact-lg: 34px;
1828
- --button-height-compact-xl: 40px;
1829
-
1830
- --button-padding-x-xs: 14px;
1831
- --button-padding-x-sm: 18px;
1832
- --button-padding-x-md: 22px;
1833
- --button-padding-x-lg: 26px;
1834
- --button-padding-x-xl: 32px;
1835
-
1836
- --button-padding-x-compact-xs: 7px;
1837
- --button-padding-x-compact-sm: 8px;
1838
- --button-padding-x-compact-md: 10px;
1839
- --button-padding-x-compact-lg: 12px;
1840
- --button-padding-x-compact-xl: 14px;
1841
-
1842
- --button-height: var(--button-height-sm);
1843
- --button-padding-x: var(--button-padding-x-sm);
1844
- --button-color: var(--c-color-white);
1845
-
1846
- user-select: none;
1847
- font-weight: var(--c-font-weight-medium);
1848
- position: relative;
1849
- line-height: 1;
1850
- text-align: center;
1851
- overflow: hidden;
1852
-
1853
- width: auto;
1854
- cursor: pointer;
1855
- display: inline-block;
1856
- border-radius: var(--button-radius, var(--c-radius-default));
1857
- font-size: var(--button-fz, var(--c-font-size-sm));
1858
- background: var(--button-bg, var(--c-color-default));
1859
- border: var(--button-bd, rem(1px) solid var(--c-color-default-border));
1860
- color: var(--button-color, var(--c-color-default-color));
1861
- height: var(--button-height, var(--button-height-sm));
1862
- padding-inline: var(--button-padding-x, var(--button-padding-x-sm));
1863
- vertical-align: middle;
1864
-
1865
- &:where([data-block]) {
1866
- display: block;
1867
- width: 100%;
1868
- }
1869
-
1870
- &:where([data-with-left-section]) {
1871
- padding-inline-start: calc(var(--button-padding-x) / 1.5);
1872
- }
1873
-
1874
- &:where([data-with-right-section]) {
1875
- padding-inline-end: calc(var(--button-padding-x) / 1.5);
1876
- }
1877
-
1878
- &:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {
1879
- cursor: not-allowed;
1880
- border-color: transparent;
1881
- transform: none;
1882
- color: var(--c-color-disabled-color);
1883
- background: var(--c-color-disabled);
1884
- }
1885
-
1886
- &::before {
1887
- content: '';
1888
- pointer-events: none;
1889
- position: absolute;
1890
- inset: -1px;
1891
- border-radius: var(--button-radius, var(--c-radius-default));
1892
- transform: translateY(-100%);
1893
- opacity: 0;
1894
- filter: blur(12px);
1895
- transition:
1896
- transform 150ms ease,
1897
- opacity 100ms ease;
1898
-
1899
- @mixin where-light {
1900
- background-color: rgba(255, 255, 255, 0.15);
1901
- }
1902
-
1903
- @mixin where-dark {
1904
- background-color: rgba(0, 0, 0, 0.15);
1905
- }
1906
- }
1907
-
1908
- &:where([data-loading]) {
1909
- cursor: not-allowed;
1910
- transform: none;
1911
-
1912
- &::before {
1913
- transform: translateY(0);
1914
- opacity: 1;
1915
- }
1916
-
1917
- & .m_7725dbfb {
1918
- opacity: 0;
1919
- transform: translateY(100%);
1920
- }
1921
- }
1922
-
1923
- @mixin hover {
1924
- &:where(:not([data-loading], :disabled, [data-disabled])) {
1925
- background-color: var(--button-hover, var(--c-color-default-hover));
1926
- color: var(--button-hover-color, var(--button-color));
1927
- }
1928
- }
1929
- }
1930
-
1931
- .m_7725dbfb {
1932
- display: flex;
1933
- align-items: center;
1934
- justify-content: var(--button-justify, center);
1935
- height: 100%;
1936
- overflow: visible;
1937
- transition:
1938
- transform 150ms ease,
1939
- opacity 100ms ease;
1940
- }
1941
-
1942
- .m_774a0c99 {
1943
- white-space: nowrap;
1944
- height: 100%;
1945
- overflow: hidden;
1946
- display: flex;
1947
- align-items: center;
1948
- opacity: 1;
1949
- text-box-trim: trim-both;
1950
- text-box-edge: cap alphabetic;
1951
-
1952
- &:where([data-loading]) {
1953
- opacity: 0.2;
1954
- }
1955
- }
1956
-
1957
- .m_462d374a {
1958
- display: flex;
1959
- align-items: center;
1960
-
1961
- &:where([data-position='left']) {
1962
- margin-inline-end: var(--c-spacing-xs);
1963
- }
1964
-
1965
- &:where([data-position='right']) {
1966
- margin-inline-start: var(--c-spacing-xs);
1967
- }
1968
- }
1969
-
1970
- .m_72bc570e {
1971
- position: absolute;
1972
- left: 50%;
1973
- top: 50%;
1974
- }
1975
-
1976
- .m_770b8424 {
1977
- --button-border-width: 1px;
1978
- display: flex;
1979
-
1980
- & :where(.m_14602a9d) {
1981
- &:focus {
1982
- position: relative;
1983
- z-index: 1;
1984
- }
1985
- }
1986
-
1987
- &[data-orientation='horizontal'] {
1988
- flex-direction: row;
1989
-
1990
- & .m_14602a9d,
1991
- & .m_260a6221 {
1992
- &:not(:only-child):first-child {
1993
- border-end-end-radius: 0;
1994
- border-start-end-radius: 0;
1995
- border-inline-end-width: calc(var(--button-border-width) / 2);
1996
- }
1997
-
1998
- &:not(:only-child):last-child {
1999
- border-end-start-radius: 0;
2000
- border-start-start-radius: 0;
2001
- border-inline-start-width: calc(var(--button-border-width) / 2);
2002
- }
2003
-
2004
- &:not(:only-child):not(:first-child):not(:last-child) {
2005
- border-radius: 0;
2006
- border-inline-width: calc(var(--button-border-width) / 2);
2007
- }
2008
- }
2009
- }
2010
-
2011
- &[data-orientation='vertical'] {
2012
- flex-direction: column;
2013
-
2014
- & .m_14602a9d,
2015
- & .m_260a6221 {
2016
- &:not(:only-child):first-child {
2017
- border-end-start-radius: 0;
2018
- border-end-end-radius: 0;
2019
- border-bottom-width: calc(var(--button-border-width) / 2);
2020
- }
2021
-
2022
- &:not(:only-child):last-child {
2023
- border-start-start-radius: 0;
2024
- border-start-end-radius: 0;
2025
- border-top-width: calc(var(--button-border-width) / 2);
2026
- }
2027
-
2028
- &:not(:only-child):not(:first-child):not(:last-child) {
2029
- border-radius: 0;
2030
- border-bottom-width: calc(var(--button-border-width) / 2);
2031
- border-top-width: calc(var(--button-border-width) / 2);
2032
- }
2033
- }
2034
- }
2035
- }
2036
-
2037
- .m_260a6221 {
2038
- --section-height-xs: 30px;
2039
- --section-height-sm: 36px;
2040
- --section-height-md: 42px;
2041
- --section-height-lg: 50px;
2042
- --section-height-xl: 60px;
2043
-
2044
- --section-height-compact-xs: 22px;
2045
- --section-height-compact-sm: 26px;
2046
- --section-height-compact-md: 30px;
2047
- --section-height-compact-lg: 34px;
2048
- --section-height-compact-xl: 40px;
2049
-
2050
- --section-padding-x-xs: 14px;
2051
- --section-padding-x-sm: 18px;
2052
- --section-padding-x-md: 22px;
2053
- --section-padding-x-lg: 26px;
2054
- --section-padding-x-xl: 32px;
2055
-
2056
- --section-padding-x-compact-xs: 7px;
2057
- --section-padding-x-compact-sm: 8px;
2058
- --section-padding-x-compact-md: 10px;
2059
- --section-padding-x-compact-lg: 12px;
2060
- --section-padding-x-compact-xl: 14px;
2061
-
2062
- --section-height: var(--section-height-sm);
2063
- --section-padding-x: var(--section-padding-x-sm);
2064
- --section-color: var(--c-color-white);
2065
-
2066
- font-weight: var(--c-font-weight-medium);
2067
- width: auto;
2068
- border-radius: var(--section-radius, var(--c-radius-default));
2069
- font-size: var(--section-fz, var(--c-font-size-sm));
2070
- background: var(--section-bg, var(--c-primary-color-filled));
2071
- border: var(--section-bd, rem(1px) solid transparent);
2072
- height: var(--section-height, var(--section-height-sm));
2073
- padding-inline: var(--section-padding-x, var(--section-padding-x-sm));
2074
- vertical-align: middle;
2075
- line-height: 1;
2076
- display: inline-flex;
2077
- align-items: center;
2078
- justify-content: center;
2079
- }
2080
-
2081
- .m_3f669182 {
2082
- -webkit-tap-highlight-color: transparent;
2083
- text-decoration: none;
2084
- font-size: var(--text-fz, var(--c-font-size-md));
2085
- line-height: var(--text-lh, var(--c-line-height-md));
2086
- font-weight: var(--c-font-weight-regular);
2087
- text-wrap: var(--text-text-wrap, var(--c-text-wrap));
2088
- margin: 0;
2089
- padding: 0;
2090
-
2091
- &:where([data-truncate]) {
2092
- overflow: hidden;
2093
- text-overflow: ellipsis;
2094
- white-space: nowrap;
2095
- }
2096
-
2097
- &:where([data-truncate='start']) {
2098
- direction: rtl;
2099
- text-align: end;
2100
-
2101
- @mixin where-rtl {
2102
- direction: ltr;
2103
- text-align: start;
2104
- }
2105
- }
2106
-
2107
- &:where([data-variant='gradient']) {
2108
- background-image: var(--text-gradient);
2109
- -webkit-text-fill-color: transparent;
2110
- -webkit-background-clip: text;
2111
- background-clip: text;
2112
- }
2113
-
2114
- &:where([data-line-clamp]) {
2115
- overflow: hidden;
2116
- text-overflow: ellipsis;
2117
- display: -webkit-box;
2118
- -webkit-line-clamp: var(--text-line-clamp);
2119
- -webkit-box-orient: vertical;
2120
- }
2121
-
2122
- &:where([data-inherit]) {
2123
- line-height: inherit;
2124
- font-weight: inherit;
2125
- font-size: inherit;
2126
- }
2127
-
2128
- &:where([data-inline]) {
2129
- line-height: 1;
2130
- }
2131
- }
2132
-
2133
- [data-respect-reduced-motion] {
2134
- @media (prefers-reduced-motion: reduce) {
2135
- [data-reduce-motion] {
2136
- transition: none;
2137
- animation: none;
2138
- }
2139
- }
2140
- }
2141
-
2142
- .c-light-hidden {
2143
- @mixin light {
2144
- display: none;
2145
- }
2146
- }
2147
-
2148
- .c-dark-hidden {
2149
- @mixin dark {
2150
- display: none;
2151
- }
2152
- }
2153
-
2154
- .c-focus-auto {
2155
- &:focus-visible {
2156
- outline: 2px solid var(--c-primary-color-filled);
2157
- outline-offset: 2px;
2158
- }
2159
- }
2160
-
2161
- .c-focus-always {
2162
- &:focus {
2163
- outline: 2px solid var(--c-primary-color-filled);
2164
- outline-offset: 2px;
2165
- }
2166
- }
2167
-
2168
- .c-focus-never {
2169
- &:focus {
2170
- outline: none;
2171
- }
2172
- }
2173
-
2174
- .c-active {
2175
- &:active {
2176
- transform: translateY(rem(1px));
2177
- }
2178
-
2179
- fieldset:disabled &:active {
2180
- transform: none;
2181
- }
2182
- }
2183
-
2184
- .c-rotate-rtl {
2185
- @mixin where-rtl {
2186
- transform: rotate(180deg);
2187
- }
2188
- }
2189
-
2190
- .m_cd6f7c35 {
2191
- container: simple-grid / inline-size;
2192
- }
2193
-
2194
- .m_6bed50ae {
2195
- display: grid;
2196
- grid-template-columns: repeat(var(--sg-cols), minmax(0, 1fr));
2197
- grid-auto-rows: var(--sg-auto-rows, auto);
2198
- gap: var(--sg-spacing-y) var(--sg-spacing-x);
2199
- }
2200
-
2201
- .m_6bed50ae[data-auto-cols='auto-fill'] {
2202
- grid-template-columns: repeat(auto-fill, minmax(var(--sg-min-col-width), 1fr));
2203
- }
2204
-
2205
- .m_6bed50ae[data-auto-cols='auto-fit'] {
2206
- grid-template-columns: repeat(auto-fit, minmax(var(--sg-min-col-width), 1fr));
2207
- }
2208
-
2209
- :root,
2210
- :host {
2211
- color-scheme: var(--c-color-scheme);
2212
- }
2213
-
2214
- *,
2215
- *::before,
2216
- *::after {
2217
- box-sizing: border-box;
2218
- }
2219
-
2220
- input,
2221
- button,
2222
- textarea,
2223
- select {
2224
- font: inherit;
2225
- }
2226
-
2227
- button,
2228
- select {
2229
- text-transform: none;
2230
- }
2231
-
2232
- body,
2233
- :host {
2234
- margin: 0;
2235
- font-family: var(--c-font-family);
2236
- font-size: var(--c-font-size-md);
2237
- line-height: var(--c-line-height);
2238
- background-color: var(--c-color-body);
2239
- color: var(--c-color-text);
2240
-
2241
- -webkit-font-smoothing: var(--c-webkit-font-smoothing);
2242
- -moz-osx-font-smoothing: var(--c-moz-font-smoothing);
2243
-
2244
- @media screen and (max-device-width: em(500px)) {
2245
- -webkit-text-size-adjust: 100%;
2246
- }
2247
- }
2248
-
2249
- .m_537a2afc {
2250
- background-color: transparent;
2251
- cursor: pointer;
2252
- border: 0;
2253
- padding: 0;
2254
- appearance: none;
2255
- font-size: var(--c-font-size-md);
2256
- text-align: start;
2257
- text-decoration: none;
2258
- color: inherit;
2259
- touch-action: manipulation;
2260
- -webkit-tap-highlight-color: transparent;
2261
- }
2262
-
2263
- .m_537a2afc {
2264
- background-color: transparent;
2265
- cursor: pointer;
2266
- border: 0;
2267
- padding: 0;
2268
- appearance: none;
2269
- font-size: var(--c-font-size-md);
2270
- text-align: start;
2271
- text-decoration: none;
2272
- color: inherit;
2273
- touch-action: manipulation;
2274
- -webkit-tap-highlight-color: transparent;
2275
- }
2276
1138
  }