@cck-ui/core 0.4.7 → 0.4.9

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 (16) hide show
  1. package/package.json +1 -1
  2. package/styles/baseline.css +7 -3
  3. package/styles/baseline.layer.css +7 -3
  4. package/styles/button.css +91 -92
  5. package/styles/button.layer.css +91 -92
  6. package/styles/global.css +13 -29
  7. package/styles/global.layer.css +13 -29
  8. package/styles/group.css +2 -4
  9. package/styles/group.layer.css +2 -4
  10. package/styles/loader.css +15 -15
  11. package/styles/loader.layer.css +15 -15
  12. package/styles/text.css +10 -10
  13. package/styles/text.layer.css +10 -10
  14. package/styles.css +138 -153
  15. package/styles.layer.css +138 -153
  16. package/cjs/index.css +0 -1137
package/cjs/index.css DELETED
@@ -1,1137 +0,0 @@
1
- :root,
2
- :host {
3
- color-scheme: var(--c-color-scheme);
4
- }
5
-
6
- *,
7
- *::before,
8
- *::after {
9
- box-sizing: border-box;
10
- }
11
-
12
- input,
13
- button,
14
- textarea,
15
- select {
16
- font: inherit;
17
- }
18
-
19
- button,
20
- select {
21
- text-transform: none;
22
- }
23
-
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);
32
-
33
- -webkit-font-smoothing: var(--c-webkit-font-smoothing);
34
- -moz-osx-font-smoothing: var(--c-moz-font-smoothing);
35
-
36
- @media screen and (max-device-width: em(500px)) {
37
- -webkit-text-size-adjust: 100%;
38
- }
39
- }
40
-
41
- [data-respect-reduced-motion] {
42
- @media (prefers-reduced-motion: reduce) {
43
- [data-reduce-motion] {
44
- transition: none;
45
- animation: none;
46
- }
47
- }
48
- }
49
-
50
- .c-light-hidden {
51
- @mixin light {
52
- display: none;
53
- }
54
- }
55
-
56
- .c-dark-hidden {
57
- @mixin dark {
58
- display: none;
59
- }
60
- }
61
-
62
- .c-focus-auto {
63
- &:focus-visible {
64
- outline: 2px solid var(--c-primary-color-filled);
65
- outline-offset: 2px;
66
- }
67
- }
68
-
69
- .c-focus-always {
70
- &:focus {
71
- outline: 2px solid var(--c-primary-color-filled);
72
- outline-offset: 2px;
73
- }
74
- }
75
-
76
- .c-focus-never {
77
- &:focus {
78
- outline: none;
79
- }
80
- }
81
-
82
- .c-active {
83
- &:active {
84
- transform: translateY(rem(1px));
85
- }
86
-
87
- fieldset:disabled &:active {
88
- transform: none;
89
- }
90
- }
91
-
92
- .c-rotate-rtl {
93
- @mixin where-rtl {
94
- transform: rotate(180deg);
95
- }
96
- }
97
-
98
- /* This file is automatically generated, do not modify it directly. */
99
- :root,
100
- :host {
101
- --c-z-index-app: 100;
102
- --c-z-index-modal: 200;
103
- --c-z-index-popover: 300;
104
- --c-z-index-overlay: 400;
105
- --c-z-index-max: 9999;
106
- --c-scale: 1;
107
- --c-cursor-type: default;
108
- --c-webkit-font-smoothing: antialiased;
109
- --c-moz-font-smoothing: grayscale;
110
- --c-color-white: #fff;
111
- --c-color-black: #000;
112
- --c-line-height: 1.55;
113
- --c-font-family:
114
- -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif,
115
- Apple Color Emoji, Segoe UI Emoji;
116
- --c-font-family-monospace:
117
- ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
118
- --c-font-family-headings:
119
- -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif,
120
- Apple Color Emoji, Segoe UI Emoji;
121
- --c-heading-font-weight: 700;
122
- --c-heading-text-wrap: wrap;
123
- --c-radius-default: calc(0.5rem * var(--c-scale));
124
- --c-primary-color-filled: var(--c-color-blue-filled);
125
- --c-primary-color-filled-hover: var(--c-color-blue-filled-hover);
126
- --c-primary-color-light: var(--c-color-blue-light);
127
- --c-primary-color-light-hover: var(--c-color-blue-light-hover);
128
- --c-primary-color-light-color: var(--c-color-blue-light-color);
129
- --c-breakpoint-xs: 36em;
130
- --c-breakpoint-sm: 48em;
131
- --c-breakpoint-md: 62em;
132
- --c-breakpoint-lg: 75em;
133
- --c-breakpoint-xl: 88em;
134
- --c-spacing-xs: calc(0.625rem * var(--c-scale));
135
- --c-spacing-sm: calc(0.75rem * var(--c-scale));
136
- --c-spacing-md: calc(1rem * var(--c-scale));
137
- --c-spacing-lg: calc(1.25rem * var(--c-scale));
138
- --c-spacing-xl: calc(2rem * var(--c-scale));
139
- --c-font-size-xs: calc(0.75rem * var(--c-scale));
140
- --c-font-size-sm: calc(0.875rem * var(--c-scale));
141
- --c-font-size-md: calc(1rem * var(--c-scale));
142
- --c-font-size-lg: calc(1.125rem * var(--c-scale));
143
- --c-font-size-xl: calc(1.25rem * var(--c-scale));
144
- --c-line-height-xs: 1.4;
145
- --c-line-height-sm: 1.45;
146
- --c-line-height-md: 1.55;
147
- --c-line-height-lg: 1.6;
148
- --c-line-height-xl: 1.65;
149
- --c-shadow-xs:
150
- 0 calc(0.0625rem * var(--c-scale)) calc(0.1875rem * var(--c-scale)) rgba(0, 0, 0, 0.05),
151
- 0 calc(0.0625rem * var(--c-scale)) calc(0.125rem * var(--c-scale)) rgba(0, 0, 0, 0.1);
152
- --c-shadow-sm:
153
- 0 calc(0.0625rem * var(--c-scale)) calc(0.1875rem * var(--c-scale)) rgba(0, 0, 0, 0.05),
154
- rgba(0, 0, 0, 0.05) 0 calc(0.625rem * var(--c-scale)) calc(0.9375rem * var(--c-scale))
155
- calc(-0.3125rem * var(--c-scale)),
156
- rgba(0, 0, 0, 0.04) 0 calc(0.4375rem * var(--c-scale)) calc(0.4375rem * var(--c-scale))
157
- calc(-0.3125rem * var(--c-scale));
158
- --c-shadow-md:
159
- 0 calc(0.0625rem * var(--c-scale)) calc(0.1875rem * var(--c-scale)) rgba(0, 0, 0, 0.05),
160
- rgba(0, 0, 0, 0.05) 0 calc(1.25rem * var(--c-scale)) calc(1.5625rem * var(--c-scale))
161
- calc(-0.3125rem * var(--c-scale)),
162
- rgba(0, 0, 0, 0.04) 0 calc(0.625rem * var(--c-scale)) calc(0.625rem * var(--c-scale))
163
- calc(-0.3125rem * var(--c-scale));
164
- --c-shadow-lg:
165
- 0 calc(0.0625rem * var(--c-scale)) calc(0.1875rem * var(--c-scale)) rgba(0, 0, 0, 0.05),
166
- rgba(0, 0, 0, 0.05) 0 calc(1.75rem * var(--c-scale)) calc(1.4375rem * var(--c-scale))
167
- calc(-0.4375rem * var(--c-scale)),
168
- rgba(0, 0, 0, 0.04) 0 calc(0.75rem * var(--c-scale)) calc(0.75rem * var(--c-scale))
169
- calc(-0.4375rem * var(--c-scale));
170
- --c-shadow-xl:
171
- 0 calc(0.0625rem * var(--c-scale)) calc(0.1875rem * var(--c-scale)) rgba(0, 0, 0, 0.05),
172
- rgba(0, 0, 0, 0.05) 0 calc(2.25rem * var(--c-scale)) calc(1.75rem * var(--c-scale))
173
- calc(-0.4375rem * var(--c-scale)),
174
- rgba(0, 0, 0, 0.04) 0 calc(1.0625rem * var(--c-scale)) calc(1.0625rem * var(--c-scale))
175
- calc(-0.4375rem * var(--c-scale));
176
- --c-radius-xs: calc(0.125rem * var(--c-scale));
177
- --c-radius-sm: calc(0.25rem * var(--c-scale));
178
- --c-radius-md: calc(0.5rem * var(--c-scale));
179
- --c-radius-lg: calc(1rem * var(--c-scale));
180
- --c-radius-xl: calc(2rem * var(--c-scale));
181
- --c-font-weight-regular: 400;
182
- --c-font-weight-medium: 600;
183
- --c-font-weight-bold: 700;
184
- --c-primary-color-0: var(--c-color-blue-0);
185
- --c-primary-color-1: var(--c-color-blue-1);
186
- --c-primary-color-2: var(--c-color-blue-2);
187
- --c-primary-color-3: var(--c-color-blue-3);
188
- --c-primary-color-4: var(--c-color-blue-4);
189
- --c-primary-color-5: var(--c-color-blue-5);
190
- --c-primary-color-6: var(--c-color-blue-6);
191
- --c-primary-color-7: var(--c-color-blue-7);
192
- --c-primary-color-8: var(--c-color-blue-8);
193
- --c-primary-color-9: var(--c-color-blue-9);
194
- --c-color-dark-0: #c9c9c9;
195
- --c-color-dark-1: #b8b8b8;
196
- --c-color-dark-2: #828282;
197
- --c-color-dark-3: #696969;
198
- --c-color-dark-4: #424242;
199
- --c-color-dark-5: #3b3b3b;
200
- --c-color-dark-6: #2e2e2e;
201
- --c-color-dark-7: #242424;
202
- --c-color-dark-8: #1f1f1f;
203
- --c-color-dark-9: #141414;
204
- --c-color-gray-0: #f8f9fa;
205
- --c-color-gray-1: #f1f3f5;
206
- --c-color-gray-2: #e9ecef;
207
- --c-color-gray-3: #dee2e6;
208
- --c-color-gray-4: #ced4da;
209
- --c-color-gray-5: #adb5bd;
210
- --c-color-gray-6: #868e96;
211
- --c-color-gray-7: #495057;
212
- --c-color-gray-8: #343a40;
213
- --c-color-gray-9: #212529;
214
- --c-color-red-0: #fff5f5;
215
- --c-color-red-1: #ffe3e3;
216
- --c-color-red-2: #ffc9c9;
217
- --c-color-red-3: #ffa8a8;
218
- --c-color-red-4: #ff8787;
219
- --c-color-red-5: #ff6b6b;
220
- --c-color-red-6: #fa5252;
221
- --c-color-red-7: #f03e3e;
222
- --c-color-red-8: #e03131;
223
- --c-color-red-9: #c92a2a;
224
- --c-color-pink-0: #fff0f6;
225
- --c-color-pink-1: #ffdeeb;
226
- --c-color-pink-2: #fcc2d7;
227
- --c-color-pink-3: #faa2c1;
228
- --c-color-pink-4: #f783ac;
229
- --c-color-pink-5: #f06595;
230
- --c-color-pink-6: #e64980;
231
- --c-color-pink-7: #d6336c;
232
- --c-color-pink-8: #c2255c;
233
- --c-color-pink-9: #a61e4d;
234
- --c-color-grape-0: #f8f0fc;
235
- --c-color-grape-1: #f3d9fa;
236
- --c-color-grape-2: #eebefa;
237
- --c-color-grape-3: #e599f7;
238
- --c-color-grape-4: #da77f2;
239
- --c-color-grape-5: #cc5de8;
240
- --c-color-grape-6: #be4bdb;
241
- --c-color-grape-7: #ae3ec9;
242
- --c-color-grape-8: #9c36b5;
243
- --c-color-grape-9: #862e9c;
244
- --c-color-violet-0: #f3f0ff;
245
- --c-color-violet-1: #e5dbff;
246
- --c-color-violet-2: #d0bfff;
247
- --c-color-violet-3: #b197fc;
248
- --c-color-violet-4: #9775fa;
249
- --c-color-violet-5: #845ef7;
250
- --c-color-violet-6: #7950f2;
251
- --c-color-violet-7: #7048e8;
252
- --c-color-violet-8: #6741d9;
253
- --c-color-violet-9: #5f3dc4;
254
- --c-color-indigo-0: #edf2ff;
255
- --c-color-indigo-1: #dbe4ff;
256
- --c-color-indigo-2: #bac8ff;
257
- --c-color-indigo-3: #91a7ff;
258
- --c-color-indigo-4: #748ffc;
259
- --c-color-indigo-5: #5c7cfa;
260
- --c-color-indigo-6: #4c6ef5;
261
- --c-color-indigo-7: #4263eb;
262
- --c-color-indigo-8: #3b5bdb;
263
- --c-color-indigo-9: #364fc7;
264
- --c-color-blue-0: #e7f5ff;
265
- --c-color-blue-1: #d0ebff;
266
- --c-color-blue-2: #a5d8ff;
267
- --c-color-blue-3: #74c0fc;
268
- --c-color-blue-4: #4dabf7;
269
- --c-color-blue-5: #339af0;
270
- --c-color-blue-6: #228be6;
271
- --c-color-blue-7: #1c7ed6;
272
- --c-color-blue-8: #1971c2;
273
- --c-color-blue-9: #1864ab;
274
- --c-color-cyan-0: #e3fafc;
275
- --c-color-cyan-1: #c5f6fa;
276
- --c-color-cyan-2: #99e9f2;
277
- --c-color-cyan-3: #66d9e8;
278
- --c-color-cyan-4: #3bc9db;
279
- --c-color-cyan-5: #22b8cf;
280
- --c-color-cyan-6: #15aabf;
281
- --c-color-cyan-7: #1098ad;
282
- --c-color-cyan-8: #0c8599;
283
- --c-color-cyan-9: #0b7285;
284
- --c-color-teal-0: #e6fcf5;
285
- --c-color-teal-1: #c3fae8;
286
- --c-color-teal-2: #96f2d7;
287
- --c-color-teal-3: #63e6be;
288
- --c-color-teal-4: #38d9a9;
289
- --c-color-teal-5: #20c997;
290
- --c-color-teal-6: #12b886;
291
- --c-color-teal-7: #0ca678;
292
- --c-color-teal-8: #099268;
293
- --c-color-teal-9: #087f5b;
294
- --c-color-green-0: #ebfbee;
295
- --c-color-green-1: #d3f9d8;
296
- --c-color-green-2: #b2f2bb;
297
- --c-color-green-3: #8ce99a;
298
- --c-color-green-4: #69db7c;
299
- --c-color-green-5: #51cf66;
300
- --c-color-green-6: #40c057;
301
- --c-color-green-7: #37b24d;
302
- --c-color-green-8: #2f9e44;
303
- --c-color-green-9: #2b8a3e;
304
- --c-color-lime-0: #f4fce3;
305
- --c-color-lime-1: #e9fac8;
306
- --c-color-lime-2: #d8f5a2;
307
- --c-color-lime-3: #c0eb75;
308
- --c-color-lime-4: #a9e34b;
309
- --c-color-lime-5: #94d82d;
310
- --c-color-lime-6: #82c91e;
311
- --c-color-lime-7: #74b816;
312
- --c-color-lime-8: #66a80f;
313
- --c-color-lime-9: #5c940d;
314
- --c-color-yellow-0: #fff9db;
315
- --c-color-yellow-1: #fff3bf;
316
- --c-color-yellow-2: #ffec99;
317
- --c-color-yellow-3: #ffe066;
318
- --c-color-yellow-4: #ffd43b;
319
- --c-color-yellow-5: #fcc419;
320
- --c-color-yellow-6: #fab005;
321
- --c-color-yellow-7: #f59f00;
322
- --c-color-yellow-8: #f08c00;
323
- --c-color-yellow-9: #e67700;
324
- --c-color-orange-0: #fff4e6;
325
- --c-color-orange-1: #ffe8cc;
326
- --c-color-orange-2: #ffd8a8;
327
- --c-color-orange-3: #ffc078;
328
- --c-color-orange-4: #ffa94d;
329
- --c-color-orange-5: #ff922b;
330
- --c-color-orange-6: #fd7e14;
331
- --c-color-orange-7: #f76707;
332
- --c-color-orange-8: #e8590c;
333
- --c-color-orange-9: #d9480f;
334
- --c-h1-font-size: calc(2.125rem * var(--c-scale));
335
- --c-h1-line-height: 1.3;
336
- --c-h1-font-weight: 700;
337
- --c-h2-font-size: calc(1.625rem * var(--c-scale));
338
- --c-h2-line-height: 1.35;
339
- --c-h2-font-weight: 700;
340
- --c-h3-font-size: calc(1.375rem * var(--c-scale));
341
- --c-h3-line-height: 1.4;
342
- --c-h3-font-weight: 700;
343
- --c-h4-font-size: calc(1.125rem * var(--c-scale));
344
- --c-h4-line-height: 1.45;
345
- --c-h4-font-weight: 700;
346
- --c-h5-font-size: calc(1rem * var(--c-scale));
347
- --c-h5-line-height: 1.5;
348
- --c-h5-font-weight: 700;
349
- --c-h6-font-size: calc(0.875rem * var(--c-scale));
350
- --c-h6-line-height: 1.5;
351
- --c-h6-font-weight: 700;
352
- }
353
-
354
- :root[data-c-color-scheme='dark'],
355
- :host([data-c-color-scheme='dark']) {
356
- --c-color-scheme: dark;
357
- --c-primary-color-contrast: var(--c-color-white);
358
- --c-color-bright: var(--c-color-white);
359
- --c-color-text: var(--c-color-dark-0);
360
- --c-color-body: var(--c-color-dark-7);
361
- --c-color-error: var(--c-color-red-8);
362
- --c-color-success: var(--c-color-teal-8);
363
- --c-color-placeholder: var(--c-color-dark-3);
364
- --c-color-anchor: var(--c-color-blue-4);
365
- --c-color-default: var(--c-color-dark-6);
366
- --c-color-default-hover: var(--c-color-dark-5);
367
- --c-color-default-color: var(--c-color-white);
368
- --c-color-default-border: var(--c-color-dark-4);
369
- --c-color-dimmed: var(--c-color-dark-2);
370
- --c-color-disabled: var(--c-color-dark-6);
371
- --c-color-disabled-color: var(--c-color-dark-3);
372
- --c-color-disabled-border: var(--c-color-dark-4);
373
- --c-color-dark-text: var(--c-color-dark-4);
374
- --c-color-dark-filled: var(--c-color-dark-8);
375
- --c-color-dark-filled-hover: var(--c-color-dark-9);
376
- --c-color-dark-light: rgba(10, 10, 10, 1);
377
- --c-color-dark-light-hover: rgba(14, 14, 14, 1);
378
- --c-color-dark-light-color: var(--c-color-dark-0);
379
- --c-color-dark-outline: var(--c-color-dark-0);
380
- --c-color-dark-outline-hover: rgba(66, 66, 66, 0.05);
381
- --c-color-gray-text: var(--c-color-gray-4);
382
- --c-color-gray-filled: var(--c-color-gray-8);
383
- --c-color-gray-filled-hover: var(--c-color-gray-9);
384
- --c-color-gray-light: rgba(17, 19, 21, 1);
385
- --c-color-gray-light-hover: rgba(23, 26, 29, 1);
386
- --c-color-gray-light-color: var(--c-color-gray-0);
387
- --c-color-gray-outline: var(--c-color-gray-0);
388
- --c-color-gray-outline-hover: rgba(206, 212, 218, 0.05);
389
- --c-color-red-text: var(--c-color-red-4);
390
- --c-color-red-filled: var(--c-color-red-8);
391
- --c-color-red-filled-hover: var(--c-color-red-9);
392
- --c-color-red-light: rgba(101, 21, 21, 1);
393
- --c-color-red-light-hover: rgba(141, 29, 29, 1);
394
- --c-color-red-light-color: var(--c-color-red-0);
395
- --c-color-red-outline: var(--c-color-red-0);
396
- --c-color-red-outline-hover: rgba(255, 135, 135, 0.05);
397
- --c-color-pink-text: var(--c-color-pink-4);
398
- --c-color-pink-filled: var(--c-color-pink-8);
399
- --c-color-pink-filled-hover: var(--c-color-pink-9);
400
- --c-color-pink-light: rgba(83, 15, 39, 1);
401
- --c-color-pink-light-hover: rgba(116, 21, 54, 1);
402
- --c-color-pink-light-color: var(--c-color-pink-0);
403
- --c-color-pink-outline: var(--c-color-pink-0);
404
- --c-color-pink-outline-hover: rgba(247, 131, 172, 0.05);
405
- --c-color-grape-text: var(--c-color-grape-4);
406
- --c-color-grape-filled: var(--c-color-grape-8);
407
- --c-color-grape-filled-hover: var(--c-color-grape-9);
408
- --c-color-grape-light: rgba(67, 23, 78, 1);
409
- --c-color-grape-light-hover: rgba(94, 32, 109, 1);
410
- --c-color-grape-light-color: var(--c-color-grape-0);
411
- --c-color-grape-outline: var(--c-color-grape-0);
412
- --c-color-grape-outline-hover: rgba(218, 119, 242, 0.05);
413
- --c-color-violet-text: var(--c-color-violet-4);
414
- --c-color-violet-filled: var(--c-color-violet-8);
415
- --c-color-violet-filled-hover: var(--c-color-violet-9);
416
- --c-color-violet-light: rgba(48, 31, 98, 1);
417
- --c-color-violet-light-hover: rgba(67, 43, 137, 1);
418
- --c-color-violet-light-color: var(--c-color-violet-0);
419
- --c-color-violet-outline: var(--c-color-violet-0);
420
- --c-color-violet-outline-hover: rgba(151, 117, 250, 0.05);
421
- --c-color-indigo-text: var(--c-color-indigo-4);
422
- --c-color-indigo-filled: var(--c-color-indigo-8);
423
- --c-color-indigo-filled-hover: var(--c-color-indigo-9);
424
- --c-color-indigo-light: rgba(27, 40, 100, 1);
425
- --c-color-indigo-light-hover: rgba(38, 55, 139, 1);
426
- --c-color-indigo-light-color: var(--c-color-indigo-0);
427
- --c-color-indigo-outline: var(--c-color-indigo-0);
428
- --c-color-indigo-outline-hover: rgba(116, 143, 252, 0.05);
429
- --c-color-blue-text: var(--c-color-blue-4);
430
- --c-color-blue-filled: var(--c-color-blue-8);
431
- --c-color-blue-filled-hover: var(--c-color-blue-9);
432
- --c-color-blue-light: rgba(12, 50, 86, 1);
433
- --c-color-blue-light-hover: rgba(17, 70, 120, 1);
434
- --c-color-blue-light-color: var(--c-color-blue-0);
435
- --c-color-blue-outline: var(--c-color-blue-0);
436
- --c-color-blue-outline-hover: rgba(77, 171, 247, 0.05);
437
- --c-color-cyan-text: var(--c-color-cyan-4);
438
- --c-color-cyan-filled: var(--c-color-cyan-8);
439
- --c-color-cyan-filled-hover: var(--c-color-cyan-9);
440
- --c-color-cyan-light: rgba(6, 57, 67, 1);
441
- --c-color-cyan-light-hover: rgba(8, 80, 93, 1);
442
- --c-color-cyan-light-color: var(--c-color-cyan-0);
443
- --c-color-cyan-outline: var(--c-color-cyan-0);
444
- --c-color-cyan-outline-hover: rgba(59, 201, 219, 0.05);
445
- --c-color-teal-text: var(--c-color-teal-4);
446
- --c-color-teal-filled: var(--c-color-teal-8);
447
- --c-color-teal-filled-hover: var(--c-color-teal-9);
448
- --c-color-teal-light: rgba(4, 64, 46, 1);
449
- --c-color-teal-light-hover: rgba(6, 89, 64, 1);
450
- --c-color-teal-light-color: var(--c-color-teal-0);
451
- --c-color-teal-outline: var(--c-color-teal-0);
452
- --c-color-teal-outline-hover: rgba(56, 217, 169, 0.05);
453
- --c-color-green-text: var(--c-color-green-4);
454
- --c-color-green-filled: var(--c-color-green-8);
455
- --c-color-green-filled-hover: var(--c-color-green-9);
456
- --c-color-green-light: rgba(22, 69, 31, 1);
457
- --c-color-green-light-hover: rgba(30, 97, 43, 1);
458
- --c-color-green-light-color: var(--c-color-green-0);
459
- --c-color-green-outline: var(--c-color-green-0);
460
- --c-color-green-outline-hover: rgba(105, 219, 124, 0.05);
461
- --c-color-lime-text: var(--c-color-lime-4);
462
- --c-color-lime-filled: var(--c-color-lime-8);
463
- --c-color-lime-filled-hover: var(--c-color-lime-9);
464
- --c-color-lime-light: rgba(46, 74, 7, 1);
465
- --c-color-lime-light-hover: rgba(64, 104, 9, 1);
466
- --c-color-lime-light-color: var(--c-color-lime-0);
467
- --c-color-lime-outline: var(--c-color-lime-0);
468
- --c-color-lime-outline-hover: rgba(169, 227, 75, 0.05);
469
- --c-color-yellow-text: var(--c-color-yellow-4);
470
- --c-color-yellow-filled: var(--c-color-yellow-8);
471
- --c-color-yellow-filled-hover: var(--c-color-yellow-9);
472
- --c-color-yellow-light: rgba(115, 60, 0, 1);
473
- --c-color-yellow-light-hover: rgba(161, 83, 0, 1);
474
- --c-color-yellow-light-color: var(--c-color-yellow-0);
475
- --c-color-yellow-outline: var(--c-color-yellow-0);
476
- --c-color-yellow-outline-hover: rgba(255, 212, 59, 0.05);
477
- --c-color-orange-text: var(--c-color-orange-4);
478
- --c-color-orange-filled: var(--c-color-orange-8);
479
- --c-color-orange-filled-hover: var(--c-color-orange-9);
480
- --c-color-orange-light: rgba(109, 36, 8, 1);
481
- --c-color-orange-light-hover: rgba(152, 50, 11, 1);
482
- --c-color-orange-light-color: var(--c-color-orange-0);
483
- --c-color-orange-outline: var(--c-color-orange-0);
484
- --c-color-orange-outline-hover: rgba(255, 169, 77, 0.05);
485
- }
486
-
487
- :root[data-c-color-scheme='light'],
488
- :host([data-c-color-scheme='light']) {
489
- --c-color-scheme: light;
490
- --c-primary-color-contrast: var(--c-color-white);
491
- --c-color-bright: var(--c-color-black);
492
- --c-color-text: #000;
493
- --c-color-body: #fff;
494
- --c-color-error: var(--c-color-red-6);
495
- --c-color-success: var(--c-color-teal-8);
496
- --c-color-placeholder: var(--c-color-gray-5);
497
- --c-color-anchor: var(--c-color-blue-6);
498
- --c-color-default: var(--c-color-white);
499
- --c-color-default-hover: var(--c-color-gray-0);
500
- --c-color-default-color: var(--c-color-black);
501
- --c-color-default-border: var(--c-color-gray-4);
502
- --c-color-dimmed: var(--c-color-gray-6);
503
- --c-color-disabled: var(--c-color-gray-2);
504
- --c-color-disabled-color: var(--c-color-gray-5);
505
- --c-color-disabled-border: var(--c-color-gray-3);
506
- --c-color-dark-text: var(--c-color-dark-filled);
507
- --c-color-dark-filled: var(--c-color-dark-6);
508
- --c-color-dark-filled-hover: var(--c-color-dark-7);
509
- --c-color-dark-light: var(--c-color-dark-1);
510
- --c-color-dark-light-hover: var(--c-color-dark-2);
511
- --c-color-dark-light-color: var(--c-color-dark-9);
512
- --c-color-dark-outline: var(--c-color-dark-6);
513
- --c-color-dark-outline-hover: rgba(46, 46, 46, 0.05);
514
- --c-color-gray-text: var(--c-color-gray-filled);
515
- --c-color-gray-filled: var(--c-color-gray-6);
516
- --c-color-gray-filled-hover: var(--c-color-gray-7);
517
- --c-color-gray-light: var(--c-color-gray-1);
518
- --c-color-gray-light-hover: var(--c-color-gray-2);
519
- --c-color-gray-light-color: var(--c-color-gray-9);
520
- --c-color-gray-outline: var(--c-color-gray-6);
521
- --c-color-gray-outline-hover: rgba(134, 142, 150, 0.05);
522
- --c-color-red-text: var(--c-color-red-filled);
523
- --c-color-red-filled: var(--c-color-red-6);
524
- --c-color-red-filled-hover: var(--c-color-red-7);
525
- --c-color-red-light: var(--c-color-red-1);
526
- --c-color-red-light-hover: var(--c-color-red-2);
527
- --c-color-red-light-color: var(--c-color-red-9);
528
- --c-color-red-outline: var(--c-color-red-6);
529
- --c-color-red-outline-hover: rgba(250, 82, 82, 0.05);
530
- --c-color-pink-text: var(--c-color-pink-filled);
531
- --c-color-pink-filled: var(--c-color-pink-6);
532
- --c-color-pink-filled-hover: var(--c-color-pink-7);
533
- --c-color-pink-light: var(--c-color-pink-1);
534
- --c-color-pink-light-hover: var(--c-color-pink-2);
535
- --c-color-pink-light-color: var(--c-color-pink-9);
536
- --c-color-pink-outline: var(--c-color-pink-6);
537
- --c-color-pink-outline-hover: rgba(230, 73, 128, 0.05);
538
- --c-color-grape-text: var(--c-color-grape-filled);
539
- --c-color-grape-filled: var(--c-color-grape-6);
540
- --c-color-grape-filled-hover: var(--c-color-grape-7);
541
- --c-color-grape-light: var(--c-color-grape-1);
542
- --c-color-grape-light-hover: var(--c-color-grape-2);
543
- --c-color-grape-light-color: var(--c-color-grape-9);
544
- --c-color-grape-outline: var(--c-color-grape-6);
545
- --c-color-grape-outline-hover: rgba(190, 75, 219, 0.05);
546
- --c-color-violet-text: var(--c-color-violet-filled);
547
- --c-color-violet-filled: var(--c-color-violet-6);
548
- --c-color-violet-filled-hover: var(--c-color-violet-7);
549
- --c-color-violet-light: var(--c-color-violet-1);
550
- --c-color-violet-light-hover: var(--c-color-violet-2);
551
- --c-color-violet-light-color: var(--c-color-violet-9);
552
- --c-color-violet-outline: var(--c-color-violet-6);
553
- --c-color-violet-outline-hover: rgba(121, 80, 242, 0.05);
554
- --c-color-indigo-text: var(--c-color-indigo-filled);
555
- --c-color-indigo-filled: var(--c-color-indigo-6);
556
- --c-color-indigo-filled-hover: var(--c-color-indigo-7);
557
- --c-color-indigo-light: var(--c-color-indigo-1);
558
- --c-color-indigo-light-hover: var(--c-color-indigo-2);
559
- --c-color-indigo-light-color: var(--c-color-indigo-9);
560
- --c-color-indigo-outline: var(--c-color-indigo-6);
561
- --c-color-indigo-outline-hover: rgba(76, 110, 245, 0.05);
562
- --c-color-blue-text: var(--c-color-blue-filled);
563
- --c-color-blue-filled: var(--c-color-blue-6);
564
- --c-color-blue-filled-hover: var(--c-color-blue-7);
565
- --c-color-blue-light: var(--c-color-blue-1);
566
- --c-color-blue-light-hover: var(--c-color-blue-2);
567
- --c-color-blue-light-color: var(--c-color-blue-9);
568
- --c-color-blue-outline: var(--c-color-blue-6);
569
- --c-color-blue-outline-hover: rgba(34, 139, 230, 0.05);
570
- --c-color-cyan-text: var(--c-color-cyan-filled);
571
- --c-color-cyan-filled: var(--c-color-cyan-6);
572
- --c-color-cyan-filled-hover: var(--c-color-cyan-7);
573
- --c-color-cyan-light: var(--c-color-cyan-1);
574
- --c-color-cyan-light-hover: var(--c-color-cyan-2);
575
- --c-color-cyan-light-color: var(--c-color-cyan-9);
576
- --c-color-cyan-outline: var(--c-color-cyan-6);
577
- --c-color-cyan-outline-hover: rgba(21, 170, 191, 0.05);
578
- --c-color-teal-text: var(--c-color-teal-filled);
579
- --c-color-teal-filled: var(--c-color-teal-6);
580
- --c-color-teal-filled-hover: var(--c-color-teal-7);
581
- --c-color-teal-light: var(--c-color-teal-1);
582
- --c-color-teal-light-hover: var(--c-color-teal-2);
583
- --c-color-teal-light-color: var(--c-color-teal-9);
584
- --c-color-teal-outline: var(--c-color-teal-6);
585
- --c-color-teal-outline-hover: rgba(18, 184, 134, 0.05);
586
- --c-color-green-text: var(--c-color-green-filled);
587
- --c-color-green-filled: var(--c-color-green-6);
588
- --c-color-green-filled-hover: var(--c-color-green-7);
589
- --c-color-green-light: var(--c-color-green-1);
590
- --c-color-green-light-hover: var(--c-color-green-2);
591
- --c-color-green-light-color: var(--c-color-green-9);
592
- --c-color-green-outline: var(--c-color-green-6);
593
- --c-color-green-outline-hover: rgba(64, 192, 87, 0.05);
594
- --c-color-lime-text: var(--c-color-lime-filled);
595
- --c-color-lime-filled: var(--c-color-lime-6);
596
- --c-color-lime-filled-hover: var(--c-color-lime-7);
597
- --c-color-lime-light: var(--c-color-lime-1);
598
- --c-color-lime-light-hover: var(--c-color-lime-2);
599
- --c-color-lime-light-color: var(--c-color-lime-9);
600
- --c-color-lime-outline: var(--c-color-lime-6);
601
- --c-color-lime-outline-hover: rgba(130, 201, 30, 0.05);
602
- --c-color-yellow-text: var(--c-color-yellow-filled);
603
- --c-color-yellow-filled: var(--c-color-yellow-6);
604
- --c-color-yellow-filled-hover: var(--c-color-yellow-7);
605
- --c-color-yellow-light: var(--c-color-yellow-1);
606
- --c-color-yellow-light-hover: var(--c-color-yellow-2);
607
- --c-color-yellow-light-color: var(--c-color-yellow-9);
608
- --c-color-yellow-outline: var(--c-color-yellow-6);
609
- --c-color-yellow-outline-hover: rgba(250, 176, 5, 0.05);
610
- --c-color-orange-text: var(--c-color-orange-filled);
611
- --c-color-orange-filled: var(--c-color-orange-6);
612
- --c-color-orange-filled-hover: var(--c-color-orange-7);
613
- --c-color-orange-light: var(--c-color-orange-1);
614
- --c-color-orange-light-hover: var(--c-color-orange-2);
615
- --c-color-orange-light-color: var(--c-color-orange-9);
616
- --c-color-orange-outline: var(--c-color-orange-6);
617
- --c-color-orange-outline-hover: rgba(253, 126, 20, 0.05);
618
- }
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
-
668
- .m_c9afe370 {
669
- display: flex;
670
- flex-direction: row;
671
- flex-wrap: var(--group-wrap, wrap);
672
- justify-content: var(--group-justify, flex-start);
673
- align-items: var(--group-align, center);
674
- gap: var(--group-gap, var(--c-spacing-md));
675
-
676
- &:where([data-grow]) {
677
- & > * {
678
- flex-grow: 1;
679
- max-width: var(--group-child-width);
680
- }
681
- }
682
- }
683
-
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);
692
- }
693
-
694
- .m_a244865c,
695
- .m_a244865c *,
696
- .m_a244865c::before,
697
- .m_a244865c::after {
698
- box-sizing: border-box;
699
- }
700
-
701
- @keyframes m_774c277d {
702
- 0% {
703
- transform: scale(0.6);
704
- opacity: 0;
705
- }
706
-
707
- 50%,
708
- 100% {
709
- transform: scale(1);
710
- }
711
- }
712
-
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));
830
- margin: 0;
831
- padding: 0;
832
-
833
- &:where([data-truncate]) {
834
- overflow: hidden;
835
- text-overflow: ellipsis;
836
- white-space: nowrap;
837
- }
838
-
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;
872
- }
873
- }
874
-
875
- .m_14602a9d {
876
- --button-height-xs: 30px;
877
- --button-height-sm: 36px;
878
- --button-height-md: 42px;
879
- --button-height-lg: 50px;
880
- --button-height-xl: 60px;
881
-
882
- --button-height-compact-xs: 22px;
883
- --button-height-compact-sm: 26px;
884
- --button-height-compact-md: 30px;
885
- --button-height-compact-lg: 34px;
886
- --button-height-compact-xl: 40px;
887
-
888
- --button-padding-x-xs: 14px;
889
- --button-padding-x-sm: 18px;
890
- --button-padding-x-md: 22px;
891
- --button-padding-x-lg: 26px;
892
- --button-padding-x-xl: 32px;
893
-
894
- --button-padding-x-compact-xs: 7px;
895
- --button-padding-x-compact-sm: 8px;
896
- --button-padding-x-compact-md: 10px;
897
- --button-padding-x-compact-lg: 12px;
898
- --button-padding-x-compact-xl: 14px;
899
-
900
- --button-height: var(--button-height-sm);
901
- --button-padding-x: var(--button-padding-x-sm);
902
- --button-color: var(--c-color-white);
903
-
904
- user-select: none;
905
- font-weight: var(--c-font-weight-medium);
906
- position: relative;
907
- line-height: 1;
908
- text-align: center;
909
- overflow: hidden;
910
-
911
- width: auto;
912
- cursor: pointer;
913
- display: inline-block;
914
- border-radius: var(--button-radius, var(--c-radius-default));
915
- font-size: var(--button-fz, var(--c-font-size-sm));
916
- background: var(--button-bg, var(--c-color-default));
917
- border: var(--button-bd, rem(1px) solid var(--c-color-default-border));
918
- color: var(--button-color, var(--c-color-default-color));
919
- height: var(--button-height, var(--button-height-sm));
920
- padding-inline: var(--button-padding-x, var(--button-padding-x-sm));
921
- vertical-align: middle;
922
-
923
- &:where([data-block]) {
924
- display: block;
925
- width: 100%;
926
- }
927
-
928
- &:where([data-with-left-section]) {
929
- padding-inline-start: calc(var(--button-padding-x) / 1.5);
930
- }
931
-
932
- &:where([data-with-right-section]) {
933
- padding-inline-end: calc(var(--button-padding-x) / 1.5);
934
- }
935
-
936
- &:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {
937
- cursor: not-allowed;
938
- border-color: transparent;
939
- transform: none;
940
- color: var(--c-color-disabled-color);
941
- background: var(--c-color-disabled);
942
- }
943
-
944
- &::before {
945
- content: '';
946
- pointer-events: none;
947
- position: absolute;
948
- inset: -1px;
949
- border-radius: var(--button-radius, var(--c-radius-default));
950
- transform: translateY(-100%);
951
- opacity: 0;
952
- filter: blur(12px);
953
- transition:
954
- transform 150ms ease,
955
- opacity 100ms ease;
956
-
957
- @mixin where-light {
958
- background-color: rgba(255, 255, 255, 0.15);
959
- }
960
-
961
- @mixin where-dark {
962
- background-color: rgba(0, 0, 0, 0.15);
963
- }
964
- }
965
-
966
- &:where([data-loading]) {
967
- cursor: not-allowed;
968
- transform: none;
969
-
970
- &::before {
971
- transform: translateY(0);
972
- opacity: 1;
973
- }
974
-
975
- & .m_7725dbfb {
976
- opacity: 0;
977
- transform: translateY(100%);
978
- }
979
- }
980
-
981
- @mixin hover {
982
- &:where(:not([data-loading], :disabled, [data-disabled])) {
983
- background-color: var(--button-hover, var(--c-color-default-hover));
984
- color: var(--button-hover-color, var(--button-color));
985
- }
986
- }
987
- }
988
-
989
- .m_7725dbfb {
990
- display: flex;
991
- align-items: center;
992
- justify-content: var(--button-justify, center);
993
- height: 100%;
994
- overflow: visible;
995
- transition:
996
- transform 150ms ease,
997
- opacity 100ms ease;
998
- }
999
-
1000
- .m_774a0c99 {
1001
- white-space: nowrap;
1002
- height: 100%;
1003
- overflow: hidden;
1004
- display: flex;
1005
- align-items: center;
1006
- opacity: 1;
1007
- text-box-trim: trim-both;
1008
- text-box-edge: cap alphabetic;
1009
-
1010
- &:where([data-loading]) {
1011
- opacity: 0.2;
1012
- }
1013
- }
1014
-
1015
- .m_462d374a {
1016
- display: flex;
1017
- align-items: center;
1018
-
1019
- &:where([data-position='left']) {
1020
- margin-inline-end: var(--c-spacing-xs);
1021
- }
1022
-
1023
- &:where([data-position='right']) {
1024
- margin-inline-start: var(--c-spacing-xs);
1025
- }
1026
- }
1027
-
1028
- .m_72bc570e {
1029
- position: absolute;
1030
- left: 50%;
1031
- top: 50%;
1032
- }
1033
-
1034
- .m_770b8424 {
1035
- --button-border-width: 1px;
1036
- display: flex;
1037
-
1038
- & :where(.m_14602a9d) {
1039
- &:focus {
1040
- position: relative;
1041
- z-index: 1;
1042
- }
1043
- }
1044
-
1045
- &[data-orientation='horizontal'] {
1046
- flex-direction: row;
1047
-
1048
- & .m_14602a9d,
1049
- & .m_260a6221 {
1050
- &:not(:only-child):first-child {
1051
- border-end-end-radius: 0;
1052
- border-start-end-radius: 0;
1053
- border-inline-end-width: calc(var(--button-border-width) / 2);
1054
- }
1055
-
1056
- &:not(:only-child):last-child {
1057
- border-end-start-radius: 0;
1058
- border-start-start-radius: 0;
1059
- border-inline-start-width: calc(var(--button-border-width) / 2);
1060
- }
1061
-
1062
- &:not(:only-child):not(:first-child):not(:last-child) {
1063
- border-radius: 0;
1064
- border-inline-width: calc(var(--button-border-width) / 2);
1065
- }
1066
- }
1067
- }
1068
-
1069
- &[data-orientation='vertical'] {
1070
- flex-direction: column;
1071
-
1072
- & .m_14602a9d,
1073
- & .m_260a6221 {
1074
- &:not(:only-child):first-child {
1075
- border-end-start-radius: 0;
1076
- border-end-end-radius: 0;
1077
- border-bottom-width: calc(var(--button-border-width) / 2);
1078
- }
1079
-
1080
- &:not(:only-child):last-child {
1081
- border-start-start-radius: 0;
1082
- border-start-end-radius: 0;
1083
- border-top-width: calc(var(--button-border-width) / 2);
1084
- }
1085
-
1086
- &:not(:only-child):not(:first-child):not(:last-child) {
1087
- border-radius: 0;
1088
- border-bottom-width: calc(var(--button-border-width) / 2);
1089
- border-top-width: calc(var(--button-border-width) / 2);
1090
- }
1091
- }
1092
- }
1093
- }
1094
-
1095
- .m_260a6221 {
1096
- --section-height-xs: 30px;
1097
- --section-height-sm: 36px;
1098
- --section-height-md: 42px;
1099
- --section-height-lg: 50px;
1100
- --section-height-xl: 60px;
1101
-
1102
- --section-height-compact-xs: 22px;
1103
- --section-height-compact-sm: 26px;
1104
- --section-height-compact-md: 30px;
1105
- --section-height-compact-lg: 34px;
1106
- --section-height-compact-xl: 40px;
1107
-
1108
- --section-padding-x-xs: 14px;
1109
- --section-padding-x-sm: 18px;
1110
- --section-padding-x-md: 22px;
1111
- --section-padding-x-lg: 26px;
1112
- --section-padding-x-xl: 32px;
1113
-
1114
- --section-padding-x-compact-xs: 7px;
1115
- --section-padding-x-compact-sm: 8px;
1116
- --section-padding-x-compact-md: 10px;
1117
- --section-padding-x-compact-lg: 12px;
1118
- --section-padding-x-compact-xl: 14px;
1119
-
1120
- --section-height: var(--section-height-sm);
1121
- --section-padding-x: var(--section-padding-x-sm);
1122
- --section-color: var(--c-color-white);
1123
-
1124
- font-weight: var(--c-font-weight-medium);
1125
- width: auto;
1126
- border-radius: var(--section-radius, var(--c-radius-default));
1127
- font-size: var(--section-fz, var(--c-font-size-sm));
1128
- background: var(--section-bg, var(--c-primary-color-filled));
1129
- border: var(--section-bd, rem(1px) solid transparent);
1130
- height: var(--section-height, var(--section-height-sm));
1131
- padding-inline: var(--section-padding-x, var(--section-padding-x-sm));
1132
- vertical-align: middle;
1133
- line-height: 1;
1134
- display: inline-flex;
1135
- align-items: center;
1136
- justify-content: center;
1137
- }