basecoat-css 0.1.1 → 0.2.0-beta.1

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