basecoat-css 0.1.2 → 0.2.0

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