@cck-ui/core 0.3.3 → 0.4.0

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,4 +1,20 @@
1
- @layer cck {.m_a244865c {
1
+ @layer cck {.m_c9afe370 {
2
+ display: flex;
3
+ flex-direction: row;
4
+ flex-wrap: var(--group-wrap, wrap);
5
+ justify-content: var(--group-justify, flex-start);
6
+ align-items: var(--group-align, center);
7
+ gap: var(--group-gap, var(--c-spacing-md));
8
+
9
+ &:where([data-grow]) {
10
+ & > * {
11
+ flex-grow: 1;
12
+ max-width: var(--group-child-width);
13
+ }
14
+ }
15
+ }
16
+
17
+ .m_a244865c {
2
18
  --loader-size-xs: 18px;
3
19
  --loader-size-sm: 22px;
4
20
  --loader-size-md: 36px;
@@ -118,38 +134,153 @@
118
134
  }
119
135
  }
120
136
 
121
- .m_c031daba {
122
- container: c-grid / inline-size;
137
+ :root,
138
+ :host {
139
+ color-scheme: var(--c-color-scheme);
123
140
  }
124
141
 
125
- .m_c9913309 {
126
- --grid-overflow: visible;
127
- --grid-column-gap: var(--grid-gap);
128
- --grid-row-gap: var(--grid-gap);
142
+ *,
143
+ *::before,
144
+ *::after {
145
+ box-sizing: border-box;
146
+ }
129
147
 
130
- overflow: var(--grid-overflow);
148
+ input,
149
+ button,
150
+ textarea,
151
+ select {
152
+ font: inherit;
131
153
  }
132
154
 
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);
155
+ button,
156
+ select {
157
+ text-transform: none;
139
158
  }
140
159
 
141
- .m_92e36e79 {
142
- --col-flex-grow: 0;
143
- --col-offset: 0rem;
160
+ body,
161
+ :host {
162
+ margin: 0;
163
+ font-family: var(--c-font-family);
164
+ font-size: var(--c-font-size-md);
165
+ line-height: var(--c-line-height);
166
+ background-color: var(--c-color-body);
167
+ color: var(--c-color-text);
144
168
 
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);
169
+ -webkit-font-smoothing: var(--c-webkit-font-smoothing);
170
+ -moz-osx-font-smoothing: var(--c-moz-font-smoothing);
171
+
172
+ @media screen and (max-device-width: em(500px)) {
173
+ -webkit-text-size-adjust: 100%;
174
+ }
175
+ }
176
+
177
+ [data-respect-reduced-motion] {
178
+ @media (prefers-reduced-motion: reduce) {
179
+ [data-reduce-motion] {
180
+ transition: none;
181
+ animation: none;
182
+ }
183
+ }
184
+ }
185
+
186
+ .c-light-hidden {
187
+ @mixin light {
188
+ display: none;
189
+ }
190
+ }
191
+
192
+ .c-dark-hidden {
193
+ @mixin dark {
194
+ display: none;
195
+ }
196
+ }
197
+
198
+ .c-focus-auto {
199
+ &:focus-visible {
200
+ outline: 2px solid var(--c-primary-color-filled);
201
+ outline-offset: 2px;
202
+ }
203
+ }
204
+
205
+ .c-focus-always {
206
+ &:focus {
207
+ outline: 2px solid var(--c-primary-color-filled);
208
+ outline-offset: 2px;
209
+ }
210
+ }
211
+
212
+ .c-focus-never {
213
+ &:focus {
214
+ outline: none;
215
+ }
216
+ }
217
+
218
+ .c-active {
219
+ &:active {
220
+ transform: translateY(rem(1px));
221
+ }
222
+
223
+ fieldset:disabled &:active {
224
+ transform: none;
225
+ }
226
+ }
227
+
228
+ .c-rotate-rtl {
229
+ @mixin where-rtl {
230
+ transform: rotate(180deg);
231
+ }
232
+ }
233
+
234
+ .m_3f669182 {
235
+ -webkit-tap-highlight-color: transparent;
236
+ text-decoration: none;
237
+ font-size: var(--text-fz, var(--c-font-size-md));
238
+ line-height: var(--text-lh, var(--c-line-height-md));
239
+ font-weight: var(--c-font-weight-regular);
240
+ text-wrap: var(--text-text-wrap, var(--c-text-wrap));
241
+ margin: 0;
242
+ padding: 0;
243
+
244
+ &:where([data-truncate]) {
245
+ overflow: hidden;
246
+ text-overflow: ellipsis;
247
+ white-space: nowrap;
248
+ }
249
+
250
+ &:where([data-truncate='start']) {
251
+ direction: rtl;
252
+ text-align: end;
253
+
254
+ @mixin where-rtl {
255
+ direction: ltr;
256
+ text-align: start;
257
+ }
258
+ }
259
+
260
+ &:where([data-variant='gradient']) {
261
+ background-image: var(--text-gradient);
262
+ -webkit-text-fill-color: transparent;
263
+ -webkit-background-clip: text;
264
+ background-clip: text;
265
+ }
266
+
267
+ &:where([data-line-clamp]) {
268
+ overflow: hidden;
269
+ text-overflow: ellipsis;
270
+ display: -webkit-box;
271
+ -webkit-line-clamp: var(--text-line-clamp);
272
+ -webkit-box-orient: vertical;
273
+ }
274
+
275
+ &:where([data-inherit]) {
276
+ line-height: inherit;
277
+ font-weight: inherit;
278
+ font-size: inherit;
279
+ }
280
+
281
+ &:where([data-inline]) {
282
+ line-height: 1;
283
+ }
153
284
  }
154
285
 
155
286
  /* This file is automatically generated, do not modify it directly. */
@@ -674,60 +805,38 @@
674
805
  --c-color-orange-outline-hover: rgba(253, 126, 20, 0.05);
675
806
  }
676
807
 
677
- .m_c9afe370 {
678
- display: flex;
679
- flex-direction: row;
680
- flex-wrap: var(--group-wrap, wrap);
681
- justify-content: var(--group-justify, flex-start);
682
- align-items: var(--group-align, center);
683
- gap: var(--group-gap, var(--c-spacing-md));
684
-
685
- &:where([data-grow]) {
686
- & > * {
687
- flex-grow: 1;
688
- max-width: var(--group-child-width);
689
- }
690
- }
691
- }
692
-
693
- :root,
694
- :host {
695
- color-scheme: var(--c-color-scheme);
808
+ .m_c031daba {
809
+ container: c-grid / inline-size;
696
810
  }
697
811
 
698
- *,
699
- *::before,
700
- *::after {
701
- box-sizing: border-box;
702
- }
812
+ .m_c9913309 {
813
+ --grid-overflow: visible;
814
+ --grid-column-gap: var(--grid-gap);
815
+ --grid-row-gap: var(--grid-gap);
703
816
 
704
- input,
705
- button,
706
- textarea,
707
- select {
708
- font: inherit;
817
+ overflow: var(--grid-overflow);
709
818
  }
710
819
 
711
- button,
712
- select {
713
- text-transform: none;
820
+ .m_6815e10f {
821
+ display: flex;
822
+ flex-wrap: wrap;
823
+ justify-content: var(--grid-justify);
824
+ align-items: var(--grid-align);
825
+ gap: var(--grid-row-gap) var(--grid-column-gap);
714
826
  }
715
827
 
716
- body,
717
- :host {
718
- 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);
724
-
725
- -webkit-font-smoothing: var(--c-webkit-font-smoothing);
726
- -moz-osx-font-smoothing: var(--c-moz-font-smoothing);
828
+ .m_92e36e79 {
829
+ --col-flex-grow: 0;
830
+ --col-offset: 0rem;
727
831
 
728
- @media screen and (max-device-width: em(500px)) {
729
- -webkit-text-size-adjust: 100%;
730
- }
832
+ flex-shrink: 0;
833
+ order: var(--col-order);
834
+ flex-basis: var(--col-flex-basis);
835
+ width: var(--col-width);
836
+ max-width: var(--col-max-width);
837
+ flex-grow: var(--col-flex-grow);
838
+ margin-inline-start: var(--col-offset);
839
+ align-self: var(--col-align-self);
731
840
  }
732
841
 
733
842
  .m_14602a9d {
@@ -994,61 +1103,23 @@ body,
994
1103
  justify-content: center;
995
1104
  }
996
1105
 
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
- }
1106
+ .m_cd6f7c35 {
1107
+ container: simple-grid / inline-size;
1030
1108
  }
1031
1109
 
1032
- .c-focus-never {
1033
- &:focus {
1034
- outline: none;
1035
- }
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);
1036
1115
  }
1037
1116
 
1038
- .c-active {
1039
- &:active {
1040
- transform: translateY(rem(1px));
1041
- }
1042
-
1043
- fieldset:disabled &:active {
1044
- transform: none;
1045
- }
1117
+ .m_6bed50ae[data-auto-cols='auto-fill'] {
1118
+ grid-template-columns: repeat(auto-fill, minmax(var(--sg-min-col-width), 1fr));
1046
1119
  }
1047
1120
 
1048
- .c-rotate-rtl {
1049
- @mixin where-rtl {
1050
- transform: rotate(180deg);
1051
- }
1121
+ .m_6bed50ae[data-auto-cols='auto-fit'] {
1122
+ grid-template-columns: repeat(auto-fit, minmax(var(--sg-min-col-width), 1fr));
1052
1123
  }
1053
1124
 
1054
1125
  .m_3f669182 {
@@ -1103,195 +1174,6 @@ body,
1103
1174
  }
1104
1175
  }
1105
1176
 
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
1177
  /* This file is automatically generated, do not modify it directly. */
1296
1178
  :root,
1297
1179
  :host {
@@ -1814,17 +1696,284 @@ body,
1814
1696
  --c-color-orange-outline-hover: rgba(253, 126, 20, 0.05);
1815
1697
  }
1816
1698
 
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;
1699
+ :root,
1700
+ :host {
1701
+ color-scheme: var(--c-color-scheme);
1702
+ }
1823
1703
 
1824
- --button-height-compact-xs: 22px;
1825
- --button-height-compact-sm: 26px;
1826
- --button-height-compact-md: 30px;
1827
- --button-height-compact-lg: 34px;
1704
+ *,
1705
+ *::before,
1706
+ *::after {
1707
+ box-sizing: border-box;
1708
+ }
1709
+
1710
+ input,
1711
+ button,
1712
+ textarea,
1713
+ select {
1714
+ font: inherit;
1715
+ }
1716
+
1717
+ button,
1718
+ select {
1719
+ text-transform: none;
1720
+ }
1721
+
1722
+ body,
1723
+ :host {
1724
+ margin: 0;
1725
+ font-family: var(--c-font-family);
1726
+ font-size: var(--c-font-size-md);
1727
+ line-height: var(--c-line-height);
1728
+ background-color: var(--c-color-body);
1729
+ color: var(--c-color-text);
1730
+
1731
+ -webkit-font-smoothing: var(--c-webkit-font-smoothing);
1732
+ -moz-osx-font-smoothing: var(--c-moz-font-smoothing);
1733
+
1734
+ @media screen and (max-device-width: em(500px)) {
1735
+ -webkit-text-size-adjust: 100%;
1736
+ }
1737
+ }
1738
+
1739
+ .m_a244865c {
1740
+ --loader-size-xs: 18px;
1741
+ --loader-size-sm: 22px;
1742
+ --loader-size-md: 36px;
1743
+ --loader-size-lg: 44px;
1744
+ --loader-size-xl: 58px;
1745
+ --loader-size: var(--loader-size-md);
1746
+ --loader-color: var(--c-primary-color-filled);
1747
+ }
1748
+
1749
+ .m_a244865c,
1750
+ .m_a244865c *,
1751
+ .m_a244865c::before,
1752
+ .m_a244865c::after {
1753
+ box-sizing: border-box;
1754
+ }
1755
+
1756
+ @keyframes m_774c277d {
1757
+ 0% {
1758
+ transform: scale(0.6);
1759
+ opacity: 0;
1760
+ }
1761
+
1762
+ 50%,
1763
+ 100% {
1764
+ transform: scale(1);
1765
+ }
1766
+ }
1767
+
1768
+ .m_8f6794ed {
1769
+ position: relative;
1770
+ width: var(--loader-size);
1771
+ height: var(--loader-size);
1772
+ display: flex;
1773
+ gap: calc(var(--loader-size) / 5);
1774
+ }
1775
+
1776
+ .m_919edf59 {
1777
+ flex: 1;
1778
+ background: var(--loader-color);
1779
+ animation: m_774c277d 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
1780
+ border-radius: 2px;
1781
+
1782
+ &:nth-of-type(1) {
1783
+ animation-delay: -240ms;
1784
+ }
1785
+
1786
+ &:nth-of-type(2) {
1787
+ animation-delay: -120ms;
1788
+ }
1789
+
1790
+ &:nth-of-type(3) {
1791
+ animation-delay: 0;
1792
+ }
1793
+ }
1794
+
1795
+ @keyframes m_24cd2081 {
1796
+ 0%,
1797
+ 100% {
1798
+ transform: scale(1);
1799
+ opacity: 1;
1800
+ }
1801
+
1802
+ 50% {
1803
+ transform: scale(0.6);
1804
+ opacity: 0.5;
1805
+ }
1806
+ }
1807
+
1808
+ .m_637ae2f7 {
1809
+ display: flex;
1810
+ justify-content: center;
1811
+ align-items: center;
1812
+ gap: calc(var(--loader-size) / 10);
1813
+ position: relative;
1814
+ width: var(--loader-size);
1815
+ height: var(--loader-size);
1816
+ }
1817
+
1818
+ .m_919ee88f {
1819
+ width: calc(var(--loader-size) / 3 - var(--loader-size) / 15);
1820
+ height: calc(var(--loader-size) / 3 - var(--loader-size) / 15);
1821
+ border-radius: 50%;
1822
+ background: var(--loader-color);
1823
+ animation: m_24cd2081 0.8s infinite linear;
1824
+
1825
+ &:nth-child(2) {
1826
+ animation-delay: 0.4s;
1827
+ }
1828
+ }
1829
+
1830
+ @keyframes m_1309882b {
1831
+ 0% {
1832
+ transform: rotate(0deg);
1833
+ }
1834
+
1835
+ 100% {
1836
+ transform: rotate(360deg);
1837
+ }
1838
+ }
1839
+
1840
+ .m_c87fd4ff {
1841
+ display: inline-block;
1842
+ width: var(--loader-size);
1843
+ height: var(--loader-size);
1844
+
1845
+ &::after {
1846
+ content: '';
1847
+ display: block;
1848
+ width: var(--loader-size);
1849
+ height: var(--loader-size);
1850
+ border-radius: 10000px;
1851
+ border-width: calc(var(--loader-size) / 8);
1852
+ border-style: solid;
1853
+ border-color: var(--loader-color) var(--loader-color) var(--loader-color)
1854
+ transparent;
1855
+ animation: m_1309882b 1.2s linear infinite;
1856
+ }
1857
+ }
1858
+
1859
+ [data-respect-reduced-motion] {
1860
+ @media (prefers-reduced-motion: reduce) {
1861
+ [data-reduce-motion] {
1862
+ transition: none;
1863
+ animation: none;
1864
+ }
1865
+ }
1866
+ }
1867
+
1868
+ .c-light-hidden {
1869
+ @mixin light {
1870
+ display: none;
1871
+ }
1872
+ }
1873
+
1874
+ .c-dark-hidden {
1875
+ @mixin dark {
1876
+ display: none;
1877
+ }
1878
+ }
1879
+
1880
+ .c-focus-auto {
1881
+ &:focus-visible {
1882
+ outline: 2px solid var(--c-primary-color-filled);
1883
+ outline-offset: 2px;
1884
+ }
1885
+ }
1886
+
1887
+ .c-focus-always {
1888
+ &:focus {
1889
+ outline: 2px solid var(--c-primary-color-filled);
1890
+ outline-offset: 2px;
1891
+ }
1892
+ }
1893
+
1894
+ .c-focus-never {
1895
+ &:focus {
1896
+ outline: none;
1897
+ }
1898
+ }
1899
+
1900
+ .c-active {
1901
+ &:active {
1902
+ transform: translateY(rem(1px));
1903
+ }
1904
+
1905
+ fieldset:disabled &:active {
1906
+ transform: none;
1907
+ }
1908
+ }
1909
+
1910
+ .c-rotate-rtl {
1911
+ @mixin where-rtl {
1912
+ transform: rotate(180deg);
1913
+ }
1914
+ }
1915
+
1916
+ .m_c031daba {
1917
+ container: c-grid / inline-size;
1918
+ }
1919
+
1920
+ .m_c9913309 {
1921
+ --grid-overflow: visible;
1922
+ --grid-column-gap: var(--grid-gap);
1923
+ --grid-row-gap: var(--grid-gap);
1924
+
1925
+ overflow: var(--grid-overflow);
1926
+ }
1927
+
1928
+ .m_6815e10f {
1929
+ display: flex;
1930
+ flex-wrap: wrap;
1931
+ justify-content: var(--grid-justify);
1932
+ align-items: var(--grid-align);
1933
+ gap: var(--grid-row-gap) var(--grid-column-gap);
1934
+ }
1935
+
1936
+ .m_92e36e79 {
1937
+ --col-flex-grow: 0;
1938
+ --col-offset: 0rem;
1939
+
1940
+ flex-shrink: 0;
1941
+ order: var(--col-order);
1942
+ flex-basis: var(--col-flex-basis);
1943
+ width: var(--col-width);
1944
+ max-width: var(--col-max-width);
1945
+ flex-grow: var(--col-flex-grow);
1946
+ margin-inline-start: var(--col-offset);
1947
+ align-self: var(--col-align-self);
1948
+ }
1949
+
1950
+ .m_c9afe370 {
1951
+ display: flex;
1952
+ flex-direction: row;
1953
+ flex-wrap: var(--group-wrap, wrap);
1954
+ justify-content: var(--group-justify, flex-start);
1955
+ align-items: var(--group-align, center);
1956
+ gap: var(--group-gap, var(--c-spacing-md));
1957
+
1958
+ &:where([data-grow]) {
1959
+ & > * {
1960
+ flex-grow: 1;
1961
+ max-width: var(--group-child-width);
1962
+ }
1963
+ }
1964
+ }
1965
+
1966
+ .m_14602a9d {
1967
+ --button-height-xs: 30px;
1968
+ --button-height-sm: 36px;
1969
+ --button-height-md: 42px;
1970
+ --button-height-lg: 50px;
1971
+ --button-height-xl: 60px;
1972
+
1973
+ --button-height-compact-xs: 22px;
1974
+ --button-height-compact-sm: 26px;
1975
+ --button-height-compact-md: 30px;
1976
+ --button-height-compact-lg: 34px;
1828
1977
  --button-height-compact-xl: 40px;
1829
1978
 
1830
1979
  --button-padding-x-xs: 14px;
@@ -2078,115 +2227,6 @@ body,
2078
2227
  justify-content: center;
2079
2228
  }
2080
2229
 
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
2230
  .m_cd6f7c35 {
2191
2231
  container: simple-grid / inline-size;
2192
2232
  }
@@ -2206,46 +2246,6 @@ body,
2206
2246
  grid-template-columns: repeat(auto-fit, minmax(var(--sg-min-col-width), 1fr));
2207
2247
  }
2208
2248
 
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
2249
  .m_537a2afc {
2250
2250
  background-color: transparent;
2251
2251
  cursor: pointer;