Mercurial

comparison design_system/src/styles/shadcn.css @ 254:2b6e732087ff

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[ui] Add complete native component catalog Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Tue, 04 Aug 2026 15:12:09 -0700
parents
children
comparison
equal deleted inserted replaced
253:fdf3816959cb 254:2b6e732087ff
1 :where(
2 zen-accordion,
3 zen-alert-dialog,
4 zen-aspect-ratio,
5 zen-attachment,
6 zen-avatar,
7 zen-badge,
8 zen-breadcrumb,
9 zen-bubble,
10 zen-button-group,
11 zen-calendar,
12 zen-carousel,
13 zen-chart,
14 zen-checkbox,
15 zen-collapsible,
16 zen-combobox,
17 zen-command,
18 zen-context-menu,
19 zen-data-table,
20 zen-date-picker,
21 zen-dialog,
22 zen-direction,
23 zen-drawer,
24 zen-dropdown-menu,
25 zen-empty,
26 zen-form,
27 zen-hover-card,
28 zen-icon,
29 zen-input,
30 zen-input-group,
31 zen-input-otp,
32 zen-item,
33 zen-kbd,
34 zen-label,
35 zen-marker,
36 zen-menubar,
37 zen-message,
38 zen-message-scroller,
39 zen-native-select,
40 zen-navigation-menu,
41 zen-pagination,
42 zen-popover,
43 zen-progress,
44 zen-radio-group,
45 zen-resizable,
46 zen-scroll-area,
47 zen-select,
48 zen-separator,
49 zen-sheet,
50 zen-sidebar,
51 zen-skeleton,
52 zen-slider,
53 zen-spinner,
54 zen-switch,
55 zen-table,
56 zen-tabs,
57 zen-textarea,
58 zen-toggle,
59 zen-toggle-group,
60 zen-tooltip,
61 zen-typography
62 ) {
63 box-sizing: border-box;
64 color: var(--zen-color-text);
65 font-family: var(--zen-font-sans);
66 }
67
68 zen-icon {
69 display: inline-grid;
70 width: var(--zen-icon-size, 1em);
71 height: var(--zen-icon-size, 1em);
72 flex: 0 0 auto;
73 place-items: center;
74 color: inherit;
75 vertical-align: -0.125em;
76 }
77
78 zen-icon > svg {
79 display: block;
80 width: 100%;
81 height: 100%;
82 }
83
84 :where(
85 zen-alert-dialog,
86 zen-calendar,
87 zen-combobox,
88 zen-command,
89 zen-date-picker,
90 zen-dialog,
91 zen-drawer,
92 zen-form,
93 zen-input-otp,
94 zen-popover,
95 zen-progress,
96 zen-radio-group,
97 zen-resizable,
98 zen-select,
99 zen-sheet,
100 zen-sidebar,
101 zen-slider,
102 zen-tabs
103 ) {
104 display: block;
105 }
106
107 :where(
108 zen-accordion,
109 zen-collapsible
110 ) {
111 display: block;
112 }
113
114 :where(
115 zen-accordion,
116 zen-collapsible
117 ) details {
118 interpolate-size: allow-keywords;
119 border-block-end: 1px solid color-mix(
120 in srgb,
121 var(--zen-color-border) 28%,
122 transparent
123 );
124 }
125
126 :where(
127 zen-accordion,
128 zen-collapsible
129 ) summary {
130 display: flex;
131 align-items: center;
132 gap: var(--zen-space-3);
133 padding: var(--zen-space-3) 0;
134 font-weight: 800;
135 list-style: none;
136 cursor: pointer;
137 }
138
139 :where(
140 zen-accordion,
141 zen-collapsible
142 ) summary::marker,
143 :where(
144 zen-accordion,
145 zen-collapsible
146 ) summary::-webkit-details-marker {
147 display: none;
148 content: "";
149 }
150
151 :where(
152 zen-accordion,
153 zen-collapsible
154 ) summary > [data-zen-disclosure-icon] {
155 margin-inline-start: auto;
156 transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
157 }
158
159 :where(
160 zen-accordion,
161 zen-collapsible
162 ) details[open] > summary > [data-zen-disclosure-icon] {
163 transform: rotate(180deg);
164 }
165
166 :where(
167 zen-accordion,
168 zen-collapsible
169 ) details::details-content {
170 block-size: 0;
171 overflow: clip;
172 opacity: 0;
173 transition:
174 block-size 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
175 content-visibility 220ms allow-discrete,
176 opacity 180ms ease;
177 }
178
179 :where(
180 zen-accordion,
181 zen-collapsible
182 ) details[open]::details-content {
183 block-size: auto;
184 opacity: 1;
185 }
186
187 :where(
188 zen-accordion,
189 zen-collapsible
190 ) details > :not(summary) {
191 margin-block-start: 0;
192 padding-block-end: var(--zen-space-3);
193 color: var(--zen-color-text-muted);
194 }
195
196 :where(
197 zen-alert-dialog,
198 zen-dialog,
199 zen-drawer,
200 zen-sheet
201 ) > [data-zen-trigger],
202 :where(
203 zen-dropdown-menu,
204 zen-menubar,
205 zen-navigation-menu,
206 zen-popover
207 ) [data-zen-trigger],
208 zen-empty > button,
209 zen-form button,
210 zen-input-group button {
211 min-height: 2.5rem;
212 padding: var(--zen-space-2) var(--zen-space-3);
213 border: var(--zen-border-width) solid var(--zen-color-border);
214 border-radius: var(--zen-radius-md);
215 box-shadow: var(--zen-shadow-sm);
216 background: var(--zen-color-accent);
217 color: var(--zen-color-on-accent);
218 font-weight: 800;
219 cursor: pointer;
220 }
221
222 :where(
223 zen-alert-dialog,
224 zen-dialog,
225 zen-drawer,
226 zen-sheet
227 ) dialog {
228 width: min(32rem, calc(100vi - 2rem));
229 padding: var(--zen-space-5);
230 border: var(--zen-border-width) solid var(--zen-color-border);
231 border-radius: var(--zen-radius-lg);
232 box-shadow: var(--zen-shadow-md);
233 background: var(--zen-color-surface-raised);
234 color: var(--zen-color-text);
235 }
236
237 :where(
238 zen-alert-dialog,
239 zen-dialog,
240 zen-drawer,
241 zen-sheet
242 ) dialog[open],
243 :where(
244 zen-combobox,
245 zen-command,
246 zen-context-menu,
247 zen-dropdown-menu,
248 zen-hover-card,
249 zen-menubar,
250 zen-navigation-menu,
251 zen-popover,
252 zen-tooltip
253 ) :where(
254 [data-zen-content],
255 [role="listbox"],
256 [role="menu"]
257 ):not([hidden]) {
258 animation: zen-surface-open 160ms ease-out;
259 }
260
261 :where(
262 zen-alert-dialog,
263 zen-dialog,
264 zen-drawer,
265 zen-sheet
266 ) dialog::backdrop {
267 background: var(--zen-color-surface-overlay);
268 backdrop-filter: blur(3px);
269 }
270
271 :where(
272 zen-alert-dialog,
273 zen-dialog,
274 zen-drawer,
275 zen-sheet
276 ) dialog > h3 {
277 margin-block-start: 0;
278 }
279
280 :where(
281 zen-alert-dialog,
282 zen-dialog,
283 zen-drawer,
284 zen-sheet
285 ) dialog button {
286 min-height: 2.35rem;
287 margin-inline-end: var(--zen-space-2);
288 padding-inline: var(--zen-space-3);
289 border: var(--zen-border-width) solid var(--zen-color-border);
290 border-radius: var(--zen-radius-sm);
291 background: var(--zen-color-surface);
292 color: var(--zen-color-text);
293 font-weight: 700;
294 cursor: pointer;
295 }
296
297 zen-alert-dialog dialog button[value="confirm"] {
298 background: var(--zen-color-danger);
299 color: var(--zen-color-on-danger);
300 }
301
302 :where(zen-sheet, zen-drawer) dialog {
303 position: fixed;
304 max-width: none;
305 max-height: none;
306 margin: 0;
307 }
308
309 :where(zen-sheet, zen-drawer)[placement="right"] dialog {
310 inset: 0 0 0 auto;
311 width: min(28rem, 92vi);
312 height: 100vb;
313 border-radius: var(--zen-radius-lg) 0 0 var(--zen-radius-lg);
314 }
315
316 :where(zen-sheet, zen-drawer)[placement="left"] dialog {
317 inset: 0 auto 0 0;
318 width: min(28rem, 92vi);
319 height: 100vb;
320 border-radius: 0 var(--zen-radius-lg) var(--zen-radius-lg) 0;
321 }
322
323 :where(zen-sheet, zen-drawer)[placement="bottom"] dialog,
324 zen-drawer:not([placement]) dialog {
325 inset: auto 0 0;
326 width: 100vi;
327 border-radius: var(--zen-radius-lg) var(--zen-radius-lg) 0 0;
328 }
329
330 zen-aspect-ratio {
331 display: block;
332 aspect-ratio: var(--zen-aspect-ratio, 16 / 9);
333 overflow: hidden;
334 border: var(--zen-border-width) solid var(--zen-color-border);
335 border-radius: var(--zen-radius-lg);
336 background: var(--zen-color-surface);
337 }
338
339 zen-aspect-ratio > * {
340 width: 100%;
341 height: 100%;
342 }
343
344 .demo-media {
345 display: grid;
346 place-items: center;
347 background: var(--zen-color-surface-muted);
348 color: var(--zen-color-text);
349 font-size: var(--zen-font-size-lg);
350 font-weight: 900;
351 }
352
353 zen-attachment {
354 display: grid;
355 grid-template-columns: 3rem minmax(0, 1fr) auto;
356 align-items: center;
357 gap: var(--zen-space-3);
358 padding: var(--zen-space-3);
359 border: var(--zen-border-width) solid var(--zen-color-border);
360 border-radius: var(--zen-radius-md);
361 background: var(--zen-color-surface);
362 }
363
364 zen-attachment > span {
365 display: grid;
366 width: 3rem;
367 height: 3rem;
368 place-items: center;
369 border-radius: var(--zen-radius-sm);
370 background: var(--zen-color-info);
371 color: var(--zen-color-on-info);
372 font-size: var(--zen-font-size-xs);
373 font-weight: 900;
374 }
375
376 zen-attachment > div,
377 zen-item > div {
378 display: grid;
379 }
380
381 :where(zen-attachment, zen-item) small {
382 color: var(--zen-color-text-muted);
383 }
384
385 :where(zen-attachment, zen-item) > button {
386 border: 0;
387 background: transparent;
388 color: inherit;
389 cursor: pointer;
390 }
391
392 zen-avatar {
393 display: inline-grid;
394 width: var(--zen-avatar-size, 2.75rem);
395 height: var(--zen-avatar-size, 2.75rem);
396 overflow: hidden;
397 place-items: center;
398 border: var(--zen-border-width) solid var(--zen-color-border);
399 border-radius: 50%;
400 background: var(--zen-color-accent);
401 color: var(--zen-color-on-accent);
402 font-weight: 900;
403 }
404
405 zen-avatar > img {
406 width: 100%;
407 height: 100%;
408 object-fit: cover;
409 }
410
411 zen-badge {
412 display: inline-flex;
413 align-items: center;
414 min-height: 1.75rem;
415 padding: 0 var(--zen-space-2);
416 border: 1px solid var(--zen-color-border);
417 border-radius: 999px;
418 background: var(--zen-color-surface);
419 font-size: var(--zen-font-size-xs);
420 font-weight: 850;
421 }
422
423 zen-badge[tone="success"] {
424 background: var(--zen-color-success);
425 color: var(--zen-color-on-success);
426 }
427
428 zen-badge[tone="danger"] {
429 background: var(--zen-color-danger);
430 color: var(--zen-color-on-danger);
431 }
432
433 :where(zen-breadcrumb, zen-pagination) nav {
434 display: flex;
435 align-items: center;
436 gap: var(--zen-space-2);
437 }
438
439 zen-breadcrumb ol {
440 display: flex;
441 flex-wrap: wrap;
442 align-items: center;
443 gap: var(--zen-space-2);
444 margin: 0;
445 padding: 0;
446 list-style: none;
447 }
448
449 zen-breadcrumb li:not(:last-child)::after {
450 margin-inline-start: var(--zen-space-2);
451 color: var(--zen-color-text-muted);
452 content: "/";
453 }
454
455 :where(zen-breadcrumb, zen-pagination) a {
456 color: var(--zen-color-info);
457 text-underline-offset: 0.2em;
458 }
459
460 zen-bubble {
461 display: block;
462 width: fit-content;
463 max-width: min(42rem, 88%);
464 padding: var(--zen-space-3) var(--zen-space-4);
465 border-radius: var(--zen-radius-lg) var(--zen-radius-lg)
466 var(--zen-radius-lg) var(--zen-radius-sm);
467 background: var(--zen-color-surface-raised);
468 box-shadow: var(--zen-shadow-sm);
469 }
470
471 zen-bubble[align="end"] {
472 margin-inline-start: auto;
473 border-radius: var(--zen-radius-lg) var(--zen-radius-lg)
474 var(--zen-radius-sm) var(--zen-radius-lg);
475 background: var(--zen-color-accent);
476 color: var(--zen-color-on-accent);
477 }
478
479 zen-bubble > :first-child {
480 margin-block-start: 0;
481 }
482
483 zen-bubble > :last-child {
484 margin-block-end: 0;
485 }
486
487 zen-button-group {
488 display: inline-flex;
489 }
490
491 zen-button-group > :where(button, a) {
492 min-height: 2.5rem;
493 padding-inline: var(--zen-space-3);
494 border: var(--zen-border-width) solid var(--zen-color-border);
495 border-radius: 0;
496 background: var(--zen-color-surface);
497 color: var(--zen-color-text);
498 font-weight: 750;
499 cursor: pointer;
500 }
501
502 zen-button-group > :first-child {
503 border-radius: var(--zen-radius-md) 0 0 var(--zen-radius-md);
504 }
505
506 zen-button-group > :last-child {
507 border-radius: 0 var(--zen-radius-md) var(--zen-radius-md) 0;
508 }
509
510 zen-button-group > :not(:first-child) {
511 margin-inline-start: calc(-1 * var(--zen-border-width));
512 }
513
514 :where(
515 zen-calendar,
516 zen-date-picker,
517 zen-slider
518 ) {
519 display: grid;
520 gap: var(--zen-space-2);
521 max-width: 22rem;
522 }
523
524 :where(
525 zen-calendar,
526 zen-date-picker,
527 zen-input,
528 zen-input-group,
529 zen-input-otp,
530 zen-native-select,
531 zen-select,
532 zen-slider,
533 zen-textarea
534 ) :where(input, select, textarea) {
535 appearance: none;
536 min-height: 2.75rem;
537 box-sizing: border-box;
538 padding: var(--zen-space-2) var(--zen-space-3);
539 border: var(--zen-border-width) solid var(--zen-color-border);
540 border-radius: var(--zen-radius-md);
541 background: var(--zen-color-surface);
542 color: var(--zen-color-text);
543 font: inherit;
544 }
545
546 :where(
547 zen-input,
548 zen-input-group,
549 zen-input-otp,
550 zen-native-select,
551 zen-select,
552 zen-textarea,
553 zen-calendar,
554 zen-date-picker
555 ) :where(input, select, textarea),
556 zen-field > :where(input, select, textarea) {
557 appearance: none;
558 border-radius: var(--zen-radius-md);
559 background: var(--zen-color-surface);
560 color: var(--zen-color-text);
561 }
562
563 :where(zen-native-select, zen-select) {
564 position: relative;
565 }
566
567 :where(zen-native-select, zen-select) select {
568 width: 100%;
569 padding-inline-end: 2.75rem;
570 cursor: pointer;
571 }
572
573 :where(zen-native-select, zen-select) > [data-zen-select-icon] {
574 position: absolute;
575 inset-inline-end: var(--zen-space-3);
576 inset-block-end: 0.9rem;
577 pointer-events: none;
578 }
579
580 :where(
581 zen-calendar,
582 zen-date-picker,
583 zen-input,
584 zen-native-select,
585 zen-select,
586 zen-textarea
587 ) {
588 display: grid;
589 gap: var(--zen-space-2);
590 }
591
592 zen-textarea textarea {
593 width: 100%;
594 min-height: 8rem;
595 resize: vertical;
596 }
597
598 :where(zen-calendar, zen-date-picker) > input[data-zen-calendar-input] {
599 position: absolute;
600 width: 1px;
601 height: 1px;
602 overflow: hidden;
603 clip-path: inset(50%);
604 pointer-events: none;
605 }
606
607 :where(zen-calendar, zen-date-picker) [data-zen-generated="calendar"] {
608 display: grid;
609 gap: var(--zen-space-2);
610 }
611
612 zen-date-picker [data-zen-generated="calendar"] {
613 position: relative;
614 }
615
616 :where(zen-calendar, zen-date-picker) :where(
617 [data-zen-date-trigger],
618 [data-zen-calendar-previous],
619 [data-zen-calendar-next],
620 [data-zen-calendar-day]
621 ) {
622 appearance: none;
623 border: 0;
624 background: transparent;
625 color: var(--zen-color-text);
626 font: inherit;
627 cursor: pointer;
628 }
629
630 zen-date-picker [data-zen-date-trigger] {
631 display: inline-flex;
632 min-height: 2.75rem;
633 align-items: center;
634 gap: var(--zen-space-2);
635 justify-content: flex-start;
636 padding: var(--zen-space-2) var(--zen-space-3);
637 border: var(--zen-border-width) solid var(--zen-color-border);
638 border-radius: var(--zen-radius-md);
639 box-shadow: var(--zen-shadow-sm);
640 background: var(--zen-color-surface);
641 }
642
643 zen-date-picker[data-invalid] [data-zen-date-trigger],
644 zen-calendar[data-invalid] [data-zen-calendar-view] {
645 border-color: var(--zen-color-danger);
646 }
647
648 zen-date-picker [data-zen-calendar-panel] {
649 position: absolute;
650 z-index: 40;
651 inset-block-start: calc(100% + var(--zen-space-2));
652 inset-inline-start: 0;
653 width: min(21rem, calc(100vi - 2rem));
654 padding: var(--zen-space-3);
655 border: var(--zen-border-width) solid var(--zen-color-border);
656 border-radius: var(--zen-radius-lg);
657 box-shadow: var(--zen-shadow-md);
658 background: var(--zen-color-surface-raised);
659 transform-origin: top left;
660 animation: zen-calendar-open 160ms ease-out;
661 }
662
663 zen-date-picker [data-zen-calendar-panel][hidden] {
664 display: none;
665 }
666
667 :where(zen-calendar, zen-date-picker) [data-zen-calendar-view] {
668 display: grid;
669 gap: var(--zen-space-2);
670 padding: var(--zen-space-3);
671 border: 1px solid var(--zen-color-border-muted);
672 border-radius: var(--zen-radius-lg);
673 background: var(--zen-color-surface);
674 }
675
676 zen-date-picker [data-zen-calendar-view] {
677 padding: 0;
678 border: 0;
679 }
680
681 :where(zen-calendar, zen-date-picker) [data-zen-calendar-view] > header {
682 display: grid;
683 grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem;
684 align-items: center;
685 gap: var(--zen-space-2);
686 text-align: center;
687 }
688
689 :where(zen-calendar, zen-date-picker) :where(
690 [data-zen-calendar-previous],
691 [data-zen-calendar-next]
692 ) {
693 display: grid;
694 width: 2.5rem;
695 height: 2.5rem;
696 place-items: center;
697 border: 1px solid var(--zen-color-border-muted);
698 border-radius: 50%;
699 }
700
701 :where(zen-calendar, zen-date-picker) :where(
702 [data-zen-calendar-previous],
703 [data-zen-calendar-next]
704 ):hover {
705 background: var(--zen-color-accent-muted);
706 }
707
708 :where(zen-calendar, zen-date-picker) [data-zen-calendar-weekdays],
709 :where(zen-calendar, zen-date-picker) [data-zen-calendar-grid] > [role="row"] {
710 display: grid;
711 grid-template-columns: repeat(7, minmax(2rem, 1fr));
712 gap: var(--zen-space-1);
713 }
714
715 :where(zen-calendar, zen-date-picker) [data-zen-calendar-weekdays] > span {
716 padding-block: var(--zen-space-1);
717 color: var(--zen-color-text-muted);
718 font-size: var(--zen-font-size-xs);
719 font-weight: 800;
720 text-align: center;
721 }
722
723 :where(zen-calendar, zen-date-picker) [data-zen-calendar-grid] {
724 display: grid;
725 gap: var(--zen-space-1);
726 }
727
728 :where(zen-calendar, zen-date-picker) [data-zen-calendar-day] {
729 aspect-ratio: 1;
730 min-width: 2rem;
731 border-radius: 50%;
732 font-size: var(--zen-font-size-sm);
733 }
734
735 :where(zen-calendar, zen-date-picker) [data-zen-calendar-day]:hover {
736 background: var(--zen-color-accent-muted);
737 }
738
739 :where(zen-calendar, zen-date-picker) [data-zen-calendar-day][data-outside] {
740 color: var(--zen-color-text-subtle);
741 opacity: 0.55;
742 }
743
744 :where(zen-calendar, zen-date-picker) [data-zen-calendar-day][data-today] {
745 outline: 1px solid var(--zen-color-info);
746 outline-offset: -2px;
747 }
748
749 :where(zen-calendar, zen-date-picker) [data-zen-calendar-day][aria-selected="true"] {
750 background: var(--zen-color-accent);
751 color: var(--zen-color-on-accent);
752 font-weight: 900;
753 }
754
755 :where(zen-calendar, zen-date-picker) [data-zen-calendar-day]:disabled {
756 color: var(--zen-color-disabled);
757 cursor: not-allowed;
758 }
759
760 @keyframes zen-calendar-open {
761 from {
762 opacity: 0;
763 transform: translateY(calc(-1 * var(--zen-space-1))) scale(0.98);
764 }
765
766 @keyframes zen-surface-open {
767 from {
768 opacity: 0;
769 transform: translateY(calc(-1 * var(--zen-space-1))) scale(0.98);
770 }
771 }
772 }
773
774 zen-input-group {
775 display: flex;
776 align-items: stretch;
777 width: min(100%, 36rem);
778 border: var(--zen-border-width) solid var(--zen-color-border);
779 border-radius: var(--zen-radius-md);
780 background: var(--zen-color-surface);
781 }
782
783 zen-input-group > :where(span, button) {
784 display: inline-flex;
785 align-items: center;
786 padding-inline: var(--zen-space-3);
787 }
788
789 zen-input-group input {
790 min-width: 0;
791 flex: 1;
792 border: 0;
793 border-radius: 0;
794 }
795
796 zen-input-group button {
797 min-height: auto;
798 border-width: 0 0 0 var(--zen-border-width);
799 border-radius: 0 var(--zen-radius-sm) var(--zen-radius-sm) 0;
800 box-shadow: none;
801 }
802
803 zen-carousel {
804 position: relative;
805 display: grid;
806 grid-template-columns: auto minmax(0, 1fr) auto;
807 align-items: center;
808 gap: var(--zen-space-2);
809 }
810
811 zen-carousel [data-zen-viewport] {
812 display: flex;
813 grid-column: 1 / -1;
814 gap: var(--zen-space-3);
815 overflow: auto;
816 scroll-snap-type: inline mandatory;
817 scrollbar-width: none;
818 }
819
820 zen-carousel [data-zen-viewport] > * {
821 min-width: min(22rem, 82vi);
822 min-height: 9rem;
823 padding: var(--zen-space-5);
824 border: var(--zen-border-width) solid var(--zen-color-border);
825 border-radius: var(--zen-radius-lg);
826 background: var(--zen-color-surface-raised);
827 scroll-snap-align: start;
828 }
829
830 zen-carousel :where([data-zen-prev], [data-zen-next]) {
831 width: 2.5rem;
832 height: 2.5rem;
833 border: var(--zen-border-width) solid var(--zen-color-border);
834 border-radius: 50%;
835 background: var(--zen-color-surface);
836 color: var(--zen-color-text);
837 cursor: pointer;
838 }
839
840 zen-carousel [data-zen-prev] {
841 grid-column: 1;
842 }
843
844 zen-carousel [data-zen-next] {
845 grid-column: 3;
846 }
847
848 zen-chart {
849 display: block;
850 min-height: 15rem;
851 padding: var(--zen-space-4);
852 border: var(--zen-border-width) solid var(--zen-color-border);
853 border-radius: var(--zen-radius-lg);
854 background: var(--zen-color-surface);
855 }
856
857 zen-chart [data-zen-chart-plot] {
858 display: flex;
859 height: 12rem;
860 align-items: end;
861 justify-content: space-around;
862 gap: var(--zen-space-3);
863 border-block-end: 1px solid var(--zen-color-border);
864 }
865
866 zen-chart [data-zen-chart-plot] > span {
867 position: relative;
868 width: min(3rem, 15%);
869 height: var(--zen-chart-value);
870 min-height: 1rem;
871 border-radius: var(--zen-radius-sm) var(--zen-radius-sm) 0 0;
872 background: var(--zen-color-data-1);
873 }
874
875 zen-chart [data-zen-chart-plot] > span:nth-child(2) {
876 background: var(--zen-color-data-2);
877 }
878
879 zen-chart [data-zen-chart-plot] > span:nth-child(3) {
880 background: var(--zen-color-data-3);
881 }
882
883 zen-chart [data-zen-chart-plot] > span:nth-child(4) {
884 background: var(--zen-color-data-4);
885 }
886
887 zen-chart [data-zen-chart-plot] > span:nth-child(5) {
888 background: var(--zen-color-data-5);
889 }
890
891 zen-chart [data-zen-chart-plot] > span::after {
892 position: absolute;
893 inset-block-start: 100%;
894 inset-inline-start: 50%;
895 padding-block-start: var(--zen-space-1);
896 color: var(--zen-color-text-muted);
897 content: attr(data-label);
898 font-size: var(--zen-font-size-xs);
899 transform: translateX(-50%);
900 }
901
902 :where(zen-checkbox, zen-switch) label,
903 zen-radio-group label {
904 display: flex;
905 align-items: center;
906 gap: var(--zen-space-2);
907 width: fit-content;
908 cursor: pointer;
909 }
910
911 :where(zen-checkbox, zen-radio-group) input {
912 appearance: none;
913 display: inline-grid;
914 width: 1.2rem;
915 height: 1.2rem;
916 flex: 0 0 auto;
917 place-content: center;
918 border: var(--zen-border-width) solid var(--zen-color-border);
919 background: var(--zen-color-surface);
920 cursor: pointer;
921 }
922
923 zen-checkbox input {
924 border-radius: var(--zen-radius-sm);
925 }
926
927 zen-checkbox input::before {
928 width: 0.55rem;
929 height: 0.3rem;
930 border-block-end: 2px solid var(--zen-color-on-accent);
931 border-inline-start: 2px solid var(--zen-color-on-accent);
932 content: "";
933 opacity: 0;
934 transform: translateY(-0.08rem) rotate(-45deg);
935 }
936
937 zen-checkbox input:checked {
938 background: var(--zen-color-accent);
939 }
940
941 zen-checkbox input:checked::before {
942 opacity: 1;
943 }
944
945 zen-radio-group input {
946 border-radius: 50%;
947 }
948
949 zen-radio-group input::before {
950 width: 0.55rem;
951 height: 0.55rem;
952 border-radius: 50%;
953 background: var(--zen-color-info);
954 content: "";
955 opacity: 0;
956 }
957
958 zen-radio-group input:checked::before {
959 opacity: 1;
960 }
961
962 zen-radio-group fieldset {
963 display: grid;
964 gap: var(--zen-space-2);
965 padding: var(--zen-space-4);
966 border: var(--zen-border-width) solid var(--zen-color-border);
967 border-radius: var(--zen-radius-md);
968 }
969
970 zen-switch input {
971 appearance: none;
972 width: 2.75rem;
973 height: 1.5rem;
974 margin: 0;
975 padding: 2px;
976 border: var(--zen-border-width) solid var(--zen-color-border);
977 border-radius: 999px;
978 background: var(--zen-color-surface);
979 cursor: pointer;
980 transition: background var(--zen-motion-fast) ease;
981 }
982
983 zen-switch input::before {
984 display: block;
985 width: 1rem;
986 height: 1rem;
987 border-radius: 50%;
988 background: var(--zen-color-border);
989 content: "";
990 transition: transform var(--zen-motion-fast) ease;
991 }
992
993 zen-switch input:checked {
994 background: var(--zen-color-success);
995 }
996
997 zen-switch input:checked::before {
998 background: var(--zen-color-on-success);
999 transform: translateX(1.2rem);
1000 }
1001
1002 :where(zen-combobox, zen-command) {
1003 position: relative;
1004 display: grid;
1005 width: min(100%, 28rem);
1006 gap: var(--zen-space-2);
1007 }
1008
1009 :where(zen-combobox, zen-command) > input {
1010 min-height: 2.75rem;
1011 padding: var(--zen-space-2) var(--zen-space-3);
1012 border: var(--zen-border-width) solid var(--zen-color-border);
1013 border-radius: var(--zen-radius-md);
1014 background: var(--zen-color-surface);
1015 color: var(--zen-color-text);
1016 }
1017
1018 :where(
1019 zen-combobox,
1020 zen-command,
1021 zen-context-menu,
1022 zen-dropdown-menu,
1023 zen-menubar,
1024 zen-navigation-menu
1025 ) :where([role="listbox"], [role="menu"]) {
1026 z-index: 20;
1027 display: grid;
1028 min-width: 12rem;
1029 padding: var(--zen-space-1);
1030 border: var(--zen-border-width) solid var(--zen-color-border);
1031 border-radius: var(--zen-radius-md);
1032 box-shadow: var(--zen-shadow-md);
1033 background: var(--zen-color-surface-raised);
1034 }
1035
1036 :where(
1037 zen-combobox,
1038 zen-command,
1039 zen-context-menu,
1040 zen-dropdown-menu,
1041 zen-menubar,
1042 zen-navigation-menu
1043 ) :where([role="listbox"], [role="menu"])[hidden] {
1044 display: none;
1045 }
1046
1047 :where(
1048 zen-combobox,
1049 zen-command,
1050 zen-context-menu,
1051 zen-dropdown-menu,
1052 zen-menubar,
1053 zen-navigation-menu
1054 ) :where([role="option"], [role="menuitem"]) {
1055 display: block;
1056 width: 100%;
1057 padding: var(--zen-space-2) var(--zen-space-3);
1058 border: 0;
1059 border-radius: var(--zen-radius-sm);
1060 background: transparent;
1061 color: var(--zen-color-text);
1062 text-align: start;
1063 text-decoration: none;
1064 cursor: pointer;
1065 }
1066
1067 :where(
1068 zen-combobox,
1069 zen-command,
1070 zen-context-menu,
1071 zen-dropdown-menu,
1072 zen-menubar,
1073 zen-navigation-menu
1074 ) :where([role="option"], [role="menuitem"]):is(
1075 :hover,
1076 :focus,
1077 [aria-selected="true"]
1078 ) {
1079 outline: none;
1080 background: var(--zen-color-accent);
1081 color: var(--zen-color-on-accent);
1082 }
1083
1084 :where(
1085 zen-context-menu,
1086 zen-dropdown-menu,
1087 zen-navigation-menu
1088 ) {
1089 position: relative;
1090 display: inline-block;
1091 }
1092
1093 zen-context-menu > [data-zen-trigger] {
1094 min-height: 8rem;
1095 padding: var(--zen-space-5);
1096 border: 2px dashed var(--zen-color-border);
1097 border-radius: var(--zen-radius-lg);
1098 background: var(--zen-color-surface);
1099 }
1100
1101 :where(
1102 zen-dropdown-menu,
1103 zen-navigation-menu
1104 ) > [role="menu"],
1105 zen-navigation-menu nav > [role="menu"] {
1106 position: absolute;
1107 inset-block-start: calc(100% + var(--zen-space-2));
1108 inset-inline-start: 0;
1109 }
1110
1111 zen-context-menu > [role="menu"] {
1112 position: fixed;
1113 }
1114
1115 zen-menubar {
1116 position: relative;
1117 display: flex;
1118 width: fit-content;
1119 padding: var(--zen-space-1);
1120 border: var(--zen-border-width) solid var(--zen-color-border);
1121 border-radius: var(--zen-radius-md);
1122 background: var(--zen-color-surface);
1123 }
1124
1125 zen-menubar > [data-zen-trigger] {
1126 border: 0;
1127 box-shadow: none;
1128 background: transparent;
1129 color: var(--zen-color-text);
1130 }
1131
1132 zen-menubar > [role="menu"] {
1133 position: absolute;
1134 inset-block-start: calc(100% + var(--zen-space-1));
1135 }
1136
1137 zen-data-table,
1138 zen-table {
1139 display: block;
1140 max-width: 100%;
1141 overflow: auto;
1142 }
1143
1144 :where(zen-data-table, zen-table) table {
1145 width: 100%;
1146 border-collapse: collapse;
1147 background: var(--zen-color-surface);
1148 }
1149
1150 :where(zen-data-table, zen-table) :where(th, td) {
1151 padding: var(--zen-space-3);
1152 border-block-end: 1px solid color-mix(
1153 in srgb,
1154 var(--zen-color-border) 30%,
1155 transparent
1156 );
1157 text-align: start;
1158 }
1159
1160 :where(zen-data-table, zen-table) th {
1161 font-size: var(--zen-font-size-sm);
1162 }
1163
1164 zen-data-table [data-zen-sort] {
1165 padding: 0;
1166 border: 0;
1167 background: transparent;
1168 color: inherit;
1169 font-weight: 850;
1170 cursor: pointer;
1171 }
1172
1173 zen-direction {
1174 display: contents;
1175 }
1176
1177 zen-empty {
1178 display: grid;
1179 justify-items: center;
1180 gap: var(--zen-space-2);
1181 padding: var(--zen-space-7) var(--zen-space-5);
1182 border: var(--zen-border-width) dashed var(--zen-color-border);
1183 border-radius: var(--zen-radius-lg);
1184 background: var(--zen-color-surface);
1185 text-align: center;
1186 }
1187
1188 zen-empty > p {
1189 max-width: 34rem;
1190 margin: 0;
1191 color: var(--zen-color-text-muted);
1192 }
1193
1194 zen-form form {
1195 display: grid;
1196 max-width: 34rem;
1197 gap: var(--zen-space-4);
1198 }
1199
1200 zen-form[data-invalid] form {
1201 padding-inline-start: var(--zen-space-3);
1202 border-inline-start: 0.35rem solid var(--zen-color-danger);
1203 }
1204
1205 :where(zen-hover-card, zen-tooltip, zen-popover) {
1206 position: relative;
1207 display: inline-block;
1208 }
1209
1210 :where(zen-hover-card, zen-tooltip, zen-popover) [data-zen-content] {
1211 position: absolute;
1212 z-index: 30;
1213 inset-block-start: calc(100% + var(--zen-space-2));
1214 inset-inline-start: 0;
1215 width: max-content;
1216 max-width: min(22rem, calc(100vi - 2rem));
1217 padding: var(--zen-space-3);
1218 border: var(--zen-border-width) solid var(--zen-color-border);
1219 border-radius: var(--zen-radius-md);
1220 box-shadow: var(--zen-shadow-md);
1221 background: var(--zen-color-surface-raised);
1222 color: var(--zen-color-text);
1223 }
1224
1225 :where(zen-hover-card, zen-tooltip, zen-popover) [data-zen-content][hidden] {
1226 display: none;
1227 }
1228
1229 zen-tooltip [data-zen-content] {
1230 padding: var(--zen-space-1) var(--zen-space-2);
1231 background: var(--zen-color-border);
1232 color: var(--zen-color-surface);
1233 font-size: var(--zen-font-size-xs);
1234 }
1235
1236 zen-input-otp [data-zen-otp-slots] {
1237 display: flex;
1238 gap: var(--zen-space-1);
1239 }
1240
1241 zen-input-otp [data-zen-otp-slots] > span {
1242 display: grid;
1243 width: 2.5rem;
1244 height: 2.75rem;
1245 place-items: center;
1246 border: var(--zen-border-width) solid var(--zen-color-border);
1247 border-radius: var(--zen-radius-sm);
1248 background: var(--zen-color-surface);
1249 font-weight: 850;
1250 }
1251
1252 zen-item {
1253 display: grid;
1254 grid-template-columns: auto minmax(0, 1fr) auto;
1255 align-items: center;
1256 gap: var(--zen-space-3);
1257 padding: var(--zen-space-3);
1258 border-block-end: 1px solid color-mix(
1259 in srgb,
1260 var(--zen-color-border) 28%,
1261 transparent
1262 );
1263 }
1264
1265 zen-kbd {
1266 display: inline-flex;
1267 align-items: center;
1268 gap: var(--zen-space-1);
1269 }
1270
1271 zen-kbd kbd {
1272 min-width: 1.75rem;
1273 padding: 0.1rem var(--zen-space-1);
1274 border: 1px solid var(--zen-color-border);
1275 border-block-end-width: 3px;
1276 border-radius: var(--zen-radius-sm);
1277 background: var(--zen-color-surface);
1278 font: 700 var(--zen-font-size-xs)/1.5 var(--zen-font-mono);
1279 text-align: center;
1280 }
1281
1282 zen-label {
1283 display: block;
1284 margin-block-end: var(--zen-space-2);
1285 font-weight: 800;
1286 }
1287
1288 zen-marker {
1289 display: flex;
1290 align-items: center;
1291 gap: var(--zen-space-2);
1292 color: var(--zen-color-text-muted);
1293 font-size: var(--zen-font-size-xs);
1294 text-transform: uppercase;
1295 }
1296
1297 zen-marker::before,
1298 zen-marker::after {
1299 height: 1px;
1300 flex: 1;
1301 background: color-mix(
1302 in srgb,
1303 var(--zen-color-border) 32%,
1304 transparent
1305 );
1306 content: "";
1307 }
1308
1309 zen-message {
1310 display: grid;
1311 grid-template-columns: auto minmax(0, 1fr);
1312 align-items: start;
1313 gap: var(--zen-space-3);
1314 }
1315
1316 zen-message > div {
1317 display: grid;
1318 gap: var(--zen-space-1);
1319 }
1320
1321 zen-message-scroller {
1322 position: relative;
1323 display: block;
1324 }
1325
1326 zen-message-scroller [data-zen-viewport] {
1327 max-height: 12rem;
1328 overflow: auto;
1329 padding: var(--zen-space-3);
1330 border: var(--zen-border-width) solid var(--zen-color-border);
1331 border-radius: var(--zen-radius-md);
1332 background: var(--zen-color-surface);
1333 }
1334
1335 zen-message-scroller [data-zen-scroll-end] {
1336 position: absolute;
1337 inset-inline-end: var(--zen-space-3);
1338 inset-block-end: var(--zen-space-3);
1339 }
1340
1341 zen-navigation-menu nav {
1342 display: flex;
1343 align-items: center;
1344 gap: var(--zen-space-3);
1345 }
1346
1347 zen-pagination nav {
1348 flex-wrap: wrap;
1349 }
1350
1351 zen-pagination a {
1352 display: inline-grid;
1353 min-width: 2.35rem;
1354 min-height: 2.35rem;
1355 place-items: center;
1356 padding-inline: var(--zen-space-2);
1357 border: 1px solid transparent;
1358 border-radius: var(--zen-radius-sm);
1359 text-decoration: none;
1360 }
1361
1362 zen-pagination a[aria-current] {
1363 border-color: var(--zen-color-border);
1364 background: var(--zen-color-accent);
1365 color: var(--zen-color-on-accent);
1366 }
1367
1368 zen-progress {
1369 display: grid;
1370 gap: var(--zen-space-2);
1371 }
1372
1373 zen-progress progress {
1374 appearance: none;
1375 width: 100%;
1376 height: 0.75rem;
1377 overflow: hidden;
1378 border: 0;
1379 border-radius: 999px;
1380 accent-color: var(--zen-color-success);
1381 background: var(--zen-color-surface);
1382 }
1383
1384 zen-progress progress::-webkit-progress-bar {
1385 background: var(--zen-color-surface-muted);
1386 }
1387
1388 zen-progress progress::-webkit-progress-value {
1389 background: var(--zen-color-success);
1390 }
1391
1392 zen-progress progress::-moz-progress-bar {
1393 background: var(--zen-color-success);
1394 }
1395
1396 zen-resizable {
1397 display: flex;
1398 min-height: 12rem;
1399 overflow: hidden;
1400 border: var(--zen-border-width) solid var(--zen-color-border);
1401 border-radius: var(--zen-radius-lg);
1402 }
1403
1404 zen-resizable [data-zen-panel] {
1405 min-width: 0;
1406 flex: 1 1 50%;
1407 padding: var(--zen-space-4);
1408 background: var(--zen-color-surface);
1409 }
1410
1411 zen-resizable [data-zen-handle] {
1412 width: 0.65rem;
1413 flex: 0 0 0.65rem;
1414 border-inline: 1px solid var(--zen-color-border);
1415 background: var(--zen-color-accent);
1416 cursor: col-resize;
1417 }
1418
1419 zen-scroll-area {
1420 display: block;
1421 max-height: 10rem;
1422 overflow: auto;
1423 padding: var(--zen-space-3);
1424 border: var(--zen-border-width) solid var(--zen-color-border);
1425 border-radius: var(--zen-radius-md);
1426 background: var(--zen-color-surface);
1427 scrollbar-color: var(--zen-color-accent) transparent;
1428 }
1429
1430 zen-separator {
1431 display: block;
1432 }
1433
1434 zen-separator hr {
1435 margin-block: var(--zen-space-4);
1436 border: 0;
1437 border-block-start: 1px solid var(--zen-color-border);
1438 }
1439
1440 zen-separator[orientation="vertical"] {
1441 display: inline-block;
1442 width: 1px;
1443 min-height: 1.5rem;
1444 background: var(--zen-color-border);
1445 }
1446
1447 zen-sidebar {
1448 display: grid;
1449 grid-template-columns: minmax(12rem, 17rem) minmax(0, 1fr);
1450 gap: var(--zen-space-3);
1451 }
1452
1453 zen-sidebar > [data-zen-sidebar-trigger] {
1454 grid-column: 1 / -1;
1455 justify-self: start;
1456 }
1457
1458 zen-sidebar [data-zen-sidebar-panel] {
1459 padding: var(--zen-space-3);
1460 border: var(--zen-border-width) solid var(--zen-color-border);
1461 border-radius: var(--zen-radius-lg);
1462 background: var(--zen-color-surface);
1463 }
1464
1465 zen-sidebar [data-zen-sidebar-panel] nav {
1466 display: grid;
1467 gap: var(--zen-space-1);
1468 }
1469
1470 zen-sidebar [data-zen-sidebar-panel] a {
1471 padding: var(--zen-space-2);
1472 border-radius: var(--zen-radius-sm);
1473 color: inherit;
1474 text-decoration: none;
1475 }
1476
1477 zen-sidebar [data-zen-sidebar-panel] a:hover {
1478 background: var(--zen-color-accent);
1479 color: var(--zen-color-on-accent);
1480 }
1481
1482 zen-skeleton {
1483 display: block;
1484 width: var(--zen-skeleton-width, 100%);
1485 height: 1rem;
1486 border-radius: var(--zen-radius-sm);
1487 background:
1488 linear-gradient(
1489 100deg,
1490 color-mix(in srgb, var(--zen-color-text-muted) 18%, transparent) 20%,
1491 color-mix(in srgb, var(--zen-color-text-muted) 8%, transparent) 38%,
1492 color-mix(in srgb, var(--zen-color-text-muted) 18%, transparent) 56%
1493 );
1494 background-size: 200% 100%;
1495 animation: zen-skeleton-shimmer 1.4s linear infinite;
1496 }
1497
1498 zen-skeleton[shape="circle"] {
1499 width: 3rem;
1500 height: 3rem;
1501 border-radius: 50%;
1502 }
1503
1504 zen-slider input {
1505 appearance: none;
1506 width: 100%;
1507 height: 0.5rem;
1508 padding-inline: 0;
1509 border: 0;
1510 border-radius: 999px;
1511 background: var(--zen-color-surface-sunken);
1512 cursor: pointer;
1513 }
1514
1515 zen-slider input::-webkit-slider-thumb {
1516 appearance: none;
1517 width: 1.35rem;
1518 height: 1.35rem;
1519 border: var(--zen-border-width) solid var(--zen-color-border);
1520 border-radius: 50%;
1521 box-shadow: var(--zen-shadow-sm);
1522 background: var(--zen-color-accent);
1523 }
1524
1525 zen-slider input::-moz-range-thumb {
1526 width: 1.35rem;
1527 height: 1.35rem;
1528 border: var(--zen-border-width) solid var(--zen-color-border);
1529 border-radius: 50%;
1530 box-shadow: var(--zen-shadow-sm);
1531 background: var(--zen-color-accent);
1532 }
1533
1534 zen-spinner {
1535 display: inline-block;
1536 width: 1.35rem;
1537 height: 1.35rem;
1538 border: 3px solid color-mix(
1539 in srgb,
1540 var(--zen-color-text-muted) 28%,
1541 transparent
1542 );
1543 border-inline-end-color: var(--zen-color-info);
1544 border-radius: 50%;
1545 animation: zen-shadcn-spin 650ms linear infinite;
1546 }
1547
1548 zen-tabs [role="tablist"] {
1549 display: flex;
1550 width: fit-content;
1551 gap: var(--zen-space-1);
1552 padding: var(--zen-space-1);
1553 border: 1px solid var(--zen-color-border);
1554 border-radius: var(--zen-radius-md);
1555 background: var(--zen-color-surface);
1556 }
1557
1558 zen-tabs [role="tab"] {
1559 min-height: 2.25rem;
1560 padding-inline: var(--zen-space-3);
1561 border: 0;
1562 border-radius: var(--zen-radius-sm);
1563 background: transparent;
1564 color: var(--zen-color-text);
1565 font-weight: 750;
1566 cursor: pointer;
1567 }
1568
1569 zen-tabs [role="tab"][aria-selected="true"] {
1570 background: var(--zen-color-accent);
1571 color: var(--zen-color-on-accent);
1572 }
1573
1574 zen-tabs [role="tabpanel"] {
1575 padding-block: var(--zen-space-4);
1576 }
1577
1578 zen-tabs [role="tabpanel"][hidden] {
1579 display: none;
1580 }
1581
1582 :where(zen-toggle, zen-toggle-group) {
1583 display: inline-flex;
1584 }
1585
1586 :where(zen-toggle, zen-toggle-group) > button {
1587 min-height: 2.5rem;
1588 padding-inline: var(--zen-space-3);
1589 border: 1px solid transparent;
1590 border-radius: var(--zen-radius-sm);
1591 background: transparent;
1592 color: var(--zen-color-text);
1593 font-weight: 750;
1594 cursor: pointer;
1595 }
1596
1597 :where(zen-toggle, zen-toggle-group) > button[aria-pressed="true"] {
1598 border-color: var(--zen-color-border);
1599 background: var(--zen-color-accent);
1600 color: var(--zen-color-on-accent);
1601 }
1602
1603 zen-typography {
1604 display: block;
1605 max-width: 65ch;
1606 line-height: var(--zen-line-height);
1607 }
1608
1609 zen-typography > :where(h1, h2, h3) {
1610 line-height: 1.15;
1611 text-wrap: balance;
1612 }
1613
1614 zen-typography blockquote {
1615 margin-inline: 0;
1616 padding-inline-start: var(--zen-space-4);
1617 border-inline-start: 0.35rem solid var(--zen-color-accent);
1618 color: var(--zen-color-text-muted);
1619 font-style: italic;
1620 }
1621
1622 :where(
1623 button,
1624 summary,
1625 [tabindex]
1626 ):focus-visible {
1627 outline: 3px solid var(--zen-color-focus);
1628 outline-offset: 3px;
1629 }
1630
1631 :where(
1632 zen-calendar,
1633 zen-checkbox,
1634 zen-combobox,
1635 zen-command,
1636 zen-date-picker,
1637 zen-field,
1638 zen-form,
1639 zen-input,
1640 zen-input-group,
1641 zen-input-otp,
1642 zen-native-select,
1643 zen-radio-group,
1644 zen-select,
1645 zen-slider,
1646 zen-switch,
1647 zen-textarea
1648 ) :where(input, select, textarea):focus-visible {
1649 outline: none;
1650 }
1651
1652 @keyframes zen-shadcn-spin {
1653 to { transform: rotate(1turn); }
1654 }
1655
1656 @keyframes zen-skeleton-shimmer {
1657 to { background-position-x: -200%; }
1658 }
1659
1660 @media (max-width: 640px) {
1661 zen-sidebar {
1662 display: block;
1663 }
1664
1665 zen-sidebar > [data-zen-sidebar-trigger] {
1666 margin-block-end: var(--zen-space-2);
1667 }
1668
1669 :where(zen-calendar, zen-date-picker) {
1670 width: 100%;
1671 max-width: 100%;
1672 }
1673
1674 zen-date-picker [data-zen-calendar-panel] {
1675 position: fixed;
1676 inset: auto var(--zen-space-3) var(--zen-space-3);
1677 width: auto;
1678 max-height: calc(100vb - 2 * var(--zen-space-3));
1679 overflow: auto;
1680 transform-origin: bottom center;
1681 }
1682 }
1683
1684 @media (forced-colors: active) {
1685 :where(
1686 zen-aspect-ratio,
1687 zen-attachment,
1688 zen-avatar,
1689 zen-badge,
1690 zen-empty,
1691 zen-resizable,
1692 zen-scroll-area
1693 ) {
1694 border: 1px solid CanvasText;
1695 }
1696 }
1697
1698 @media (prefers-reduced-motion: reduce) {
1699 zen-skeleton,
1700 zen-spinner {
1701 animation: none;
1702 }
1703
1704 zen-switch input,
1705 zen-switch input::before,
1706 :where(
1707 zen-accordion,
1708 zen-collapsible
1709 ) details::details-content,
1710 :where(
1711 zen-accordion,
1712 zen-collapsible
1713 ) summary > [data-zen-disclosure-icon] {
1714 transition: none;
1715 }
1716
1717 zen-date-picker [data-zen-calendar-panel] {
1718 animation: none;
1719 }
1720
1721 :where(
1722 zen-alert-dialog,
1723 zen-dialog,
1724 zen-drawer,
1725 zen-sheet
1726 ) dialog[open],
1727 :where(
1728 zen-combobox,
1729 zen-command,
1730 zen-context-menu,
1731 zen-dropdown-menu,
1732 zen-hover-card,
1733 zen-menubar,
1734 zen-navigation-menu,
1735 zen-popover,
1736 zen-tooltip
1737 ) :where(
1738 [data-zen-content],
1739 [role="listbox"],
1740 [role="menu"]
1741 ):not([hidden]) {
1742 animation: none;
1743 }
1744 }