@typlog/ui 0.14.0 → 0.16.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.
Files changed (16) hide show
  1. package/addons.css +244 -118
  2. package/addons.d.ts +195 -34
  3. package/addons.js +1827 -479
  4. package/charts.css +161 -0
  5. package/charts.d.ts +233 -0
  6. package/charts.js +382 -0
  7. package/index.css +13652 -2
  8. package/index.d.ts +3061 -0
  9. package/index.js +5995 -0
  10. package/package.json +27 -15
  11. package/util-lkbchXvM.js +42 -0
  12. package/base.css +0 -6623
  13. package/components.css +0 -5012
  14. package/components.d.ts +0 -2231
  15. package/components.js +0 -4518
  16. package/tailwind.css +0 -1110
package/components.css DELETED
@@ -1,5012 +0,0 @@
1
-
2
- [data-v-app] > .ui-root {
3
- position: relative;
4
- z-index: 0;
5
- }
6
-
7
- @layer components {
8
- .ui-Avatar {
9
- display: inline-flex;
10
- align-items: center;
11
- justify-content: center;
12
- vertical-align: middle;
13
- -webkit-user-select: none;
14
- -moz-user-select: none;
15
- user-select: none;
16
- width: var(--avatar-size);
17
- height: var(--avatar-size);
18
- flex-shrink: 0;
19
- border-radius: var(--avatar-border-radius);
20
- letter-spacing: var(--avatar-letter-spacing);
21
- }
22
- }
23
- .ui-Avatar > img {
24
- width: 100%;
25
- height: 100%;
26
- -o-object-fit: cover;
27
- object-fit: cover;
28
- border-radius: inherit;
29
- }
30
- .ui-Avatar > span {
31
- font-family: var(--default-font-family);
32
- font-weight: var(--font-weight-medium);
33
- font-style: normal;
34
- z-index: 0;
35
- width: 100%;
36
- height: 100%;
37
- display: flex;
38
- align-items: center;
39
- justify-content: center;
40
- line-height: 1;
41
- border-radius: inherit;
42
- text-transform: uppercase;
43
- }
44
- .ui-Avatar > :where(span.r-count-1) {
45
- font-size: var(--avatar-fallback-one-letter-font-size);
46
- }
47
- .ui-Avatar > :where(span.r-count-2) {
48
- font-size: var(--avatar-fallback-two-letters-font-size, var(--avatar-fallback-one-letter-font-size));
49
- }
50
- .ui-Avatar:where(.r-size-1) {
51
- --avatar-size: var(--space-5);
52
- --avatar-fallback-one-letter-font-size: var(--font-size-2);
53
- --avatar-fallback-two-letters-font-size: var(--font-size-1);
54
- --avatar-ring-width: 1px;
55
- --avatar-ring-offset: 1px;
56
- --avatar-border-radius: max(var(--radius-2), var(--radius-full));
57
- --avatar-letter-spacing: var(--letter-spacing-1);
58
- }
59
- .ui-Avatar:where(.r-size-2) {
60
- --avatar-size: var(--space-6);
61
- --avatar-fallback-one-letter-font-size: var(--font-size-3);
62
- --avatar-fallback-two-letters-font-size: var(--font-size-2);
63
- --avatar-ring-width: 2px;
64
- --avatar-ring-offset: 2px;
65
- --avatar-border-radius: max(var(--radius-2), var(--radius-full));
66
- --avatar-letter-spacing: var(--letter-spacing-2);
67
- }
68
- .ui-Avatar:where(.r-size-3) {
69
- --avatar-size: var(--space-7);
70
- --avatar-fallback-one-letter-font-size: var(--font-size-4);
71
- --avatar-fallback-two-letters-font-size: var(--font-size-3);
72
- --avatar-ring-width: 2px;
73
- --avatar-ring-offset: 2px;
74
- --avatar-border-radius: max(var(--radius-3), var(--radius-full));
75
- --avatar-letter-spacing: var(--letter-spacing-3);
76
- }
77
- .ui-Avatar:where(.r-size-4) {
78
- --avatar-size: var(--space-8);
79
- --avatar-fallback-one-letter-font-size: var(--font-size-5);
80
- --avatar-fallback-two-letters-font-size: var(--font-size-4);
81
- --avatar-ring-width: 2px;
82
- --avatar-ring-offset: 2px;
83
- --avatar-border-radius: max(var(--radius-3), var(--radius-full));
84
- --avatar-letter-spacing: var(--letter-spacing-4);
85
- }
86
- .ui-Avatar:where(.r-size-5) {
87
- --avatar-size: var(--space-9);
88
- --avatar-fallback-one-letter-font-size: var(--font-size-6);
89
- --avatar-ring-width: 3px;
90
- --avatar-ring-offset: 2px;
91
- --avatar-border-radius: max(var(--radius-4), var(--radius-full));
92
- --avatar-letter-spacing: var(--letter-spacing-6);
93
- }
94
- .ui-Avatar:where(.r-size-6) {
95
- --avatar-size: 80px;
96
- --avatar-fallback-one-letter-font-size: var(--font-size-7);
97
- --avatar-ring-width: 3px;
98
- --avatar-ring-offset: 3px;
99
- --avatar-border-radius: max(var(--radius-5), var(--radius-full));
100
- --avatar-letter-spacing: var(--letter-spacing-7);
101
- }
102
- .ui-Avatar:where(.r-size-7) {
103
- --avatar-size: 96px;
104
- --avatar-fallback-one-letter-font-size: var(--font-size-7);
105
- --avatar-ring-width: 3px;
106
- --avatar-ring-offset: 3px;
107
- --avatar-border-radius: max(var(--radius-5), var(--radius-full));
108
- --avatar-letter-spacing: var(--letter-spacing-7);
109
- }
110
- .ui-Avatar:where(.r-size-8) {
111
- --avatar-size: 128px;
112
- --avatar-fallback-one-letter-font-size: var(--font-size-8);
113
- --avatar-ring-width: 4px;
114
- --avatar-ring-offset: 3px;
115
- --avatar-border-radius: max(var(--radius-6), var(--radius-full));
116
- --avatar-letter-spacing: var(--letter-spacing-8);
117
- }
118
- .ui-Avatar:where(.r-size-9) {
119
- --avatar-size: 160px;
120
- --avatar-fallback-one-letter-font-size: var(--font-size-9);
121
- --avatar-ring-width: 4px;
122
- --avatar-ring-offset: 4px;
123
- --avatar-border-radius: max(var(--radius-6), var(--radius-full));
124
- --avatar-letter-spacing: var(--letter-spacing-9);
125
- }
126
- .ui-Avatar:where(.r-variant-ring) {
127
- outline-color: var(--accent-9);
128
- outline-width: var(--avatar-ring-width);
129
- outline-offset: var(--avatar-ring-offset);
130
- outline-style: solid;
131
- }
132
- .ui-Avatar:where(.r-variant-ring) > span,
133
- .ui-Avatar:where(.r-variant-solid) > span {
134
- background-color: var(--accent-9);
135
- color: var(--accent-contrast);
136
- }
137
- .ui-Avatar:where(.r-variant-soft) > span {
138
- background-color: var(--accent-a3);
139
- color: var(--accent-a11);
140
- }
141
- .ui-Avatar:where(.r-variant-outline) > span {
142
- box-shadow: inset 0 0 1px var(--accent-a8);
143
- color: var(--accent-a11);
144
- }
145
- .ui-Avatar:where(.r-variant-surface) > span {
146
- background-color: var(--accent-surface);
147
- background-color: var(--accent-a3);
148
- color: var(--accent-a11);
149
- box-shadow: inset 0 0 1px var(--accent-a8);
150
- }
151
-
152
- @layer components {
153
- .ui-Badge {
154
- display: inline-flex;
155
- align-items: center;
156
- white-space: nowrap;
157
- font-weight: var(--font-weight-medium);
158
- font-style: normal;
159
- flex-shrink: 0;
160
- line-height: 1;
161
- height: -moz-fit-content;
162
- height: fit-content;
163
- width: -moz-fit-content;
164
- width: fit-content;
165
- }
166
- }
167
- .ui-Badge:where(.r-size-1) {
168
- font-size: var(--font-size-1);
169
- line-height: var(--line-height-1);
170
- letter-spacing: var(--letter-spacing-1);
171
- padding: calc(var(--space-1) * 0.5) calc(var(--space-1) * 1.5);
172
- gap: calc(var(--space-1) * 1.5);
173
- border-radius: max(var(--radius-1), var(--radius-full));
174
- }
175
- .ui-Badge:where(.r-size-1):where([data-radius="full"]) {
176
- padding: calc(var(--space-1) * 0.5) var(--space-2);
177
- }
178
- .ui-Badge:where(.r-size-2) {
179
- font-size: var(--font-size-1);
180
- line-height: var(--line-height-1);
181
- letter-spacing: var(--letter-spacing-1);
182
- padding: var(--space-1) var(--space-2);
183
- gap: calc(var(--space-1) * 1.5);
184
- border-radius: max(var(--radius-2), var(--radius-full));
185
- }
186
- .ui-Badge:where(.r-size-2):where([data-radius="full"]) {
187
- padding: var(--space-1) calc(var(--space-2) * 1.25);
188
- }
189
- .ui-Badge:where(.r-size-3) {
190
- font-size: var(--font-size-2);
191
- line-height: var(--line-height-2);
192
- letter-spacing: var(--letter-spacing-2);
193
- padding: var(--space-1) calc(var(--space-2) * 1.25);
194
- gap: var(--space-2);
195
- border-radius: max(var(--radius-2), var(--radius-full));
196
- }
197
- .ui-Badge:where(.r-size-3):where([data-radius="full"]) {
198
- padding: var(--space-1) calc(var(--space-2) * 1.5);
199
- }
200
- .ui-Badge:where(.r-variant-solid) {
201
- background-color: var(--accent-9);
202
- color: var(--accent-contrast);
203
- }
204
- .ui-Badge:where(.r-variant-solid):where(.r-high-contrast) {
205
- background-color: var(--accent-12);
206
- color: var(--gray-1);
207
- }
208
- .ui-Badge:where(.r-variant-solid)::-moz-selection {
209
- background-color: var(--accent-7);
210
- color: var(--accent-12);
211
- }
212
- .ui-Badge:where(.r-variant-solid)::selection {
213
- background-color: var(--accent-7);
214
- color: var(--accent-12);
215
- }
216
- .ui-Badge:where(.r-variant-soft) {
217
- background-color: var(--accent-a3);
218
- color: var(--accent-a11);
219
- }
220
- .ui-Badge:where(.r-variant-soft):where(.r-high-contrast) {
221
- color: var(--accent-12);
222
- }
223
- .ui-Badge:where(.r-variant-surface) {
224
- background-color: var(--accent-surface);
225
- box-shadow: inset 0 0 0 1px var(--accent-a6);
226
- color: var(--accent-a11);
227
- }
228
- .ui-Badge:where(.r-variant-surface):where(.r-high-contrast) {
229
- color: var(--accent-12);
230
- }
231
- .ui-Badge:where(.r-variant-outline) {
232
- box-shadow: inset 0 0 0 1px var(--accent-a8);
233
- color: var(--accent-a11);
234
- }
235
- .ui-Badge:where(.r-variant-outline):where(.r-high-contrast) {
236
- box-shadow: inset 0 0 0 1px var(--accent-a7), inset 0 0 0 1px var(--gray-a11);
237
- color: var(--accent-12);
238
- }
239
-
240
- .ui-Card:where(.r-size-1) {
241
- --card-padding: var(--space-3);
242
- --card-border-radius: max(var(--radius-4), var(--radius-full));
243
- }
244
- .ui-Card:where(.r-size-2) {
245
- --card-padding: var(--space-4);
246
- --card-border-radius: max(var(--radius-4), var(--radius-full));
247
- }
248
- .ui-Card:where(.r-size-3) {
249
- --card-padding: var(--space-5);
250
- --card-border-radius: max(var(--radius-5), var(--radius-full));
251
- }
252
- .ui-Card:where(.r-size-4) {
253
- --card-padding: var(--space-6);
254
- --card-border-radius: max(var(--radius-5), var(--radius-full));
255
- }
256
- .ui-Card:where(.r-size-5) {
257
- --card-padding: var(--space-8);
258
- --card-border-radius: max(var(--radius-6), var(--radius-full));
259
- }
260
- .ui-Card:where(.r-variant-soft) {
261
- border-color: var(--gray-2);
262
- background-color: var(--gray-2);
263
- }
264
- .ui-Card:where(.r-variant-soft):where(:-moz-any-link, button, label):where(:hover) {
265
- border-color: var(--gray-a5);
266
- }
267
- .ui-Card:where(.r-variant-soft):where(:any-link, button, label):where(:hover) {
268
- border-color: var(--gray-a5);
269
- }
270
- @layer components {
271
- .ui-Button {
272
- display: inline-flex;
273
- align-items: center;
274
- justify-content: center;
275
- flex-shrink: 0;
276
- -webkit-user-select: none;
277
- -moz-user-select: none;
278
- user-select: none;
279
- vertical-align: top;
280
- font-style: normal;
281
- font-weight: var(--button-font-weight);
282
- text-align: center;
283
- white-space: nowrap;
284
- height: var(--button-height);
285
- padding-left: var(--button-padding-x);
286
- padding-right: var(--button-padding-x);
287
- gap: var(--button-gap);
288
- font-size: var(--button-font-size);
289
- line-height: var(--button-line-height);
290
- letter-spacing: var(--button-letter-spacing);
291
- border-radius: var(--button-radius);
292
- }
293
- }
294
- .ui-Button:where(.r-variant-ghost) {
295
- --button-font-weight: var(--font-weight-regular);
296
- }
297
- .ui-Button:where(:not(.r-variant-ghost)) {
298
- --button-font-weight: var(--font-weight-medium);
299
- }
300
- .ui-Button:where(:disabled, [data-disabled]) {
301
- cursor: not-allowed;
302
- }
303
- .ui-Button:where(.r-size-1) {
304
- --button-gap: var(--space-1);
305
- --button-font-size: var(--font-size-1);
306
- --button-line-height: var(--line-height-1);
307
- --button-letter-spacing: var(--letter-spacing-1);
308
- --button-radius: max(var(--radius-1), var(--radius-full));
309
- --button-height: var(--space-5);
310
- --button-padding-x: var(--space-2);
311
- }
312
- .ui-Button:where(.r-size-1):where(.r-variant-ghost) {
313
- --button-ghost-padding-y: var(--space-1);
314
- }
315
- .ui-Button:where(.r-size-2) {
316
- --button-gap: var(--space-2);
317
- --button-font-size: var(--font-size-2);
318
- --button-line-height: var(--line-height-2);
319
- --button-letter-spacing: var(--letter-spacing-2);
320
- --button-radius: max(var(--radius-2), var(--radius-full));
321
- --button-height: var(--space-6);
322
- --button-padding-x: var(--space-3);
323
- }
324
- .ui-Button:where(.r-size-2):where(.r-variant-ghost) {
325
- --button-gap: var(--space-1);
326
- --button-padding-x: var(--space-2);
327
- --button-ghost-padding-y: var(--space-1);
328
- }
329
- .ui-Button:where(.r-size-3) {
330
- --button-gap: var(--space-3);
331
- --button-font-size: var(--font-size-3);
332
- --button-line-height: var(--line-height-3);
333
- --button-letter-spacing: var(--letter-spacing-3);
334
- --button-radius: max(var(--radius-3), var(--radius-full));
335
- --button-height: var(--space-7);
336
- --button-padding-x: var(--space-4);
337
- }
338
- .ui-Button:where(.r-size-3):where(.r-variant-ghost) {
339
- --button-gap: var(--space-2);
340
- --button-padding-x: var(--space-3);
341
- --button-ghost-padding-y: calc(var(--space-1) * 1.5);
342
- }
343
- .ui-Button:where(.r-size-4) {
344
- --button-gap: var(--space-3);
345
- --button-font-size: var(--font-size-4);
346
- --button-line-height: var(--line-height-4);
347
- --button-letter-spacing: var(--letter-spacing-4);
348
- --button-radius: max(var(--radius-4), var(--radius-full));
349
- --button-height: var(--space-8);
350
- --button-padding-x: var(--space-5);
351
- }
352
- .ui-Button:where(.r-size-4):where(.r-variant-ghost) {
353
- --button-gap: var(--space-2);
354
- --button-padding-x: var(--space-4);
355
- --button-ghost-padding-y: var(--space-2);
356
- }
357
-
358
- /* solid */
359
- .ui-root {
360
- --button-solid-active-filter: brightness(0.92) saturate(1.1);
361
- --button-solid-high-contrast-hover-filter: contrast(0.88) saturate(1.1) brightness(1.1);
362
- }
363
- :is(.dark, .dark-theme) .ui-root {
364
- --button-solid-active-filter: brightness(1.08);
365
- --button-solid-high-contrast-hover-filter: contrast(0.88) saturate(1.3) brightness(1.18);
366
- }
367
- .ui-Button:where(.r-variant-solid) {
368
- background-color: var(--accent-9);
369
- color: var(--accent-contrast);
370
- }
371
- @media (hover: hover) {
372
- .ui-Button:where(.r-variant-solid):where(:hover) {
373
- background-color: var(--accent-10);
374
- }
375
- }
376
- .ui-Button:where(.r-variant-solid):where(:focus-visible) {
377
- outline: 2px solid var(--focus-8);
378
- outline-offset: 2px;
379
- }
380
- .ui-Button:where(.r-variant-solid):where(:active) {
381
- background-color: var(--accent-10);
382
- filter: var(--button-solid-active-filter);
383
- }
384
- .ui-Button:where(.r-variant-solid):where(.r-high-contrast) {
385
- background-color: var(--accent-12);
386
- color: var(--gray-1);
387
- }
388
- @media (hover: hover) {
389
- .ui-Button:where(.r-variant-solid):where(.r-high-contrast:hover) {
390
- background-color: var(--accent-12);
391
- filter: var(--button-solid-high-contrast-hover-filter);
392
- }
393
- }
394
- .ui-Button:where(.r-variant-solid):where(:disabled, [data-disabled]) {
395
- color: var(--gray-a8);
396
- background-color: var(--gray-a3);
397
- outline: none;
398
- filter: none;
399
- }
400
-
401
- /* soft / ghost */
402
- .ui-Button:where(.r-variant-soft, .r-variant-ghost) {
403
- color: var(--accent-a11);
404
- }
405
- .ui-Button:where(.r-variant-soft, .r-variant-ghost):where(.r-high-contrast) {
406
- color: var(--accent-12);
407
- }
408
- .ui-Button:where(.r-variant-soft) {
409
- background-color: var(--accent-a3);
410
- }
411
- @media (hover: hover) {
412
- .ui-Button:where(.r-variant-soft):where(:hover) {
413
- background-color: var(--accent-a4);
414
- }
415
- }
416
- .ui-Button:where(.r-variant-soft):where(:focus-visible) {
417
- outline: 2px solid var(--accent-8);
418
- outline-offset: -1px;
419
- }
420
- .ui-Button:where(.r-variant-soft):where(:active) {
421
- background-color: var(--accent-a5);
422
- }
423
- .ui-Button:where(.r-variant-soft):where(:disabled, [data-disabled]) {
424
- color: var(--gray-a8);
425
- background-color: var(--gray-a3);
426
- }
427
- .ui-Button:where(.r-variant-ghost) {
428
- padding: var(--button-ghost-padding-y) var(--button-padding-x);
429
- }
430
- @media (hover: hover) {
431
- .ui-Button:where(.r-variant-ghost):where(:hover) {
432
- background-color: var(--accent-a3);
433
- }
434
- }
435
- .ui-Button:where(.r-variant-ghost):where(:focus-visible) {
436
- outline: 2px solid var(--focus-8);
437
- outline-offset: -1px;
438
- }
439
- .ui-Button:where(.r-variant-ghost):where(:active) {
440
- background-color: var(--accent-a4);
441
- }
442
- .ui-Button:where(.r-variant-ghost):where(:disabled, [data-disabled]) {
443
- color: var(--gray-a8);
444
- background-color: transparent;
445
- }
446
-
447
- /* classic */
448
- .ui-Button:where(.r-variant-classic) {
449
- box-shadow: var(--shadow-2);
450
- background-color: var(--color-background);
451
- }
452
- .ui-Button:where(.r-variant-classic):where(.r-high-contrast) {
453
- color: var(--gray-12);
454
- box-shadow: 0 0 0 1px var(--gray-a6), 0 1px 1px 0 var(--black-a4), 0 2px 1px -1px var(--black-a2), 0 1px 3px 0 var(--black-a1);
455
- }
456
- @media (hover: hover) {
457
- .ui-Button:where(.r-variant-classic):where(:hover) {
458
- color: var(--accent-a11);
459
- background-color: var(--gray-a2);
460
- }
461
- .ui-Button:where(.r-variant-classic):where(.r-high-contrast):where(:hover) {
462
- color: var(--accent-12);
463
- }
464
- }
465
- .ui-Button:where(.r-variant-classic):where(:focus-visible) {
466
- outline: 2px solid var(--focus-8);
467
- outline-offset: 2px;
468
- }
469
- .ui-Button:where(.r-variant-classic):where(:active:not(:disabled, [data-disabled])) {
470
- box-shadow: var(--shadow-1);
471
- }
472
- .ui-Button:where(.r-variant-classic):where(:disabled, [data-disabled]) {
473
- color: var(--gray-a10);
474
- background-color: var(--gray-a2);
475
- }
476
-
477
- /* outline */
478
- .ui-Button:where(.r-variant-outline) {
479
- box-shadow: inset 0 0 0 1px var(--accent-a8);
480
- color: var(--accent-a11);
481
- }
482
- @media (hover: hover) {
483
- .ui-Button:where(.r-variant-outline):where(:hover) {
484
- background-color: var(--accent-a2);
485
- }
486
- }
487
- .ui-Button:where(.r-variant-outline):where(:focus-visible) {
488
- outline: 2px solid var(--focus-8);
489
- outline-offset: -1px;
490
- }
491
- .ui-Button:where(.r-variant-outline):where(.r-high-contrast) {
492
- box-shadow: inset 0 0 0 1px var(--accent-a7), inset 0 0 0 1px var(--gray-a11);
493
- color: var(--accent-12);
494
- }
495
- .ui-Button:where(.r-variant-outline):where(:active) {
496
- background-color: var(--accent-a4);
497
- }
498
- .ui-Button:where(.r-variant-outline):where(:disabled, [data-disabled]) {
499
- color: var(--gray-a8);
500
- box-shadow: inset 0 0 0 1px var(--gray-a7);
501
- background-color: transparent;
502
- }
503
-
504
- /* surface */
505
- .ui-Button:where(.r-variant-surface) {
506
- background-color: var(--accent-surface);
507
- box-shadow: inset 0 0 0 1px var(--accent-a7);
508
- color: var(--accent-a11);
509
- }
510
- @media (hover: hover) {
511
- .ui-Button:where(.r-variant-surface):where(:hover) {
512
- box-shadow: inset 0 0 0 1px var(--accent-a8);
513
- }
514
- }
515
- .ui-Button:where(.r-variant-surface):where(:focus-visible) {
516
- outline: 2px solid var(--focus-8);
517
- outline-offset: -1px;
518
- }
519
- .ui-Button:where(.r-variant-surface):where(.r-high-contrast) {
520
- color: var(--accent-12);
521
- }
522
- .ui-Button:where(.r-variant-surface):where(:active) {
523
- background-color: var(--accent-a4);
524
- }
525
- .ui-Button:where(.r-variant-surface):where(:disabled, [data-disabled]) {
526
- color: var(--gray-a8);
527
- box-shadow: inset 0 0 0 1px var(--gray-a6);
528
- background-color: var(--gray-a2);
529
- }
530
-
531
- .ui-Button.ui-IconButton {
532
- height: var(--button-height);
533
- width: var(--button-height);
534
- padding: 0;
535
- }
536
-
537
- .ui-Button.ui-CloseButton {
538
- height: var(--button-height);
539
- width: var(--button-height);
540
- padding: 0;
541
- }
542
-
543
- .ui-root {
544
- --scrollarea-scrollbar-horizontal-margin-top: var(--space-1);
545
- --scrollarea-scrollbar-horizontal-margin-bottom: var(--space-1);
546
- --scrollarea-scrollbar-horizontal-margin-left: var(--space-1);
547
- --scrollarea-scrollbar-horizontal-margin-right: var(--space-1);
548
- --scrollarea-scrollbar-vertical-margin-top: var(--space-1);
549
- --scrollarea-scrollbar-vertical-margin-bottom: var(--space-1);
550
- --scrollarea-scrollbar-vertical-margin-left: var(--space-1);
551
- --scrollarea-scrollbar-vertical-margin-right: var(--space-1);
552
- }
553
- @layer components {
554
- .ui-ScrollArea {
555
- display: flex;
556
- flex-direction: column;
557
- overflow: hidden;
558
- width: 100%;
559
- height: 100%;
560
- }
561
- }
562
- .ui-ScrollAreaViewport {
563
- display: flex;
564
- flex-direction: column;
565
- width: 100%;
566
- height: 100%;
567
- }
568
- .ui-ScrollAreaViewport > div {
569
- display: block;
570
- min-width: -moz-fit-content;
571
- min-width: fit-content;
572
- width: 100%;
573
- flex-grow: 1;
574
- }
575
- .ui-ScrollAreaViewport:where(:focus-visible) + :where(.ui-ScrollAreaViewportFocusRing) {
576
- position: absolute;
577
- inset: 0;
578
- pointer-events: none;
579
- outline: 2px solid var(--focus-8);
580
- outline-offset: -2px;
581
- }
582
- .ui-ScrollAreaViewport:where(:has(.ui-ScrollAreaScrollbar[data-orientation='horizontal'])) {
583
- overscroll-behavior-x: contain;
584
- }
585
- .ui-ScrollAreaScrollbar {
586
- display: flex;
587
- -webkit-user-select: none;
588
- -moz-user-select: none;
589
- user-select: none;
590
- touch-action: none;
591
- }
592
- .ui-ScrollAreaScrollbar:where([data-orientation='vertical']) {
593
- flex-direction: column;
594
- width: var(--scrollarea-scrollbar-size);
595
- }
596
- .ui-ScrollAreaScrollbar:where([data-orientation='horizontal']) {
597
- flex-direction: row;
598
- height: var(--scrollarea-scrollbar-size);
599
- }
600
- .ui-ScrollAreaThumb {
601
- position: relative;
602
- }
603
- .ui-ScrollAreaThumb::before {
604
- content: '';
605
- position: absolute;
606
- top: 50%;
607
- left: 50%;
608
- transform: translate(-50%, -50%);
609
- width: 100%;
610
- height: 100%;
611
- min-width: var(--space-4);
612
- min-height: var(--space-4);
613
- }
614
- .ui-ScrollAreaScrollbar:where([data-size="1"]) {
615
- --scrollarea-scrollbar-size: var(--space-1);
616
- --scrollarea-scrollbar-border-radius: max(var(--radius-1), var(--radius-full));
617
- }
618
- .ui-ScrollAreaScrollbar:where([data-size="2"]) {
619
- --scrollarea-scrollbar-size: var(--space-2);
620
- --scrollarea-scrollbar-border-radius: max(var(--radius-1), var(--radius-full));
621
- }
622
- .ui-ScrollAreaScrollbar:where([data-size="3"]) {
623
- --scrollarea-scrollbar-size: var(--space-3);
624
- --scrollarea-scrollbar-border-radius: max(var(--radius-1), var(--radius-full));
625
- }
626
- .ui-ScrollAreaScrollbar {
627
- background-color: var(--gray-a3);
628
- border-radius: var(--scrollarea-scrollbar-border-radius);
629
- animation-duration: 120ms;
630
- animation-timing-function: ease-out;
631
- }
632
- .ui-ScrollAreaScrollbar:where([data-state='visible']) {
633
- animation-name: ui-fade-in;
634
- }
635
- .ui-ScrollAreaScrollbar:where([data-state='hidden']) {
636
- animation-name: ui-fade-out;
637
- }
638
- .ui-ScrollAreaScrollbar:where([data-orientation='horizontal']) {
639
- margin-top: var(--scrollarea-scrollbar-horizontal-margin-top);
640
- margin-bottom: var(--scrollarea-scrollbar-horizontal-margin-bottom);
641
- margin-left: var(--scrollarea-scrollbar-horizontal-margin-left);
642
- margin-right: var(--scrollarea-scrollbar-horizontal-margin-right);
643
- }
644
- .ui-ScrollAreaScrollbar:where([data-orientation='vertical']) {
645
- margin-top: var(--scrollarea-scrollbar-vertical-margin-top);
646
- margin-bottom: var(--scrollarea-scrollbar-vertical-margin-bottom);
647
- margin-left: var(--scrollarea-scrollbar-vertical-margin-left);
648
- margin-right: var(--scrollarea-scrollbar-vertical-margin-right);
649
- }
650
- .ui-ScrollAreaThumb {
651
- background-color: var(--gray-a8);
652
- border-radius: inherit;
653
- transition: background-color 100ms;
654
- }
655
- .ui-ScrollAreaThumb:hover {
656
- background-color: var(--gray-a9);
657
- }
658
-
659
- .ui-Tooltip {
660
- box-sizing: border-box;
661
- padding: var(--space-1) var(--space-2);
662
- border-radius: var(--radius-2);
663
- transform-origin: var(--reka-tooltip-content-transform-origin);
664
- animation-duration: 140ms;
665
- animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
666
- background-color: var(--accent-11);
667
- }
668
- @media (prefers-reduced-motion: no-preference) {
669
- .ui-Tooltip:where([data-state='delayed-open']):where([data-side='top']) {
670
- animation-name: ui-slide-from-top, ui-fade-in;
671
- }
672
- .ui-Tooltip:where([data-state='delayed-open']):where([data-side='bottom']) {
673
- animation-name: ui-slide-from-bottom, ui-fade-in;
674
- }
675
- .ui-Tooltip:where([data-state='delayed-open']):where([data-side='left']) {
676
- animation-name: ui-slide-from-left, ui-fade-in;
677
- }
678
- .ui-Tooltip:where([data-state='delayed-open']):where([data-side='right']) {
679
- animation-name: ui-slide-from-right, ui-fade-in;
680
- }
681
- }
682
- .ui-TooltipText {
683
- color: var(--gray-1);
684
- -webkit-user-select: none;
685
- -moz-user-select: none;
686
- user-select: none;
687
- cursor: default;
688
- font-size: var(--font-size-1);
689
- line-height: var(--line-height-1);
690
- letter-spacing: var(--letter-spacing-1);
691
- }
692
- .ui-TooltipArrow {
693
- fill: var(--accent-11);
694
- }
695
-
696
- /* special handle for gray color */
697
- .ui-Tooltip:where([data-accent-color="gray"]) {
698
- background-color: var(--gray-12);
699
- }
700
- .ui-Tooltip:where([data-accent-color="gray"]) :where(.ui-TooltipArrow) {
701
- fill: var(--gray-12);
702
- }
703
-
704
- @layer components {
705
- .ui-DialogCloseButton {
706
- position: absolute;
707
- top: calc(var(--dialog-popup-padding) / 2);
708
- right: calc(var(--dialog-popup-padding) / 2);
709
- }
710
- }
711
-
712
- .ui-DialogTitle {
713
- font-size: var(--font-size-4);
714
- font-weight: var(--font-weight-semibold);
715
- line-height: var(--line-height-4);
716
- }
717
-
718
- .ui-DialogDescription {
719
- font-size: var(--font-size-3);
720
- line-height: var(--line-height-2);
721
- color: var(--gray-11);
722
- }
723
- .ui-DialogTitle + .ui-DialogDescription {
724
- margin-top: var(--space-2);
725
- }
726
- .ui-DialogOverlay {
727
- position: fixed;
728
- inset: 0;
729
- }
730
- .ui-DialogOverlay::before {
731
- position: fixed;
732
- content: '';
733
- inset: 0;
734
- background-color: var(--color-overlay);
735
- }
736
- .ui-DialogWrapper {
737
- display: flex;
738
- overflow: hidden;
739
- position: absolute;
740
- inset: 0;
741
- }
742
- .ui-DialogContainer {
743
- display: flex;
744
- flex-direction: column;
745
- flex-grow: 1;
746
- align-items: center;
747
- justify-content: flex-end;
748
- width: 100%;
749
- box-sizing: border-box;
750
- padding-top: var(--space-6);
751
- }
752
- @layer components {
753
- .ui-DialogPopup {
754
- width: 100%;
755
- max-height: calc(100vh - var(--space-6) * 2);
756
- position: relative;
757
- box-sizing: border-box;
758
- overflow: auto;
759
- text-align: left;
760
- box-sizing: border-box;
761
- background-color: var(--color-panel-solid);
762
- outline: none;
763
- border-top-left-radius: var(--dialog-popup-radius);
764
- border-top-right-radius: var(--dialog-popup-radius);
765
- max-width: var(--dialog-popup-max-width);
766
- max-height: var(--dialog-popup-max-height);
767
- padding: var(--dialog-popup-padding);
768
- }
769
- }
770
- .ui-DialogPopup:where(.r-size-1) {
771
- --dialog-popup-padding: var(--space-4);
772
- --dialog-popup-radius: var(--radius-4);
773
- --dialog-popup-max-width: 450px;
774
- --dialog-popup-max-height: calc(100vh - 100px);
775
- }
776
- .ui-DialogPopup:where(.r-size-2) {
777
- --dialog-popup-padding: var(--space-4);
778
- --dialog-popup-radius: var(--radius-4);
779
- --dialog-popup-max-width: 600px;
780
- --dialog-popup-max-height: calc(100vh - 100px);
781
- }
782
- .ui-DialogPopup:where(.r-size-3) {
783
- --dialog-popup-padding: var(--space-5);
784
- --dialog-popup-radius: var(--radius-5);
785
- --dialog-popup-max-width: 860px;
786
- --dialog-popup-max-height: calc(100vh - 100px);
787
- }
788
- .ui-DialogPopup:where(.r-size-4) {
789
- --dialog-popup-padding: var(--space-5);
790
- --dialog-popup-radius: var(--radius-5);
791
- --dialog-popup-max-width: 1200px;
792
- --dialog-popup-max-height: calc(100vh - 100px);
793
- }
794
- .ui-DialogPopup:where(.r-size-5) {
795
- --dialog-popup-padding: var(--space-6);
796
- --dialog-popup-radius: var(--radius-5);
797
- --dialog-popup-max-width: none;
798
- --dialog-popup-max-height: calc(100vh - 64px);
799
- }
800
- @media (min-width: 450px) {
801
- .ui-DialogContainer {
802
- justify-content: center;
803
- padding-bottom: max(var(--space-6), 6vh);
804
- padding-left: var(--space-4);
805
- padding-right: var(--space-4);
806
- }
807
- @layer components {
808
- .ui-DialogPopup {
809
- box-shadow: var(--shadow-6);
810
- border-bottom-left-radius: var(--dialog-popup-radius);
811
- border-bottom-right-radius: var(--dialog-popup-radius);
812
- }
813
- }
814
- }
815
- @media (prefers-reduced-motion: no-preference) {
816
- @keyframes ui-dialog-overlay-no-op {
817
- from {
818
- opacity: 1;
819
- }
820
- to {
821
- opacity: 1;
822
- }
823
- }
824
- @keyframes ui-dialog-content-show {
825
- from {
826
- opacity: 0.1;
827
- transform: translate3d(0, var(--space-6), 0);
828
- }
829
- to {
830
- opacity: 1;
831
- transform: translate3d(0, 0, 0);
832
- }
833
- }
834
- @keyframes ui-dialog-content-hide {
835
- from {
836
- opacity: 1;
837
- transform: translate3d(0, 0, 0);
838
- }
839
- to {
840
- opacity: 1;
841
- transform: translate3d(0, var(--space-5), 0);
842
- }
843
- }
844
- .ui-DialogOverlay[data-state='closed'] {
845
- animation: ui-dialog-overlay-no-op 160ms cubic-bezier(0.16, 1, 0.3, 1);
846
- }
847
- .ui-DialogOverlay[data-state='open']::before {
848
- animation: ui-fade-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
849
- }
850
- .ui-DialogOverlay[data-state='closed']::before {
851
- animation: ui-fade-out 160ms cubic-bezier(0.16, 1, 0.3, 1);
852
- }
853
- .ui-DialogPopup:where([data-state="open"]) {
854
- animation: ui-dialog-content-show 200ms cubic-bezier(0.16, 1, 0.3, 1);
855
- }
856
- .ui-DialogPopup:where([data-state="closed"]) {
857
- animation: ui-dialog-content-hide 100ms linear;
858
- }
859
- }
860
-
861
- .ui-AlertPopup {
862
- --dialog-popup-radius: var(--radius-4);
863
- --dialog-popup-max-width: 450px;
864
- }
865
- @media (prefers-reduced-motion: no-preference) {
866
- .ui-PopperContent {
867
- animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
868
- }
869
- .ui-PopperContent:where([data-state='open']) {
870
- animation-duration: 160ms;
871
- }
872
- .ui-PopperContent:where([data-state='open']):where([data-side='top']) {
873
- animation-name: ui-slide-from-top, ui-fade-in;
874
- }
875
- .ui-PopperContent:where([data-state='open']):where([data-side='bottom']) {
876
- animation-name: ui-slide-from-bottom, ui-fade-in;
877
- }
878
- .ui-PopperContent:where([data-state='open']):where([data-side='left']) {
879
- animation-name: ui-slide-from-left, ui-fade-in;
880
- }
881
- .ui-PopperContent:where([data-state='open']):where([data-side='right']) {
882
- animation-name: ui-slide-from-right, ui-fade-in;
883
- }
884
- .ui-PopperContent:where([data-state='closed']) {
885
- animation-duration: 100ms;
886
- }
887
- .ui-PopperContent:where([data-state='closed']):where([data-side='top']) {
888
- animation-name: ui-slide-from-top, ui-fade-out;
889
- }
890
- .ui-PopperContent:where([data-state='closed']):where([data-side='bottom']) {
891
- animation-name: ui-slide-from-bottom, ui-fade-out;
892
- }
893
- .ui-PopperContent:where([data-state='closed']):where([data-side='left']) {
894
- animation-name: ui-slide-from-left, ui-fade-out;
895
- }
896
- .ui-PopperContent:where([data-state='closed']):where([data-side='right']) {
897
- animation-name: ui-slide-from-right, ui-fade-out;
898
- }
899
- }
900
-
901
- .ui-MenuContent {
902
- --scrollarea-scrollbar-vertical-margin-top: var(--menu-content-padding);
903
- --scrollarea-scrollbar-vertical-margin-bottom: var(--menu-content-padding);
904
- --scrollarea-scrollbar-horizontal-margin-left: var(--menu-content-padding);
905
- --scrollarea-scrollbar-horizontal-margin-right: var(--menu-content-padding);
906
-
907
- display: flex;
908
- flex-direction: column;
909
- box-sizing: border-box;
910
- overflow: hidden;
911
- border-radius: var(--menu-content-border-radius);
912
- box-shadow: var(--shadow-5);
913
- background-color: var(--color-panel-solid);
914
- }
915
- .ui-MenuViewport {
916
- flex: 1 1 0%;
917
- display: flex;
918
- flex-direction: column;
919
- overflow: auto;
920
- padding: var(--menu-content-padding);
921
- box-sizing: border-box;
922
- }
923
- :where(.ui-MenuContent:has(.rt-ScrollAreaScrollbar[data-orientation='vertical'])) .ui-MenuViewport {
924
- padding-right: var(--space-3);
925
- }
926
- .ui-MenuContent:where(.r-size-1) {
927
- --menu-content-padding: var(--space-1);
928
- --menu-content-border-radius: var(--radius-3);
929
-
930
- --menu-item-padding-left: calc(var(--space-5) / 1.2);
931
- --menu-item-padding-right: var(--space-2);
932
- --menu-item-height: var(--space-5);
933
- --menu-item-font-size: var(--font-size-1);
934
- --menu-item-line-height: var(--line-height-1);
935
- --menu-item-letter-spacing: var(--letter-spacing-1);
936
- --menu-item-border-radius: var(--radius-1);
937
- }
938
- .ui-MenuContent:where(.r-size-2) {
939
- --menu-content-padding: var(--space-2);
940
- --menu-content-border-radius: var(--radius-4);
941
-
942
- --menu-item-padding-left: var(--space-3);
943
- --menu-item-padding-right: var(--space-3);
944
- --menu-item-height: var(--space-6);
945
- --menu-item-font-size: var(--font-size-2);
946
- --menu-item-line-height: var(--line-height-2);
947
- --menu-item-letter-spacing: var(--letter-spacing-2);
948
- --menu-item-border-radius: var(--radius-2);
949
- }
950
- .ui-MenuContent:where(.r-variant-solid) {
951
- --menu-item-highlighted-background-color: var(--accent-9);
952
- --menu-item-highlighted-text-color: var(--accent-contrast);
953
- }
954
- .ui-MenuContent:where(.r-variant-solid.r-high-contrast) {
955
- --menu-item-highlighted-background-color: var(--accent-12);
956
- --menu-item-highlighted-text-color: var(--accent-1);
957
- }
958
- .ui-MenuContent:where(.r-variant-soft) {
959
- --menu-item-highlighted-background-color: var(--accent-a4);
960
- --menu-item-highlighted-text-color: var(--accent-a11);
961
- }
962
-
963
- .ui-MenuItem {
964
- display: flex;
965
- align-items: center;
966
- gap: var(--space-2);
967
- height: var(--menu-item-height);
968
- padding-left: var(--menu-item-padding-left);
969
- padding-right: var(--menu-item-padding-right);
970
- box-sizing: border-box;
971
- position: relative;
972
- outline: none;
973
- scroll-margin: var(--menu-content-padding) 0;
974
- -webkit-user-select: none;
975
- -moz-user-select: none;
976
- user-select: none;
977
- cursor: default;
978
- color: var(--gray-12);
979
- font-size: var(--menu-item-font-size);
980
- line-height: var(--menu-item-line-height);
981
- letter-spacing: var(--menu-item-letter-spacing);
982
- border-radius: var(--menu-item-border-radius);
983
- }
984
- .ui-MenuShortcut {
985
- display: flex;
986
- align-items: center;
987
- margin-left: auto;
988
- padding-left: var(--space-4);
989
- color: var(--gray-a11);
990
- }
991
- .ui-MenuItem:where([data-accent-color]) {
992
- color: var(--accent-a11);
993
- }
994
- .ui-MenuItem:where([data-disabled]) {
995
- color: var(--gray-a8);
996
- }
997
- .ui-MenuItem:where([data-highlighted]) {
998
- background-color: var(--menu-item-highlighted-background-color);
999
- color: var(--menu-item-highlighted-text-color);
1000
- }
1001
- .ui-MenuItem:where([data-disabled], [data-highlighted]) :where(.ui-MenuShortcut) {
1002
- color: inherit;
1003
- }
1004
-
1005
- .ui-DropdownMenuSeparator {
1006
- height: 1px;
1007
- margin-top: var(--space-2);
1008
- margin-bottom: var(--space-2);
1009
- margin-left: var(--menu-item-padding-left);
1010
- margin-right: var(--menu-item-padding-right);
1011
- background-color: var(--gray-a6);
1012
- }
1013
-
1014
- @layer components {
1015
- .ui-PopoverPopup {
1016
- background-color: var(--color-panel-solid);
1017
- box-shadow: var(--shadow-5);
1018
- min-width: var(--reka-popover-trigger-width);
1019
- max-width: var(--reka-popover-content-available-width);
1020
- outline: 0;
1021
- overflow: auto;
1022
- position: relative;
1023
- box-sizing: border-box;
1024
- transform-origin: var(--reka-popover-content-transform-origin);
1025
- padding: var(--popover-popup-padding);
1026
- }
1027
- }
1028
- .ui-PopoverPopup:where(.r-size-1) {
1029
- border-radius: var(--radius-4);
1030
- --popover-popup-padding: var(--space-2);
1031
- }
1032
- .ui-PopoverPopup:where(.r-size-2) {
1033
- border-radius: var(--radius-5);
1034
- --popover-popup-padding: var(--space-4);
1035
- }
1036
-
1037
- .ui-NavigationMenuRoot {
1038
- position: relative;
1039
- z-index: 1;
1040
- }
1041
- .ui-NavigationMenuViewport {
1042
- position: absolute;
1043
- margin-top: 10px;
1044
- top: 100%;
1045
- left: var(--reka-navigation-menu-viewport-left);
1046
- height: var(--reka-navigation-menu-viewport-height);
1047
- background-color: white;
1048
- border-radius: var(--radius-4);
1049
- overflow: hidden;
1050
- box-shadow: var(--shadow-3);
1051
- width: 100%;
1052
- max-width: var(--reka-navigation-menu-viewport-width);
1053
- transition: width, height, 300ms ease;
1054
- transform-origin: top center;
1055
- }
1056
- .ui-NavigationMenuViewport:where([data-state="open"]) {
1057
- animation: navigation-menu-viewport-scale-in 200ms ease;
1058
- }
1059
- .ui-NavigationMenuViewport:where([data-state="closed"]) {
1060
- animation: navigation-menu-viewport-scale-out 200ms ease;
1061
- }
1062
- @keyframes navigation-menu-viewport-scale-in {
1063
- from {
1064
- opacity: 0;
1065
- transform: rotateX(-30deg) scale(0.9);
1066
- }
1067
- to {
1068
- opacity: 1;
1069
- transform: rotateX(0deg) scale(1);
1070
- }
1071
- }
1072
- @keyframes navigation-menu-viewport-scale-out {
1073
- from {
1074
- opacity: 1;
1075
- transform: rotateX(0deg) scale(1);
1076
- }
1077
- to {
1078
- opacity: 0;
1079
- transform: rotateX(-10deg) scale(0.95);
1080
- }
1081
- }
1082
-
1083
- @layer components {
1084
- .ui-NavigationMenuList {
1085
- display: flex;
1086
- gap: var(--navigation-menu-gap);
1087
- }
1088
- }
1089
- .ui-NavigationMenuList:where(.r-size-1) {
1090
- --navigation-menu-gap: calc(var(--space-1) / 2);
1091
- --navigation-menu-height: var(--space-5);
1092
- --navigation-menu-padding-x: var(--space-2);
1093
- --navigation-menu-font-size: var(--font-size-1);
1094
- --navigation-menu-line-height: var(--line-height-1);
1095
- --navigation-menu-letter-spacing: var(--letter-spacing-1);
1096
- --navigation-menu-radius: max(var(--radius-1), var(--radius-full));
1097
- }
1098
- .ui-NavigationMenuList:where(.r-size-2) {
1099
- --navigation-menu-gap: var(--space-1);
1100
- --navigation-menu-height: var(--space-6);
1101
- --navigation-menu-padding-x: var(--space-3);
1102
- --navigation-menu-font-size: var(--font-size-2);
1103
- --navigation-menu-line-height: var(--line-height-2);
1104
- --navigation-menu-letter-spacing: var(--letter-spacing-2);
1105
- --navigation-menu-radius: max(var(--radius-2), var(--radius-full));
1106
- }
1107
- .ui-NavigationMenuList:where(.r-size-3) {
1108
- --navigation-menu-gap: calc(var(--space-1) * 1.5);
1109
- --navigation-menu-height: var(--space-7);
1110
- --navigation-menu-padding-x: var(--space-4);
1111
- --navigation-menu-font-size: var(--font-size-3);
1112
- --navigation-menu-line-height: var(--line-height-3);
1113
- --navigation-menu-letter-spacing: var(--letter-spacing-3);
1114
- --navigation-menu-radius: max(var(--radius-3), var(--radius-full));
1115
- }
1116
- .ui-NavigationMenuIndicator {
1117
- position: absolute;
1118
- display: flex;
1119
- align-items: flex-end;
1120
- justify-content: center;
1121
- height: 10px;
1122
- top: 100%;
1123
- overflow: hidden;
1124
- z-index: 1;
1125
- transition: width, transform 250ms ease;
1126
- width: var(--reka-navigation-menu-indicator-size);
1127
- transform: translateX(var(--reka-navigation-menu-indicator-position));
1128
- }
1129
- .ui-NavigationMenuIndicator:where([data-state="visible"]) {
1130
- animation: ui-fade-in 200ms ease;
1131
- }
1132
- .ui-NavigationMenuIndicator:where([data-state="hidden"]) {
1133
- animation: ui-fade-out 200ms ease;
1134
- }
1135
- .ui-NavigationMenuIndicator:before {
1136
- content: '';
1137
- position: relative;
1138
- top: 70%;
1139
- background-color: var(--color-panel-solid);
1140
- border: 1px solid var(--gray-a4);
1141
- width: 10px;
1142
- height: 10px;
1143
- transform: rotate(45deg);
1144
- border-top-left-radius: 2px;
1145
- }
1146
- @layer components {
1147
- .ui-NavigationMenuTrigger,
1148
- .ui-NavigationMenuLink {
1149
- display: inline-flex;
1150
- gap: var(--space-1);
1151
- align-items: center;
1152
- justify-content: center;
1153
- flex-shrink: 0;
1154
- -webkit-user-select: none;
1155
- -moz-user-select: none;
1156
- user-select: none;
1157
- vertical-align: top;
1158
- font-style: normal;
1159
- text-align: center;
1160
- white-space: nowrap;
1161
- font-weight: var(--font-weight-medium);
1162
- height: var(--navigation-menu-height);
1163
- padding-left: var(--navigation-menu-padding-x);
1164
- padding-right: var(--navigation-menu-padding-x);
1165
- font-size: var(--navigation-menu-font-size);
1166
- line-height: var(--navigation-menu-line-height);
1167
- letter-spacing: var(--navigation-menu-letter-spacing);
1168
- border-radius: var(--navigation-menu-radius);
1169
- }
1170
- .ui-NavigationMenuTrigger:where(:hover),
1171
- .ui-NavigationMenuLink:where(:hover) {
1172
- background-color: var(--accent-a2);
1173
- }
1174
- }
1175
-
1176
- .ui-NavigationMenuTriggerArrow {
1177
- transform: rotate(0deg);
1178
- transition: transform 250ms ease;
1179
- }
1180
- :where(.ui-NavigationMenuTrigger[data-state="open"]) .ui-NavigationMenuTriggerArrow {
1181
- transform: rotate(-180deg);
1182
- }
1183
-
1184
- @layer components {
1185
- .ui-NavigationMenuContent {
1186
- position: absolute;
1187
- top: 0;
1188
- left: 0;
1189
- width: 100%;
1190
- animation: var(--navigation-menu-content-animation);
1191
- }
1192
- }
1193
- .ui-NavigationMenuContent:where([data-motion="from-start"]) {
1194
- --navigation-menu-content-animation: enterFromLeft 250ms ease;
1195
- }
1196
- .ui-NavigationMenuContent:where([data-motion="to-start"]) {
1197
- --navigation-menu-content-animation: exitToLeft 250ms ease;
1198
- }
1199
- .ui-NavigationMenuContent:where([data-motion="from-end"]) {
1200
- --navigation-menu-content-animation: enterFromRight 250ms ease;
1201
- }
1202
- .ui-NavigationMenuContent:where([data-motion="to-end"]) {
1203
- --navigation-menu-content-animation: exitToRight 250ms ease;
1204
- }
1205
- @layer components {
1206
- .ui-SidebarProvider {
1207
- box-sizing: border-box;
1208
- display: flex;
1209
- min-height: 0;
1210
- min-width: 0;
1211
- position: relative;
1212
- width: 100%;
1213
- }
1214
- .ui-SidebarProvider:where([data-inset='true']) {
1215
- background-color: var(--gray-2);
1216
- }
1217
- .ui-Sidebar {
1218
- --sidebar-transition-duration: 200ms;
1219
-
1220
- align-self: stretch;
1221
- box-sizing: border-box;
1222
- flex: 0 0 auto;
1223
- min-height: 0;
1224
- min-width: 0;
1225
- position: relative;
1226
- transition:
1227
- margin-inline-end var(--sidebar-transition-duration) ease,
1228
- margin-inline-start var(--sidebar-transition-duration) ease,
1229
- transform var(--sidebar-transition-duration) ease;
1230
- z-index: 1;
1231
- width: var(--sidebar-width);
1232
- }
1233
- .ui-Sidebar:where(.r-collapsible-icon) {
1234
- transition:
1235
- margin-inline-end var(--sidebar-transition-duration) ease,
1236
- margin-inline-start var(--sidebar-transition-duration) ease,
1237
- transform var(--sidebar-transition-duration) ease,
1238
- width var(--sidebar-transition-duration) ease;
1239
- }
1240
- .ui-Sidebar:where(.r-side-left) {
1241
- order: 0;
1242
- }
1243
- .ui-Sidebar:where(.r-side-right) {
1244
- order: 2;
1245
- }
1246
- .ui-Sidebar:where(.r-variant-inset, .r-variant-floating) {
1247
- padding: var(--space-2);
1248
- }
1249
- .ui-Sidebar:where(.r-collapsible-icon.r-variant-default)[data-collapsed='true'] {
1250
- width: var(--sidebar-collapsed-width);
1251
- }
1252
- .ui-Sidebar:where(.r-collapsible-icon.r-variant-floating, .r-collapsible-icon.r-variant-inset)[data-collapsed='true'] {
1253
- width: calc(var(--sidebar-collapsed-width) + var(--space-2) + var(--space-2));
1254
- }
1255
- .ui-Sidebar:where(.r-collapsible-offcanvas.r-side-left)[data-collapsed='true'] {
1256
- margin-inline-end: calc(0px - var(--sidebar-width));
1257
- transform: translateX(calc(0px - var(--sidebar-width) - var(--space-2)));
1258
- }
1259
- .ui-Sidebar:where(.r-collapsible-offcanvas.r-side-right)[data-collapsed='true'] {
1260
- margin-inline-start: calc(0px - var(--sidebar-width));
1261
- transform: translateX(calc(var(--sidebar-width) + var(--space-2)));
1262
- }
1263
- .ui-SidebarPanel {
1264
- box-sizing: border-box;
1265
- color: var(--gray-12);
1266
- display: flex;
1267
- flex-direction: column;
1268
- min-height: 0;
1269
- outline: none;
1270
- overflow: hidden;
1271
- position: relative;
1272
- }
1273
- .ui-SidebarPanel:where(.r-desktop) {
1274
- height: 100%;
1275
- inset-block: 0;
1276
- }
1277
- .ui-Sidebar:where(.r-variant-default.r-side-left) > .ui-SidebarPanel:where(.r-desktop),
1278
- .ui-SidebarPanel:where(.r-mobile.r-variant-default.r-side-left) {
1279
- border-inline-end: 1px solid var(--gray-a5);
1280
- }
1281
- .ui-Sidebar:where(.r-variant-default.r-side-right) > .ui-SidebarPanel:where(.r-desktop),
1282
- .ui-SidebarPanel:where(.r-mobile.r-variant-default.r-side-right) {
1283
- border-inline-start: 1px solid var(--gray-a5);
1284
- }
1285
- .ui-Sidebar:where(.r-variant-floating) > .ui-SidebarPanel:where(.r-desktop),
1286
- .ui-SidebarPanel:where(.r-mobile.r-variant-floating) {
1287
- border-radius: var(--radius-4);
1288
- box-shadow: var(--shadow-3);
1289
- }
1290
- .ui-SidebarHeader,
1291
- .ui-SidebarFooter {
1292
- align-items: center;
1293
- box-sizing: border-box;
1294
- display: flex;
1295
- flex: 0 0 auto;
1296
- gap: var(--space-2);
1297
- line-height: 1;
1298
- min-height: calc(3rem * var(--scaling));
1299
- padding: var(--space-3);
1300
- }
1301
- .ui-SidebarBody {
1302
- box-sizing: border-box;
1303
- flex: 1 1 auto;
1304
- min-height: 0;
1305
- overflow: auto;
1306
- overscroll-behavior: contain;
1307
- padding: var(--space-2);
1308
- }
1309
- .ui-SidebarInset {
1310
- background-color: var(--color-background);
1311
- box-sizing: border-box;
1312
- flex: 1 1 auto;
1313
- min-height: 0;
1314
- min-width: 0;
1315
- order: 1;
1316
- position: relative;
1317
- }
1318
- .ui-SidebarProvider:where([data-inset='true']) > .ui-SidebarInset {
1319
- border-radius: var(--radius-4);
1320
- box-shadow: var(--shadow-3);
1321
- margin: var(--space-2);
1322
- overflow: hidden;
1323
- }
1324
- .ui-SidebarTrigger {
1325
- align-items: center;
1326
- -webkit-appearance: none;
1327
- -moz-appearance: none;
1328
- appearance: none;
1329
- background: transparent;
1330
- border: 0;
1331
- border-radius: var(--radius-2);
1332
- color: var(--gray-11);
1333
- cursor: pointer;
1334
- display: inline-flex;
1335
- height: calc(2rem * var(--scaling));
1336
- justify-content: center;
1337
- padding: 0;
1338
- width: calc(2rem * var(--scaling));
1339
- }
1340
- .ui-SidebarTrigger:not([data-disabled]):hover {
1341
- background-color: var(--gray-a3);
1342
- color: var(--gray-12);
1343
- }
1344
- .ui-SidebarTrigger:focus-visible,
1345
- .ui-SidebarRail:focus-visible {
1346
- outline: 2px solid var(--focus-8);
1347
- outline-offset: 2px;
1348
- }
1349
- .ui-SidebarTrigger:where([data-disabled]) {
1350
- cursor: not-allowed;
1351
- opacity: 0.5;
1352
- }
1353
- .ui-SidebarTriggerIcon {
1354
- fill: none;
1355
- height: 1rem;
1356
- stroke: currentColor;
1357
- stroke-linecap: round;
1358
- stroke-linejoin: round;
1359
- stroke-width: 1.25;
1360
- width: 1rem;
1361
- }
1362
- .ui-SidebarRail {
1363
- -webkit-appearance: none;
1364
- -moz-appearance: none;
1365
- appearance: none;
1366
- background: transparent;
1367
- border: 0;
1368
- cursor: pointer;
1369
- height: 100%;
1370
- inset-block: 0;
1371
- padding: 0;
1372
- position: absolute;
1373
- width: 12px;
1374
- z-index: 2;
1375
- }
1376
- .ui-SidebarRail::after {
1377
- background-color: transparent;
1378
- content: '';
1379
- height: 100%;
1380
- inset-block-start: 0;
1381
- position: absolute;
1382
- transition: background-color 120ms ease;
1383
- width: 2px;
1384
- }
1385
- .ui-SidebarRail:hover::after,
1386
- .ui-SidebarRail:focus-visible::after {
1387
- background-color: var(--accent-a8);
1388
- }
1389
- .ui-Sidebar:where(.r-side-left) .ui-SidebarRail {
1390
- inset-inline-end: -6px;
1391
- }
1392
- .ui-Sidebar:where(.r-side-left) .ui-SidebarRail::after {
1393
- inset-inline-end: 5px;
1394
- }
1395
- .ui-Sidebar:where(.r-side-right) .ui-SidebarRail {
1396
- inset-inline-start: -6px;
1397
- }
1398
- .ui-Sidebar:where(.r-side-right) .ui-SidebarRail::after {
1399
- inset-inline-start: 5px;
1400
- }
1401
- .ui-Sidebar:where(.r-collapsible-none) .ui-SidebarRail,
1402
- .ui-SidebarPanel:where(.r-mobile) .ui-SidebarRail,
1403
- .ui-SidebarTrigger:where([data-mobile='false'][data-collapsible='none']) {
1404
- display: none;
1405
- }
1406
- .ui-Sidebar:where(.r-collapsible-icon)[data-collapsed='true'] .ui-SidebarHeader,
1407
- .ui-Sidebar:where(.r-collapsible-icon)[data-collapsed='true'] .ui-SidebarFooter {
1408
- justify-content: center;
1409
- padding-inline: var(--space-2);
1410
- }
1411
- .ui-SidebarGroup {
1412
- display: flex;
1413
- flex-direction: column;
1414
- gap: var(--space-1);
1415
- min-width: 0;
1416
- }
1417
- .ui-SidebarGroup + .ui-SidebarGroup {
1418
- margin-block-start: var(--space-4);
1419
- }
1420
- .ui-SidebarGroupLabel {
1421
- color: var(--gray-10);
1422
- font-size: var(--font-size-1);
1423
- font-weight: var(--font-weight-medium);
1424
- letter-spacing: var(--letter-spacing-1);
1425
- line-height: var(--line-height-1);
1426
- overflow: hidden;
1427
- padding: var(--space-1) var(--space-2);
1428
- text-overflow: ellipsis;
1429
- white-space: nowrap;
1430
- }
1431
- .ui-SidebarMenu,
1432
- .ui-SidebarMenuSub {
1433
- list-style: none;
1434
- margin: 0;
1435
- padding: 0;
1436
- }
1437
- .ui-SidebarMenu {
1438
- display: flex;
1439
- flex-direction: column;
1440
- gap: var(--sidebar-menu-list-gap);
1441
- width: 100%;
1442
- }
1443
- .ui-SidebarMenu:where(.r-size-1) {
1444
- --sidebar-menu-list-gap: 0;
1445
- --sidebar-menu-button-height: calc(1.75rem * var(--scaling));
1446
- --sidebar-menu-button-padding-block: calc(var(--space-1) / 2);
1447
- --sidebar-menu-button-padding-inline: var(--space-1);
1448
- --sidebar-menu-button-gap: var(--space-1);
1449
- --sidebar-menu-button-font-size: var(--font-size-1);
1450
- --sidebar-menu-button-line-height: var(--line-height-1);
1451
- --sidebar-menu-icon-size: calc(0.75rem * var(--scaling));
1452
- --sidebar-menu-sub-gap: 0;
1453
- --sidebar-menu-sub-margin-block: 0;
1454
- --sidebar-menu-sub-margin-inline: var(--space-3);
1455
- --sidebar-menu-sub-padding-inline: var(--space-1);
1456
- --sidebar-menu-sub-button-height: calc(1.5rem * var(--scaling));
1457
- --sidebar-menu-sub-button-padding-block: 0;
1458
- --sidebar-menu-sub-button-padding-inline: var(--space-1);
1459
- --sidebar-menu-sub-button-gap: var(--space-1);
1460
- --sidebar-menu-sub-button-font-size: var(--font-size-1);
1461
- --sidebar-menu-sub-button-line-height: var(--line-height-1);
1462
- --sidebar-menu-sub-icon-size: calc(0.6875rem * var(--scaling));
1463
- }
1464
- .ui-SidebarMenu:where(.r-size-2) {
1465
- --sidebar-menu-list-gap: calc(var(--space-1) / 2);
1466
- --sidebar-menu-button-height: calc(2rem * var(--scaling));
1467
- --sidebar-menu-button-padding-block: var(--space-1);
1468
- --sidebar-menu-button-padding-inline: var(--space-2);
1469
- --sidebar-menu-button-gap: var(--space-2);
1470
- --sidebar-menu-button-font-size: var(--font-size-1);
1471
- --sidebar-menu-button-line-height: var(--line-height-1);
1472
- --sidebar-menu-icon-size: calc(0.875rem * var(--scaling));
1473
- --sidebar-menu-sub-gap: calc(var(--space-1) / 2);
1474
- --sidebar-menu-sub-margin-block: calc(var(--space-1) / 2);
1475
- --sidebar-menu-sub-margin-inline: var(--space-4);
1476
- --sidebar-menu-sub-padding-inline: var(--space-1);
1477
- --sidebar-menu-sub-button-height: calc(1.75rem * var(--scaling));
1478
- --sidebar-menu-sub-button-padding-block: calc(var(--space-1) / 2);
1479
- --sidebar-menu-sub-button-padding-inline: var(--space-2);
1480
- --sidebar-menu-sub-button-gap: var(--space-2);
1481
- --sidebar-menu-sub-button-font-size: var(--font-size-1);
1482
- --sidebar-menu-sub-button-line-height: var(--line-height-1);
1483
- --sidebar-menu-sub-icon-size: calc(0.75rem * var(--scaling));
1484
- }
1485
- .ui-SidebarMenu:where(.r-size-3) {
1486
- --sidebar-menu-list-gap: var(--space-1);
1487
- --sidebar-menu-button-height: calc(2.25rem * var(--scaling));
1488
- --sidebar-menu-button-padding-block: var(--space-2);
1489
- --sidebar-menu-button-padding-inline: var(--space-2);
1490
- --sidebar-menu-button-gap: var(--space-3);
1491
- --sidebar-menu-button-font-size: var(--font-size-2);
1492
- --sidebar-menu-button-line-height: var(--line-height-2);
1493
- --sidebar-menu-icon-size: calc(1rem * var(--scaling));
1494
- --sidebar-menu-sub-gap: var(--space-1);
1495
- --sidebar-menu-sub-margin-block: var(--space-1);
1496
- --sidebar-menu-sub-margin-inline: calc(var(--space-4) + var(--space-1));
1497
- --sidebar-menu-sub-padding-inline: var(--space-2);
1498
- --sidebar-menu-sub-button-height: calc(2rem * var(--scaling));
1499
- --sidebar-menu-sub-button-padding-block: var(--space-1);
1500
- --sidebar-menu-sub-button-padding-inline: var(--space-2);
1501
- --sidebar-menu-sub-button-gap: var(--space-3);
1502
- --sidebar-menu-sub-button-font-size: var(--font-size-1);
1503
- --sidebar-menu-sub-button-line-height: var(--line-height-1);
1504
- --sidebar-menu-sub-icon-size: calc(0.875rem * var(--scaling));
1505
- }
1506
- .ui-SidebarMenuItem,
1507
- .ui-SidebarMenuSubItem {
1508
- min-width: 0;
1509
- position: relative;
1510
- }
1511
- .ui-SidebarMenuButton,
1512
- .ui-SidebarMenuSubButton {
1513
- align-items: center;
1514
- -webkit-appearance: none;
1515
- -moz-appearance: none;
1516
- appearance: none;
1517
- background-color: transparent;
1518
- border: 0;
1519
- border-radius: var(--radius-2);
1520
- box-sizing: border-box;
1521
- color: var(--gray-11);
1522
- cursor: pointer;
1523
- display: flex;
1524
- font-family: inherit;
1525
- font-size: var(--sidebar-menu-button-font-size);
1526
- gap: var(--sidebar-menu-button-gap);
1527
- justify-content: flex-start;
1528
- line-height: var(--sidebar-menu-button-line-height);
1529
- min-height: var(--sidebar-menu-button-height);
1530
- min-width: 0;
1531
- overflow: hidden;
1532
- padding-block: var(--sidebar-menu-button-padding-block);
1533
- padding-inline: var(--sidebar-menu-button-padding-inline);
1534
- text-align: start;
1535
- text-decoration: none;
1536
- white-space: nowrap;
1537
- width: 100%;
1538
- }
1539
- .ui-SidebarMenuButtonIcon,
1540
- .ui-SidebarMenuButtonTrailing,
1541
- .ui-SidebarMenuSubButtonIcon,
1542
- .ui-SidebarMenuSubButtonTrailing {
1543
- align-items: center;
1544
- display: inline-flex;
1545
- flex: 0 0 auto;
1546
- justify-content: center;
1547
- }
1548
- .ui-SidebarMenuButtonIconGraphic,
1549
- .ui-SidebarMenuButtonTrailingIcon {
1550
- height: var(--sidebar-menu-icon-size);
1551
- width: var(--sidebar-menu-icon-size);
1552
- }
1553
- .ui-SidebarMenuSubButtonIconGraphic,
1554
- .ui-SidebarMenuSubButtonTrailingIcon {
1555
- height: var(--sidebar-menu-sub-icon-size);
1556
- width: var(--sidebar-menu-sub-icon-size);
1557
- }
1558
- .ui-SidebarMenuButtonText,
1559
- .ui-SidebarMenuSubButtonText {
1560
- flex: 1 1 auto;
1561
- min-width: 0;
1562
- overflow: hidden;
1563
- text-overflow: ellipsis;
1564
- }
1565
- .ui-SidebarMenuButtonTrailing,
1566
- .ui-SidebarMenuSubButtonTrailing {
1567
- margin-inline-start: auto;
1568
- }
1569
- .ui-SidebarMenuButtonTrailing > .ui-CollapsibleIndicator {
1570
- block-size: var(--sidebar-menu-icon-size);
1571
- color: var(--gray-10);
1572
- flex: 0 0 auto;
1573
- font-size: var(--sidebar-menu-icon-size);
1574
- inline-size: var(--sidebar-menu-icon-size);
1575
- }
1576
- .ui-SidebarMenuSubButtonTrailing > .ui-CollapsibleIndicator {
1577
- block-size: var(--sidebar-menu-sub-icon-size);
1578
- color: var(--gray-10);
1579
- flex: 0 0 auto;
1580
- font-size: var(--sidebar-menu-sub-icon-size);
1581
- inline-size: var(--sidebar-menu-sub-icon-size);
1582
- }
1583
- .ui-SidebarMenuButton .ui-CollapsibleTriggerText {
1584
- align-items: center;
1585
- display: flex;
1586
- gap: var(--sidebar-menu-button-gap);
1587
- min-width: 0;
1588
- overflow: hidden;
1589
- }
1590
- .ui-SidebarMenuButton > .ui-CollapsibleIndicator {
1591
- flex: 0 0 auto;
1592
- }
1593
- .ui-SidebarMenuButton:not([data-disabled]):hover,
1594
- .ui-SidebarMenuSubButton:not([data-disabled]):hover {
1595
- background-color: var(--gray-a3);
1596
- color: var(--gray-12);
1597
- }
1598
- .ui-SidebarMenuButton:where([data-active]),
1599
- .ui-SidebarMenuSubButton:where([data-active]) {
1600
- background-color: var(--accent-a3);
1601
- color: var(--accent-11);
1602
- font-weight: var(--font-weight-medium);
1603
- }
1604
- .ui-SidebarMenuButton:where([data-active]):not([data-disabled]):hover,
1605
- .ui-SidebarMenuSubButton:where([data-active]):not([data-disabled]):hover {
1606
- background-color: var(--accent-a4);
1607
- }
1608
- .ui-SidebarMenuButton:focus-visible,
1609
- .ui-SidebarMenuSubButton:focus-visible {
1610
- outline: 2px solid var(--accent-8);
1611
- outline-offset: -2px;
1612
- }
1613
- .ui-SidebarMenuButton:where([data-disabled]),
1614
- .ui-SidebarMenuSubButton:where([data-disabled]) {
1615
- cursor: not-allowed;
1616
- opacity: 0.5;
1617
- }
1618
- .ui-SidebarMenuSub {
1619
- border-inline-start: 1px solid var(--gray-a5);
1620
- display: flex;
1621
- flex-direction: column;
1622
- gap: var(--sidebar-menu-sub-gap);
1623
- margin-block: var(--sidebar-menu-sub-margin-block);
1624
- margin-inline-start: var(--sidebar-menu-sub-margin-inline);
1625
- padding-inline-start: var(--sidebar-menu-sub-padding-inline);
1626
- }
1627
- .ui-SidebarMenuSubButton {
1628
- font-size: var(--sidebar-menu-sub-button-font-size);
1629
- gap: var(--sidebar-menu-sub-button-gap);
1630
- line-height: var(--sidebar-menu-sub-button-line-height);
1631
- min-height: var(--sidebar-menu-sub-button-height);
1632
- padding-block: var(--sidebar-menu-sub-button-padding-block);
1633
- padding-inline: var(--sidebar-menu-sub-button-padding-inline);
1634
- }
1635
- .ui-Sidebar:where(.r-collapsible-icon)[data-collapsed='true'] .ui-SidebarGroupLabel,
1636
- .ui-Sidebar:where(.r-collapsible-icon)[data-collapsed='true'] .ui-SidebarMenuSub {
1637
- display: none;
1638
- }
1639
- .ui-Sidebar:where(.r-collapsible-icon)[data-collapsed='true'] .ui-SidebarMenuButton {
1640
- block-size: var(--sidebar-menu-button-height);
1641
- display: flex;
1642
- gap: 0;
1643
- inline-size: var(--sidebar-menu-button-height);
1644
- justify-content: center;
1645
- margin-inline: auto;
1646
- padding: 0;
1647
- position: relative;
1648
- text-overflow: clip;
1649
- }
1650
- .ui-Sidebar:where(.r-collapsible-icon)[data-collapsed='true'] .ui-SidebarMenuButtonText,
1651
- .ui-Sidebar:where(.r-collapsible-icon)[data-collapsed='true'] .ui-SidebarMenuButtonTrailing {
1652
- border: 0;
1653
- clip: rect(0, 0, 0, 0);
1654
- clip-path: inset(50%);
1655
- height: 1px;
1656
- margin: -1px;
1657
- overflow: hidden;
1658
- padding: 0;
1659
- position: absolute;
1660
- white-space: nowrap;
1661
- width: 1px;
1662
- }
1663
- .ui-Sidebar:where(.r-collapsible-icon)[data-collapsed='true'] .ui-SidebarMenuButton > .ui-CollapsibleIndicator {
1664
- display: none;
1665
- }
1666
- .ui-SidebarOverlay {
1667
- align-items: stretch;
1668
- background-color: var(--gray-a8);
1669
- display: flex;
1670
- inset: 0;
1671
- justify-content: flex-start;
1672
- position: fixed;
1673
- z-index: 50;
1674
- }
1675
- .ui-SidebarOverlay:has(> .ui-SidebarPanel.r-side-right) {
1676
- justify-content: flex-end;
1677
- }
1678
- .ui-SidebarOverlay[data-state='open'] {
1679
- animation: ui-fade-in 180ms ease-out;
1680
- }
1681
- .ui-SidebarOverlay[data-state='closed'] {
1682
- animation: ui-fade-out 150ms ease-in;
1683
- }
1684
- .ui-SidebarPanel:where(.r-mobile) {
1685
- height: 100%;
1686
- max-width: calc(100vw - var(--space-4));
1687
- position: relative;
1688
- width: var(--sidebar-mobile-width);
1689
- background-color: var(--color-panel-solid);
1690
- }
1691
- .ui-SidebarPanel:where(.r-mobile.r-variant-floating) {
1692
- height: calc(100% - var(--space-4));
1693
- margin: var(--space-2);
1694
- }
1695
- .ui-SidebarPanel:where(.r-mobile.r-side-left)[data-state='open'] {
1696
- animation: ui-sidebar-enter-left 200ms ease-out;
1697
- }
1698
- .ui-SidebarPanel:where(.r-mobile.r-side-left)[data-state='closed'] {
1699
- animation: ui-sidebar-exit-left 170ms ease-in;
1700
- }
1701
- .ui-SidebarPanel:where(.r-mobile.r-side-right)[data-state='open'] {
1702
- animation: ui-sidebar-enter-right 200ms ease-out;
1703
- }
1704
- .ui-SidebarPanel:where(.r-mobile.r-side-right)[data-state='closed'] {
1705
- animation: ui-sidebar-exit-right 170ms ease-in;
1706
- }
1707
- .ui-SidebarVisuallyHidden {
1708
- clip: rect(0, 0, 0, 0);
1709
- clip-path: inset(50%);
1710
- height: 1px;
1711
- overflow: hidden;
1712
- position: absolute;
1713
- white-space: nowrap;
1714
- width: 1px;
1715
- }
1716
- }
1717
-
1718
- /* Collapsible contributes behavior inside a menu; SidebarMenu owns its chrome. */
1719
- .ui-SidebarMenu .ui-CollapsibleRoot[data-state] {
1720
- background-color: transparent;
1721
- border-radius: 0;
1722
- box-shadow: none;
1723
- color: inherit;
1724
- font-size: inherit;
1725
- font-weight: inherit;
1726
- }
1727
- .ui-SidebarMenu .ui-CollapsibleTrigger.ui-SidebarMenuButton {
1728
- align-items: center;
1729
- -webkit-appearance: none;
1730
- -moz-appearance: none;
1731
- appearance: none;
1732
- background-color: transparent;
1733
- border: 0;
1734
- border-radius: var(--radius-2);
1735
- box-sizing: border-box;
1736
- color: var(--gray-11);
1737
- cursor: pointer;
1738
- display: flex;
1739
- font-family: inherit;
1740
- font-size: var(--sidebar-menu-button-font-size);
1741
- font-weight: var(--font-weight-regular);
1742
- gap: var(--sidebar-menu-button-gap);
1743
- height: var(--sidebar-menu-button-height);
1744
- justify-content: flex-start;
1745
- line-height: var(--sidebar-menu-button-line-height);
1746
- margin: 0;
1747
- min-height: var(--sidebar-menu-button-height);
1748
- min-width: 0;
1749
- overflow: hidden;
1750
- padding-block: var(--sidebar-menu-button-padding-block);
1751
- padding-inline: var(--sidebar-menu-button-padding-inline);
1752
- text-align: start;
1753
- text-decoration: none;
1754
- white-space: nowrap;
1755
- width: 100%;
1756
- }
1757
- .ui-SidebarMenu .ui-CollapsibleTrigger.ui-SidebarMenuButton:not([data-disabled]):hover {
1758
- background-color: var(--gray-a3);
1759
- color: var(--gray-12);
1760
- }
1761
- .ui-SidebarMenu .ui-CollapsibleTrigger.ui-SidebarMenuButton:where([data-active]) {
1762
- background-color: var(--accent-a3);
1763
- color: var(--accent-11);
1764
- font-weight: var(--font-weight-medium);
1765
- }
1766
- .ui-SidebarMenu .ui-CollapsibleTrigger.ui-SidebarMenuButton:where([data-active]):not([data-disabled]):hover {
1767
- background-color: var(--accent-a4);
1768
- }
1769
- .ui-SidebarMenu .ui-CollapsibleTrigger.ui-SidebarMenuButton:focus-visible {
1770
- outline: 2px solid var(--accent-8);
1771
- outline-offset: -2px;
1772
- }
1773
- .ui-SidebarMenu .ui-CollapsibleTrigger.ui-SidebarMenuButton:where([data-disabled]) {
1774
- cursor: not-allowed;
1775
- opacity: 0.5;
1776
- }
1777
- .ui-SidebarMenu .ui-CollapsibleTrigger.ui-SidebarMenuButton > .ui-CollapsibleTriggerText {
1778
- align-items: center;
1779
- display: flex;
1780
- flex: 1 1 auto;
1781
- font-weight: inherit;
1782
- gap: var(--sidebar-menu-button-gap);
1783
- min-width: 0;
1784
- overflow: hidden;
1785
- text-align: initial;
1786
- }
1787
- .ui-SidebarMenu .ui-CollapsibleTrigger.ui-SidebarMenuButton > .ui-CollapsibleIndicator {
1788
- align-items: center;
1789
- block-size: var(--sidebar-menu-icon-size);
1790
- color: var(--gray-10);
1791
- display: inline-flex;
1792
- flex: 0 0 auto;
1793
- font-size: var(--sidebar-menu-icon-size);
1794
- inline-size: var(--sidebar-menu-icon-size);
1795
- }
1796
- .ui-SidebarMenu .ui-CollapsibleContent {
1797
- background-color: transparent;
1798
- border: 0;
1799
- border-radius: 0;
1800
- box-shadow: none;
1801
- color: inherit;
1802
- font-size: inherit;
1803
- font-weight: inherit;
1804
- margin: 0;
1805
- overflow: hidden;
1806
- padding: 0;
1807
- }
1808
- .ui-Sidebar:where(.r-collapsible-icon)[data-collapsed='true']
1809
- .ui-SidebarMenu .ui-CollapsibleTrigger.ui-SidebarMenuButton {
1810
- block-size: var(--sidebar-menu-button-height);
1811
- display: flex;
1812
- gap: 0;
1813
- inline-size: var(--sidebar-menu-button-height);
1814
- justify-content: center;
1815
- margin-inline: auto;
1816
- padding: 0;
1817
- }
1818
- .ui-Sidebar:where(.r-collapsible-icon)[data-collapsed='true']
1819
- .ui-SidebarMenu .ui-CollapsibleTrigger.ui-SidebarMenuButton > .ui-CollapsibleTriggerText {
1820
- display: contents;
1821
- }
1822
- .ui-Sidebar:where(.r-collapsible-icon)[data-collapsed='true']
1823
- .ui-SidebarMenu .ui-CollapsibleTrigger.ui-SidebarMenuButton > .ui-CollapsibleIndicator {
1824
- display: none;
1825
- }
1826
- @keyframes ui-sidebar-enter-left {
1827
- from { transform: translateX(-100%);
1828
- }
1829
- to { transform: translateX(0);
1830
- }
1831
- }
1832
- @keyframes ui-sidebar-exit-left {
1833
- from { transform: translateX(0);
1834
- }
1835
- to { transform: translateX(-100%);
1836
- }
1837
- }
1838
- @keyframes ui-sidebar-enter-right {
1839
- from { transform: translateX(100%);
1840
- }
1841
- to { transform: translateX(0);
1842
- }
1843
- }
1844
- @keyframes ui-sidebar-exit-right {
1845
- from { transform: translateX(0);
1846
- }
1847
- to { transform: translateX(100%);
1848
- }
1849
- }
1850
- @media (max-width: 1023px) {
1851
- .ui-SidebarProvider:where([data-inset='true']) > .ui-SidebarInset {
1852
- border: 0;
1853
- border-radius: 0;
1854
- }
1855
- }
1856
- @media (prefers-reduced-motion: reduce) {
1857
- .ui-Sidebar,
1858
- .ui-SidebarPanel,
1859
- .ui-SidebarOverlay {
1860
- animation-duration: 1ms !important;
1861
- transition-duration: 1ms !important;
1862
- }
1863
- }
1864
-
1865
- .ui-root {
1866
- --switch-disabled-blend-mode: multiply;
1867
- --switch-high-contrast-checked-color-overlay: var(--black-a8);
1868
- --switch-high-contrast-checked-active-before-filter: contrast(0.82) saturate(1.2) brightness(1.16);
1869
- --switch-surface-checked-active-filter: brightness(0.92) saturate(1.1);
1870
- }
1871
- :is(.dark, .dark-theme) .ui-root {
1872
- --switch-disabled-blend-mode: screen;
1873
- --switch-high-contrast-checked-color-overlay: transparent;
1874
- --switch-high-contrast-checked-active-before-filter: brightness(1.08);
1875
- --switch-surface-checked-active-filter: brightness(1.08);
1876
- }
1877
- .ui-Switch {
1878
- position: relative;
1879
- display: inline-flex;
1880
- align-items: center;
1881
- vertical-align: top;
1882
- flex-shrink: 0;
1883
- outline: none;
1884
-
1885
- height: var(--switch-height);
1886
- --switch-width: calc(var(--switch-height) * 1.75);
1887
- --switch-thumb-inset: 1px;
1888
- --switch-thumb-size: calc(var(--switch-height) - var(--switch-thumb-inset) * 2);
1889
- --switch-thumb-translate-x: calc(var(--switch-width) - var(--switch-height));
1890
- }
1891
- .ui-Switch::before {
1892
- content: '';
1893
- display: block;
1894
- width: var(--switch-width);
1895
- height: var(--switch-height);
1896
- border-radius: var(--switch-border-radius);
1897
- transition: background-position, background-color, box-shadow, filter;
1898
- transition-timing-function: linear, ease-in-out, ease-in-out, ease-in-out;
1899
- background-repeat: no-repeat;
1900
- background-size: calc(var(--switch-width) * 2 + var(--switch-height)) 100%;
1901
- }
1902
- .ui-Switch:where([data-state='unchecked'])::before {
1903
- transition-duration: 120ms, 140ms, 140ms, 140ms;
1904
- background-position-x: 100%;
1905
- }
1906
- .ui-Switch:where([data-state='checked'])::before {
1907
- transition-duration: 160ms, 140ms, 140ms, 140ms;
1908
- background-position: 0%;
1909
- }
1910
- .ui-Switch:where(:active)::before {
1911
- transition-duration: 30ms;
1912
- }
1913
- .ui-Switch:where(:focus-visible)::before {
1914
- outline: 2px solid var(--focus-8);
1915
- outline-offset: 2px;
1916
- }
1917
- .ui-Switch::before {
1918
- cursor: default;
1919
- }
1920
- .ui-Switch:where([data-disabled])::before {
1921
- cursor: not-allowed;
1922
- }
1923
- .ui-SwitchThumb {
1924
- display: inline-flex;
1925
- justify-content: center;
1926
- align-items: center;
1927
- background-color: white;
1928
- position: absolute;
1929
- left: var(--switch-thumb-inset);
1930
- width: var(--switch-thumb-size);
1931
- height: var(--switch-thumb-size);
1932
- border-radius: calc(var(--switch-border-radius) - var(--switch-thumb-inset));
1933
- transition: transform 140ms cubic-bezier(0.45, 0.05, 0.55, 0.95), box-shadow 140ms ease-in-out;
1934
- }
1935
- .ui-SwitchThumb:where([data-state='checked']) {
1936
- transform: translateX(var(--switch-thumb-translate-x));
1937
- }
1938
- .ui-Switch:where(.r-size-1) {
1939
- --switch-height: var(--space-4);
1940
- --switch-border-radius: max(var(--radius-1), var(--radius-thumb));
1941
- }
1942
- .ui-Switch:where(.r-size-2) {
1943
- --switch-height: calc(var(--space-5) * 5 / 6);
1944
- --switch-border-radius: max(var(--radius-2), var(--radius-thumb));
1945
- }
1946
- .ui-Switch:where(.r-size-3) {
1947
- --switch-height: var(--space-5);
1948
- --switch-border-radius: max(var(--radius-2), var(--radius-thumb));
1949
- }
1950
- .ui-Switch:where(.r-variant-surface)::before {
1951
- background-color: var(--gray-a3);
1952
- background-image: linear-gradient(to right, var(--accent-track) 40%, transparent 60%);
1953
- box-shadow: inset 0 0 0 1px var(--gray-a5);
1954
- }
1955
- .ui-Switch:where(.r-variant-surface):where(:active)::before {
1956
- background-color: var(--gray-a4);
1957
- }
1958
- .ui-Switch:where(.r-variant-surface):where([data-state='checked']:active)::before {
1959
- filter: var(--switch-surface-checked-active-filter);
1960
- }
1961
- .ui-Switch:where(.r-variant-surface):where(.r-high-contrast)::before {
1962
- background-image:
1963
- linear-gradient(to right, var(--switch-high-contrast-checked-color-overlay) 40%, transparent 60%),
1964
- linear-gradient(to right, var(--accent-track) 40%, transparent 60%);
1965
- }
1966
- .ui-Switch:where(.r-variant-surface):where(.r-high-contrast):where([data-state='checked']:active)::before {
1967
- filter: var(--switch-high-contrast-checked-active-before-filter);
1968
- }
1969
- .ui-Switch:where(.r-variant-surface):where([data-disabled]) {
1970
- mix-blend-mode: var(--switch-disabled-blend-mode);
1971
- }
1972
- .ui-Switch:where(.r-variant-surface):where([data-disabled])::before {
1973
- filter: none;
1974
- background-image: none;
1975
- background-color: var(--gray-a3);
1976
- box-shadow: inset 0 0 0 1px var(--gray-a3);
1977
- }
1978
- .ui-Switch:where(.r-variant-surface) .ui-SwitchThumb:where([data-state='unchecked']) {
1979
- box-shadow: 0 0 1px 1px var(--black-a2), 0 1px 1px var(--black-a1), 0 2px 4px -1px var(--black-a1);
1980
- }
1981
- .ui-Switch:where(.r-variant-surface) .ui-SwitchThumb:where([data-state='checked']) {
1982
- box-shadow: 0 1px 3px var(--black-a2), 0 2px 4px -1px var(--black-a1), 0 0 0 1px var(--black-a1),
1983
- 0 0 0 1px var(--accent-a4), -1px 0 1px var(--black-a2);
1984
- }
1985
- .ui-Switch:where(.r-variant-surface):where(.r-high-contrast) .ui-SwitchThumb:where([data-state='checked']) {
1986
- box-shadow: 0 1px 3px var(--black-a2), 0 2px 4px -1px var(--black-a1), 0 0 0 1px var(--black-a2),
1987
- -1px 0 1px var(--black-a2);
1988
- }
1989
- .ui-Switch:where(.r-variant-surface) .ui-SwitchThumb:where([data-disabled]) {
1990
- background-color: var(--gray-2);
1991
- box-shadow: 0 0 0 1px var(--gray-a2), 0 1px 3px var(--black-a1);
1992
- transition: none;
1993
- }
1994
- .ui-Switch:where(.r-variant-soft)::before {
1995
- background-image:
1996
- linear-gradient(to right, var(--accent-a4) 40%, transparent 60%),
1997
- linear-gradient(to right, var(--accent-a4) 40%, transparent 60%),
1998
- linear-gradient(to right, var(--accent-a4) 40%, var(--white-a1) 60%),
1999
- linear-gradient(to right, var(--gray-a2) 40%, var(--gray-a3) 60%);
2000
- }
2001
- .ui-Switch:where(.r-variant-soft):where([data-state='unchecked'])::before {
2002
- background-color: var(--gray-a3);
2003
- }
2004
- .ui-Switch:where(.r-variant-soft):where(:active)::before {
2005
- background-color: var(--gray-a4);
2006
- }
2007
- .ui-Switch:where(.r-variant-soft):where(.r-high-contrast)::before {
2008
- background-image:
2009
- linear-gradient(to right, var(--switch-high-contrast-checked-color-overlay) 40%, transparent 60%),
2010
- linear-gradient(to right, var(--accent-a6) 40%, transparent 60%),
2011
- linear-gradient(to right, var(--accent-a6) 40%, transparent 60%),
2012
- linear-gradient(to right, var(--accent-a6) 40%, var(--white-a1) 60%),
2013
- linear-gradient(to right, var(--accent-a3) 40%, var(--gray-a3) 60%);
2014
- }
2015
- .ui-Switch:where(.r-variant-soft):where(.r-high-contrast):where([data-state='checked']:active)::before {
2016
- filter: var(--switch-high-contrast-checked-active-before-filter);
2017
- }
2018
- .ui-Switch:where(.r-variant-soft):where([data-disabled]) {
2019
- mix-blend-mode: var(--switch-disabled-blend-mode);
2020
- }
2021
- .ui-Switch:where(.r-variant-soft):where([data-disabled])::before {
2022
- filter: none;
2023
- background-image: none;
2024
- background-color: var(--gray-a4);
2025
- }
2026
- .ui-Switch:where(.r-variant-soft) .ui-SwitchThumb {
2027
- filter: saturate(0.45);
2028
- }
2029
- .ui-Switch:where(.r-variant-soft) .ui-SwitchThumb:where([data-state='unchecked']) {
2030
- box-shadow: 0 0 0 1px var(--black-a1), 0 1px 3px var(--black-a1), 0 1px 3px var(--black-a1),
2031
- 0 2px 4px -1px var(--black-a1);
2032
- }
2033
- .ui-Switch:where(.r-variant-soft) .ui-SwitchThumb:where([data-state='checked']) {
2034
- box-shadow: 0 0 0 1px var(--black-a1), 0 1px 3px var(--black-a2), 0 1px 3px var(--accent-a3),
2035
- 0 2px 4px -1px var(--accent-a3);
2036
- }
2037
- .ui-Switch:where(.r-variant-soft) .ui-SwitchThumb:where([data-disabled]) {
2038
- filter: none;
2039
- background-color: var(--gray-2);
2040
- box-shadow: 0 0 0 1px var(--gray-a2), 0 1px 3px var(--black-a1);
2041
- transition: none;
2042
- }
2043
-
2044
- @layer components {
2045
- .ui-Checkbox {
2046
- position: relative;
2047
- display: inline-flex;
2048
- align-items: center;
2049
- justify-content: center;
2050
- vertical-align: top;
2051
- flex-shrink: 0;
2052
- cursor: default;
2053
- height: var(--checkbox-size);
2054
- border-radius: var(--checkbox-border-radius);
2055
- }
2056
- }
2057
- .ui-Checkbox::before {
2058
- content: '';
2059
- display: block;
2060
- height: var(--checkbox-size);
2061
- width: var(--checkbox-size);
2062
- border-radius: var(--checkbox-border-radius);
2063
- }
2064
- .ui-Checkbox:where(:focus-visible)::before {
2065
- outline: 2px solid var(--focus-8);
2066
- outline-offset: 2px;
2067
- }
2068
- .ui-Checkbox:where(:disabled) {
2069
- cursor: not-allowed;
2070
- }
2071
- .ui-Checkbox:where(:disabled)::before {
2072
- background-color: var(--gray-a3);
2073
- }
2074
- .ui-CheckboxIndicator {
2075
- position: absolute;
2076
- width: var(--checkbox-indicator-size);
2077
- height: var(--checkbox-indicator-size);
2078
- transform: translate(-50%, -50%);
2079
- top: 50%;
2080
- left: 50%;
2081
- }
2082
- .ui-Checkbox:where(.r-size-1) {
2083
- --checkbox-size: calc(var(--space-4) * 0.875);
2084
- --checkbox-indicator-size: calc(9px * var(--scaling));
2085
- --checkbox-border-radius: calc(var(--radius-1) * 0.875);
2086
- }
2087
- .ui-Checkbox:where(.r-size-2) {
2088
- --checkbox-size: var(--space-4);
2089
- --checkbox-indicator-size: calc(10px * var(--scaling));
2090
- --checkbox-border-radius: var(--radius-1);
2091
- }
2092
- .ui-Checkbox:where(.r-size-3) {
2093
- --checkbox-size: calc(var(--space-4) * 1.25);
2094
- --checkbox-indicator-size: calc(12px * var(--scaling));
2095
- --checkbox-border-radius: calc(var(--radius-1) * 1.25);
2096
- }
2097
- .ui-Checkbox:where(.r-variant-surface):where([data-state='unchecked'])::before {
2098
- background-color: var(--color-surface);
2099
- box-shadow: inset 0 0 0 1px var(--gray-a7);
2100
- }
2101
- .ui-Checkbox:where(.r-variant-surface):where([data-state='checked'], [data-state='indeterminate'])::before {
2102
- background-color: var(--accent-indicator);
2103
- }
2104
- .ui-Checkbox:where(.r-variant-surface):where([data-state='checked'], [data-state='indeterminate']) .ui-CheckboxIndicator {
2105
- color: var(--accent-contrast);
2106
- }
2107
- .ui-Checkbox:where(.r-variant-surface):where(.r-high-contrast):where([data-state='checked'], [data-state='indeterminate'])::before {
2108
- background-color: var(--accent-12);
2109
- }
2110
- .ui-Checkbox:where(.r-variant-surface):where(.r-high-contrast):where([data-state='checked'], [data-state='indeterminate']) .ui-CheckboxIndicator {
2111
- color: var(--accent-1);
2112
- }
2113
- .ui-Checkbox:where(.r-variant-surface):disabled:where([data-state='checked'], [data-state='indeterminate'])::before {
2114
- box-shadow: inset 0 0 0 1px var(--gray-a6);
2115
- background-color: transparent;
2116
- }
2117
- .ui-Checkbox:where(.r-variant-surface):disabled:where([data-state='checked'], [data-state='indeterminate']) .ui-CheckboxIndicator {
2118
- color: var(--gray-a8);
2119
- }
2120
- .ui-Checkbox:where(.r-variant-soft)::before {
2121
- background-color: var(--accent-a5);
2122
- }
2123
- .ui-Checkbox:where(.r-variant-soft):where([data-state='checked'], [data-state='indeterminate']) .ui-CheckboxIndicator {
2124
- color: var(--accent-a11);
2125
- }
2126
- .ui-Checkbox:where(.r-variant-soft):where(.r-high-contrast):where([data-state='checked'], [data-state='indeterminate']) .ui-CheckboxIndicator {
2127
- color: var(--accent-12);
2128
- }
2129
- .ui-Checkbox:where(.r-variant-soft):disabled::before {
2130
- background-color: var(--gray-a3);
2131
- }
2132
- .ui-Checkbox:where(.r-variant-soft):disabled .ui-CheckboxIndicator {
2133
- color: var(--gray-a8);
2134
- }
2135
-
2136
- @layer components {
2137
- .ui-Toggle {
2138
- position: relative;
2139
- display: inline-flex;
2140
- align-items: center;
2141
- justify-content: center;
2142
- vertical-align: top;
2143
- flex-shrink: 0;
2144
- border-radius: var(--toggle-border-radius);
2145
- font-size: var(--toggle-font-size);
2146
- width: var(--toggle-size);
2147
- height: var(--toggle-size);
2148
- }
2149
- }
2150
- .ui-Toggle:where(.r-size-1) {
2151
- --toggle-border-radius: max(var(--radius-1), var(--radius-full));
2152
- --toggle-font-size: var(--font-size-1);
2153
- --toggle-size: var(--space-5);
2154
- }
2155
- .ui-Toggle:where(.r-size-2) {
2156
- --toggle-border-radius: max(var(--radius-2), var(--radius-full));
2157
- --toggle-font-size: var(--font-size-3);
2158
- --toggle-size: var(--space-6);
2159
- }
2160
- .ui-Toggle:where(.r-size-3) {
2161
- --toggle-border-radius: max(var(--radius-3), var(--radius-full));
2162
- --toggle-font-size: var(--font-size-6);
2163
- --toggle-size: var(--space-7);
2164
- }
2165
-
2166
- /** soft */
2167
- .ui-Toggle:where(.r-variant-soft) {
2168
- background-color: var(--color-panel-translucent);
2169
- box-shadow: var(--shadow-2);
2170
- }
2171
- @media (hover: hover) {
2172
- .ui-Toggle:where(.r-variant-soft):where(:hover) {
2173
- background-color: var(--accent-a2);
2174
- }
2175
- }
2176
- .ui-Toggle:where(.r-variant-soft):where(:focus-visible) {
2177
- outline: 2px solid var(--accent-8);
2178
- outline-offset: -1px;
2179
- }
2180
- .ui-Toggle:where(.r-variant-soft):where([data-disabled]) {
2181
- color: var(--gray-a8);
2182
- background-color: var(--gray-a3);
2183
- }
2184
- .ui-Toggle:where(.r-variant-soft):where([data-state="on"]) {
2185
- background-color: var(--accent-a3);
2186
- box-shadow: var(--shadow-1);
2187
- }
2188
-
2189
- /** solid & ghost*/
2190
- .ui-Toggle:where(.r-variant-solid) {
2191
- background-color: var(--color-panel-solid);
2192
- box-shadow: var(--shadow-2);
2193
- }
2194
- @media (hover: hover) {
2195
- .ui-Toggle:where(.r-variant-solid, .r-variant-ghost):where(:hover) {
2196
- background-color: var(--accent-a3);
2197
- }
2198
- }
2199
- .ui-Toggle:where(.r-variant-solid, .r-variant-ghost):where(:focus-visible) {
2200
- outline: 2px solid var(--focus-8);
2201
- outline-offset: 2px;
2202
- }
2203
- .ui-Toggle:where(.r-variant-solid):where([data-disabled]) {
2204
- color: var(--gray-a8);
2205
- background-color: var(--gray-a3);
2206
- }
2207
- .ui-Toggle:where(.r-variant-ghost):where([data-disabled]) {
2208
- color: var(--gray-a8);
2209
- background-color: transparent;
2210
- }
2211
- .ui-Toggle:where(.r-variant-solid):where([data-state="on"]) {
2212
- background-color: var(--accent-9);
2213
- color: var(--accent-contrast);
2214
- box-shadow: var(--shadow-1);
2215
- }
2216
- .ui-Toggle:where(.r-variant-ghost):where([data-state="on"]) {
2217
- background-color: var(--accent-a3);
2218
- box-shadow: var(--shadow-1);
2219
- }
2220
- .ui-Toggle:where(.r-variant-solid, .r-variant-ghost):where(.r-high-contrast):where([data-state="on"]) {
2221
- background-color: var(--accent-12);
2222
- color: var(--gray-1);
2223
- }
2224
-
2225
- @layer components {
2226
- .ui-ToggleGroupRoot {
2227
- position: relative;
2228
- display: inline-flex;
2229
- align-items: center;
2230
- justify-content: center;
2231
- vertical-align: top;
2232
- flex-shrink: 0;
2233
- height: var(--toggle-group-height);
2234
- }
2235
- }
2236
- .ui-ToggleGroupRoot:where(.r-size-1) {
2237
- font-size: var(--font-size-1);
2238
- --toggle-radius: max(var(--radius-1), var(--radius-full));
2239
- --toggle-group-height: var(--space-5);
2240
- --toggle-group-soft-padding: 1px;
2241
- }
2242
- .ui-ToggleGroupRoot:where(.r-size-2) {
2243
- font-size: var(--font-size-3);
2244
- --toggle-radius: max(var(--radius-2), var(--radius-full));
2245
- --toggle-group-height: var(--space-6);
2246
- --toggle-group-soft-padding: 2px;
2247
- }
2248
- .ui-ToggleGroupRoot:where(.r-size-3) {
2249
- font-size: var(--font-size-6);
2250
- --toggle-radius: max(var(--radius-3), var(--radius-full));
2251
- --toggle-group-height: var(--space-7);
2252
- --toggle-group-soft-padding: 3px;
2253
- }
2254
- .ui-ToggleGroupRoot:where(.r-variant-solid),
2255
- .ui-ToggleGroupRoot:where(.r-variant-outline),
2256
- .ui-ToggleGroupRoot:where(.r-variant-surface) {
2257
- border-radius: var(--toggle-radius);
2258
- background-color: var(--color-panel-solid);
2259
- box-shadow: var(--shadow-2);
2260
- --toggle-item-size: var(--toggle-group-height);
2261
- }
2262
- .ui-ToggleGroupRoot:where(.r-variant-soft) {
2263
- border-radius: var(--toggle-radius);
2264
- background-color: var(--color-panel-translucent);
2265
- box-shadow: var(--shadow-2);
2266
- padding: var(--toggle-group-soft-padding);
2267
- gap: var(--toggle-group-soft-padding);
2268
- --toggle-item-size: calc(var(--toggle-group-height) - 2 * var(--toggle-group-soft-padding));
2269
- }
2270
- .ui-ToggleGroupRoot:where(.r-variant-ghost) {
2271
- gap: calc(var(--space-1) / 2);
2272
- --toggle-item-size: var(--toggle-group-height);
2273
- }
2274
-
2275
- @layer components {
2276
- .ui-ToggleGroupItem {
2277
- position: relative;
2278
- display: inline-flex;
2279
- align-items: center;
2280
- justify-content: center;
2281
- vertical-align: top;
2282
- flex-shrink: 0;
2283
- width: var(--toggle-item-size);
2284
- height: var(--toggle-item-size);
2285
- }
2286
- }
2287
- .ui-ToggleGroupRoot:where(.r-variant-solid, .r-variant-surface, .r-variant-outline) :where(.ui-ToggleGroupItem:first-child) {
2288
- border-top-left-radius: var(--toggle-radius);
2289
- border-bottom-left-radius: var(--toggle-radius);
2290
- }
2291
- .ui-ToggleGroupRoot:where(.r-variant-solid, .r-variant-surface, .r-variant-outline) :where(.ui-ToggleGroupItem:last-child) {
2292
- border-top-right-radius: var(--toggle-radius);
2293
- border-bottom-right-radius: var(--toggle-radius);
2294
- }
2295
- .ui-ToggleGroupRoot:where(.r-variant-soft, .r-variant-ghost) :where(.ui-ToggleGroupItem) {
2296
- border-radius: var(--toggle-radius);
2297
- }
2298
-
2299
- /** soft */
2300
- @media (hover: hover) {
2301
- .ui-ToggleGroupRoot:where(.r-variant-soft) :where(.ui-ToggleGroupItem:hover) {
2302
- background-color: var(--accent-a2);
2303
- }
2304
- }
2305
- .ui-ToggleGroupRoot:where(.r-variant-soft) :where(.ui-ToggleGroupItem:focus-visible) {
2306
- outline: 2px solid var(--accent-8);
2307
- outline-offset: -1px;
2308
- }
2309
- .ui-ToggleGroupRoot:where(.r-variant-soft) :where(.ui-ToggleGroupItem[data-disabled]) {
2310
- color: var(--gray-a8);
2311
- background-color: var(--gray-a3);
2312
- }
2313
- .ui-ToggleGroupRoot:where(.r-variant-soft) :where(.ui-ToggleGroupItem[data-state="on"]) {
2314
- background-color: var(--accent-a4);
2315
- }
2316
-
2317
- /** solid, surface ghost */
2318
- @media (hover: hover) {
2319
- .ui-ToggleGroupRoot:where(.r-variant-solid, .r-variant-surface, .r-variant-outline, .r-variant-ghost) :where(.ui-ToggleGroupItem:hover) {
2320
- background-color: var(--accent-a3);
2321
- }
2322
- }
2323
- :where(.ui-ToggleGroupRoot.r-variant-surface, .r-variant-outline) .ui-ToggleGroupItem + .ui-ToggleGroupItem {
2324
- box-shadow: inset 1px 0 0 0 var(--gray-a4);
2325
- }
2326
- .ui-ToggleGroupRoot:where(.r-variant-solid, .r-variant-surface, .r-variant-outoine, .r-variant-ghost) :where(.ui-ToggleGroupItem:focus-visible) {
2327
- outline: 2px solid var(--focus-8);
2328
- outline-offset: 2px;
2329
- }
2330
- .ui-ToggleGroupRoot:where(.r-variant-solid) :where(.ui-ToggleGroupItem[data-disabled]) {
2331
- color: var(--gray-a8);
2332
- background-color: var(--gray-a3);
2333
- }
2334
- .ui-ToggleGroupRoot:where(.r-variant-surface, .r-variant-outline) :where(.ui-ToggleGroupItem[data-disabled]) {
2335
- color: var(--gray-a8);
2336
- }
2337
- .ui-ToggleGroupRoot:where(.r-variant-ghost) :where(.ui-ToggleGroupItem[data-disabled]) {
2338
- color: var(--gray-a8);
2339
- background-color: transparent;
2340
- }
2341
- .ui-ToggleGroupRoot:where(.r-variant-solid) :where(.ui-ToggleGroupItem[data-state="on"]) {
2342
- background-color: var(--accent-9);
2343
- color: var(--accent-contrast);
2344
- box-shadow: var(--shadow-1);
2345
- }
2346
- .ui-ToggleGroupRoot:where(.r-variant-surface) :where(.ui-ToggleGroupItem[data-state="on"]) {
2347
- background-color: var(--accent-a3);
2348
- color: var(--accent-a11);
2349
- }
2350
- .ui-ToggleGroupRoot:where(.r-variant-outline) :where(.ui-ToggleGroupItem[data-state="on"]) {
2351
- color: var(--accent-a11);
2352
- }
2353
- .ui-ToggleGroupRoot:where(.r-variant-ghost) :where(.ui-ToggleGroupItem[data-state="on"]) {
2354
- background-color: var(--accent-a4);
2355
- }
2356
- .ui-ToggleGroupRoot:where(.r-variant-solid, .r-variant-ghost):where(.r-high-contrast) :where(.ui-ToggleGroupItem[data-state="on"]) {
2357
- background-color: var(--accent-12);
2358
- color: var(--gray-1);
2359
- }
2360
-
2361
- .ui-TextField {
2362
- display: flex;
2363
- align-items: stretch;
2364
- font-weight: var(--font-weight-regular);
2365
- font-style: normal;
2366
- text-align: start;
2367
- box-sizing: border-box;
2368
- height: var(--text-field-height);
2369
- padding: var(--text-field-border-width);
2370
- border-radius: var(--text-field-border-radius);
2371
- }
2372
- @supports selector(:has(*)) {
2373
- .ui-TextField:where(:has(input[type=file])) {
2374
- align-items: center;
2375
- }
2376
- }
2377
- .ui-TextField::-moz-selection {
2378
- background-color: var(--text-field-selection-color);
2379
- }
2380
- .ui-TextField::selection {
2381
- background-color: var(--text-field-selection-color);
2382
- }
2383
- .ui-TextFieldInput {
2384
- text-align: inherit;
2385
- border: none;
2386
- padding: 0;
2387
- width: 100%;
2388
- font-size: 1em;
2389
- background-color: transparent;
2390
- border-radius: calc(var(--text-field-border-radius) - var(--text-field-border-width));
2391
- text-indent: var(--text-field-padding);
2392
- cursor: auto;
2393
- }
2394
- .ui-TextFieldInput:focus {
2395
- outline: none;
2396
- box-shadow: none;
2397
- }
2398
- .ui-TextFieldInput:where([type=file]) {
2399
- font-size: 0.875em;
2400
- background-color: transparent;
2401
- text-indent: calc(var(--text-field-padding) / 2);
2402
- }
2403
- .ui-TextFieldInput:where([type=date], [type=datetime-local], [type=time], [type=week], [type=month]) {
2404
- text-indent: 0;
2405
- padding-left: var(--text-field-padding);
2406
- padding-right: var(--text-field-padding);
2407
- }
2408
- .ui-TextFieldInput::-webkit-inner-spin-button {
2409
- -webkit-appearance: none;
2410
- appearance: none;
2411
- }
2412
- .ui-TextFieldInput::-webkit-search-cancel-button {
2413
- -webkit-appearance: none;
2414
- appearance: none;
2415
- }
2416
- .ui-TextFieldInput::-moz-selection {
2417
- background-color: var(--text-field-selection-color);
2418
- }
2419
- .ui-TextFieldInput::selection {
2420
- background-color: var(--text-field-selection-color);
2421
- }
2422
- .ui-TextFieldInput::-webkit-calendar-picker-indicator {
2423
- box-sizing: content-box;
2424
- width: var(--text-field-native-icon-size);
2425
- height: var(--text-field-native-icon-size);
2426
- padding: var(--space-1);
2427
- margin-left: 0;
2428
- margin-right: calc(var(--space-1) * -1);
2429
- border-radius: calc(var(--text-field-border-radius) - 2px);
2430
- }
2431
- .ui-TextFieldInput:where(:not([type=time]))::-webkit-calendar-picker-indicator {
2432
- margin-left: var(--space-1);
2433
- }
2434
- .ui-TextFieldInput::-webkit-calendar-picker-indicator:where(:hover) {
2435
- background-color: var(--gray-a3);
2436
- }
2437
- .ui-TextFieldInput::-webkit-calendar-picker-indicator:where(:focus-visible) {
2438
- outline: 2px solid var(--text-field-focus-color);
2439
- }
2440
- .ui-TextFieldInput::-webkit-datetime-edit-ampm-field:where(:focus),
2441
- .ui-TextFieldInput::-webkit-datetime-edit-day-field:where(:focus),
2442
- .ui-TextFieldInput::-webkit-datetime-edit-hour-field:where(:focus),
2443
- .ui-TextFieldInput::-webkit-datetime-edit-millisecond-field:where(:focus),
2444
- .ui-TextFieldInput::-webkit-datetime-edit-minute-field:where(:focus),
2445
- .ui-TextFieldInput::-webkit-datetime-edit-month-field:where(:focus),
2446
- .ui-TextFieldInput::-webkit-datetime-edit-second-field:where(:focus),
2447
- .ui-TextFieldInput::-webkit-datetime-edit-week-field:where(:focus),
2448
- .ui-TextFieldInput::-webkit-datetime-edit-year-field:where(:focus) {
2449
- background-color: var(--text-field-selection-color);
2450
- color: inherit;
2451
- outline: none;
2452
- }
2453
- .ui-TextFieldInput:where(:-webkit-autofill) {
2454
- /* Reliably removes native autofill colors */
2455
- -webkit-background-clip: text;
2456
- background-clip: text;
2457
- -webkit-text-fill-color: var(--gray-12);
2458
- }
2459
- .ui-TextFieldInput:where(:autofill) {
2460
- /* Reliably removes native autofill colors */
2461
- -webkit-background-clip: text;
2462
- background-clip: text;
2463
- -webkit-text-fill-color: var(--gray-12);
2464
- }
2465
- .ui-TextFieldSlot {
2466
- box-sizing: border-box;
2467
- flex-shrink: 0;
2468
- display: flex;
2469
- align-items: center;
2470
- cursor: text;
2471
- gap: var(--space-2);
2472
- padding-left: var(--text-field-slot-padding);
2473
- padding-right: var(--text-field-slot-padding);
2474
- }
2475
- .ui-TextFieldSlot:where([data-side=left]) {
2476
- order: -1;
2477
- margin-left: calc(var(--text-field-border-width) * -1);
2478
- margin-right: 0;
2479
- }
2480
- .ui-TextFieldSlot:where([data-side=right]) {
2481
- order: 0;
2482
- margin-left: 0;
2483
- margin-right: calc(var(--text-field-border-width) * -1);
2484
- }
2485
- .ui-TextFieldInput:where(:has(~ .ui-TextFieldSlot:not([data-side=right]))) {
2486
- text-indent: 0;
2487
- padding-left: 0;
2488
- border-top-left-radius: 0;
2489
- border-bottom-left-radius: 0;
2490
- }
2491
- .ui-TextFieldInput:where(:has(~ .ui-TextFieldSlot[data-side=right],
2492
- ~ .ui-TextFieldSlot:not([data-side=right]) ~ .ui-TextFieldSlot:not([data-side=left]))) {
2493
- padding-right: 0;
2494
- border-top-right-radius: 0;
2495
- border-bottom-right-radius: 0;
2496
- }
2497
- .ui-TextField:where(.r-size-1) {
2498
- --text-field-height: var(--space-5);
2499
- --text-field-padding: calc(var(--space-1) * 1.5 - var(--text-field-border-width));
2500
- --text-field-border-radius: max(var(--radius-2), var(--radius-full));
2501
- --text-field-native-icon-size: var(--space-3);
2502
- --text-field-slot-padding: var(--space-1);
2503
- font-size: var(--font-size-1);
2504
- letter-spacing: var(--letter-spacing-1);
2505
- }
2506
- .ui-TextField:where(.r-size-1) :where(.ui-TextFieldInput) {
2507
- /* Reset size 2 padding bottom */
2508
- padding-bottom: 0px;
2509
- /* Safari credentials autofill icon */
2510
- }
2511
- .ui-TextField:where(.r-size-1) :where(.ui-TextFieldInput)::-webkit-textfield-decoration-container {
2512
- padding-right: 0px;
2513
- margin-right: -2px;
2514
- }
2515
- .ui-TextField:where(.r-size-2) {
2516
- --text-field-height: var(--space-6);
2517
- --text-field-padding: calc(var(--space-2) - var(--text-field-border-width));
2518
- --text-field-border-radius: max(var(--radius-2), var(--radius-full));
2519
- --text-field-native-icon-size: var(--space-4);
2520
- --text-field-slot-padding: var(--space-2);
2521
- font-size: var(--font-size-2);
2522
- letter-spacing: var(--letter-spacing-2);
2523
- }
2524
- .ui-TextField:where(.r-size-2) :where(.ui-TextFieldInput) {
2525
- /* Avoid 1px baseline jitter when layout around the text field is subpixel-sized (e.g. vh units). */
2526
- /* Works because as of Nov 2023, Chrome computes input text bounding box height as 16.5px on @2x screens. */
2527
- padding-bottom: 0.5px;
2528
- /* Safari credentials autofill icon */
2529
- }
2530
- .ui-TextField:where(.r-size-2) :where(.ui-TextFieldInput)::-webkit-textfield-decoration-container {
2531
- padding-right: 2px;
2532
- margin-right: 0px;
2533
- }
2534
- .ui-TextField:where(.r-size-3) {
2535
- --text-field-height: var(--space-7);
2536
- --text-field-padding: calc(var(--space-3) - var(--text-field-border-width));
2537
- --text-field-border-radius: max(var(--radius-3), var(--radius-full));
2538
- --text-field-native-icon-size: var(--space-4);
2539
- --text-field-slot-padding: var(--space-3);
2540
- font-size: var(--font-size-3);
2541
- letter-spacing: var(--letter-spacing-3);
2542
- }
2543
- .ui-TextField:where(.r-size-3) :where(.ui-TextFieldInput) {
2544
- /* Reset size 2 padding bottom */
2545
- padding-bottom: 0px;
2546
- /* Safari credentials autofill icon */
2547
- }
2548
- .ui-TextField:where(.r-size-3) :where(.ui-TextFieldInput)::-webkit-textfield-decoration-container {
2549
- padding-right: 5px;
2550
- margin-right: 0px;
2551
- }
2552
- .ui-TextField:where(.r-size-3) :where(.ui-TextFieldSlot) {
2553
- gap: var(--space-3);
2554
- }
2555
- .ui-TextField:where(.r-variant-surface) {
2556
- --text-field-selection-color: var(--focus-a5);
2557
- --text-field-focus-color: var(--focus-a8);
2558
- --text-field-border-width: 1px;
2559
- --text-field-border-color: var(--gray-a7);
2560
- /* Blend inner shadow with page background */
2561
- background-clip: content-box;
2562
- background-color: var(--color-surface);
2563
- box-sizing: border-box;
2564
- border: var(--text-field-border-width) solid var(--text-field-border-color);
2565
- color: var(--gray-12);
2566
- }
2567
- @supports selector(:has(*)) {
2568
- .ui-TextField:where(.r-variant-surface):where(:has(.ui-TextFieldInput:focus)) {
2569
- --text-field-border-color: var(--text-field-focus-color);
2570
- box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
2571
- }
2572
- }
2573
- @supports not selector(:has(*)) {
2574
- .ui-TextField:where(.r-variant-surface):where(:focus-within) {
2575
- --text-field-border-color: var(--text-field-focus-color);
2576
- box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
2577
- }
2578
- }
2579
- .ui-TextField:where(.r-variant-surface) :where(.ui-TextFieldInput)::-moz-placeholder {
2580
- color: var(--gray-a10);
2581
- }
2582
- .ui-TextField:where(.r-variant-surface) :where(.ui-TextFieldInput)::placeholder {
2583
- color: var(--gray-a10);
2584
- }
2585
- .ui-TextField:where(.r-variant-surface) :where(.ui-TextFieldSlot) {
2586
- color: var(--gray-a11);
2587
- }
2588
- .ui-TextField:where(.r-variant-surface) :where(.ui-TextFieldSlot):where([data-accent-color]) {
2589
- color: var(--accent-a11);
2590
- }
2591
- .ui-TextField:where(.r-variant-surface):where(:has(.ui-TextFieldInput:where(:-webkit-autofill):not(:disabled, :read-only:not([type=file])))) {
2592
- /* Blend with focus color */
2593
- background-image: linear-gradient(var(--focus-a2), var(--focus-a2));
2594
- border-color: var(--gray-a5);
2595
- }
2596
- .ui-TextField:where(.r-variant-surface):where(:has(.ui-TextFieldInput:where(:autofill):not(:disabled, :-moz-read-only:not([type=file])))) {
2597
- /* Blend with focus color */
2598
- background-image: linear-gradient(var(--focus-a2), var(--focus-a2));
2599
- border-color: var(--gray-a5);
2600
- }
2601
- .ui-TextField:where(.r-variant-surface):where(:has(.ui-TextFieldInput:where(:autofill):not(:disabled, :read-only:not([type=file])))) {
2602
- /* Blend with focus color */
2603
- background-image: linear-gradient(var(--focus-a2), var(--focus-a2));
2604
- border-color: var(--gray-a5);
2605
- }
2606
- .ui-TextField:where(.r-variant-surface):where(:has(.ui-TextFieldInput:where(:disabled, :-moz-read-only:not([type=file])))) {
2607
- /* Blend with grey */
2608
- background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
2609
- border-color: var(--gray-a6);
2610
- }
2611
- .ui-TextField:where(.r-variant-surface):where(:has(.ui-TextFieldInput:where(:disabled, :read-only:not([type=file])))) {
2612
- /* Blend with grey */
2613
- background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
2614
- border-color: var(--gray-a6);
2615
- }
2616
-
2617
- /* soft */
2618
- .ui-TextField:where(.r-variant-soft) {
2619
- --text-field-selection-color: var(--accent-a5);
2620
- --text-field-focus-color: var(--accent-8);
2621
- --text-field-border-width: 0px;
2622
- background-color: var(--accent-a3);
2623
- color: var(--accent-12);
2624
- /* prettier-ignore */
2625
- }
2626
- @supports selector(:has(*)) {
2627
- .ui-TextField:where(.r-variant-soft):where(:has(.ui-TextFieldInput:focus)) {
2628
- outline: 2px solid var(--text-field-focus-color);
2629
- outline-offset: -1px;
2630
- }
2631
- }
2632
- @supports not selector(:has(*)) {
2633
- .ui-TextField:where(.r-variant-soft):where(:focus-within) {
2634
- outline: 2px solid var(--text-field-focus-color);
2635
- outline-offset: -1px;
2636
- }
2637
- }
2638
- .ui-TextField:where(.r-variant-soft) :where(.ui-TextFieldInput)::-moz-placeholder {
2639
- color: var(--accent-12);
2640
- opacity: 0.6;
2641
- }
2642
- .ui-TextField:where(.r-variant-soft) :where(.ui-TextFieldInput)::placeholder {
2643
- color: var(--accent-12);
2644
- opacity: 0.6;
2645
- }
2646
- .ui-TextField:where(.r-variant-soft) :where(.ui-TextFieldSlot) {
2647
- color: var(--accent-12);
2648
- }
2649
- .ui-TextField:where(.r-variant-soft) :where(.ui-TextFieldSlot):where([data-accent-color]) {
2650
- color: var(--accent-a11);
2651
- }
2652
- .ui-TextField:where(.r-variant-soft):where(:has(.ui-TextFieldInput:where(:-webkit-autofill):not(:disabled, :read-only:not([type=file])))) {
2653
- /* Use gray autofill color when component color is gray */
2654
- box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--gray-a4);
2655
- }
2656
- .ui-TextField:where(.r-variant-soft):where(:has(.ui-TextFieldInput:where(:autofill):not(:disabled, :-moz-read-only:not([type=file])))) {
2657
- /* Use gray autofill color when component color is gray */
2658
- box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--gray-a4);
2659
- }
2660
- .ui-TextField:where(.r-variant-soft):where(:has(.ui-TextFieldInput:where(:autofill):not(:disabled, :read-only:not([type=file])))) {
2661
- /* Use gray autofill color when component color is gray */
2662
- box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--gray-a4);
2663
- }
2664
- .ui-TextField:where(.r-variant-soft):where(:has(.ui-TextFieldInput:where(:disabled, :-moz-read-only:not([type=file])))) {
2665
- background-color: var(--gray-a3);
2666
- }
2667
- .ui-TextField:where(.r-variant-soft):where(:has(.ui-TextFieldInput:where(:disabled, :read-only:not([type=file])))) {
2668
- background-color: var(--gray-a3);
2669
- }
2670
-
2671
- /* all disabled and read-only text fields */
2672
- .ui-TextFieldInput:where(:disabled, :-moz-read-only:not([type=file])) {
2673
- cursor: text;
2674
- color: var(--gray-a11);
2675
- /* Safari */
2676
- -webkit-text-fill-color: var(--gray-a11);
2677
- }
2678
- .ui-TextFieldInput:where(:disabled, :read-only:not([type=file])) {
2679
- cursor: text;
2680
- color: var(--gray-a11);
2681
- /* Safari */
2682
- -webkit-text-fill-color: var(--gray-a11);
2683
- }
2684
- .ui-TextFieldInput:where(:disabled, :read-only)::-moz-placeholder {
2685
- opacity: 0.5;
2686
- }
2687
- .ui-TextFieldInput:where(:disabled, :-moz-read-only)::placeholder {
2688
- opacity: 0.5;
2689
- }
2690
- .ui-TextFieldInput:where(:disabled, :read-only)::placeholder {
2691
- opacity: 0.5;
2692
- }
2693
- .ui-TextFieldInput:where(:disabled, :read-only):where(:-moz-placeholder) {
2694
- cursor: var(--cursor-disabled);
2695
- }
2696
- .ui-TextFieldInput:where(:disabled, :-moz-read-only):where(:placeholder-shown) {
2697
- cursor: var(--cursor-disabled);
2698
- }
2699
- .ui-TextFieldInput:where(:disabled, :read-only):where(:placeholder-shown) {
2700
- cursor: var(--cursor-disabled);
2701
- }
2702
- .ui-TextFieldInput:where(:disabled, :read-only):where(:-moz-placeholder) ~ :where(.ui-TextFieldSlot) {
2703
- cursor: var(--cursor-disabled);
2704
- }
2705
- .ui-TextFieldInput:where(:disabled, :-moz-read-only):where(:placeholder-shown) ~ :where(.ui-TextFieldSlot) {
2706
- cursor: var(--cursor-disabled);
2707
- }
2708
- .ui-TextFieldInput:where(:disabled, :read-only):where(:placeholder-shown) ~ :where(.ui-TextFieldSlot) {
2709
- cursor: var(--cursor-disabled);
2710
- }
2711
- .ui-TextField:where(:has(.ui-TextFieldInput:where(:disabled, :-moz-read-only:not([type=file])))) {
2712
- --text-field-selection-color: var(--gray-a5);
2713
- --text-field-focus-color: var(--gray-8);
2714
- }
2715
- .ui-TextField:where(:has(.ui-TextFieldInput:where(:disabled, :read-only:not([type=file])))) {
2716
- --text-field-selection-color: var(--gray-a5);
2717
- --text-field-focus-color: var(--gray-8);
2718
- }
2719
-
2720
- .ui-TextArea {
2721
- display: flex;
2722
- flex-direction: column;
2723
- box-sizing: border-box;
2724
- font-weight: var(--font-weight-regular);
2725
- font-style: normal;
2726
- text-align: start;
2727
- overflow: hidden;
2728
- width: 100%;
2729
- }
2730
- .ui-TextAreaInput {
2731
- border-radius: inherit;
2732
- resize: none;
2733
- display: block;
2734
- width: 100%;
2735
- flex-grow: 1;
2736
- cursor: auto;
2737
- border: none;
2738
- padding: var(--text-area-padding-y) var(--text-area-padding-x);
2739
- font-size: 1em;
2740
- background-color: transparent;
2741
- }
2742
- .ui-TextAreaInput:focus {
2743
- outline: none;
2744
- box-shadow: none;
2745
- }
2746
- .ui-TextAreaInput:where(:disabled) {
2747
- cursor: not-allowed;
2748
- }
2749
- .ui-TextAreaInput::-webkit-scrollbar {
2750
- width: var(--space-3);
2751
- height: var(--space-3);
2752
- }
2753
- .ui-TextAreaInput::-webkit-scrollbar-track,
2754
- .ui-TextAreaInput::-webkit-scrollbar-thumb {
2755
- background-clip: content-box;
2756
- border: var(--space-1) solid transparent;
2757
- border-radius: var(--space-3);
2758
- }
2759
- .ui-TextAreaInput::-webkit-scrollbar-track {
2760
- background-color: var(--gray-a3);
2761
- }
2762
- .ui-TextAreaInput::-webkit-scrollbar-thumb {
2763
- background-color: var(--gray-a8);
2764
- }
2765
- .ui-TextAreaInput:where(:not(:disabled))::-webkit-scrollbar-thumb:hover {
2766
- background-color: var(--gray-a9);
2767
- }
2768
- .ui-TextArea:where(.r-size-1) {
2769
- min-height: var(--space-8);
2770
- border-radius: var(--radius-2);
2771
- }
2772
- .ui-TextArea:where(.r-size-1) .ui-TextAreaInput {
2773
- --text-area-padding-y: calc(var(--space-1) - var(--text-area-border-width));
2774
- --text-area-padding-x: calc(var(--space-1) * 1.5 - var(--text-area-border-width));
2775
- font-size: var(--font-size-1);
2776
- line-height: var(--line-height-1);
2777
- letter-spacing: var(--letter-spacing-1);
2778
- }
2779
- .ui-TextArea:where(.r-size-2) {
2780
- min-height: var(--space-9);
2781
- border-radius: var(--radius-2);
2782
- }
2783
- .ui-TextArea:where(.r-size-2) .ui-TextAreaInput {
2784
- --text-area-padding-y: calc(var(--space-1) * 1.5 - var(--text-area-border-width));
2785
- --text-area-padding-x: calc(var(--space-2) - var(--text-area-border-width));
2786
- font-size: var(--font-size-2);
2787
- line-height: var(--line-height-2);
2788
- letter-spacing: var(--letter-spacing-2);
2789
- }
2790
- .ui-TextArea:where(.r-size-3) {
2791
- min-height: 80px;
2792
- border-radius: var(--radius-3);
2793
- }
2794
- .ui-TextArea:where(.r-size-3) .ui-TextAreaInput {
2795
- --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
2796
- --text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
2797
- font-size: var(--font-size-3);
2798
- line-height: var(--line-height-3);
2799
- letter-spacing: var(--letter-spacing-3);
2800
- }
2801
- .ui-TextArea:where(.r-variant-surface) {
2802
- --text-area-border-width: 1px;
2803
- --text-area-border-color: var(--gray-a7);
2804
- /* Blend inner shadow with page background */
2805
- background-clip: content-box;
2806
- background-color: var(--color-surface);
2807
- border: var(--text-area-border-width) solid var(--text-area-border-color);
2808
- color: var(--gray-12);
2809
- }
2810
- .ui-TextArea:where(.r-variant-surface):where(:focus-within) {
2811
- --text-area-border-color: var(--focus-a8);
2812
- box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
2813
- }
2814
- .ui-TextArea:where(.r-variant-surface) .ui-TextAreaInput::-moz-placeholder {
2815
- color: var(--gray-a10);
2816
- }
2817
- .ui-TextArea:where(.r-variant-surface) .ui-TextAreaInput::placeholder {
2818
- color: var(--gray-a10);
2819
- }
2820
- .ui-TextArea:where(.r-variant-surface) :where(.ui-TextAreaInput:-moz-read-only) {
2821
- background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
2822
- }
2823
- .ui-TextArea:where(.r-variant-surface) :where(.ui-TextAreaInput:read-only) {
2824
- background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
2825
- }
2826
- .ui-TextArea:where(.r-variant-soft) {
2827
- --text-area-border-width: 0px;
2828
- background-color: var(--accent-a3);
2829
- color: var(--accent-12);
2830
- }
2831
- .ui-TextArea:where(.r-variant-soft):where(:focus-within) {
2832
- outline: 2px solid var(--accent-8);
2833
- outline-offset: -1px;
2834
- }
2835
- .ui-TextArea:where(.r-variant-soft) .ui-TextAreaInput::-moz-selection {
2836
- background-color: var(--accent-a5);
2837
- }
2838
- .ui-TextArea:where(.r-variant-soft) .ui-TextAreaInput::selection {
2839
- background-color: var(--accent-a5);
2840
- }
2841
- .ui-TextArea:where(.r-variant-soft) .ui-TextAreaInput::-moz-placeholder {
2842
- color: var(--accent-12);
2843
- opacity: 0.65;
2844
- }
2845
- .ui-TextArea:where(.r-variant-soft) .ui-TextAreaInput::placeholder {
2846
- color: var(--accent-12);
2847
- opacity: 0.65;
2848
- }
2849
- .ui-TextArea:where(.r-variant-soft) :where(.ui-TextAreaInput:-moz-read-only) {
2850
- background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
2851
- box-shadow: inset 0 0 0 var(--text-area-border-width) var(--gray-a6);
2852
- }
2853
- .ui-TextArea:where(.r-variant-soft) :where(.ui-TextAreaInput:read-only) {
2854
- background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
2855
- box-shadow: inset 0 0 0 var(--text-area-border-width) var(--gray-a6);
2856
- }
2857
-
2858
- .ui-ColorField {
2859
- display: inline-flex;
2860
- align-items: center;
2861
- justify-content: center;
2862
- width: var(--color-field-size);
2863
- height: var(--color-field-size);
2864
- border-radius: var(--color-field-radius);
2865
- }
2866
- .ui-ColorField:where(.r-size-1) {
2867
- --color-field-size: var(--space-5);
2868
- --color-field-radius: max(var(--radius-2), var(--radius-full));
2869
- --color-field-border-width: 1px;
2870
- }
2871
- .ui-ColorField:where(.r-size-2) {
2872
- --color-field-size: var(--space-6);
2873
- --color-field-radius: max(var(--radius-2), var(--radius-full));
2874
- --color-field-border-width: 2px;
2875
- }
2876
- .ui-ColorField:where(.r-size-3) {
2877
- --color-field-size: var(--space-7);
2878
- --color-field-radius: max(var(--radius-3), var(--radius-full));
2879
- --color-field-border-width: 3px;
2880
- }
2881
- .ui-ColorField:where(.r-variant-solid) {
2882
- --color-input-size: var(--color-field-size);
2883
- --color-input-radius: var(--color-field-radius);
2884
- }
2885
- .ui-ColorField:where(.r-variant-ring) {
2886
- --color-input-size: calc(var(--color-field-size) - var(--color-field-border-width) * 4);
2887
- --color-input-radius: calc(var(--color-field-radius) - 2px);
2888
- border: var(--color-field-border-width) solid var(--color-field-color);
2889
- }
2890
- .ui-ColorFieldInput {
2891
- -webkit-appearance: none;
2892
- -moz-appearance: none;
2893
- appearance: none;
2894
- border: none;
2895
- cursor: pointer;
2896
- padding: 0;
2897
- width: var(--color-input-size);
2898
- height: var(--color-input-size);
2899
- border-radius: var(--color-input-radius);
2900
- }
2901
- .ui-ColorFieldInput::-webkit-color-swatch-wrapper {
2902
- padding: 0;
2903
- border-radius: var(--color-input-radius);
2904
- }
2905
- .ui-ColorFieldInput::-webkit-color-swatch {
2906
- border: none;
2907
- border-radius: var(--color-input-radius);
2908
- }
2909
- .ui-ColorFieldInput::-moz-color-swatch {
2910
- border: none;
2911
- border-radius: var(--color-input-radius);
2912
- }
2913
- @supports selector(:has(*)) {
2914
- .ui-ColorField:where(:has(.ui-ColorFieldInput:focus)) {
2915
- --text-field-border-color: var(--text-field-focus-color);
2916
- box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
2917
- }
2918
- }
2919
- :where(.ui-TextFieldSlot[data-side="left"]) .ui-ColorField {
2920
- margin-left: calc(0px - var(--text-field-slot-padding) / 2);
2921
- }
2922
- :where(.ui-TextFieldSlot[data-side="right"]) .ui-ColorField {
2923
- margin-right: calc(0px - var(--text-field-slot-padding) / 2);
2924
- }
2925
- :where(.ui-TextFieldSlot) .ui-ColorField,
2926
- :where(.ui-TextFieldSlot) .ui-ColorFieldInput {
2927
- width: calc(var(--color-field-size) - var(--text-field-padding));
2928
- height: calc(var(--color-field-size) - var(--text-field-padding));
2929
- }
2930
-
2931
- @layer components {
2932
- .ui-PinInputRoot {
2933
- display: inline-flex;
2934
- align-items: center;
2935
- gap: var(--pin-input-gap);
2936
- box-sizing: border-box;
2937
- }
2938
- }
2939
- .ui-PinInputRoot:where(.r-size-1) {
2940
- --pin-input-size: var(--space-5);
2941
- --pin-input-gap: var(--space-1);
2942
- --pin-input-radius: max(var(--radius-2), var(--radius-full));
2943
- --pin-input-padding: var(--space-1);
2944
- font-size: var(--font-size-1);
2945
- letter-spacing: var(--letter-spacing-1);
2946
- }
2947
- .ui-PinInputRoot:where(.r-size-2) {
2948
- --pin-input-size: var(--space-6);
2949
- --pin-input-gap: var(--space-2);
2950
- --pin-input-radius: max(var(--radius-2), var(--radius-full));
2951
- --pin-input-padding: var(--space-2);
2952
- font-size: var(--font-size-2);
2953
- letter-spacing: var(--letter-spacing-2);
2954
- }
2955
- .ui-PinInputRoot:where(.r-size-3) {
2956
- --pin-input-size: var(--space-7);
2957
- --pin-input-gap: var(--space-2);
2958
- --pin-input-radius: max(var(--radius-3), var(--radius-full));
2959
- --pin-input-padding: var(--space-3);
2960
- font-size: var(--font-size-3);
2961
- letter-spacing: var(--letter-spacing-3);
2962
- }
2963
- .ui-PinInputRoot:where(.r-variant-surface) {
2964
- --pin-input-border-width: 1px;
2965
- --pin-input-border-color: var(--gray-a7);
2966
- --pin-input-focus-color: var(--focus-a8);
2967
- --pin-input-selection-color: var(--focus-a5);
2968
- }
2969
- .ui-PinInputRoot:where(.r-variant-soft) {
2970
- --pin-input-border-width: 0px;
2971
- --pin-input-border-color: transparent;
2972
- --pin-input-focus-color: var(--accent-8);
2973
- --pin-input-selection-color: var(--accent-a5);
2974
- }
2975
-
2976
- @layer components {
2977
- .ui-PinInputInput {
2978
- display: inline-flex;
2979
- align-items: center;
2980
- justify-content: center;
2981
- box-sizing: border-box;
2982
- flex: 0 0 var(--pin-input-size);
2983
- width: var(--pin-input-size);
2984
- height: var(--pin-input-size);
2985
- padding: var(--pin-input-padding);
2986
- border: var(--pin-input-border-width) solid var(--pin-input-border-color);
2987
- border-radius: var(--pin-input-radius);
2988
- outline: none;
2989
- color: var(--gray-12);
2990
- background-color: var(--color-surface);
2991
- font: inherit;
2992
- line-height: 1;
2993
- text-align: center;
2994
- font-variant-numeric: tabular-nums;
2995
- caret-color: var(--accent-9);
2996
- -webkit-appearance: none;
2997
- -moz-appearance: none;
2998
- appearance: none;
2999
- }
3000
- }
3001
- .ui-PinInputRoot:where(.r-variant-surface) .ui-PinInputInput {
3002
- background-color: var(--color-surface);
3003
- }
3004
- .ui-PinInputRoot:where(.r-variant-soft) .ui-PinInputInput {
3005
- background-color: var(--accent-a3);
3006
- color: var(--accent-12);
3007
- }
3008
- .ui-PinInputInput:where(:focus, :focus-visible) {
3009
- box-shadow: 0 0 0 2px var(--pin-input-selection-color);
3010
- border-color: var(--pin-input-focus-color);
3011
- }
3012
- .ui-PinInputInput::-moz-selection {
3013
- background-color: var(--pin-input-selection-color);
3014
- }
3015
- .ui-PinInputInput::selection {
3016
- background-color: var(--pin-input-selection-color);
3017
- }
3018
- .ui-PinInputInput::-moz-placeholder {
3019
- color: var(--gray-a10);
3020
- opacity: 1;
3021
- }
3022
- .ui-PinInputInput::placeholder {
3023
- color: var(--gray-a10);
3024
- opacity: 1;
3025
- }
3026
- .ui-PinInputRoot:where(.r-variant-soft) .ui-PinInputInput::-moz-placeholder {
3027
- color: var(--accent-12);
3028
- opacity: 0.6;
3029
- }
3030
- .ui-PinInputRoot:where(.r-variant-soft) .ui-PinInputInput::placeholder {
3031
- color: var(--accent-12);
3032
- opacity: 0.6;
3033
- }
3034
- .ui-PinInputInput:where(:disabled, [data-disabled]) {
3035
- cursor: var(--cursor-disabled);
3036
- color: var(--gray-a8);
3037
- background-color: var(--gray-a3);
3038
- -webkit-text-fill-color: var(--gray-a8);
3039
- }
3040
- .ui-PinInputInput:where(:disabled, [data-disabled])::-moz-placeholder {
3041
- color: var(--gray-a8);
3042
- }
3043
- .ui-PinInputInput:where(:disabled, [data-disabled])::placeholder {
3044
- color: var(--gray-a8);
3045
- }
3046
- .ui-PinInputRoot:where(.r-variant-soft) .ui-PinInputInput:where(:disabled, [data-disabled]) {
3047
- background-color: var(--gray-a3);
3048
- }
3049
- .ui-PinInputInput:where([data-complete]) {
3050
- /* Completion describes input state, not validation success. */
3051
- }
3052
-
3053
- .ui-SelectContent {
3054
- --scrollarea-scrollbar-vertical-margin-top: var(--select-content-padding);
3055
- --scrollarea-scrollbar-vertical-margin-bottom: var(--select-content-padding);
3056
- --scrollarea-scrollbar-horizontal-margin-left: var(--select-content-padding);
3057
- --scrollarea-scrollbar-horizontal-margin-right: var(--select-content-padding);
3058
- }
3059
- @layer components {
3060
- .ui-SelectContent {
3061
- overflow: hidden;
3062
- box-shadow: var(--shadow-5);
3063
- background-color: var(--color-panel-solid);
3064
- box-sizing: border-box;
3065
- }
3066
- }
3067
- .ui-SelectContent:where([data-side]) {
3068
- min-width: var(--reka-select-trigger-width);
3069
- max-width: var(--reka-select-content-available-width);
3070
- max-height: var(--reka-select-content-available-height);
3071
- transform-origin: var(--reka-select-content-transform-origin);
3072
- }
3073
- .ui-SelectViewport {
3074
- box-sizing: border-box;
3075
- padding: var(--select-content-padding);
3076
- }
3077
- .ui-SelectContent:has(.ui-ScrollAreaScrollbar[data-orientation='vertical']) .ui-SelectViewport {
3078
- padding-right: var(--space-3);
3079
- }
3080
- .ui-SelectContent:where(.r-size-1) {
3081
- --select-content-padding: var(--space-1);
3082
- --select-item-height: var(--space-5);
3083
- --select-item-indicator-width: calc(var(--space-5) / 1.2);
3084
- --select-separator-margin-right: var(--space-2);
3085
- border-radius: var(--radius-3);
3086
- }
3087
- .ui-SelectContent:where(.r-size-2),
3088
- .ui-SelectContent:where(.r-size-3) {
3089
- --select-content-padding: var(--space-2);
3090
- --select-item-height: var(--space-6);
3091
- --select-item-indicator-width: var(--space-5);
3092
- --select-separator-margin-right: var(--space-3);
3093
- border-radius: var(--radius-4);
3094
- }
3095
-
3096
- @layer components {
3097
- .ui-SelectTrigger {
3098
- display: inline-flex;
3099
- align-items: center;
3100
- justify-content: space-between;
3101
- flex-shrink: 0;
3102
- -webkit-user-select: none;
3103
- -moz-user-select: none;
3104
- user-select: none;
3105
- vertical-align: top;
3106
- font-weight: var(--font-weight-regular);
3107
- font-style: normal;
3108
- text-align: start;
3109
- color: var(--gray-12);
3110
- box-sizing: border-box;
3111
- height: var(--select-trigger-height);
3112
- }
3113
- }
3114
- .ui-SelectTriggerInner {
3115
- overflow: hidden;
3116
- text-overflow: ellipsis;
3117
- white-space: nowrap;
3118
- }
3119
- .ui-SelectIcon {
3120
- flex-shrink: 0;
3121
- opacity: 0.9;
3122
- width: var(--select-icon-size);
3123
- height: var(--select-icon-size);
3124
- }
3125
- .ui-SelectTrigger:where(.r-size-1) {
3126
- --select-trigger-height: var(--space-5);
3127
- --select-trigger-padding-x: var(--space-2);
3128
- --select-trigger-ghost-padding-x: var(--space-2);
3129
- --select-trigger-ghost-padding-y: var(--space-1);
3130
- --select-icon-size: 9px;
3131
-
3132
- gap: var(--space-1);
3133
- font-size: var(--font-size-1);
3134
- line-height: var(--line-height-1);
3135
- letter-spacing: var(--letter-spacing-1);
3136
- border-radius: max(var(--radius-1), var(--radius-full));
3137
- }
3138
- .ui-SelectTrigger:where(.r-size-2) {
3139
- --select-trigger-height: var(--space-6);
3140
- --select-trigger-padding-x: var(--space-3);
3141
- --select-trigger-ghost-padding-x: var(--space-2);
3142
- --select-trigger-ghost-padding-y: var(--space-1);
3143
- --select-icon-size: 10px;
3144
-
3145
- gap: calc(var(--space-1) * 1.5);
3146
- font-size: var(--font-size-2);
3147
- line-height: var(--line-height-2);
3148
- letter-spacing: var(--letter-spacing-2);
3149
- border-radius: max(var(--radius-2), var(--radius-full));
3150
- }
3151
- .ui-SelectTrigger:where(.r-size-3) {
3152
- --select-trigger-height: var(--space-7);
3153
- --select-trigger-padding-x: var(--space-4);
3154
- --select-trigger-ghost-padding-x: var(--space-3);
3155
- --select-trigger-ghost-padding-y: calc(var(--space-1) * 1.5);
3156
- --select-icon-size: 11px;
3157
-
3158
- gap: var(--space-2);
3159
- font-size: var(--font-size-3);
3160
- line-height: var(--line-height-3);
3161
- letter-spacing: var(--letter-spacing-3);
3162
- border-radius: max(var(--radius-3), var(--radius-full));
3163
- }
3164
-
3165
- /** surface */
3166
- .ui-SelectTrigger:where(.r-variant-surface) {
3167
- --select-trigger-border-width: 1px;
3168
- --select-trigger-border-color: var(--gray-a7);
3169
- outline: 0;
3170
- color: var(--gray-12);
3171
- background-color: var(--color-surface);
3172
- border: var(--select-trigger-border-width) solid var(--select-trigger-border-color);
3173
- padding-left: var(--select-trigger-padding-x);
3174
- padding-right: var(--select-trigger-padding-x);
3175
- }
3176
- .ui-SelectTrigger:where(.r-variant-surface):where(:focus-visible) {
3177
- --select-trigger-border-color: var(--focus-a8);
3178
- box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
3179
- }
3180
- @media (hover: hover) {
3181
- .ui-SelectTrigger:where(.r-variant-surface):hover {
3182
- --select-trigger-border-color: var(--gray-a8);
3183
- }
3184
- }
3185
- .ui-SelectTrigger:where(.r-variant-surface):where([data-state='open']) {
3186
- --select-trigger-border-color: var(--gray-a8);
3187
- }
3188
- .ui-SelectTrigger:where(.r-variant-surface):where(:disabled) {
3189
- color: var(--gray-a11);
3190
- background-color: var(--gray-a2);
3191
- --select-trigger-border-color: var(--gray-a6);
3192
- }
3193
- .ui-SelectTrigger:where(.r-variant-surface):where([data-placeholder]) .ui-SelectTriggerInner {
3194
- color: var(--gray-a10);
3195
- }
3196
-
3197
- /** soft and ghost */
3198
- .ui-SelectTrigger:where(.r-variant-soft),
3199
- .ui-SelectTrigger:where(.r-variant-ghost) {
3200
- color: var(--accent-12);
3201
- }
3202
- .ui-SelectTrigger:where(.r-variant-soft):where(:focus-visible),
3203
- .ui-SelectTrigger:where(.r-variant-ghost):where(:focus-visible) {
3204
- outline: 2px solid var(--focus-8);
3205
- outline-offset: -1px;
3206
- }
3207
- .ui-SelectTrigger:where(.r-variant-soft):where([data-placeholder]) .ui-SelectTriggerInner,
3208
- .ui-SelectTrigger:where(.r-variant-ghost):where([data-placeholder]) .ui-SelectTriggerInner {
3209
- color: var(--accent-12);
3210
- opacity: 0.6;
3211
- }
3212
- .ui-SelectTrigger:where(.r-variant-soft) {
3213
- background-color: var(--accent-a3);
3214
- padding-left: var(--select-trigger-padding-x);
3215
- padding-right: var(--select-trigger-padding-x);
3216
- }
3217
- @media (hover: hover) {
3218
- .ui-SelectTrigger:where(.r-variant-soft):hover {
3219
- background-color: var(--accent-a4);
3220
- }
3221
- }
3222
- .ui-SelectTrigger:where(.r-variant-soft):where([data-state='open']) {
3223
- background-color: var(--accent-a4);
3224
- }
3225
- .ui-SelectTrigger:where(.r-variant-soft):where(:focus-visible) {
3226
- outline-color: var(--accent-8);
3227
- }
3228
- .ui-SelectTrigger:where(.r-variant-soft):where(:disabled) {
3229
- color: var(--gray-a11);
3230
- background-color: var(--gray-a3);
3231
- }
3232
- .ui-SelectTrigger:where(.r-variant-ghost) {
3233
- padding: var(--select-trigger-ghost-padding-y) var(--select-trigger-ghost-padding-x);
3234
- margin: calc(0px - var(--select-trigger-ghost-padding-y)) calc(0px - var(--select-trigger-ghost-padding-x));
3235
- }
3236
- @media (hover: hover) {
3237
- .ui-SelectTrigger:where(.r-variant-ghost):hover {
3238
- background-color: var(--accent-a3);
3239
- }
3240
- }
3241
- .ui-SelectTrigger:where(.r-variant-ghost):where([data-state='open']) {
3242
- background-color: var(--accent-a3);
3243
- }
3244
- .ui-SelectTrigger:where(.r-variant-ghost):where(:disabled) {
3245
- color: var(--gray-a11);
3246
- background-color: transparent;
3247
- }
3248
- .ui-SelectTrigger:where(:disabled) .ui-SelectIcon {
3249
- color: var(--gray-a9);
3250
- }
3251
-
3252
- @layer components {
3253
- .ui-SelectItem {
3254
- display: flex;
3255
- align-items: center;
3256
- height: var(--select-item-height);
3257
- padding-left: var(--select-item-indicator-width);
3258
- padding-right: var(--select-item-indicator-width);
3259
- position: relative;
3260
- box-sizing: border-box;
3261
- outline: none;
3262
- scroll-margin: var(--select-content-padding) 0;
3263
- -webkit-user-select: none;
3264
- -moz-user-select: none;
3265
- user-select: none;
3266
- cursor: default;
3267
- }
3268
- }
3269
- .ui-SelectItem:where([data-disabled]) {
3270
- cursor: not-allowed;
3271
- }
3272
- .ui-SelectItemIndicator {
3273
- position: absolute;
3274
- left: 0;
3275
- width: var(--select-item-indicator-width);
3276
- display: inline-flex;
3277
- align-items: center;
3278
- justify-content: center;
3279
- }
3280
- .ui-SelectItem:where([data-disabled]) {
3281
- color: var(--gray-a8);
3282
- }
3283
- :where(.r-size-1) .ui-SelectItem {
3284
- font-size: var(--font-size-1);
3285
- line-height: var(--line-height-1);
3286
- letter-spacing: var(--letter-spacing-1);
3287
- border-radius: var(--radius-1);
3288
- }
3289
- :where(.r-size-1) .ui-SelectItemIndicatorIcon {
3290
- width: calc(8px * var(--scaling));
3291
- height: calc(8px * var(--scaling));
3292
- }
3293
- :where(.r-size-2) .ui-SelectItem {
3294
- line-height: var(--line-height-2);
3295
- border-radius: var(--radius-2);
3296
- font-size: var(--font-size-2);
3297
- letter-spacing: var(--letter-spacing-2);
3298
- }
3299
- :where(.r-size-2) .ui-SelectItemIndicatorIcon,
3300
- :where(.r-size-3) .ui-SelectItemIndicatorIcon {
3301
- width: calc(10px * var(--scaling));
3302
- height: calc(10px * var(--scaling));
3303
- }
3304
- :where(.r-size-3) .ui-SelectItem {
3305
- line-height: var(--line-height-2);
3306
- border-radius: var(--radius-2);
3307
- font-size: var(--font-size-3);
3308
- letter-spacing: var(--letter-spacing-3);
3309
- }
3310
- :where(.r-variant-solid) .ui-SelectItem[data-highlighted] {
3311
- background-color: var(--accent-9);
3312
- color: var(--accent-contrast);
3313
- }
3314
- :where(.r-variant-solid):where(.r-high-contrast) .ui-SelectItem[data-highlighted] {
3315
- background-color: var(--accent-12);
3316
- color: var(--accent-1);
3317
- }
3318
- :where(.r-variant-soft) .ui-SelectItem[data-highlighted] {
3319
- background-color: var(--accent-a4);
3320
- }
3321
-
3322
- @layer components {
3323
- .ui-SelectLabel {
3324
- display: flex;
3325
- align-items: center;
3326
- height: var(--select-item-height);
3327
- padding-left: var(--select-item-indicator-width);
3328
- padding-right: var(--select-item-indicator-width);
3329
- color: var(--gray-a10);
3330
- -webkit-user-select: none;
3331
- -moz-user-select: none;
3332
- user-select: none;
3333
- cursor: default;
3334
- }
3335
- }
3336
- .ui-SelectItem + .ui-SelectLabel {
3337
- margin-top: var(--space-2);
3338
- }
3339
- :where(.r-size-1) .ui-SelectLabel {
3340
- font-size: var(--font-size-1);
3341
- letter-spacing: var(--letter-spacing-1);
3342
- line-height: var(--line-height-1);
3343
- }
3344
- :where(.r-size-2) .ui-SelectLabel,
3345
- :where(.r-size-3) .ui-SelectLabel {
3346
- font-size: var(--font-size-2);
3347
- letter-spacing: var(--letter-spacing-2);
3348
- line-height: var(--line-height-2);
3349
- }
3350
-
3351
- @layer components {
3352
- .ui-SelectSeparator {
3353
- height: 1px;
3354
- margin-top: var(--space-2);
3355
- margin-bottom: var(--space-2);
3356
- margin-left: var(--select-item-indicator-width);
3357
- margin-right: var(--select-separator-margin-right);
3358
- background-color: var(--gray-a6);
3359
- }
3360
- }
3361
-
3362
- @layer components {
3363
- .ui-ComboboxRoot {
3364
- width: -moz-fit-content;
3365
- width: fit-content;
3366
- }
3367
- .ui-ComboboxRoot:where(.r-multiple) {
3368
- width: auto;
3369
- }
3370
- }
3371
- .ui-ComboboxRoot:where(.r-size-1) {
3372
- --combobox-field-height: var(--space-5);
3373
- --combobox-field-padding: calc(var(--space-1) * 1.5);
3374
- --combobox-field-border-radius: max(var(--radius-2), var(--radius-full));
3375
- --combobox-field-native-icon-size: var(--space-3);
3376
- --combobox-field-font-size: var(--font-size-1);
3377
- --combobox-field-letter-spacing: var(--letter-spacing-1);
3378
-
3379
- --combobox-trigger-gap: var(--space-2);
3380
- --combobox-trigger-padding-x: var(--space-1);
3381
-
3382
- --combobox-decoration-container-padding-right: 0px;
3383
- --combobox-decoration-container-margin-right: -2px;
3384
- }
3385
- .ui-ComboboxRoot:where(.r-size-2) {
3386
- --combobox-field-height: var(--space-6);
3387
- --combobox-field-padding: var(--space-2);
3388
- --combobox-field-border-radius: max(var(--radius-2), var(--radius-full));
3389
- --combobox-field-native-icon-size: var(--space-4);
3390
- --combobox-field-font-size: var(--font-size-2);
3391
- --combobox-field-letter-spacing: var(--letter-spacing-2);
3392
-
3393
- --combobox-trigger-gap: var(--space-2);
3394
- --combobox-trigger-padding-x: var(--space-2);
3395
-
3396
- --combobox-decoration-container-padding-right: 2px;
3397
- --combobox-decoration-container-margin-right: 0px;
3398
- }
3399
- .ui-ComboboxRoot:where(.r-size-3) {
3400
- --combobox-field-height: var(--space-7);
3401
- --combobox-field-padding: var(--space-3);
3402
- --combobox-field-border-radius: max(var(--radius-3), var(--radius-full));
3403
- --combobox-field-native-icon-size: var(--space-4);
3404
- --combobox-field-font-size: var(--font-size-3);
3405
- --combobox-field-letter-spacing: var(--letter-spacing-3);
3406
-
3407
- --combobox-trigger-gap: var(--space-3);
3408
- --combobox-trigger-padding-x: var(--space-3);
3409
-
3410
- --combobox-decoration-container-padding-right: 5px;
3411
- --combobox-decoration-container-margin-right: 0px;
3412
- }
3413
-
3414
- .ui-ComboboxField {
3415
- display: flex;
3416
- align-items: stretch;
3417
- font-weight: var(--font-weight-regular);
3418
- font-style: normal;
3419
- text-align: start;
3420
- box-sizing: border-box;
3421
- height: var(--combobox-field-height);
3422
- padding: var(--combobox-field-border-width);
3423
- border-radius: var(--combobox-field-border-radius);
3424
- font-size: var(--combobox-field-font-size);
3425
- letter-spacing: var(--combobox-field-letter-spacing);
3426
- }
3427
- .ui-ComboboxField:where([data-multiple="true"]) {
3428
- height: auto;
3429
- }
3430
- .ui-ComboboxField::-moz-selection {
3431
- background-color: var(--combobox-field-selection-color);
3432
- }
3433
- .ui-ComboboxField::selection {
3434
- background-color: var(--combobox-field-selection-color);
3435
- }
3436
- .ui-ComboboxValues {
3437
- display: flex;
3438
- padding: calc(var(--space-1) / 2);
3439
- gap: var(--space-1);
3440
- align-items: center;
3441
- flex-wrap: wrap;
3442
- flex-grow: 1;
3443
- }
3444
- .ui-ComboboxValuesItem {
3445
- display: flex;
3446
- gap: var(--space-1);
3447
- align-items: center;
3448
- height: calc(var(--combobox-field-height) - var(--space-1) * 2);
3449
- padding: var(--combobox-field-padding);
3450
- border-radius: calc(var(--combobox-field-border-radius) - var(--combobox-field-border-width));
3451
- background-color: var(--accent-a9);
3452
- color: var(--accent-contrast);
3453
- }
3454
- .ui-ComboboxValuesItem:where([aria-current="true"]) {
3455
- background-color: var(--red-a9);
3456
- }
3457
- @layer components {
3458
- .ui-ComboboxInput {
3459
- text-align: inherit;
3460
- border: none;
3461
- padding: 0;
3462
- width: 100%;
3463
- font-size: 1em;
3464
- background-color: transparent;
3465
- border-radius: calc(var(--combobox-field-border-radius) - var(--combobox-field-border-width));
3466
- text-indent: var(--combobox-field-padding);
3467
- height: var(--combobox-input-height);
3468
- cursor: auto;
3469
-
3470
- /* Reset size 2 padding bottom */
3471
- padding-bottom: 0px;
3472
- /* Safari credentials autofill icon */
3473
- }
3474
- }
3475
- .ui-ComboboxField:where([data-multiple="true"]) :where(.ui-ComboboxInput) {
3476
- text-indent: calc(var(--combobox-field-padding) / 2);
3477
- height: calc(var(--combobox-field-height) - var(--space-1) * 2);
3478
- }
3479
- .ui-ComboboxValues :where(.ui-ComboboxInput) {
3480
- width: auto;
3481
- }
3482
- .ui-ComboboxInput:focus {
3483
- outline: none;
3484
- box-shadow: none;
3485
- }
3486
- .ui-ComboboxInput::-moz-selection {
3487
- background-color: var(--combobox-field-selection-color);
3488
- }
3489
- .ui-ComboboxInput::selection {
3490
- background-color: var(--combobox-field-selection-color);
3491
- }
3492
- .ui-ComboboxInput:where(:-webkit-autofill) {
3493
- /* Reliably removes native autofill colors */
3494
- -webkit-background-clip: text;
3495
- background-clip: text;
3496
- -webkit-text-fill-color: var(--gray-12);
3497
- }
3498
- .ui-ComboboxInput:where(:autofill) {
3499
- /* Reliably removes native autofill colors */
3500
- -webkit-background-clip: text;
3501
- background-clip: text;
3502
- -webkit-text-fill-color: var(--gray-12);
3503
- }
3504
- .ui-ComboboxTrigger {
3505
- box-sizing: border-box;
3506
- flex-shrink: 0;
3507
- display: flex;
3508
- align-items: center;
3509
- cursor: pointer;
3510
- order: 0;
3511
- margin-left: 0;
3512
- margin-right: calc(var(--combobox-field-border-width) * -1);
3513
- height: var(--combobox-trigger-height);
3514
-
3515
- gap: var(--combobox-trigger-gap);
3516
- padding-left: var(--combobox-trigger-padding-x);
3517
- padding-right: var(--combobox-trigger-padding-x);
3518
- }
3519
- .ui-ComboboxInput::-webkit-textfield-decoration-container {
3520
- padding-right: var(--combobox-decoration-container-padding-right);
3521
- margin-right: var(--combobox-decoration-container-margin-right);
3522
- }
3523
- .ui-ComboboxField:where(.r-variant-surface) {
3524
- --combobox-field-selection-color: var(--focus-a5);
3525
- --combobox-field-focus-color: var(--focus-a8);
3526
- --combobox-field-border-width: 1px;
3527
- --combobox-field-border-color: var(--gray-a7);
3528
- --combobox-input-height: calc(var(--combobox-field-height) - var(--space-1));
3529
- --combobox-trigger-height: calc(var(--combobox-field-height) - var(--space-1));
3530
-
3531
- /* Blend inner shadow with page background */
3532
- background-clip: content-box;
3533
- background-color: var(--color-surface);
3534
- box-sizing: border-box;
3535
- border: var(--combobox-field-border-width) solid var(--combobox-field-border-color);
3536
- color: var(--gray-12);
3537
- padding: calc(var(--combobox-field-border-width) - var(--combobox-field-border-width));
3538
- }
3539
- @supports selector(:has(*)) {
3540
- .ui-ComboboxField:where(.r-variant-surface):where(:has(.ui-ComboboxInput:focus)) {
3541
- --combobox-field-border-color: var(--combobox-field-focus-color);
3542
- box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
3543
- }
3544
- }
3545
- @supports not selector(:has(*)) {
3546
- .ui-ComboboxField:where(.r-variant-surface):where(:focus-within) {
3547
- --combobox-field-border-color: var(--combobox-field-focus-color);
3548
- box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
3549
- }
3550
- }
3551
- .ui-ComboboxField:where(.r-variant-surface) :where(.ui-ComboboxInput)::-moz-placeholder {
3552
- color: var(--gray-a10);
3553
- }
3554
- .ui-ComboboxField:where(.r-variant-surface) :where(.ui-ComboboxInput)::placeholder {
3555
- color: var(--gray-a10);
3556
- }
3557
- .ui-ComboboxField:where(.r-variant-surface) :where(.ui-ComboboxTrigger) {
3558
- color: var(--gray-a11);
3559
- }
3560
- /* soft */
3561
- .ui-ComboboxField:where(.r-variant-soft) {
3562
- --combobox-field-selection-color: var(--accent-a5);
3563
- --combobox-field-focus-color: var(--accent-8);
3564
- --combobox-field-border-width: 0px;
3565
- --combobox-input-height: var(--combobox-field-height);
3566
- --combobox-trigger-height: var(--combobox-field-height);
3567
-
3568
- background-color: var(--accent-a3);
3569
- color: var(--accent-12);
3570
- padding: var(--combobox-field-border-width);
3571
- }
3572
- @supports selector(:has(*)) {
3573
- .ui-ComboboxField:where(.r-variant-soft):where(:has(.ui-ComboboxInput:focus)) {
3574
- outline: 2px solid var(--combobox-field-focus-color);
3575
- outline-offset: -1px;
3576
- }
3577
- }
3578
- @supports not selector(:has(*)) {
3579
- .ui-ComboboxField:where(.r-variant-soft):where(:focus-within) {
3580
- outline: 2px solid var(--combobox-field-focus-color);
3581
- outline-offset: -1px;
3582
- }
3583
- }
3584
- .ui-ComboboxField:where(.r-variant-soft) :where(.ui-ComboboxInput)::-moz-placeholder {
3585
- color: var(--accent-12);
3586
- opacity: 0.6;
3587
- }
3588
- .ui-ComboboxField:where(.r-variant-soft) :where(.ui-ComboboxInput)::placeholder {
3589
- color: var(--accent-12);
3590
- opacity: 0.6;
3591
- }
3592
- .ui-ComboboxField:where(.r-variant-soft) :where(.ui-ComboboxTrigger) {
3593
- color: var(--accent-12);
3594
- }
3595
- .ui-ComboboxInput:where(:disabled, :read-only)::-moz-placeholder {
3596
- opacity: 0.5;
3597
- }
3598
- .ui-ComboboxInput:where(:disabled, :-moz-read-only)::placeholder {
3599
- opacity: 0.5;
3600
- }
3601
- .ui-ComboboxInput:where(:disabled, :read-only)::placeholder {
3602
- opacity: 0.5;
3603
- }
3604
- .ui-ComboboxInput:where(:disabled, :read-only):where(:-moz-placeholder) {
3605
- cursor: var(--cursor-disabled);
3606
- }
3607
- .ui-ComboboxInput:where(:disabled, :-moz-read-only):where(:placeholder-shown) {
3608
- cursor: var(--cursor-disabled);
3609
- }
3610
- .ui-ComboboxInput:where(:disabled, :read-only):where(:placeholder-shown) {
3611
- cursor: var(--cursor-disabled);
3612
- }
3613
- .ui-ComboboxInput:where(:disabled, :read-only):where(:-moz-placeholder) ~ :where(.ui-ComboboxTrigger) {
3614
- cursor: var(--cursor-disabled);
3615
- }
3616
- .ui-ComboboxInput:where(:disabled, :-moz-read-only):where(:placeholder-shown) ~ :where(.ui-ComboboxTrigger) {
3617
- cursor: var(--cursor-disabled);
3618
- }
3619
- .ui-ComboboxInput:where(:disabled, :read-only):where(:placeholder-shown) ~ :where(.ui-ComboboxTrigger) {
3620
- cursor: var(--cursor-disabled);
3621
- }
3622
-
3623
- .ui-ComboboxContent {
3624
- --scrollarea-scrollbar-vertical-margin-top: var(--combobox-content-padding);
3625
- --scrollarea-scrollbar-vertical-margin-bottom: var(--combobox-content-padding);
3626
- --scrollarea-scrollbar-horizontal-margin-left: var(--combobox-content-padding);
3627
- --scrollarea-scrollbar-horizontal-margin-right: var(--combobox-content-padding);
3628
- }
3629
- @layer components {
3630
- .ui-ComboboxContent {
3631
- overflow: hidden;
3632
- box-shadow: var(--shadow-5);
3633
- background-color: var(--color-panel-solid);
3634
- box-sizing: border-box;
3635
- }
3636
- }
3637
- .ui-ComboboxContent:where([data-side]) {
3638
- min-width: var(--reka-combobox-trigger-width);
3639
- max-width: var(--reka-combobox-content-available-width);
3640
- max-height: var(--reka-combobox-content-available-height);
3641
- transform-origin: var(--reka-combobox-content-transform-origin);
3642
- }
3643
- .ui-ComboboxViewport {
3644
- box-sizing: border-box;
3645
- padding: var(--combobox-content-padding);
3646
- }
3647
- .ui-ComboboxContent:where(:has(.ui-ScrollAreaScrollbar[data-orientation='vertical'])) :where(.ui-ComboboxViewport) {
3648
- padding-right: var(--space-3);
3649
- }
3650
- .ui-ComboboxContent:where(.r-size-1) {
3651
- --combobox-content-padding: var(--space-1);
3652
-
3653
- --combobox-item-height: var(--space-5);
3654
- --combobox-item-font-size: var(--font-size-1);
3655
- --combobox-item-line-height: var(--line-height-1);
3656
- --combobox-item-letter-spacing: var(--letter-spacing-1);
3657
- --combobox-item-radius: var(--radius-1);
3658
-
3659
- --combobox-indicator-width: calc(var(--space-5) / 1.2);
3660
- --combobox-indicator-icon-width: calc(8px * var(--scaling));
3661
- --combobox-indicator-icon-height: calc(8px * var(--scaling));
3662
-
3663
- --combobox-separator-margin-right: var(--space-2);
3664
-
3665
- --combobox-label-font-size: var(--font-size-1);
3666
- --combobox-label-letter-spacing: var(--letter-spacing-1);
3667
- --combobox-label-line-height: var(--line-height-1);
3668
-
3669
- border-radius: var(--radius-3);
3670
- }
3671
- .ui-ComboboxContent:where(.r-size-2) {
3672
- --combobox-item-font-size: var(--font-size-2);
3673
- --combobox-item-letter-spacing: var(--letter-spacing-2);
3674
- }
3675
- .ui-ComboboxContent:where(.r-size-3) {
3676
- --combobox-item-font-size: var(--font-size-3);
3677
- --combobox-item-letter-spacing: var(--letter-spacing-3);
3678
- }
3679
- .ui-ComboboxContent:where(.r-size-2),
3680
- .ui-ComboboxContent:where(.r-size-3) {
3681
- --combobox-content-padding: var(--space-2);
3682
- --combobox-item-radius: var(--radius-2);
3683
- --combobox-item-height: var(--space-6);
3684
- --combobox-item-line-height: var(--line-height-2);
3685
- --combobox-indicator-width: var(--space-5);
3686
- --combobox-indicator-icon-width: calc(10px * var(--scaling));
3687
- --combobox-indicator-icon-height: calc(10px * var(--scaling));
3688
- --combobox-separator-margin-right: var(--space-3);
3689
-
3690
- --combobox-label-font-size: var(--font-size-2);
3691
- --combobox-label-letter-spacing: var(--letter-spacing-2);
3692
- --combobox-label-line-height: var(--line-height-2);
3693
-
3694
- border-radius: var(--radius-4);
3695
- }
3696
- .ui-ComboboxContent:where(.r-variant-solid) {
3697
- --combobox-highlighted-background-color: var(--accent-9);
3698
- --combobox-highlighted-text-color: var(--accent-contrast);
3699
- }
3700
- .ui-ComboboxContent:where(.r-variant-solid.r-high-contrast) {
3701
- --combobox-highlighted-background-color: var(--accent-12);
3702
- --combobox-highlighted-text-color: var(--accent-1);
3703
- }
3704
- .ui-ComboboxContent:where(.r-variant-soft) {
3705
- --combobox-highlighted-background-color: var(--accent-a3);
3706
- --combobox-highlighted-text-color: var(--accent-a11);
3707
- }
3708
- .ui-ComboboxContent:where(.r-variant-soft.r-high-contrast) {
3709
- --combobox-highlighted-text-color: var(--accent-12);
3710
- }
3711
-
3712
- @layer components {
3713
- .ui-ComboboxItem {
3714
- display: flex;
3715
- align-items: center;
3716
- height: var(--combobox-item-height);
3717
- padding-left: var(--combobox-indicator-width);
3718
- padding-right: var(--combobox-indicator-width);
3719
- position: relative;
3720
- box-sizing: border-box;
3721
- outline: none;
3722
- scroll-margin: var(--combobox-content-padding) 0;
3723
- -webkit-user-select: none;
3724
- -moz-user-select: none;
3725
- user-select: none;
3726
- cursor: default;
3727
-
3728
- font-size: var(--combobox-item-font-size);
3729
- line-height: var(--combobox-item-line-height);
3730
- letter-spacing: var(--combobox-item-letter-spacing);
3731
- border-radius: var(--combobox-item-radius);
3732
- }
3733
- }
3734
- .ui-ComboboxItem:where([data-disabled]) {
3735
- cursor: not-allowed;
3736
- }
3737
- .ui-ComboboxItem:where([data-disabled]) {
3738
- color: var(--gray-a8);
3739
- }
3740
- .ui-ComboboxItem:where([data-highlighted]) {
3741
- background-color: var(--combobox-highlighted-background-color);
3742
- color: var(--combobox-highlighted-text-color);
3743
- }
3744
- .ui-ComboboxItemIndicator {
3745
- position: absolute;
3746
- left: 0;
3747
- width: var(--combobox-indicator-width);
3748
- display: inline-flex;
3749
- align-items: center;
3750
- justify-content: center;
3751
- }
3752
- .ui-ComboboxItemIndicatorIcon {
3753
- width: var(--combobox-indicator-icon-width);
3754
- height: var(--combobox-indicator-icon-height);
3755
- }
3756
-
3757
- @layer components {
3758
- .ui-ComboboxLabel {
3759
- display: flex;
3760
- align-items: center;
3761
- height: var(--combobox-item-height);
3762
- padding-left: calc(var(--combobox-indicator-width) / 2);
3763
- padding-right: var(--combobox-indicator-width);
3764
- color: var(--gray-a10);
3765
- -webkit-user-select: none;
3766
- -moz-user-select: none;
3767
- user-select: none;
3768
- cursor: default;
3769
-
3770
- font-size: var(--combobox-label-font-size);
3771
- letter-spacing: var(--combobox-label-letter-spacing);
3772
- line-height: var(--combobox-label-line-height);
3773
- }
3774
- }
3775
- .ui-SelectItem + .ui-ComboboxLabel {
3776
- margin-top: var(--space-2);
3777
- }
3778
-
3779
- @layer components {
3780
- .ui-ComboboxEmpty {
3781
- box-sizing: border-box;
3782
- outline: none;
3783
- scroll-margin: var(--combobox-content-padding) 0;
3784
- -webkit-user-select: none;
3785
- -moz-user-select: none;
3786
- user-select: none;
3787
- cursor: default;
3788
- padding-left: calc(var(--combobox-indicator-width) / 2);
3789
- padding-right: var(--combobox-indicator-width);
3790
- font-size: var(--combobox-item-font-size);
3791
- line-height: var(--combobox-item-line-height);
3792
- letter-spacing: var(--combobox-item-letter-spacing);
3793
- color: var(--gray-11);
3794
- }
3795
- }
3796
- .ui-RadioBase {
3797
- position: relative;
3798
- display: inline-flex;
3799
- align-items: center;
3800
- justify-content: center;
3801
- vertical-align: top;
3802
- flex-shrink: 0;
3803
- cursor: default;
3804
- width: var(--radio-size);
3805
- height: var(--radio-size);
3806
- border: none;
3807
- box-shadow: none;
3808
- }
3809
- .ui-RadioBase:where(.r-size-1) {
3810
- --radio-size: calc(var(--space-4) * 0.875);
3811
- }
3812
- .ui-RadioBase:where(.r-size-2) {
3813
- --radio-size: var(--space-4);
3814
- }
3815
- .ui-RadioBase:where(.r-size-3) {
3816
- --radio-size: calc(var(--space-4) * 1.25);
3817
- }
3818
- .ui-RadioBase:checked {
3819
- /* reset for tailwind */
3820
- background-image: none;
3821
- }
3822
- .ui-RadioBase:focus {
3823
- /* reset for tailwind */
3824
- box-shadow: none;
3825
- }
3826
- .ui-RadioBase:where(:focus-visible) {
3827
- outline: none;
3828
- }
3829
- .ui-RadioBase:where(:disabled, [data-disabled]) {
3830
- cursor: not-allowed;
3831
- }
3832
- .ui-RadioBase::before {
3833
- content: '';
3834
- display: block;
3835
- height: var(--radio-size);
3836
- width: var(--radio-size);
3837
- border-radius: 100%;
3838
- }
3839
- .ui-RadioBase::after {
3840
- pointer-events: none;
3841
- position: absolute;
3842
- height: var(--radio-size);
3843
- width: var(--radio-size);
3844
- border-radius: 100%;
3845
- /* Scale via transform to achieve perfect sub-pixel positioning */
3846
- transform: scale(0.4);
3847
- }
3848
- .ui-RadioBase:where(:checked, [data-state='checked'])::after {
3849
- content: '';
3850
- }
3851
- .ui-RadioBase:where(:focus-visible)::before {
3852
- outline: 2px solid var(--focus-8);
3853
- outline-offset: 2px;
3854
- }
3855
- :where(.ui-RadioGroupRoot.r-variant-surface) .ui-RadioBase:where(:not(:checked), [data-state='unchecked'])::before,
3856
- .ui-RadioBase:where(.r-variant-surface):where(:not(:checked), [data-state='unchecked'])::before {
3857
- background-color: var(--color-surface);
3858
- box-shadow: inset 0 0 0 1px var(--gray-a7);
3859
- }
3860
- :where(.ui-RadioGroupRoot.r-variant-surface) .ui-RadioBase:where(:checked, [data-state='checked'])::before,
3861
- .ui-RadioBase:where(.r-variant-surface):where(:checked, [data-state='checked'])::before {
3862
- background-color: var(--accent-indicator);
3863
- }
3864
- :where(.ui-RadioGroupRoot.r-variant-surface) .ui-RadioBase::after,
3865
- .ui-RadioBase:where(.r-variant-surface)::after {
3866
- background-color: var(--accent-contrast);
3867
- }
3868
- :where(.ui-RadioGroupRoot.r-variant-surface.r-high-contrast) .ui-RadioBase:where(:checked, [data-state='checked'])::before,
3869
- .ui-RadioBase:where(.r-variant-surface.r-high-contrast):where(:checked, [data-state='checked'])::before {
3870
- background-color: var(--accent-12);
3871
- }
3872
- :where(.ui-RadioGroupRoot.r-variant-surface.r-high-contrast) .ui-RadioBase::after,
3873
- .ui-RadioBase:where(.r-variant-surface.r-high-contrast)::after {
3874
- background-color: var(--accent-1);
3875
- }
3876
- :where(.ui-RadioGroupRoot.r-variant-surface) .ui-RadioBase:where(:disabled, [data-disabled])::before,
3877
- .ui-RadioBase:where(.r-variant-surface):where(:disabled, [data-disabled])::before {
3878
- box-shadow: inset 0 0 0 1px var(--gray-a6);
3879
- background-color: var(--gray-a3);
3880
- }
3881
- :where(.ui-RadioGroupRoot.r-variant-surface) .ui-RadioBase:where(:disabled, [data-disabled])::after,
3882
- .ui-RadioBase:where(.r-variant-surface):where(:disabled, [data-disabled])::after {
3883
- background-color: var(--gray-a8);
3884
- }
3885
- :where(.ui-RadioGroupRoot.r-variant-soft) .ui-RadioBase::before,
3886
- .ui-RadioBase:where(.r-variant-soft)::before {
3887
- background-color: var(--accent-a4);
3888
- }
3889
- :where(.ui-RadioGroupRoot.r-variant-soft) .ui-RadioBase::after,
3890
- .ui-RadioBase:where(.r-variant-soft)::after {
3891
- background-color: var(--accent-a11);
3892
- }
3893
- :where(.ui-RadioGroupRoot.r-variant-soft.r-high-contrast) .ui-RadioBase::after,
3894
- .ui-RadioBase:where(.r-variant-soft.r-high-contrast)::after {
3895
- background-color: var(--accent-12);
3896
- }
3897
- :where(.ui-RadioGroupRoot.r-variant-soft:focus-visible) .ui-RadioBase::before,
3898
- .ui-RadioBase:where(.r-variant-soft:focus-visible)::before {
3899
- outline-color: var(--accent-a8);
3900
- }
3901
- :where(.ui-RadioGroupRoot.r-variant-soft) .ui-RadioBase:where(:disabled, [data-disabled])::before,
3902
- .ui-RadioBase:where(.r-variant-soft):where(:disabled, [data-disabled])::before {
3903
- background-color: var(--gray-a3);
3904
- }
3905
- :where(.ui-RadioGroupRoot.r-variant-soft) .ui-RadioBase:where(:disabled, [data-disabled])::after,
3906
- .ui-RadioBase:where(.r-variant-soft):where(:disabled, [data-disabled])::after {
3907
- background-color: var(--gray-a8);
3908
- }
3909
-
3910
- .ui-Radio {
3911
- -webkit-appearance: none;
3912
- -moz-appearance: none;
3913
- appearance: none;
3914
- }
3915
-
3916
- .ui-RadioGroupRoot:where(.r-size-1) {
3917
- --radio-size: calc(var(--space-4) * 0.875);
3918
- }
3919
- .ui-RadioGroupRoot:where(.r-size-2) {
3920
- --radio-size: var(--space-4);
3921
- }
3922
- .ui-RadioGroupRoot:where(.r-size-3) {
3923
- --radio-size: calc(var(--space-4) * 1.25);
3924
- }
3925
-
3926
- @layer components {
3927
- .ui-RadioGroupItem {
3928
- display: inline-flex;
3929
- align-items: center;
3930
- gap: .5em;
3931
- width: -moz-fit-content;
3932
- width: fit-content;
3933
- }
3934
- }
3935
-
3936
- .ui-RadioCardsRoot:where(.r-size-1) {
3937
- --card-padding: var(--space-3);
3938
- --card-border-radius: max(var(--radius-4), var(--radius-full));
3939
- }
3940
- .ui-RadioCardsRoot:where(.r-size-2) {
3941
- --card-padding: var(--space-4);
3942
- --card-border-radius: max(var(--radius-4), var(--radius-full));
3943
- }
3944
- .ui-RadioCardsRoot:where(.r-size-3) {
3945
- --card-padding: var(--space-5);
3946
- --card-border-radius: max(var(--radius-5), var(--radius-full));
3947
- }
3948
- @layer components {
3949
- .ui-BaseCard {
3950
- display: block;
3951
- position: relative;
3952
- overflow: hidden;
3953
- font-style: normal;
3954
- text-align: start;
3955
- box-sizing: border-box;
3956
- border-radius: var(--card-border-radius);
3957
- padding: var(--card-padding);
3958
- border-color: var(--card-border-color, var(--gray-a5));
3959
- border-width: var(--card-border-width, 1px);
3960
- border-style: solid;
3961
- width: 100%;
3962
- }
3963
- }
3964
- .ui-BaseCard:where(:-moz-any-link, button, label):where(:hover) {
3965
- --card-border-color: var(--gray-a7);
3966
- }
3967
- .ui-BaseCard:where(:any-link, button, label):where(:hover) {
3968
- --card-border-color: var(--gray-a7);
3969
- }
3970
- .ui-BaseCard:where(:-moz-any-link, button, label):where(:focus-visible) {
3971
- --card-border-color: var(--focus-8);
3972
- box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
3973
- }
3974
- .ui-BaseCard:where(:any-link, button, label):where(:focus-visible) {
3975
- --card-border-color: var(--focus-8);
3976
- box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
3977
- }
3978
-
3979
- .ui-RadioCardsItem {
3980
- height: 100%;
3981
- }
3982
- .ui-RadioCardsItem:where([data-state="checked"]) {
3983
- --card-border-color: var(--accent-10);
3984
- box-shadow: 0 0 0 1px var(--accent-10);
3985
- }
3986
-
3987
- @layer components {
3988
- .ui-RadioTabsRoot {
3989
- display: inline-flex;
3990
- width: -moz-fit-content;
3991
- width: fit-content;
3992
- align-items: center;
3993
- box-sizing: border-box;
3994
- padding: var(--radio-tabs-list-padding);
3995
- border-radius: var(--radio-tabs-list-radius);
3996
- font-size: var(--radio-tabs-font-size);
3997
- }
3998
- }
3999
- .ui-RadioTabsRoot:where(.r-size-1) {
4000
- --radio-tabs-font-size: var(--font-size-1);
4001
- --radio-tabs-list-padding: var(--space-1);
4002
- --radio-tabs-list-radius: max(var(--radius-2), var(--radius-full));
4003
- --radio-tabs-item-padding: 3px 6px;
4004
- --radio-tabs-item-radius: max(var(--radius-1), var(--radius-full));
4005
- }
4006
- .ui-RadioTabsRoot:where(.r-size-2) {
4007
- --radio-tabs-font-size: var(--font-size-2);
4008
- --radio-tabs-list-padding: var(--space-1);
4009
- --radio-tabs-list-radius: max(var(--radius-3), var(--radius-full));
4010
- --radio-tabs-item-padding: 4px 8px;
4011
- --radio-tabs-item-radius: max(var(--radius-2), var(--radius-full));
4012
- }
4013
- .ui-RadioTabsRoot:where(.r-variant-surface) {
4014
- background-color: var(--accent-surface);
4015
- box-shadow: inset 0 0 0 1px var(--accent-a7);
4016
- }
4017
- .ui-RadioTabsRoot:where(.r-variant-classic) {
4018
- background-color: var(--accent-a3);
4019
- }
4020
- .ui-RadioTabsRoot:where(.r-variant-soft) {
4021
- background-color: var(--accent-a3);
4022
- }
4023
-
4024
- .ui-RadioTabsItem {
4025
- display: inline-flex;
4026
- flex-grow: 1;
4027
- justify-content: center;
4028
- align-items: center;
4029
- color: var(--gray-a11);
4030
- padding: var(--radio-tabs-item-padding);
4031
- border-radius: var(--radio-tabs-item-radius);
4032
- }
4033
- .ui-RadioTabsItem:where([data-state="unchecked"]) {
4034
- letter-spacing: var(--tab-inactive-letter-spacing);
4035
- word-spacing: var(--tab-inactive-word-spacing);
4036
- }
4037
- .ui-RadioTabsItem:where([data-state="checked"]) {
4038
- font-weight: var(--font-weight-medium);
4039
- letter-spacing: var(--tab-active-letter-spacing);
4040
- word-spacing: var(--tab-active-word-spacing);
4041
- }
4042
- .ui-RadioTabsRoot:where(.r-variant-classic) :where(.ui-RadioTabsItem[data-state="checked"]) {
4043
- color: var(--gray-12);
4044
- background-color: var(--color-background);
4045
- box-shadow: var(--shadow-2);
4046
- }
4047
- .ui-RadioTabsRoot:where(.r-variant-soft) :where(.ui-RadioTabsItem[data-state="checked"]),
4048
- .ui-RadioTabsRoot:where(.r-variant-surface) :where(.ui-RadioTabsItem[data-state="checked"]) {
4049
- color: var(--accent-a11);
4050
- background-color: var(--accent-a3);
4051
- }
4052
- @media (hover: hover) {
4053
- :where(.ui-RadioTabsRoot.r-variant-classic) .ui-RadioTabsItem:where(:hover) {
4054
- color: var(--gray-12);
4055
- }
4056
- :where(.ui-RadioTabsRoot.r-variant-classic) .ui-RadioTabsItem:where(:hover) {
4057
- color: var(--gray-12);
4058
- }
4059
- }
4060
-
4061
- .ui-TabsList::-webkit-scrollbar {
4062
- display: none;
4063
- }
4064
- .ui-TabsList:where(.r-size-1) {
4065
- --tab-font-size: var(--font-size-1);
4066
- --tab-line-height: var(--line-height-1);
4067
- --tab-letter-spacing: var(--letter-spacing-1);
4068
- --tab-height: var(--space-6);
4069
- --tab-padding-x: var(--space-1);
4070
- --tab-radius: max(var(--radius-2), var(--radius-full));
4071
- --tab-item-radius: max(var(--radius-1), var(--radius-full));
4072
- --tab-inner-padding-x: var(--space-1);
4073
- --tab-inner-height: var(--space-5);
4074
- }
4075
- .ui-TabsList:where(.r-size-2) {
4076
- --tab-font-size: var(--font-size-2);
4077
- --tab-line-height: var(--line-height-2);
4078
- --tab-letter-spacing: var(--letter-spacing-2);
4079
- --tab-height: var(--space-7);
4080
- --tab-padding-x: var(--space-2);
4081
- --tab-radius: max(var(--radius-3), var(--radius-full));
4082
- --tab-item-radius: max(var(--radius-2), var(--radius-full));
4083
- --tab-inner-padding-x: var(--space-2);
4084
- --tab-inner-height: calc(var(--space-6) - var(--space-1));
4085
- }
4086
- .ui-TabsList:where(.r-variant-surface.r-size-1),
4087
- .ui-TabsList:where(.r-variant-soft.r-size-1) {
4088
- --tab-inner-padding-x: calc(var(--space-2) / 4 * 3);
4089
- }
4090
- @layer components {
4091
- .ui-TabsList {
4092
- justify-content: flex-start;
4093
- position: relative;
4094
- overflow-x: auto;
4095
- white-space: nowrap;
4096
- font-style: normal;
4097
- scrollbar-width: none;
4098
- font-size: var(--tab-font-size);
4099
- line-height: var(--tab-line-height);
4100
- letter-spacing: var(--tab-letter-spacing);
4101
- }
4102
-
4103
- /** classic & surface */
4104
- .ui-TabsList:where(.r-variant-surface, .r-variant-classic) {
4105
- position: relative;
4106
- display: inline-flex;
4107
- width: -moz-fit-content;
4108
- width: fit-content;
4109
- align-items: center;
4110
- vertical-align: top;
4111
- flex-shrink: 0;
4112
- border-radius: var(--tab-radius);
4113
- }
4114
- .ui-TabsList:where(.r-variant-classic) {
4115
- background-color: var(--accent-a3);
4116
- padding-left: var(--tab-padding-x);
4117
- padding-right: var(--tab-padding-x);
4118
- }
4119
- .ui-TabsList:where(.r-variant-surface) {
4120
- --tab-item-radius: 0;
4121
- --tab-inner-height: var(--tab-height);
4122
- box-shadow: inset 0 0 0 1px var(--gray-a6);
4123
- }
4124
-
4125
- /** soft & outline */
4126
- .ui-TabsList:where(.r-variant-outline, .r-variant-soft) {
4127
- display: flex;
4128
- box-shadow: inset 0 -1px 0 0 var(--gray-a5);
4129
- }
4130
- .ui-TabsList:where(.r-variant-soft) {
4131
- padding-left: var(--tab-padding-x);
4132
- padding-right: var(--tab-padding-x);
4133
- }
4134
- }
4135
- .ui-TabsIndicator {
4136
- position: absolute;
4137
- left: 0;
4138
- transition-property: width, transform;
4139
- transform: translateX(var(--reka-tabs-indicator-position));
4140
- width: var(--reka-tabs-indicator-size);
4141
- }
4142
- .ui-TabsList:where(.r-variant-surface) :where(.ui-TabsIndicator) {
4143
- top: 0;
4144
- height: var(--tab-height);
4145
- background-color: var(--accent-a3);
4146
- transition-duration: 100ms;
4147
- }
4148
- .ui-TabsList:where(.r-variant-classic) :where(.ui-TabsIndicator) {
4149
- top: calc((var(--tab-height) - var(--tab-inner-height)) / 2);
4150
- height: var(--tab-inner-height);
4151
- background-color: var(--color-panel-solid);
4152
- box-shadow:
4153
- 0 0 0 0.5px var(--black-a1),
4154
- 0 1px 1px 0 var(--gray-a2),
4155
- 0 2px 1px -1px var(--black-a1),
4156
- 0 1px 3px 0 var(--black-a1);
4157
- border-radius: var(--tab-item-radius);
4158
- transition-duration: 100ms;
4159
- }
4160
- .ui-TabsList:where(.r-variant-soft) :where(.ui-TabsIndicator) {
4161
- top: calc((var(--tab-height) - var(--tab-inner-height)) / 2);
4162
- height: var(--tab-inner-height);
4163
- background-color: var(--accent-a3);
4164
- border-radius: var(--tab-item-radius);
4165
- transition-duration: 100ms;
4166
- }
4167
- .ui-TabsList:where(.r-variant-outline) :where(.ui-TabsIndicator) {
4168
- bottom: 0;
4169
- height: 2px;
4170
- background-color: var(--accent-indicator);
4171
- transition-duration: 300ms;
4172
- }
4173
-
4174
- /** high contrast */
4175
- :where(.ui-TabsList.r-variant-outline.r-high-contrast) .ui-TabsIndicator {
4176
- background-color: var(--accent-12);
4177
- }
4178
-
4179
- .ui-TabTrigger {
4180
- display: flex;
4181
- align-items: center;
4182
- justify-content: center;
4183
- flex-shrink: 0;
4184
- position: relative;
4185
- -webkit-user-select: none;
4186
- -moz-user-select: none;
4187
- user-select: none;
4188
- box-sizing: border-box;
4189
- height: var(--tab-height);
4190
- color: var(--gray-a11);
4191
- outline: none;
4192
- }
4193
- .ui-TabTrigger:disabled {
4194
- color: var(--gray-a8);
4195
- border-color: currentColor;
4196
- }
4197
- .ui-TabTriggerInner,
4198
- .ui-TabTriggerInnerHidden {
4199
- display: flex;
4200
- align-items: center;
4201
- justify-content: center;
4202
- box-sizing: border-box;
4203
- height: var(--tab-inner-height);
4204
- padding-left: var(--tab-inner-padding-x);
4205
- padding-right: var(--tab-inner-padding-x);
4206
- border-radius: var(--tab-item-radius);
4207
- }
4208
- .ui-TabTriggerInner {
4209
- position: absolute;
4210
- }
4211
- :where(.ui-TabTrigger[data-state='inactive']) .ui-TabTriggerInner {
4212
- letter-spacing: var(--tab-inactive-letter-spacing);
4213
- word-spacing: var(--tab-inactive-word-spacing);
4214
- }
4215
- :where(.ui-TabTrigger[data-state='active']) .ui-TabTriggerInner {
4216
- font-weight: var(--font-weight-medium);
4217
- letter-spacing: var(--tab-active-letter-spacing);
4218
- word-spacing: var(--tab-active-word-spacing);
4219
- }
4220
- .ui-TabTriggerInnerHidden {
4221
- visibility: hidden;
4222
- font-weight: var(--font-weight-medium);
4223
- letter-spacing: var(--tab-active-letter-spacing);
4224
- word-spacing: var(--tab-active-word-spacing);
4225
- }
4226
- @media (hover: hover) {
4227
- .ui-TabsList:where(.r-variant-outline, .r-variant-classic) :where(.ui-TabTrigger:hover) {
4228
- color: var(--gray-12);
4229
- }
4230
- .ui-TabsList:where(.r-variant-surface, .r-variant-soft) :where(.ui-TabTrigger:hover) {
4231
- color: var(--accent-a11);
4232
- }
4233
- .ui-TabsList:where(.r-variant-outline) :where(.ui-TabTrigger:not(:disabled):hover) :where(.ui-TabTriggerInner) {
4234
- background-color: var(--gray-a3);
4235
- }
4236
- .ui-TabTrigger:where(:focus-visible:hover) :where(.ui-TabTriggerInner) {
4237
- background-color: var(--accent-a3);
4238
- }
4239
- }
4240
- .ui-TabTrigger:where(:focus-visible) :where(.ui-TabTriggerInner) {
4241
- outline: 2px solid var(--focus-8);
4242
- outline-offset: -2px;
4243
- }
4244
- .ui-TabsList:where(.r-variant-outline) :where(.ui-TabTrigger) {
4245
- padding-left: var(--tab-padding-x);
4246
- padding-right: var(--tab-padding-x);
4247
- }
4248
- .ui-TabsList:where(.r-variant-classic, .r-variant-outline) :where(.ui-TabTrigger[data-state='active']) {
4249
- color: var(--gray-12);
4250
- }
4251
- .ui-TabsList:where(.r-variant-soft) :where(.ui-TabTrigger + .ui-TabTrigger) {
4252
- margin-left: calc(var(--tab-padding-x) / 2)
4253
- }
4254
- .ui-TabsList:where(.r-variant-surface) :where(.ui-TabTrigger + .ui-TabTrigger) {
4255
- box-shadow: inset 1px 0 0 var(--gray-a4);
4256
- }
4257
- .ui-TabsList:where(.r-variant-surface, .r-variant-soft) :where(.ui-TabTrigger[data-state='active']) {
4258
- color: var(--accent-a11);
4259
- }
4260
-
4261
- .ui-Editable:where(.r-size-1) {
4262
- --editable-padding-x: var(--space-1);
4263
- --editable-border-radius: max(var(--radius-2), var(--radius-full));
4264
- }
4265
- .ui-Editable:where(.r-size-2) {
4266
- --editable-padding-x: var(--space-2);
4267
- --editable-border-radius: max(var(--radius-2), var(--radius-full));
4268
- }
4269
- .ui-Editable:where(.r-size-3) {
4270
- --editable-padding-x: var(--space-3);
4271
- --editable-border-radius: max(var(--radius-3), var(--radius-full));
4272
- }
4273
- .ui-EditableArea {
4274
- padding-left: var(--editable-padding-x);
4275
- padding-right: var(--editable-padding-x);
4276
- border-radius: var(--editable-border-radius);
4277
- overflow: hidden;
4278
- text-overflow: ellipsis;
4279
- }
4280
- .ui-EditableArea:where([data-focused]),
4281
- .ui-EditableArea:where(:hover) {
4282
- background-color: var(--accent-a3);
4283
- }
4284
- .ui-EditablePreview {
4285
- white-space: pre;
4286
- -webkit-user-select: none;
4287
- -moz-user-select: none;
4288
- user-select: none;
4289
- }
4290
- .ui-EditableInput {
4291
- outline: none;
4292
- max-width: 100%;
4293
- }
4294
-
4295
- .ui-AccordionRoot {
4296
- overflow: hidden;
4297
- }
4298
- .ui-AccordionRoot:where(.r-size-1) {
4299
- --accordion-padding: var(--space-3);
4300
- --accordion-trigger-font-size: var(--font-size-3);
4301
- --accordion-trigger-gap: var(--space-1);
4302
- --accordion-content-font-size: var(--font-size-2);
4303
- --accordion-indicator-line-width: 1px;
4304
- }
4305
- .ui-AccordionRoot:where(.r-size-2) {
4306
- --accordion-padding: var(--space-4);
4307
- --accordion-trigger-font-size: var(--font-size-4);
4308
- --accordion-trigger-gap: var(--space-2);
4309
- --accordion-content-font-size: var(--font-size-3);
4310
- --accordion-indicator-line-width: 1px;
4311
- }
4312
- .ui-AccordionRoot:where(.r-size-3) {
4313
- --accordion-padding: var(--space-5);
4314
- --accordion-trigger-font-size: var(--font-size-5);
4315
- --accordion-trigger-gap: var(--space-3);
4316
- --accordion-content-font-size: var(--font-size-4);
4317
- --accordion-indicator-line-width: 2px;
4318
- }
4319
-
4320
- .ui-AccordionItem + .ui-AccordionItem {
4321
- border-top: 1px solid var(--gray-a5);
4322
- }
4323
-
4324
- @keyframes accordion-down {
4325
- from {
4326
- height: 0;
4327
- }
4328
- to {
4329
- height: var(--reka-accordion-content-height);
4330
- }
4331
- }
4332
- @keyframes accordion-up {
4333
- from {
4334
- height: var(--reka-accordion-content-height);
4335
- }
4336
- to {
4337
- height: 0;
4338
- }
4339
- }
4340
- @layer components {
4341
- .ui-AccordionContent {
4342
- overflow: hidden;
4343
- font-weight: var(--font-weight-regular);
4344
- font-size: var(--accordion-content-font-size);
4345
- }
4346
- }
4347
- .ui-AccordionContent:where([data-state="open"]) {
4348
- animation: accordion-down 0.2s ease-out;
4349
- }
4350
- .ui-AccordionContent:where([data-state="closed"]) {
4351
- animation: accordion-up 0.2s ease-out;
4352
- }
4353
- .ui-AccordionContentInner {
4354
- padding-bottom: var(--accordion-padding);
4355
- }
4356
-
4357
- .ui-AccordionIndicator {
4358
- display: inline-flex;
4359
- align-items: center;
4360
- --accordion-indicator-color: var(--gray-10);
4361
- }
4362
- .ui-AccordionIndicator:where([data-side="left"]) {
4363
- order: -1;
4364
- }
4365
- .ui-AccordionIndicator:where([data-side="right"]) {
4366
- order: 0;
4367
- }
4368
- .ui-AccordionIndicator-chevron {
4369
- transition: transform 0.2s ease;
4370
- font-size: var(--accordion-indicator-icon-size);
4371
- color: var(--accordion-indicator-color);
4372
- }
4373
- :where([data-state="open"]) .ui-AccordionIndicator-chevron {
4374
- transform: rotate(90deg);
4375
- }
4376
- .ui-AccordionIndicator-plus {
4377
- position: relative;
4378
- width: calc(var(--accordion-indicator-icon-size) - var(--space-1));
4379
- height: calc(var(--accordion-indicator-icon-size) - var(--space-1));
4380
- cursor: pointer;
4381
- display: inline-block;
4382
- }
4383
- .ui-AccordionIndicator-plus-1,
4384
- .ui-AccordionIndicator-plus-2 {
4385
- position: absolute;
4386
- background-color: var(--accordion-indicator-color);
4387
- border-radius: 2px;
4388
- transition: transform 0.3s, opacity 0.3s;
4389
- }
4390
- .ui-AccordionIndicator-plus-1 {
4391
- top: 50%;
4392
- left: 0;
4393
- width: 100%;
4394
- height: var(--accordion-indicator-line-width);
4395
- transform: translateY(-50%) rotate(0deg);
4396
- }
4397
- .ui-AccordionIndicator-plus-2 {
4398
- top: 0;
4399
- left: 50%;
4400
- width: var(--accordion-indicator-line-width);
4401
- height: 100%;
4402
- transform: translateX(-50%) rotate(0deg);
4403
- }
4404
- :where([data-state="open"]) .ui-AccordionIndicator-plus-1 {
4405
- transform: translateY(-50%) rotate(180deg);
4406
- }
4407
- :where([data-state="open"]) .ui-AccordionIndicator-plus-2 {
4408
- transform: translateX(-50%) rotate(90deg);
4409
- opacity: 0;
4410
- height: 0;
4411
- }
4412
-
4413
- @layer components {
4414
- .ui-AccordionTrigger {
4415
- display: flex;
4416
- align-items: center;
4417
- justify-content: space-between;
4418
- text-align: initial;
4419
- width: 100%;
4420
- cursor: pointer;
4421
- -webkit-user-select: none;
4422
- -moz-user-select: none;
4423
- user-select: none;
4424
- font-size: var(--accordion-trigger-font-size);
4425
- padding-top: var(--accordion-padding);
4426
- padding-bottom: var(--accordion-padding);
4427
- font-weight: var(--font-weight-medium);
4428
- gap: var(--accordion-trigger-gap);
4429
- --accordion-indicator-icon-size: var(--accordion-trigger-font-size);
4430
- }
4431
- }
4432
- .ui-AccordionTrigger:hover {
4433
- text-decoration: underline;
4434
- }
4435
- .ui-AccordionTriggerText {
4436
- flex-grow: 1;
4437
- }
4438
-
4439
- .ui-CollapsibleRoot:where(.r-size-1) {
4440
- --collapsible-font-size: var(--font-size-2);
4441
- --collapsible-trigger-gap: calc(var(--space-1) / 2);
4442
- --collapsible-indicator-icon-size: var(--font-size-2);
4443
- --collapsible-padding-y: var(--space-2);
4444
- --collapsible-padding-x: var(--space-3);
4445
- --collapsible-radius: max(var(--radius-1), var(--radius-full))
4446
- }
4447
- .ui-CollapsibleRoot:where(.r-size-2) {
4448
- --collapsible-font-size: var(--font-size-3);
4449
- --collapsible-trigger-gap: var(--space-1);
4450
- --collapsible-indicator-icon-size: var(--font-size-3);
4451
- --collapsible-padding-y: var(--space-3);
4452
- --collapsible-padding-x: var(--space-4);
4453
- --collapsible-radius: max(var(--radius-2), var(--radius-full))
4454
- }
4455
- .ui-CollapsibleRoot:where(.r-size-3) {
4456
- --collapsible-font-size: var(--font-size-4);
4457
- --collapsible-trigger-gap: calc(var(--space-2) * 3 / 4);
4458
- --collapsible-indicator-icon-size: var(--font-size-5);
4459
- --collapsible-padding-y: var(--space-3);
4460
- --collapsible-padding-x: var(--space-4);
4461
- --collapsible-radius: max(var(--radius-4), var(--radius-full))
4462
- }
4463
- .ui-CollapsibleRoot:where(.r-size-4) {
4464
- --collapsible-font-size: var(--font-size-7);
4465
- --collapsible-trigger-gap: var(--space-2);
4466
- --collapsible-indicator-icon-size: var(--font-size-7);
4467
- --collapsible-padding-y: var(--space-3);
4468
- --collapsible-padding-x: var(--space-5);
4469
- --collapsible-radius: max(var(--radius-4), var(--radius-full))
4470
- }
4471
- .ui-CollapsibleRoot:where(.r-variant-soft, .r-variant-surface) {
4472
- --collapsible-trigger-background-color: var(--accent-a2);
4473
- --collapsible-trigger-hover-background-color: var(--accent-a3);
4474
- --collapsible-trigger-open-background-color: var(--accent-a3);
4475
- --collapsible-trigger-open-text-color: var(--accent-a11);
4476
-
4477
- border-radius: var(--collapsible-radius);
4478
- }
4479
- .ui-CollapsibleRoot:where(.r-variant-surface) {
4480
- box-shadow: inset 0 0 0 1px var(--gray-a4);
4481
- }
4482
- .ui-CollapsibleRoot:where(.r-variant-surface):where([data-state="open"]) {
4483
- box-shadow: inset 0 0 0 1px var(--gray-a5);
4484
- }
4485
- .ui-CollapsibleRoot:where(.r-variant-soft, .r-variant-surface):where([data-accent-color="gray"]) {
4486
- --collapsible-trigger-open-text-color: var(--accent-12);
4487
- }
4488
-
4489
- @layer components {
4490
- .ui-CollapsibleIndicator {
4491
- display: inline-flex;
4492
- align-items: center;
4493
- font-size: var(--collapsible-indicator-icon-size);
4494
- transition: transform 0.2s ease;
4495
- color: var(--gray-10);
4496
- }
4497
- }
4498
- .ui-CollapsibleIndicator:where([data-side="left"]) {
4499
- order: -1;
4500
- }
4501
- :where([aria-expanded="false"]) .ui-CollapsibleIndicator,
4502
- :where([data-state="closed"]) .ui-CollapsibleIndicator {
4503
- transform: rotate(0);
4504
- }
4505
- :where([aria-expanded="true"]) .ui-CollapsibleIndicator,
4506
- :where([data-state="open"]) .ui-CollapsibleIndicator {
4507
- transform: rotate(90deg);
4508
- }
4509
-
4510
- @layer components {
4511
- .ui-CollapsibleTrigger {
4512
- display: inline-flex;
4513
- align-items: center;
4514
- justify-content: space-between;
4515
- text-align: initial;
4516
- gap: var(--collapsible-trigger-gap);
4517
- font-size: var(--collapsible-font-size);
4518
- }
4519
- }
4520
- .ui-CollapsibleTriggerText {
4521
- flex-grow: 1;
4522
- text-align: initial;
4523
- font-weight: var(--font-weight-medium);
4524
- }
4525
- :where(.ui-CollapsibleRoot:not(.r-variant-ghost)) .ui-CollapsibleTrigger {
4526
- background-color: var(--collapsible-trigger-background-color);
4527
- padding-block: var(--collapsible-padding-y);
4528
- padding-inline: var(--collapsible-padding-x);
4529
- width: 100%;
4530
- border-radius: var(--collapsible-radius);
4531
- transition: border-radius 0.2s ease;
4532
- }
4533
- :where(.ui-CollapsibleRoot:not(.r-variant-ghost)) .ui-CollapsibleTrigger:where(:hover) {
4534
- background-color: var(--collapsible-trigger-hover-background-color);
4535
- }
4536
- :where(.ui-CollapsibleRoot:not(.r-variant-ghost)) .ui-CollapsibleTrigger:where([data-state="open"]) {
4537
- background-color: var(--collapsible-trigger-open-background-color);
4538
- color: var(--collapsible-trigger-open-text-color);
4539
- border-radius: var(--collapsible-radius) var(--collapsible-radius) 0 0;
4540
- }
4541
-
4542
- @keyframes collapsible-down {
4543
- from {
4544
- height: 0;
4545
- opacity: 1;
4546
- }
4547
- to {
4548
- height: var(--reka-collapsible-content-height);
4549
- opacity: 1;
4550
- }
4551
- }
4552
- @keyframes collapsible-up {
4553
- from {
4554
- opacity: 1;
4555
- height: var(--reka-collapsible-content-height);
4556
- }
4557
- to {
4558
- opacity: 0;
4559
- height: 0;
4560
- }
4561
- }
4562
- @layer components {
4563
- .ui-CollapsibleContent {
4564
- overflow: hidden;
4565
- font-size: var(--collapsible-font-size);
4566
- font-weight: var(--font-weight-regular);
4567
- padding-block: var(--collapsible-padding-y);
4568
- }
4569
- }
4570
- .ui-CollapsibleContent:where([data-state="open"]) {
4571
- animation: collapsible-down 0.2s ease-out;
4572
- }
4573
- .ui-CollapsibleContent:where([data-state="closed"]) {
4574
- animation: collapsible-up 0.2s ease-in;
4575
- }
4576
- :where(.ui-CollapsibleRoot.r-variant-soft) .ui-CollapsibleContent {
4577
- background-color: var(--accent-a2);
4578
- }
4579
- :where(.ui-CollapsibleRoot:not(.r-variant-ghost)) .ui-CollapsibleContent {
4580
- padding-inline: var(--collapsible-padding-x);
4581
- }
4582
-
4583
- .ui-PaginationList {
4584
- display: flex;
4585
- align-items: center;
4586
- gap: var(--space-1);
4587
- }
4588
- .ui-PaginationList .ui-Button {
4589
- height: var(--button-height);
4590
- width: var(--button-height);
4591
- padding: 0;
4592
- }
4593
- .ui-PaginationRoot:where(.r-variant-ghost):where([data-accent-color="gray"]) :where(.ui-Button) {
4594
- color: var(--accent-12);
4595
- }
4596
-
4597
- /** selected on ghost -> outline */
4598
- .ui-PaginationRoot:where(.r-variant-ghost) :where(.ui-Button[data-selected]) {
4599
- box-shadow: inset 0 0 0 1px var(--accent-a6);
4600
- }
4601
- .ui-PaginationRoot:where(.r-variant-soft, .r-variant-surface, .r-variant-outline) :where(.ui-Button[data-selected]) {
4602
- background-color: var(--accent-9);
4603
- color: var(--accent-contrast);
4604
- }
4605
- .ui-PaginationRoot:where([data-accent-color="gray"]):where(.r-variant-soft, .r-variant-surface, .r-variant-outline) :where(.ui-Button[data-selected]) {
4606
- background-color: var(--accent-12);
4607
- }
4608
- .ui-PaginationRoot:where(.r-variant-surface, .r-variant-outline) :where(.ui-Button[data-selected]) {
4609
- box-shadow: none;
4610
- }
4611
-
4612
- .ui-root {
4613
- --spinner-animation-duration: 800ms;
4614
- --spinner-opacity: 0.65;
4615
- }
4616
- .ui-SpinnerIcon {
4617
- display: inline-block;
4618
- position: relative;
4619
- opacity: var(--spinner-opacity);
4620
- vertical-align: middle;
4621
- width: 1em;
4622
- height: 1em;
4623
- transform: scale(0.8334);
4624
- }
4625
- .ui-SpinnerLeaf {
4626
- position: absolute;
4627
- top: 0;
4628
- left: calc(50% - 12.5% / 2);
4629
- width: 12.5%;
4630
- height: 100%;
4631
- animation: ui-spinner-leaf-fade var(--spinner-animation-duration) linear infinite;
4632
- }
4633
- .ui-SpinnerLeaf::before {
4634
- content: '';
4635
- display: block;
4636
- width: 100%;
4637
- height: 30%;
4638
- border-radius: var(--radius-1);
4639
- background-color: currentColor;
4640
- }
4641
- .ui-SpinnerLeaf:where(:nth-child(1)) {
4642
- transform: rotate(0deg);
4643
- animation-delay: calc(-8 / 8 * var(--spinner-animation-duration));
4644
- }
4645
- .ui-SpinnerLeaf:where(:nth-child(2)) {
4646
- transform: rotate(45deg);
4647
- animation-delay: calc(-7 / 8 * var(--spinner-animation-duration));
4648
- }
4649
- .ui-SpinnerLeaf:where(:nth-child(3)) {
4650
- transform: rotate(90deg);
4651
- animation-delay: calc(-6 / 8 * var(--spinner-animation-duration));
4652
- }
4653
- .ui-SpinnerLeaf:where(:nth-child(4)) {
4654
- transform: rotate(135deg);
4655
- animation-delay: calc(-5 / 8 * var(--spinner-animation-duration));
4656
- }
4657
- .ui-SpinnerLeaf:where(:nth-child(5)) {
4658
- transform: rotate(180deg);
4659
- animation-delay: calc(-4 / 8 * var(--spinner-animation-duration));
4660
- }
4661
- .ui-SpinnerLeaf:where(:nth-child(6)) {
4662
- transform: rotate(225deg);
4663
- animation-delay: calc(-3 / 8 * var(--spinner-animation-duration));
4664
- }
4665
- .ui-SpinnerLeaf:where(:nth-child(7)) {
4666
- transform: rotate(270deg);
4667
- animation-delay: calc(-2 / 8 * var(--spinner-animation-duration));
4668
- }
4669
- .ui-SpinnerLeaf:where(:nth-child(8)) {
4670
- transform: rotate(315deg);
4671
- animation-delay: calc(-1 / 8 * var(--spinner-animation-duration));
4672
- }
4673
- @keyframes ui-spinner-leaf-fade {
4674
- from {
4675
- opacity: 1;
4676
- }
4677
- to {
4678
- opacity: 0.25;
4679
- }
4680
- }
4681
-
4682
- .ui-ToastItem {
4683
- position: absolute;
4684
- display: flex;
4685
- align-items: center;
4686
- gap: var(--toast-gap);
4687
- left: auto;
4688
- right: auto;
4689
- bottom: auto;
4690
- top: auto;
4691
- width: 100%;
4692
- background: var(--color-panel-solid);
4693
- box-shadow: 0 4px 12px var(--gray-a4);
4694
- border: 1px solid var(--gray-a3);
4695
- border-radius: var(--radius-3);
4696
- padding: var(--space-4);
4697
- opacity: 1;
4698
- z-index: calc(0 - var(--toast-index));
4699
- transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s;
4700
- --toast-collapse-scale: calc(max(0, 1 - (var(--toast-index) * 0.06)));
4701
- }
4702
- .ui-ToastItem::after {
4703
- content: "";
4704
- position: absolute;
4705
- left: 0px;
4706
- height: calc(var(--toast-gap) + 1px);
4707
- bottom: 100%;
4708
- width: 100%;
4709
- }
4710
- .ui-ToastItem:where([data-swipe="move"]) {
4711
- transition: none;
4712
- }
4713
- .ui-ToastItem:where([data-visible="false"]) {
4714
- display: none;
4715
- }
4716
- :where(.ui-ToastViewport[data-x-position="left"]) .ui-ToastItem {
4717
- left: 0;
4718
- }
4719
- :where(.ui-ToastViewport[data-x-position="right"]) .ui-ToastItem {
4720
- right: 0;
4721
- }
4722
- :where(.ui-ToastViewport[data-y-position="top"]) .ui-ToastItem {
4723
- top: 0;
4724
- --toast-expanded-offset-y: calc(var(--toast-offset-y) + var(--toast-index) * var(--toast-gap) + var(--reka-toast-swipe-move-y, 0px));
4725
- }
4726
- :where(.ui-ToastViewport[data-y-position="bottom"]) .ui-ToastItem {
4727
- bottom: 0;
4728
- --toast-expanded-offset-y: calc(var(--toast-offset-y) * -1 + var(--toast-index) * var(--toast-gap) * -1 + var(--reka-toast-swipe-move-y, 0px));
4729
- }
4730
- :where(.ui-ToastViewport[data-y-position="top"]) .ui-ToastItem:where([data-expanded="false"]) {
4731
- transform:
4732
- translateX(var(--reka-toast-swipe-move-x, 0px))
4733
- translateY(calc(var(--reka-toast-swipe-move-y, 0px) + (min(var(--toast-index), 10) * 20%)))
4734
- scale(var(--toast-collapse-scale));
4735
- }
4736
- :where(.ui-ToastViewport[data-y-position="bottom"]) .ui-ToastItem:where([data-expanded="false"]) {
4737
- transform:
4738
- translateX(var(--reka-toast-swipe-move-x, 0px))
4739
- translateY(calc(var(--reka-toast-swipe-move-y, 0px) + var(--toast-offset-y) * -0.2))
4740
- scale(var(--toast-collapse-scale));
4741
- }
4742
- .ui-ToastItem:where([data-expanded="true"]) {
4743
- transform: translateX(var(--reka-toast-swipe-move-x, 0px)) translateY(var(--toast-expanded-offset-y));
4744
- }
4745
- .ui-ToastItem:where([data-swipe-direction="left"]) {
4746
- --toast-item-swipe-to-x: calc(0 - 100% - var(--toast-x-position))
4747
- }
4748
- .ui-ToastItem:where([data-swipe-direction="right"]) {
4749
- --toast-item-swipe-to-x: calc(100% + var(--toast-x-position))
4750
- }
4751
- .ui-ToastItem:where([data-swipe-direction="up"]) {
4752
- --toast-item-swipe-to-y: calc(0 - 100% - var(--toast-y-position))
4753
- }
4754
- .ui-ToastItem:where([data-swipe-direction="down"]) {
4755
- --toast-item-swipe-to-y: calc(100% + var(--toast-y-position))
4756
- }
4757
- .ui-ToastItem:where([data-state="closed"]),
4758
- .ui-ToastItem:where([data-swipe="closed"]) {
4759
- animation: ui-fade-out 100ms ease-in;
4760
- }
4761
- .ui-ToastItem:where([data-swipe-direction="left"][data-swipe="end"]),
4762
- .ui-ToastItem:where([data-swipe-direction="right"][data-swipe="end"]) {
4763
- animation: toast-swipe-x 100ms ease-out;
4764
- }
4765
- .ui-ToastItem:where([data-swipe-direction="top"][data-swipe="end"]),
4766
- .ui-ToastItem:where([data-swipe-direction="bottom"][data-swipe="end"]) {
4767
- animation: toast-swipe-y 100ms ease-out;
4768
- }
4769
- @keyframes toast-swipe-x {
4770
- from {
4771
- transform: translateX(var(--reka-toast-swipe-end-x)) translateY(var(--toast-expanded-offset-y));
4772
- }
4773
- to {
4774
- transform: translateX(var(--toast-item-swipe-to-x)) translateY(var(--toast-expanded-offset-y));
4775
- }
4776
- }
4777
- @keyframes toast-swipe-y {
4778
- from {
4779
- transform: translateY(var(--reka-toast-swipe-end-y));
4780
- }
4781
- to {
4782
- transform: translateY(var(--toast-item-swipe-to-y));
4783
- }
4784
- }
4785
- .ui-ToastContent {
4786
- display: flex;
4787
- flex-direction: column;
4788
- flex-grow: 1;
4789
- }
4790
- .ui-ToastIcon {
4791
- display: inline-flex;
4792
- align-items: center;
4793
- font-size: calc(var(--toast-title-font-size) + 4px);
4794
- color: var(--accent-a9);
4795
- vertical-align: middle;
4796
- }
4797
- .ui-ToastTitle {
4798
- font-size: var(--toast-title-font-size);
4799
- font-weight: var(--font-weight-medium);
4800
- }
4801
- .ui-ToastDescription {
4802
- font-size: var(--toast-description-font-size);
4803
- color: var(--gray-10);
4804
- }
4805
-
4806
- .ui-ToastViewport {
4807
- position: fixed;
4808
- margin: 0 auto;
4809
- top: auto;
4810
- left: auto;
4811
- bottom: auto;
4812
- right: auto;
4813
- max-width: calc(100vw - var(--toast-x-position) - var(--space-4));
4814
- display: flex;
4815
- flex-direction: column;
4816
- list-style: none;
4817
- margin: 0;
4818
- padding: 0;
4819
- outline: none;
4820
- width: var(--toast-width);
4821
- --toast-x-position: var(--space-4);
4822
- --toast-y-position: var(--space-4);
4823
- }
4824
- .ui-ToastViewport:where(.r-size-1) {
4825
- --toast-width: 300px;
4826
- --toast-gap: var(--space-2);
4827
- --toast-title-font-size: var(--font-size-2);
4828
- --toast-description-font-size: var(--font-size-1);
4829
- }
4830
- .ui-ToastViewport:where(.r-size-2) {
4831
- --toast-width: 340px;
4832
- --toast-gap: var(--space-3);
4833
- --toast-title-font-size: var(--font-size-3);
4834
- --toast-description-font-size: var(--font-size-1);
4835
- }
4836
- .ui-ToastViewport:where(.r-size-3) {
4837
- --toast-width: 380px;
4838
- --toast-gap: var(--space-4);
4839
- --toast-title-font-size: var(--font-size-4);
4840
- --toast-description-font-size: var(--font-size-3);
4841
- }
4842
- .ui-ToastViewport:where([data-x-position="left"]) {
4843
- left: var(--toast-x-position);
4844
- }
4845
- .ui-ToastViewport:where([data-x-position="right"]) {
4846
- right: var(--toast-x-position);
4847
- }
4848
- .ui-ToastViewport:where([data-x-position="center"]) {
4849
- left: calc(50% - var(--toast-width) / 2);
4850
- }
4851
- .ui-ToastViewport:where([data-y-position="top"]) {
4852
- top: var(--toast-y-position);
4853
- }
4854
- .ui-ToastViewport:where([data-y-position="bottom"]) {
4855
- bottom: var(--toast-y-position);
4856
- }
4857
-
4858
- .ui-TableContent {
4859
- --table-row-background-color: transparent;
4860
- --table-row-box-shadow: inset 0 -1px var(--gray-a5);
4861
-
4862
- width: 100%;
4863
- text-align: left;
4864
- vertical-align: top;
4865
- border-collapse: collapse;
4866
- border-radius: calc(var(--table-border-radius) - 1px);
4867
- border-spacing: 0;
4868
- box-sizing: border-box;
4869
-
4870
- /* Makes "height: 100%" work on content inside cells */
4871
- height: 0;
4872
- }
4873
- .ui-TableContent tr {
4874
- color: var(--gray-12);
4875
- }
4876
- .ui-TableContent td,
4877
- .ui-TableContent th {
4878
- background-color: var(--table-row-background-color);
4879
- box-shadow: var(--table-row-box-shadow);
4880
- box-sizing: border-box;
4881
- padding: var(--table-cell-padding);
4882
- min-height: var(--table-cell-min-height);
4883
- }
4884
- .ui-TableContent thead th {
4885
- font-weight: var(--font-weight-semibold);
4886
- }
4887
- .ui-TableContent tbody th {
4888
- font-weight: var(--font-weight-regular);
4889
- }
4890
- .ui-TableContent button {
4891
- vertical-align: middle;
4892
- }
4893
- .ui-Table[data-size="1"] {
4894
- --table-border-radius: var(--radius-3);
4895
- --table-cell-padding: var(--space-2);
4896
- --table-cell-min-height: calc(36px * var(--scaling));
4897
- }
4898
- .ui-Table[data-size="1"] .ui-TableContent {
4899
- font-size: var(--font-size-2);
4900
- line-height: var(--line-height-2);
4901
- }
4902
- .ui-Table[data-size="2"] {
4903
- --table-border-radius: var(--radius-4);
4904
- --table-cell-padding: var(--space-3);
4905
- --table-cell-min-height: calc(44px * var(--scaling));
4906
- }
4907
- .ui-Table[data-size="2"] .ui-TableContent {
4908
- font-size: var(--font-size-2);
4909
- line-height: var(--line-height-2);
4910
- }
4911
- .ui-Table[data-size="3"] {
4912
- --table-border-radius: var(--radius-4);
4913
- --table-cell-padding: var(--space-3) var(--space-4);
4914
- --table-cell-min-height: var(--space-8);
4915
- }
4916
- .ui-Table[data-size="3"] .ui-TableContent {
4917
- font-size: var(--font-size-3);
4918
- line-height: var(--line-height-3);
4919
- }
4920
- .ui-Table:where([data-variant="surface"]) {
4921
- box-sizing: border-box;
4922
- border: 1px solid var(--gray-a5);
4923
- border-radius: var(--table-border-radius);
4924
- background-color: var(--color-panel);
4925
- backdrop-filter: var(--backdrop-filter-panel);
4926
- background-clip: padding-box;
4927
- position: relative;
4928
- }
4929
- @supports (box-shadow: 0 0 0 1px color-mix(in oklab, white, black)) {
4930
- .ui-Table:where([data-variant="surface"]) {
4931
- border-color: color-mix(in oklab, var(--gray-a5), var(--gray-6));
4932
- }
4933
- }
4934
- .ui-Table:where([data-variant="surface"]) .ui-TableContent {
4935
- overflow: hidden;
4936
- }
4937
- .ui-Table:where([data-variant="surface"]) thead {
4938
- --table-row-background-color: var(--gray-a2);
4939
- }
4940
- .ui-Table:where([data-variant="surface"]) tbody :where(tr:last-child) {
4941
- --table-row-box-shadow: none;
4942
- }
4943
- .ui-Table:where([data-variant="ghost"]) {
4944
- --scrollarea-scrollbar-horizontal-margin-left: 0;
4945
- --scrollarea-scrollbar-horizontal-margin-right: 0;
4946
- }
4947
-
4948
- @layer components {
4949
- .ui-Separator {
4950
- display: block;
4951
- box-sizing: border-box;
4952
- background-color: var(--accent-a6);
4953
- }
4954
- .ui-Separator:where([aria-orientation="horizontal"]) {
4955
- width: var(--separator-size, auto);
4956
- height: 1px;
4957
- }
4958
- .ui-Separator:where([aria-orientation="vertical"]) {
4959
- width: 1px;
4960
- height: var(--separator-size, auto);
4961
- }
4962
- }
4963
- .ui-Separator:where(.r-size-1) {
4964
- --separator-size: var(--space-4);
4965
- }
4966
- .ui-Separator:where(.r-size-2) {
4967
- --separator-size: var(--space-6);
4968
- }
4969
- .ui-Separator:where(.r-size-3) {
4970
- --separator-size: var(--space-9);
4971
- }
4972
- .ui-Separator:where(.r-size-4) {
4973
- --separator-size: 100%;
4974
- }
4975
-
4976
- .ui-Quota {
4977
- position: relative;
4978
- overflow: hidden;
4979
- border-radius: var(--radius-full);
4980
- width: 100%;
4981
- height: var(--space-2);
4982
- background-color: var(--slate-4);
4983
- }
4984
- .ui-QuotaValue {
4985
- border-radius: var(--radius-full);
4986
- width: 100%;
4987
- height: 100%;
4988
- }
4989
-
4990
- .ui-SavingIndicator {
4991
- display: inline-flex;
4992
- align-items: center;
4993
- }
4994
- .ui-SavingIndicator > svg {
4995
- vertical-align: middle;
4996
- }
4997
- .ui-SavingIndicator:where([data-status="saving"]) {
4998
- color: var(--gray-10);
4999
- animation: ui-spin 2s infinite linear;
5000
- }
5001
- .ui-SavingIndicator:where([data-status="saved"]) {
5002
- color: var(--green-10);
5003
- }
5004
- .ui-SavingIndicator:where(.r-size-1) {
5005
- font-size: var(--space-3);
5006
- }
5007
- .ui-SavingIndicator:where(.r-size-2) {
5008
- font-size: var(--space-4);
5009
- }
5010
- .ui-SavingIndicator:where(.r-size-3) {
5011
- font-size: calc(1.25 * var(--space-4));
5012
- }