@layer sensible-ui {
@scope (.sensible-ui) {
/* src/css/base.css */
@layer base {
*,
:before,
:after {
box-sizing: border-box;
border: 0 solid var(--border);
margin: 0;
padding: 0;
}
:where(:scope) {
box-sizing: border-box;
border: 0 solid var(--border);
margin: 0;
padding: 0;
}
::backdrop {
box-sizing: border-box;
border: 0 solid var(--border);
margin: 0;
padding: 0;
}
::-webkit-file-upload-button {
box-sizing: border-box;
border: 0 solid var(--border);
margin: 0;
padding: 0;
}
::file-selector-button {
box-sizing: border-box;
border: 0 solid var(--border);
margin: 0;
padding: 0;
}
:where(:scope):before {
box-sizing: border-box;
border: 0 solid var(--border);
margin: 0;
padding: 0;
}
:where(:scope):after {
box-sizing: border-box;
border: 0 solid var(--border);
margin: 0;
padding: 0;
}
:where(:scope)::backdrop {
box-sizing: border-box;
border: 0 solid var(--border);
margin: 0;
padding: 0;
}
:where(:scope)::-webkit-file-upload-button {
box-sizing: border-box;
border: 0 solid var(--border);
margin: 0;
padding: 0;
}
:where(:scope)::file-selector-button {
box-sizing: border-box;
border: 0 solid var(--border);
margin: 0;
padding: 0;
}
* {
outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
flex-shrink: 0;
scroll-margin-top: 1rem;
}
:where(:scope) {
outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
flex-shrink: 0;
scroll-margin-top: 1rem;
}
html {
font-family: var(--font-sans);
line-height: 1.5;
}
:where(:scope) {
font-family: var(--font-sans);
line-height: 1.5;
}
html {
scroll-behavior: smooth;
overscroll-behavior: none;
}
:where(:scope:root) {
scroll-behavior: smooth;
overscroll-behavior: none;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
:where(:scope:root) {
scroll-behavior: auto;
}
}
:-webkit-any(h1, h2, h3, h4, h5, h6) {
font-size: inherit;
font-weight: inherit;
}
:-moz-any(h1, h2, h3, h4, h5, h6) {
font-size: inherit;
font-weight: inherit;
}
:is(h1, h2, h3, h4, h5, h6) {
font-size: inherit;
font-weight: inherit;
}
a {
color: inherit;
text-decoration: inherit;
}
:-webkit-any(ul, ol) {
list-style: none;
}
:-moz-any(ul, ol) {
list-style: none;
}
:is(ul, ol) {
list-style: none;
}
:-webkit-any(img, svg, video, canvas, audio, iframe, embed, object) {
display: block;
vertical-align: middle;
}
:-moz-any(img, svg, video, canvas, audio, iframe, embed, object) {
display: block;
vertical-align: middle;
}
:is(img, svg, video, canvas, audio, iframe, embed, object) {
display: block;
vertical-align: middle;
}
:-webkit-any(img, video) {
max-width: 100%;
height: auto;
}
:-moz-any(img, video) {
max-width: 100%;
height: auto;
}
:is(img, video) {
max-width: 100%;
height: auto;
}
table {
border-collapse: collapse;
text-indent: 0;
}
:-webkit-any(button, input, select, optgroup, textarea) {
font: inherit;
color: inherit;
background-color: #0000;
}
:-moz-any(button, input, select, optgroup, textarea) {
font: inherit;
color: inherit;
background-color: #0000;
}
:is(button, input, select, optgroup, textarea) {
font: inherit;
color: inherit;
background-color: #0000;
}
:-webkit-any(
button,
input[type="button"],
input[type="reset"],
input[type="submit"]
) {
appearance: button;
}
:-moz-any(
button,
input[type="button"],
input[type="reset"],
input[type="submit"]
) {
appearance: button;
}
:is(
button,
input[type="button"],
input[type="reset"],
input[type="submit"]
) {
appearance: button;
}
textarea {
resize: vertical;
}
[hidden]:not([hidden="until-found"]) {
display: none !important;
}
hr {
border-top-width: 1px;
}
body {
background: var(--background);
color: var(--foreground);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 1rem;
line-height: 1.5;
}
:where(:scope:not(:root)) {
background: var(--background);
color: var(--foreground);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 1rem;
line-height: 1.5;
}
body {
overscroll-behavior: none;
scrollbar-gutter: stable;
}
}
/* src/css/theme.css */
@layer base, typography, components, button, utilities;
:root {
--radius: 0.625rem;
--font-sans:
var(--font-geist-sans, "Geist"), ui-sans-serif, system-ui,
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans",
Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
--font-mono:
var(--font-geist-mono, "Geist Mono"), ui-monospace, SFMono-Regular,
Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
--sidebar-width: 16rem;
--sidebar-mobile-width: 18rem;
--scrollbar-track: transparent;
--scrollbar-thumb: #0000004d;
--scrollbar-width: 6px;
--scrollbar-radius: 6px;
--chevron-down-icon: url('data:image/svg+xml;utf8,');
--chevron-down-icon-50: url('data:image/svg+xml;utf8,');
--check-icon: url('data:image/svg+xml;utf8,');
}
:where(:scope) {
--radius: 0.625rem;
--font-sans:
var(--font-geist-sans, "Geist"), ui-sans-serif, system-ui,
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans",
Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
--font-mono:
var(--font-geist-mono, "Geist Mono"), ui-monospace, SFMono-Regular,
Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
--sidebar-width: 16rem;
--sidebar-mobile-width: 18rem;
--scrollbar-track: transparent;
--scrollbar-thumb: #0000004d;
--scrollbar-width: 6px;
--scrollbar-radius: 6px;
--chevron-down-icon: url('data:image/svg+xml;utf8,');
--chevron-down-icon-50: url('data:image/svg+xml;utf8,');
--check-icon: url('data:image/svg+xml;utf8,');
}
.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.269 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.922 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.371 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.439 0 0);
--scrollbar-thumb: #ffffff4d;
--chevron-down-icon: url('data:image/svg+xml;utf8,');
--chevron-down-icon-50: url('data:image/svg+xml;utf8,');
--check-icon: url('data:image/svg+xml;utf8,');
--buncss-light: ;
--buncss-dark: initial;
color-scheme: dark;
}
:where(:scope):is(.dark, .dark *) {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.269 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.922 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.371 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.439 0 0);
--scrollbar-thumb: #ffffff4d;
--chevron-down-icon: url('data:image/svg+xml;utf8,');
--chevron-down-icon-50: url('data:image/svg+xml;utf8,');
--check-icon: url('data:image/svg+xml;utf8,');
--buncss-light: ;
--buncss-dark: initial;
color-scheme: dark;
}
/* src/css/typography.css */
@layer typography {
h1,
h2,
h3,
h4,
h5,
h6 {
letter-spacing: -0.025em;
text-wrap: balance;
scroll-margin: 5rem;
font-weight: 600;
}
:is(h1, h2, h3, h4, h5, h6):first-child {
margin-block-start: 0;
}
mark {
border-radius: calc(var(--radius) - 4px);
background: oklch(0.945 0.129 101.54);
padding-inline-start: 0.25rem;
padding-inline-end: 0.25rem;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
h1 {
margin: 2.5rem 0 1.5rem;
font-size: 1.875rem;
line-height: 2.25rem;
}
h2 {
margin: 2rem 0 1.25rem;
font-size: 1.5rem;
line-height: 2rem;
}
h3 {
margin: 1.5rem 0 1rem;
font-size: 1.25rem;
line-height: 1.75rem;
}
h4 {
margin: 1.25rem 0 0.75rem;
font-size: 1.125rem;
line-height: 1.75rem;
}
h5 {
margin: 1rem 0 0.5rem;
font-size: 1.125rem;
line-height: 1.75rem;
}
h6 {
margin: 1rem 0 0.5rem;
font-size: 1rem;
line-height: 1.5rem;
}
strong,
b {
font-weight: 600;
}
em,
i {
font-style: italic;
}
p {
margin-bottom: 1rem;
}
:-webkit-any(code, samp):not(pre > *) {
border-radius: calc(var(--radius) - 4px);
background: var(--secondary);
font-family: var(--font-mono);
padding: 0.125rem 0.25rem;
font-size: 0.875rem;
line-height: 1.25rem;
}
:-moz-any(code, samp):not(pre > *) {
border-radius: calc(var(--radius) - 4px);
background: var(--secondary);
font-family: var(--font-mono);
padding: 0.125rem 0.25rem;
font-size: 0.875rem;
line-height: 1.25rem;
}
:is(code, samp):not(pre > *) {
border-radius: calc(var(--radius) - 4px);
background: var(--secondary);
font-family: var(--font-mono);
padding: 0.125rem 0.25rem;
font-size: 0.875rem;
line-height: 1.25rem;
}
pre {
overflow-x: auto;
border-radius: calc(var(--radius) - 2px);
background: var(--secondary);
font-family: var(--font-mono);
white-space: pre;
margin-bottom: 1rem;
padding: 1rem;
}
pre code {
user-select: all;
font-size: 0.875rem;
line-height: 1.25rem;
}
blockquote {
border-inline-start: 4px solid var(--border);
color: var(--muted-foreground);
margin-block-start: 1rem;
margin-block-end: 1rem;
padding-inline-start: 1rem;
font-style: italic;
}
hr {
margin-block-start: 2rem;
margin-block-end: 2rem;
}
ul,
ol {
margin-bottom: 1rem;
padding-inline-start: 1.5rem;
}
:is(ul, ol) li {
margin-bottom: 0.25rem;
}
ul {
list-style-type: disc;
}
ol {
list-style-type: decimal;
}
a[href]:not(:-webkit-any(.button, .item)) {
display: inline-block;
color: var(--foreground);
text-decoration-line: underline;
text-underline-offset: 4px;
transition: all 0.1s;
}
a[href]:not(:-webkit-any(.button, .item)):active {
translate: 0 1px;
}
a[href]:not(:-moz-any(.button, .item)) {
display: inline-block;
color: var(--foreground);
text-decoration-line: underline;
text-underline-offset: 4px;
transition: all 0.1s;
}
a[href]:not(:-moz-any(.button, .item)):active {
translate: 0 1px;
}
a[href]:not(:is(.button, .item)) {
display: inline-block;
color: var(--foreground);
text-decoration-line: underline;
text-underline-offset: 4px;
transition: all 0.1s;
}
a[href]:not(:is(.button, .item)):active {
translate: 0 1px;
}
kbd {
pointer-events: none;
display: inline-flex;
border-radius: calc(var(--radius) - 4px);
background: var(--muted);
color: var(--muted-foreground);
font-family: var(--font-sans);
user-select: none;
justify-content: center;
align-items: center;
gap: 0.25rem;
width: -moz-fit-content;
width: fit-content;
min-width: 1.25rem;
height: 1.25rem;
padding-inline-start: 0.25rem;
padding-inline-end: 0.25rem;
font-size: 0.75rem;
font-weight: 500;
line-height: 1rem;
}
kbd svg:not([class*="size-"]) {
width: 0.75rem;
height: 0.75rem;
}
s,
del {
color: var(--muted-foreground);
}
u,
ins,
abbr,
a[href] {
text-decoration-color: color-mix(
in oklab,
var(--primary) 20%,
transparent
);
text-underline-offset: 4px;
}
:is(u, ins, abbr, a[href]):-webkit-any(a[href]):hover {
color: var(--primary);
text-decoration-color: var(--primary);
}
:is(u, ins, abbr, a[href]):-moz-any(a[href]):hover {
color: var(--primary);
text-decoration-color: var(--primary);
}
:is(u, ins, abbr, a[href]):is(a[href]):hover {
color: var(--primary);
text-decoration-color: var(--primary);
}
}
/* src/css/badge.css */
@layer components {
a > .badge {
transition: translate 0.15s cubic-bezier(0, 0, 0.2, 1);
}
a > .badge:active:not(:disabled) {
translate: 0 0.125rem;
}
a.badge {
text-decoration-line: none !important;
}
.badge {
display: inline-flex;
overflow: hidden;
white-space: nowrap;
border: 1px solid;
border-radius: 9999px;
flex-shrink: 0;
justify-content: center;
align-items: center;
gap: 0.25rem;
width: -moz-fit-content;
width: fit-content;
padding: 0.125rem 0.5rem;
transition:
color 0.15s,
box-shadow 0.15s;
font-size: 0.75rem;
font-weight: 500;
line-height: 1rem;
}
.badge > svg {
pointer-events: none;
width: 0.75rem;
height: 0.75rem;
}
.badge:focus-visible {
border-color: var(--ring);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
}
.badge[aria-invalid="true"] {
border-color: var(--destructive);
box-shadow: 0 0 0 3px
color-mix(in oklab, var(--destructive) 20%, transparent);
}
.badge:is(.dark *)[aria-invalid="true"] {
box-shadow: 0 0 0 3px
color-mix(in oklab, var(--destructive) 40%, transparent);
}
.badge:not([variant]) {
background-color: var(--primary);
color: var(--primary-foreground);
border-color: #0000;
}
.badge:not([variant]):-webkit-any(a):hover {
background-color: color-mix(in oklab, var(--primary) 90%, transparent);
}
.badge:not([variant]):-moz-any(a):hover {
background-color: color-mix(in oklab, var(--primary) 90%, transparent);
}
.badge:not([variant]):is(a):hover {
background-color: color-mix(in oklab, var(--primary) 90%, transparent);
}
.badge[data-variant="primary"] {
background-color: var(--primary);
color: var(--primary-foreground);
border-color: #0000;
}
.badge[data-variant="primary"]:-webkit-any(a):hover {
background-color: color-mix(in oklab, var(--primary) 90%, transparent);
}
.badge[data-variant="primary"]:-moz-any(a):hover {
background-color: color-mix(in oklab, var(--primary) 90%, transparent);
}
.badge[data-variant="primary"]:is(a):hover {
background-color: color-mix(in oklab, var(--primary) 90%, transparent);
}
.badge[data-variant="secondary"] {
background-color: var(--secondary);
color: var(--secondary-foreground);
border-color: #0000;
}
.badge[data-variant="secondary"]:-webkit-any(a):hover {
background-color: color-mix(
in oklab,
var(--secondary) 90%,
transparent
);
}
.badge[data-variant="secondary"]:-moz-any(a):hover {
background-color: color-mix(
in oklab,
var(--secondary) 90%,
transparent
);
}
.badge[data-variant="secondary"]:is(a):hover {
background-color: color-mix(
in oklab,
var(--secondary) 90%,
transparent
);
}
.badge[data-variant="destructive"] {
background-color: var(--destructive);
color: #fff;
border-color: #0000;
}
.badge[data-variant="destructive"]:-webkit-any(a):hover {
background-color: color-mix(
in oklab,
var(--destructive) 90%,
transparent
);
}
.badge[data-variant="destructive"]:-moz-any(a):hover {
background-color: color-mix(
in oklab,
var(--destructive) 90%,
transparent
);
}
.badge[data-variant="destructive"]:is(a):hover {
background-color: color-mix(
in oklab,
var(--destructive) 90%,
transparent
);
}
.badge[data-variant="destructive"]:focus-visible {
box-shadow: 0 0 0 3px
color-mix(in oklab, var(--destructive) 20%, transparent);
}
.badge[data-variant="destructive"]:is(.dark *) {
background-color: color-mix(
in oklab,
var(--destructive) 60%,
transparent
);
}
.badge[data-variant="destructive"]:is(.dark *):focus-visible {
box-shadow: 0 0 0 3px
color-mix(in oklab, var(--destructive) 40%, transparent);
}
.badge[data-variant="outline"] {
border-color: var(--border);
background: unset;
color: var(--foreground);
}
.badge[data-variant="outline"]:-webkit-any(a):hover {
background-color: var(--accent);
color: var(--accent-foreground);
}
.badge[data-variant="outline"]:-moz-any(a):hover {
background-color: var(--accent);
color: var(--accent-foreground);
}
.badge[data-variant="outline"]:is(a):hover {
background-color: var(--accent);
color: var(--accent-foreground);
}
}
/* src/css/card.css */
@layer components {
.card {
border: 1px solid var(--border);
border-radius: calc(var(--radius) + 4px);
background: var(--card);
color: var(--card-foreground);
box-shadow:
0 1px 3px #0000001a,
0 1px 2px -1px #0000001a;
}
.card:-webkit-any(table) {
border: 0;
}
.card:-moz-any(table) {
border: 0;
}
.card:is(table) {
border: 0;
}
.card:not(:-webkit-any(table, dl)) {
container-type: inline-size;
display: flex;
overflow-wrap: anywhere;
flex-direction: column;
flex-shrink: 1;
gap: 1.5rem;
inline-size: 100%;
min-inline-size: 0;
padding-block-start: 1rem;
padding-block-end: 0;
}
.card:not(:-webkit-any(table, dl))
> :-webkit-any(header, section, footer) {
min-inline-size: 0;
}
.card:not(:-moz-any(table, dl)) > :-moz-any(header, section, footer) {
min-inline-size: 0;
}
.card:not(:is(table, dl)) > :is(header, section, footer) {
min-inline-size: 0;
}
.card:not(:is(table, dl)) > :last-child:not(footer) {
margin-block-end: 1rem;
}
.card:not(:is(table, dl)) > header {
display: grid;
grid-template-rows: auto auto;
grid-auto-rows: min-content;
align-items: start;
gap: 0.375rem;
padding-inline-start: 1rem;
padding-inline-end: 1rem;
}
.card:not(:is(table, dl)) > header:has([data-slot="card-action"]) {
grid-template-columns: minmax(0, 1fr) auto;
}
.card:not(:is(table, dl)) > header [data-slot="card-action"] {
grid-row: 1 / span 2;
grid-column: 2;
min-inline-size: 0;
max-inline-size: 50cqi;
white-space: normal;
justify-self: end;
height: auto;
min-height: 2.25rem;
}
.card:not(:is(table, dl)) > header.border-b {
padding-bottom: 1.5rem;
}
.card:not(:-webkit-any(table, dl))
> header
:-webkit-any(h2, h3, h4, h5, h6) {
overflow-wrap: anywhere;
font-weight: 600;
line-height: 1;
margin: 0 !important;
padding: 0 !important;
font-size: 1rem !important;
}
.card:not(:-moz-any(table, dl)) > header :-moz-any(h2, h3, h4, h5, h6) {
overflow-wrap: anywhere;
font-weight: 600;
line-height: 1;
margin: 0 !important;
padding: 0 !important;
font-size: 1rem !important;
}
.card:not(:is(table, dl)) > header :is(h2, h3, h4, h5, h6) {
overflow-wrap: anywhere;
font-weight: 600;
line-height: 1;
margin: 0 !important;
padding: 0 !important;
font-size: 1rem !important;
}
.card:not(:-webkit-any(table, dl)) > header :-webkit-any(p, span) {
color: var(--muted-foreground);
overflow-wrap: anywhere;
font-size: 0.875rem;
line-height: 1.25rem;
margin: 0 !important;
padding: 0 !important;
}
.card:not(:-moz-any(table, dl)) > header :-moz-any(p, span) {
color: var(--muted-foreground);
overflow-wrap: anywhere;
font-size: 0.875rem;
line-height: 1.25rem;
margin: 0 !important;
padding: 0 !important;
}
.card:not(:is(table, dl)) > header :is(p, span) {
color: var(--muted-foreground);
overflow-wrap: anywhere;
font-size: 0.875rem;
line-height: 1.25rem;
margin: 0 !important;
padding: 0 !important;
}
.card:not(:is(table, dl)) > section {
padding-inline-start: 1rem;
padding-inline-end: 1rem;
}
.card:not(:is(table, dl)) > section * {
overflow-wrap: anywhere;
min-inline-size: 0;
}
.card:not(:is(table, dl)) > section > :last-child {
margin-bottom: 0 !important;
}
.card:not(:is(table, dl)) > footer {
display: grid;
grid-template-rows: repeat(2, minmax(0, 1fr));
border-radius: 0 0 calc(var(--radius) + 4px) calc(var(--radius) + 4px);
background-color: var(--secondary);
align-items: center;
gap: 0.75rem;
padding: 1rem;
}
.card:not(:is(table, dl)) > footer > * {
min-inline-size: 0;
max-inline-size: 100%;
}
.card:not(:-webkit-any(table, dl))
> footer
> :-webkit-any(button, a.button) {
white-space: normal;
height: auto;
min-height: 2.25rem;
}
.card:not(:-moz-any(table, dl)) > footer > :-moz-any(button, a.button) {
white-space: normal;
height: auto;
min-height: 2.25rem;
}
.card:not(:is(table, dl)) > footer > :is(button, a.button) {
white-space: normal;
height: auto;
min-height: 2.25rem;
}
.card:not(:-moz-any(table, dl)) {
container-type: inline-size;
display: flex;
overflow-wrap: anywhere;
flex-direction: column;
flex-shrink: 1;
gap: 1.5rem;
inline-size: 100%;
min-inline-size: 0;
padding-block-start: 1rem;
padding-block-end: 0;
}
.card:not(:-webkit-any(table, dl))
> :-webkit-any(header, section, footer) {
min-inline-size: 0;
}
.card:not(:-moz-any(table, dl)) > :-moz-any(header, section, footer) {
min-inline-size: 0;
}
.card:not(:is(table, dl)) > :is(header, section, footer) {
min-inline-size: 0;
}
.card:not(:is(table, dl)) > :last-child:not(footer) {
margin-block-end: 1rem;
}
.card:not(:is(table, dl)) > header {
display: grid;
grid-template-rows: auto auto;
grid-auto-rows: min-content;
align-items: start;
gap: 0.375rem;
padding-inline-start: 1rem;
padding-inline-end: 1rem;
}
.card:not(:is(table, dl)) > header:has([data-slot="card-action"]) {
grid-template-columns: minmax(0, 1fr) auto;
}
.card:not(:is(table, dl)) > header [data-slot="card-action"] {
grid-row: 1 / span 2;
grid-column: 2;
min-inline-size: 0;
max-inline-size: 50cqi;
white-space: normal;
justify-self: end;
height: auto;
min-height: 2.25rem;
}
.card:not(:is(table, dl)) > header.border-b {
padding-bottom: 1.5rem;
}
.card:not(:-webkit-any(table, dl))
> header
:-webkit-any(h2, h3, h4, h5, h6) {
overflow-wrap: anywhere;
font-weight: 600;
line-height: 1;
margin: 0 !important;
padding: 0 !important;
font-size: 1rem !important;
}
.card:not(:-moz-any(table, dl)) > header :-moz-any(h2, h3, h4, h5, h6) {
overflow-wrap: anywhere;
font-weight: 600;
line-height: 1;
margin: 0 !important;
padding: 0 !important;
font-size: 1rem !important;
}
.card:not(:is(table, dl)) > header :is(h2, h3, h4, h5, h6) {
overflow-wrap: anywhere;
font-weight: 600;
line-height: 1;
margin: 0 !important;
padding: 0 !important;
font-size: 1rem !important;
}
.card:not(:-webkit-any(table, dl)) > header :-webkit-any(p, span) {
color: var(--muted-foreground);
overflow-wrap: anywhere;
font-size: 0.875rem;
line-height: 1.25rem;
margin: 0 !important;
padding: 0 !important;
}
.card:not(:-moz-any(table, dl)) > header :-moz-any(p, span) {
color: var(--muted-foreground);
overflow-wrap: anywhere;
font-size: 0.875rem;
line-height: 1.25rem;
margin: 0 !important;
padding: 0 !important;
}
.card:not(:is(table, dl)) > header :is(p, span) {
color: var(--muted-foreground);
overflow-wrap: anywhere;
font-size: 0.875rem;
line-height: 1.25rem;
margin: 0 !important;
padding: 0 !important;
}
.card:not(:is(table, dl)) > section {
padding-inline-start: 1rem;
padding-inline-end: 1rem;
}
.card:not(:is(table, dl)) > section * {
overflow-wrap: anywhere;
min-inline-size: 0;
}
.card:not(:is(table, dl)) > section > :last-child {
margin-bottom: 0 !important;
}
.card:not(:is(table, dl)) > footer {
display: grid;
grid-template-rows: repeat(2, minmax(0, 1fr));
border-radius: 0 0 calc(var(--radius) + 4px) calc(var(--radius) + 4px);
background-color: var(--secondary);
align-items: center;
gap: 0.75rem;
padding: 1rem;
}
.card:not(:is(table, dl)) > footer > * {
min-inline-size: 0;
max-inline-size: 100%;
}
.card:not(:-webkit-any(table, dl))
> footer
> :-webkit-any(button, a.button) {
white-space: normal;
height: auto;
min-height: 2.25rem;
}
.card:not(:-moz-any(table, dl)) > footer > :-moz-any(button, a.button) {
white-space: normal;
height: auto;
min-height: 2.25rem;
}
.card:not(:is(table, dl)) > footer > :is(button, a.button) {
white-space: normal;
height: auto;
min-height: 2.25rem;
}
.card:not(:is(table, dl)) {
container-type: inline-size;
display: flex;
overflow-wrap: anywhere;
flex-direction: column;
flex-shrink: 1;
gap: 1.5rem;
inline-size: 100%;
min-inline-size: 0;
padding-block-start: 1rem;
padding-block-end: 0;
}
.card:not(:-webkit-any(table, dl))
> :-webkit-any(header, section, footer) {
min-inline-size: 0;
}
.card:not(:-moz-any(table, dl)) > :-moz-any(header, section, footer) {
min-inline-size: 0;
}
.card:not(:is(table, dl)) > :is(header, section, footer) {
min-inline-size: 0;
}
.card:not(:is(table, dl)) > :last-child:not(footer) {
margin-block-end: 1rem;
}
.card:not(:is(table, dl)) > header {
display: grid;
grid-template-rows: auto auto;
grid-auto-rows: min-content;
align-items: start;
gap: 0.375rem;
padding-inline-start: 1rem;
padding-inline-end: 1rem;
}
.card:not(:is(table, dl)) > header:has([data-slot="card-action"]) {
grid-template-columns: minmax(0, 1fr) auto;
}
.card:not(:is(table, dl)) > header [data-slot="card-action"] {
grid-row: 1 / span 2;
grid-column: 2;
min-inline-size: 0;
max-inline-size: 50cqi;
white-space: normal;
justify-self: end;
height: auto;
min-height: 2.25rem;
}
.card:not(:is(table, dl)) > header.border-b {
padding-bottom: 1.5rem;
}
.card:not(:-webkit-any(table, dl))
> header
:-webkit-any(h2, h3, h4, h5, h6) {
overflow-wrap: anywhere;
font-weight: 600;
line-height: 1;
margin: 0 !important;
padding: 0 !important;
font-size: 1rem !important;
}
.card:not(:-moz-any(table, dl)) > header :-moz-any(h2, h3, h4, h5, h6) {
overflow-wrap: anywhere;
font-weight: 600;
line-height: 1;
margin: 0 !important;
padding: 0 !important;
font-size: 1rem !important;
}
.card:not(:is(table, dl)) > header :is(h2, h3, h4, h5, h6) {
overflow-wrap: anywhere;
font-weight: 600;
line-height: 1;
margin: 0 !important;
padding: 0 !important;
font-size: 1rem !important;
}
.card:not(:-webkit-any(table, dl)) > header :-webkit-any(p, span) {
color: var(--muted-foreground);
overflow-wrap: anywhere;
font-size: 0.875rem;
line-height: 1.25rem;
margin: 0 !important;
padding: 0 !important;
}
.card:not(:-moz-any(table, dl)) > header :-moz-any(p, span) {
color: var(--muted-foreground);
overflow-wrap: anywhere;
font-size: 0.875rem;
line-height: 1.25rem;
margin: 0 !important;
padding: 0 !important;
}
.card:not(:is(table, dl)) > header :is(p, span) {
color: var(--muted-foreground);
overflow-wrap: anywhere;
font-size: 0.875rem;
line-height: 1.25rem;
margin: 0 !important;
padding: 0 !important;
}
.card:not(:is(table, dl)) > section {
padding-inline-start: 1rem;
padding-inline-end: 1rem;
}
.card:not(:is(table, dl)) > section * {
overflow-wrap: anywhere;
min-inline-size: 0;
}
.card:not(:is(table, dl)) > section > :last-child {
margin-bottom: 0 !important;
}
.card:not(:is(table, dl)) > footer {
display: grid;
grid-template-rows: repeat(2, minmax(0, 1fr));
border-radius: 0 0 calc(var(--radius) + 4px) calc(var(--radius) + 4px);
background-color: var(--secondary);
align-items: center;
gap: 0.75rem;
padding: 1rem;
}
.card:not(:is(table, dl)) > footer > * {
min-inline-size: 0;
max-inline-size: 100%;
}
.card:not(:-webkit-any(table, dl))
> footer
> :-webkit-any(button, a.button) {
white-space: normal;
height: auto;
min-height: 2.25rem;
}
.card:not(:-moz-any(table, dl)) > footer > :-moz-any(button, a.button) {
white-space: normal;
height: auto;
min-height: 2.25rem;
}
.card:not(:is(table, dl)) > footer > :is(button, a.button) {
white-space: normal;
height: auto;
min-height: 2.25rem;
}
@container (width < 24rem) {
.card:not(:is(table, dl)) > header:has([data-slot="card-action"]) {
grid-template-columns: minmax(0, 1fr);
}
.card:not(:is(table, dl))
> header:has([data-slot="card-action"])
[data-slot="card-action"] {
grid-row: auto;
grid-column: 1;
inline-size: 100%;
max-inline-size: 100%;
justify-self: stretch;
}
}
@container (width < 12rem) {
.card:not(:is(table, dl)) > :is(header, section) {
padding-inline: 0.5rem;
}
.card:not(:is(table, dl)) > footer {
padding: 0.5rem;
}
}
}
/* src/css/dialog.css */
@layer components {
dialog {
display: flex;
overflow-x: hidden;
overflow-y: auto;
overflow-wrap: break-word;
border: 1px solid var(--border);
border-radius: calc(var(--radius) + 4px);
background: var(--background);
color: var(--foreground);
opacity: 0;
transition:
opacity 0.18s ease-out,
transform 0.18s ease-out,
display 0.18s allow-discrete,
overlay 0.18s allow-discrete;
flex-direction: column;
max-block-size: calc(100dvh - 2rem);
inline-size: min(32rem, 100% - 2rem);
max-inline-size: none;
margin: auto;
transform: translateY(-0.25rem) scale(0.98);
box-shadow:
0 20px 25px -5px #0000001a,
0 8px 10px -6px #0000001a;
}
dialog:not([open]) {
display: none;
}
dialog[open] {
opacity: 1;
transform: none;
}
@starting-style {
dialog[open] {
opacity: 0;
transform: translateY(-0.25rem) scale(0.98);
}
}
dialog:not(:modal) {
position: fixed;
z-index: 10;
inset: 0;
}
dialog::backdrop {
transition:
background 0.18s ease-out,
display 0.18s allow-discrete,
overlay 0.18s allow-discrete;
background: none;
}
dialog[open]::backdrop {
background: #00000080;
}
@starting-style {
dialog[open]::backdrop {
background: none;
}
}
dialog > :-webkit-any(header, section, footer) {
padding: 1.5rem;
}
dialog > :-moz-any(header, section, footer) {
padding: 1.5rem;
}
dialog > :is(header, section, footer) {
padding: 1.5rem;
}
dialog > header {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 0.375rem 1rem;
}
dialog > header > :-webkit-any(h1, h2, h3, h4, h5, h6) {
grid-column: 1;
margin: 0;
font-size: 1.125rem;
font-weight: 600;
line-height: 1.5rem;
}
dialog > header > :-moz-any(h1, h2, h3, h4, h5, h6) {
grid-column: 1;
margin: 0;
font-size: 1.125rem;
font-weight: 600;
line-height: 1.5rem;
}
dialog > header > :is(h1, h2, h3, h4, h5, h6) {
grid-column: 1;
margin: 0;
font-size: 1.125rem;
font-weight: 600;
line-height: 1.5rem;
}
dialog > header > p {
grid-column: 1;
color: var(--muted-foreground);
margin: 0;
font-size: 0.875rem;
line-height: 1.25rem;
}
dialog > header > form[method="dialog"] {
grid-column: 2;
grid-row: 1 / span 2;
margin: -0.5rem -0.5rem 0 0;
}
dialog > section {
overflow: auto;
flex-shrink: 1;
min-block-size: 0;
padding-block-start: 0;
padding-block-end: 0.75rem;
}
dialog > section > :last-child {
margin-block-end: 0;
}
dialog > footer {
display: flex;
border-top: 1px solid var(--border);
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 0.5rem;
}
dialog > footer > form {
margin: 0;
}
@media (max-width: calc(40rem - 0.001px)) {
dialog > footer > :-webkit-any(button, form) {
flex: auto;
}
dialog > footer > :-moz-any(button, form) {
flex: auto;
}
dialog > footer > :is(button, form) {
flex: auto;
}
dialog > footer > form > button {
inline-size: 100%;
}
}
@media (max-height: calc(25rem - 0.001px)) {
dialog > section {
overflow: visible;
flex-shrink: 0;
}
}
@media (prefers-reduced-motion: reduce) {
dialog {
transition: none;
}
dialog::backdrop {
transition: none;
}
}
}
/* src/css/input.css */
@layer components {
form {
display: flex;
flex-direction: column;
gap: 1rem;
}
input:not(
:-webkit-any(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
),
input[type="file"],
textarea,
select {
border: 1px solid var(--input);
border-radius: calc(var(--radius) - 2px);
outline: none;
background: none;
width: 100%;
transition:
color 0.15s,
box-shadow 0.15s;
box-shadow: 0 1px 2px #0000000d;
}
:is(
input:not(
:is(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
),
input[type="file"],
textarea,
select
)::placeholder {
color: var(--muted-foreground);
}
:is(
input:not(
:is(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
),
input[type="file"],
textarea,
select
):disabled {
cursor: not-allowed;
opacity: 0.5;
}
:is(
input:not(
:is(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
),
input[type="file"],
textarea,
select
):focus-visible {
border-color: var(--ring);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
}
:is(
input:not(
:is(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
),
input[type="file"],
textarea,
select
)[aria-invalid="true"] {
border-color: var(--destructive);
box-shadow: 0 0 0 3px
color-mix(in oklab, var(--destructive) 20%, transparent);
}
:is(
input:not(
:is(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
),
input[type="file"],
textarea,
select
):is(.dark *) {
background: color-mix(in oklab, var(--input) 30%, transparent);
}
:is(
input:not(
:is(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
),
input[type="file"],
textarea,
select
):is(.dark *)[aria-invalid="true"] {
box-shadow: 0 0 0 3px
color-mix(in oklab, var(--destructive) 40%, transparent);
}
input:not(
:-moz-any(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
),
input[type="file"],
textarea,
select {
border: 1px solid var(--input);
border-radius: calc(var(--radius) - 2px);
outline: none;
background: none;
width: 100%;
transition:
color 0.15s,
box-shadow 0.15s;
box-shadow: 0 1px 2px #0000000d;
}
:is(
input:not(
:is(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
),
input[type="file"],
textarea,
select
)::placeholder {
color: var(--muted-foreground);
}
:is(
input:not(
:is(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
),
input[type="file"],
textarea,
select
):disabled {
cursor: not-allowed;
opacity: 0.5;
}
:is(
input:not(
:is(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
),
input[type="file"],
textarea,
select
):focus-visible {
border-color: var(--ring);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
}
:is(
input:not(
:is(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
),
input[type="file"],
textarea,
select
)[aria-invalid="true"] {
border-color: var(--destructive);
box-shadow: 0 0 0 3px
color-mix(in oklab, var(--destructive) 20%, transparent);
}
:is(
input:not(
:is(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
),
input[type="file"],
textarea,
select
):is(.dark *) {
background: color-mix(in oklab, var(--input) 30%, transparent);
}
:is(
input:not(
:is(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
),
input[type="file"],
textarea,
select
):is(.dark *)[aria-invalid="true"] {
box-shadow: 0 0 0 3px
color-mix(in oklab, var(--destructive) 40%, transparent);
}
input:not(
:is(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
),
input[type="file"],
textarea,
select {
border: 1px solid var(--input);
border-radius: calc(var(--radius) - 2px);
outline: none;
background: none;
width: 100%;
transition:
color 0.15s,
box-shadow 0.15s;
box-shadow: 0 1px 2px #0000000d;
}
:is(
input:not(
:is(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
),
input[type="file"],
textarea,
select
)::placeholder {
color: var(--muted-foreground);
}
:is(
input:not(
:is(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
),
input[type="file"],
textarea,
select
):disabled {
cursor: not-allowed;
opacity: 0.5;
}
:is(
input:not(
:is(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
),
input[type="file"],
textarea,
select
):focus-visible {
border-color: var(--ring);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
}
:is(
input:not(
:is(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
),
input[type="file"],
textarea,
select
)[aria-invalid="true"] {
border-color: var(--destructive);
box-shadow: 0 0 0 3px
color-mix(in oklab, var(--destructive) 20%, transparent);
}
:is(
input:not(
:is(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
),
input[type="file"],
textarea,
select
):is(.dark *) {
background: color-mix(in oklab, var(--input) 30%, transparent);
}
:is(
input:not(
:is(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
),
input[type="file"],
textarea,
select
):is(.dark *)[aria-invalid="true"] {
box-shadow: 0 0 0 3px
color-mix(in oklab, var(--destructive) 40%, transparent);
}
input:not(
:-webkit-any(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
),
input[type="file"] {
display: flex;
appearance: none;
min-width: 0;
height: 2.25rem;
font-size: 1rem;
line-height: 1.5rem;
}
:is(
input:not(
:is(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
),
input[type="file"]
)::selection {
background: var(--primary);
color: var(--primary-foreground);
}
:is(
input:not(
:-webkit-any(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
),
input[type="file"]
)::-webkit-file-upload-button {
display: inline-flex;
color: var(--foreground);
background: none;
border: 0;
height: 1.75rem;
font-size: 0.875rem;
font-weight: 500;
}
:is(
input:not(
:is(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
),
input[type="file"]
)::file-selector-button {
display: inline-flex;
color: var(--foreground);
background: none;
border: 0;
height: 1.75rem;
font-size: 0.875rem;
font-weight: 500;
}
:is(
input:not(
:is(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
),
input[type="file"]
):disabled {
pointer-events: none;
}
@media (min-width: 48rem) {
:is(
input:not(
:is(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
),
input[type="file"]
) {
font-size: 0.875rem;
line-height: 1.25rem;
}
}
input:not(
:-moz-any(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
),
input[type="file"] {
display: flex;
appearance: none;
min-width: 0;
height: 2.25rem;
font-size: 1rem;
line-height: 1.5rem;
}
:is(
input:not(
:is(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
),
input[type="file"]
)::selection {
background: var(--primary);
color: var(--primary-foreground);
}
:is(
input:not(
:-webkit-any(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
),
input[type="file"]
)::-webkit-file-upload-button {
display: inline-flex;
color: var(--foreground);
background: none;
border: 0;
height: 1.75rem;
font-size: 0.875rem;
font-weight: 500;
}
:is(
input:not(
:is(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
),
input[type="file"]
)::file-selector-button {
display: inline-flex;
color: var(--foreground);
background: none;
border: 0;
height: 1.75rem;
font-size: 0.875rem;
font-weight: 500;
}
:is(
input:not(
:is(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
),
input[type="file"]
):disabled {
pointer-events: none;
}
@media (min-width: 48rem) {
:is(
input:not(
:is(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
),
input[type="file"]
) {
font-size: 0.875rem;
line-height: 1.25rem;
}
}
input:not(
:is(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
),
input[type="file"] {
display: flex;
appearance: none;
min-width: 0;
height: 2.25rem;
font-size: 1rem;
line-height: 1.5rem;
}
:is(
input:not(
:is(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
),
input[type="file"]
)::selection {
background: var(--primary);
color: var(--primary-foreground);
}
:is(
input:not(
:-webkit-any(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
),
input[type="file"]
)::-webkit-file-upload-button {
display: inline-flex;
color: var(--foreground);
background: none;
border: 0;
height: 1.75rem;
font-size: 0.875rem;
font-weight: 500;
}
:is(
input:not(
:is(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
),
input[type="file"]
)::file-selector-button {
display: inline-flex;
color: var(--foreground);
background: none;
border: 0;
height: 1.75rem;
font-size: 0.875rem;
font-weight: 500;
}
:is(
input:not(
:is(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
),
input[type="file"]
):disabled {
pointer-events: none;
}
@media (min-width: 48rem) {
:is(
input:not(
:is(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
),
input[type="file"]
) {
font-size: 0.875rem;
line-height: 1.25rem;
}
}
input:not(
:-webkit-any(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
) {
padding: 0.25rem 0.75rem;
}
input:not(
:-moz-any(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
) {
padding: 0.25rem 0.75rem;
}
input:not(
:is(
[type="checkbox"],
[type="radio"],
[type="range"],
[type="hidden"],
[type="file"],
[type="color"],
[role]
)
) {
padding: 0.25rem 0.75rem;
}
input[type="file"]:active:not(:disabled) {
translate: 0 0.125rem;
}
input[type="file"]::-webkit-file-upload-button {
background: var(--secondary);
height: 100%;
margin-inline-end: 1rem;
padding-inline-start: 0.75rem;
padding-inline-end: 0.75rem;
}
textarea {
display: flex;
field-sizing: content;
min-height: 4rem;
padding: 0.5rem 0.75rem;
font-size: 1rem;
line-height: 1.5rem;
}
@media (min-width: 48rem) {
textarea {
font-size: 0.875rem;
line-height: 1.25rem;
}
}
select {
display: flex;
appearance: none;
white-space: nowrap;
background-image: var(--chevron-down-icon-50);
background-position: right 0.75rem center;
background-repeat: no-repeat;
background-size: 1rem;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
height: 2.25rem;
padding: 0.5rem 2.25rem 0.5rem 0.75rem;
font-size: 0.875rem;
line-height: 1.25rem;
}
select:is(.dark *):hover {
background-color: color-mix(in oklab, var(--input) 50%, transparent);
}
select option {
background: var(--popover);
color: var(--popover-foreground);
}
select optgroup {
background: var(--popover);
color: var(--popover-foreground);
}
label {
display: flex;
user-select: none;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
line-height: 1;
}
label:has(+ :-webkit-any(input, textarea, select)) {
padding-bottom: 0.5rem;
}
label:has(+ :-moz-any(input, textarea, select)) {
padding-bottom: 0.5rem;
}
label:has(+ :is(input, textarea, select)) {
padding-bottom: 0.5rem;
}
label:has(> :disabled) {
pointer-events: none;
opacity: 0.5;
}
label:has(+ :disabled) {
pointer-events: none;
opacity: 0.5;
}
input[type="checkbox"]:not([role="switch"]),
input[type="radio"] {
appearance: none;
border: 1px solid var(--input);
outline: none;
background: none;
flex-shrink: 0;
transition:
color 0.15s,
box-shadow 0.15s;
box-shadow: 0 1px 2px #0000000d;
width: 1rem !important;
height: 1rem !important;
}
:is(
input[type="checkbox"]:not([role="switch"]),
input[type="radio"]
):focus-visible {
border-color: var(--ring);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
}
:is(
input[type="checkbox"]:not([role="switch"]),
input[type="radio"]
):disabled {
cursor: not-allowed;
opacity: 0.5;
}
:is(
input[type="checkbox"]:not([role="switch"]),
input[type="radio"]
)[aria-invalid="true"] {
border-color: var(--destructive);
box-shadow: 0 0 0 3px
color-mix(in oklab, var(--destructive) 20%, transparent);
}
:is(input[type="checkbox"]:not([role="switch"]), input[type="radio"]):is(
.dark *
) {
background: color-mix(in oklab, var(--input) 30%, transparent);
}
:is(input[type="checkbox"]:not([role="switch"]), input[type="radio"]):is(
.dark *
)[aria-invalid="true"] {
box-shadow: 0 0 0 3px
color-mix(in oklab, var(--destructive) 40%, transparent);
}
input[type="checkbox"]:not([role="switch"]) {
border-radius: 4px;
}
input[type="checkbox"]:not([role="switch"]):checked {
border-color: var(--primary);
background: var(--primary);
}
input[type="checkbox"]:not([role="switch"]) + label {
display: inline-flex;
}
input[type="checkbox"]:not([role="switch"]):checked:after {
content: "";
display: block;
background: var(--primary-foreground);
mask-image: var(--check-icon);
mask-position: center;
mask-size: 0.875rem;
mask-repeat: no-repeat;
width: 0.875rem;
height: 0.875rem;
}
fieldset {
display: flex;
border: 1px solid var(--border);
border-radius: var(--radius);
flex-direction: column;
gap: 1rem;
padding: 1rem 1rem 1.25rem;
}
fieldset legend {
color: var(--muted-foreground);
user-select: none;
font-size: 0.875rem;
font-weight: 500;
line-height: 1;
}
fieldset ul:has(> li) {
display: contents;
padding-inline-start: 0 !important;
}
fieldset ul:has(> li) li {
list-style: none;
}
fieldset > :last-child {
margin-bottom: 0 !important;
}
fieldset > p:has(input) {
margin-bottom: 0 !important;
}
div:has(
> :-webkit-any(input[type="checkbox"], input[type="radio"]) + label
) {
display: flex;
user-select: none;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
line-height: 1;
}
div:has(
> :-moz-any(input[type="checkbox"], input[type="radio"]) + label
) {
display: flex;
user-select: none;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
line-height: 1;
}
div:has(> :is(input[type="checkbox"], input[type="radio"]) + label) {
display: flex;
user-select: none;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
line-height: 1;
}
input[type="radio"] {
position: relative;
aspect-ratio: 1;
color: var(--primary);
border-radius: 50%;
}
input[type="radio"]:checked:before {
content: "";
position: absolute;
background: var(--primary);
border-radius: 50%;
width: 0.5rem;
height: 0.5rem;
top: 50%;
left: 50%;
translate: -50% -50%;
}
input {
position: relative;
}
input::-webkit-calendar-picker-indicator {
position: absolute;
color: var(--primary);
fill: var(--primary);
background-image: var(
--buncss-light,
url('data:image/svg+xml,')
)
var(
--buncss-dark,
url('data:image/svg+xml,')
);
right: 0.5rem;
}
input:-webkit-any(
[type="date"],
[type="datetime-local"]
)::-webkit-datetime-edit-text {
color: var(--muted-foreground);
}
input:-moz-any(
[type="date"],
[type="datetime-local"]
)::-webkit-datetime-edit-text {
color: var(--muted-foreground);
}
input:is(
[type="date"],
[type="datetime-local"]
)::-webkit-datetime-edit-text {
color: var(--muted-foreground);
}
input[type="checkbox"][role="switch"] {
display: inline-flex;
appearance: none;
outline: none;
background: var(--input);
border: 1px solid #0000;
border-radius: 9999px;
flex-shrink: 0;
align-items: center;
height: 1.15rem;
transition: all 0.15s;
box-shadow: 0 1px 2px #0000000d;
width: 2rem !important;
}
input[type="checkbox"][role="switch"]:focus-visible {
border-color: var(--ring);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
}
input[type="checkbox"][role="switch"]:disabled {
cursor: not-allowed;
opacity: 0.5;
}
input[type="checkbox"][role="switch"]:checked {
background: var(--primary);
}
input[type="checkbox"][role="switch"]:is(.dark *) {
background: color-mix(in oklab, var(--input) 80%, transparent);
}
input[type="checkbox"][role="switch"]:is(.dark *):checked {
background: var(--primary);
}
input[type="checkbox"][role="switch"]:before {
content: "";
pointer-events: none;
display: block;
background: var(--background);
border-radius: 50%;
width: 1rem;
height: 1rem;
transition: all 0.15s;
}
input[type="checkbox"][role="switch"]:is(.dark *):before {
background: var(--foreground);
}
input[type="checkbox"][role="switch"]:checked:before {
margin-inline-start: 0.875rem;
}
input[type="checkbox"][role="switch"]:is(.dark *):checked:before {
background: var(--primary-foreground);
}
input[type="color" i] {
border: 1px solid var(--border);
border-radius: 50%;
width: 30px !important;
height: 30px !important;
}
input[type="color" i]:active {
translate: 0 0.125rem;
}
input[type="color" i]::-webkit-color-swatch-wrapper {
border-radius: 99px;
}
input[type="color" i]::-webkit-color-swatch {
border-radius: 99px;
}
input[type="color" i]::-moz-color-swatch {
border-radius: 99px;
}
input[type="color" i]::-webkit-color-swatch-wrapper {
padding: 0.25rem;
}
input[type="range"] {
accent-color: var(--primary);
width: 100%;
}
input[type="range"]:hover::-webkit-slider-thumb {
box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 50%, transparent);
}
input[type="range"]:hover::-moz-range-thumb {
box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 50%, transparent);
}
input[type="range"]:hover::-ms-thumb {
box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 50%, transparent);
}
input[type="range"]:focus-visible::-webkit-slider-thumb {
box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 50%, transparent);
}
input[type="range"]:focus-visible::-moz-range-thumb {
box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 50%, transparent);
}
input[type="range"]:focus-visible::-ms-thumb {
box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 50%, transparent);
}
input[type="range"]::-webkit-slider-thumb {
display: block;
appearance: none;
border: 1px solid var(--primary);
background: var(--background);
border-radius: 50%;
width: 1rem;
height: 1rem;
box-shadow:
0 1px 3px #0000001a,
0 1px 2px -1px #0000001a;
}
input[type="range"]::-moz-range-thumb {
display: block;
appearance: none;
border: 1px solid var(--primary);
background: var(--background);
border-radius: 50%;
width: 1rem;
height: 1rem;
box-shadow:
0 1px 3px #0000001a,
0 1px 2px -1px #0000001a;
}
input[type="range"]::-ms-thumb {
display: block;
appearance: none;
border: 1px solid var(--primary);
background: var(--background);
border-radius: 50%;
width: 1rem;
height: 1rem;
box-shadow:
0 1px 3px #0000001a,
0 1px 2px -1px #0000001a;
}
}
/* src/css/table.css */
@layer components {
table {
caption-side: bottom;
width: 100%;
font-size: 0.875rem;
line-height: 1.25rem;
}
table.card {
outline: 1px solid var(--border);
border-color: #0000;
}
table thead tr {
border-bottom: 1px solid var(--border);
}
table tbody tr:last-child {
border-width: 0;
}
table tfoot {
border-top: 1px solid var(--border);
background-color: color-mix(in oklab, var(--muted) 50%, transparent);
font-weight: 500;
}
table tfoot > tr:last-child {
border-bottom-width: 0;
}
table tr {
border-bottom: 1px solid var(--border);
transition:
color 0.15s,
background-color 0.15s,
border-color 0.15s;
}
table tr:hover {
background-color: color-mix(in oklab, var(--muted) 50%, transparent);
}
table th {
color: var(--foreground);
text-align: left;
vertical-align: middle;
white-space: nowrap;
height: 2.5rem;
padding-inline-start: 0.5rem;
padding-inline-end: 0.5rem;
font-weight: 500;
}
table th:has([role="checkbox"]) {
padding-right: 0;
}
table th > [role="checkbox"] {
translate: 0 2px;
}
table td {
vertical-align: middle;
white-space: nowrap;
padding: 0.5rem;
}
table td:has([role="checkbox"]) {
padding-right: 0;
}
table td > [role="checkbox"] {
translate: 0 2px;
}
table caption {
color: var(--muted-foreground);
margin-top: 1rem;
font-size: 0.875rem;
line-height: 1.25rem;
}
}
/* src/css/image.css */
@layer components {
img[src] {
border-radius: calc(var(--radius) + 4px);
}
figure {
width: -moz-fit-content;
width: fit-content;
}
figure .caption {
color: var(--muted-foreground);
text-align: center;
margin-top: 0.75rem;
font-size: 0.875rem;
line-height: 1.25rem;
}
figure figcaption {
color: var(--muted-foreground);
text-align: center;
margin-top: 0.75rem;
font-size: 0.875rem;
line-height: 1.25rem;
}
}
/* src/css/description-list.css */
@layer components {
dl > * > dt {
padding-inline-start: 0.5rem;
padding-inline-end: 0.5rem;
font-weight: 600;
line-height: 1.5;
}
dl > * > dt:first-child {
padding-top: 0.5rem;
}
dl > * > dd {
border-bottom: 1px solid var(--border);
padding-inline-start: 0.5rem;
padding-inline-end: 0.5rem;
text-wrap: balance;
padding-bottom: 0.5rem;
}
dl > *:last-of-type > dd {
border-style: none;
}
dl > dt {
padding-inline-start: 0.5rem;
padding-inline-end: 0.5rem;
font-weight: 600;
line-height: 1.5;
}
dl > dt:first-child {
padding-top: 0.5rem;
}
dl > dt:has(+ dd) {
margin-bottom: 0.25rem;
}
dl > dd {
text-wrap: balance;
padding-inline-start: 0.5rem;
padding-inline-end: 0.5rem;
}
dl > dd:has(+ dd) {
margin-bottom: 0.25rem;
}
dl > dd + dt {
padding-top: 0.5rem;
}
dl > dd:not(:has(+ dd)) {
border-bottom: 1px solid var(--border);
padding-bottom: 0.5rem;
}
dl > dd:not(:has(+ dd)):not(:has(+ dt)) {
border-style: none;
}
}
/* src/css/spinner.css */
@layer components {
[aria-busy="true"] {
position: relative;
}
[aria-busy="true"]:not(:empty):after {
position: absolute;
z-index: 1;
margin: auto;
inset: 0;
}
[aria-busy="true"][data-variant="overlay"] > * {
opacity: 0.3;
pointer-events: none;
}
[aria-busy="true"]:after {
content: "";
display: block;
mask-image: url('data:image/svg+xml;utf8,');
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
animation: sensible-spinner-spin 1s linear infinite;
background-color: currentColor;
flex-shrink: 0;
width: 1.5rem;
height: 1.5rem;
}
:-webkit-any(button, a.button)[aria-busy="true"]:not(:empty):after {
position: static;
order: -1;
width: 1rem;
height: 1rem;
margin: 0;
inset: auto;
}
:-moz-any(button, a.button)[aria-busy="true"]:not(:empty):after {
position: static;
order: -1;
width: 1rem;
height: 1rem;
margin: 0;
inset: auto;
}
:is(button, a.button)[aria-busy="true"]:not(:empty):after {
position: static;
order: -1;
width: 1rem;
height: 1rem;
margin: 0;
inset: auto;
}
@keyframes sensible-spinner-spin {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
[aria-busy="true"]:after {
animation: none;
}
}
}
/* src/css/item.css */
@layer components {
.item {
display: flex;
border: 1px solid var(--border);
border-radius: calc(var(--radius) - 2px);
outline: none;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
padding: 1rem;
transition-duration: 0.1s;
font-size: 0.875rem;
line-height: 1.25rem;
}
.item:focus-visible {
border-color: var(--ring);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
}
.item:-webkit-any(a[href]) {
transition: translate 0.15s cubic-bezier(0, 0, 0.2, 1);
text-decoration-line: none !important;
}
.item:-webkit-any(a[href]):hover {
background-color: color-mix(in oklab, var(--accent) 50%, transparent);
}
.item:-webkit-any(a[href]):active:not(:disabled) {
translate: 0 0.125rem;
}
.item:-moz-any(a[href]) {
transition: translate 0.15s cubic-bezier(0, 0, 0.2, 1);
text-decoration-line: none !important;
}
.item:-moz-any(a[href]):hover {
background-color: color-mix(in oklab, var(--accent) 50%, transparent);
}
.item:-moz-any(a[href]):active:not(:disabled) {
translate: 0 0.125rem;
}
.item:is(a[href]) {
transition: translate 0.15s cubic-bezier(0, 0, 0.2, 1);
text-decoration-line: none !important;
}
.item:is(a[href]):hover {
background-color: color-mix(in oklab, var(--accent) 50%, transparent);
}
.item:is(a[href]):active:not(:disabled) {
translate: 0 0.125rem;
}
.item:has(> svg) {
flex-wrap: nowrap;
}
.item > svg {
color: var(--muted-foreground);
flex-shrink: 0;
}
.item > :-webkit-any(div, section, article) {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0;
}
.item
> :-webkit-any(div, section, article)
> :-webkit-any(h1, h2, h3, h4, h5, h6) {
margin: 0 !important;
font-size: 1rem !important;
line-height: 1.5rem !important;
}
.item
> :-moz-any(div, section, article)
> :-moz-any(h1, h2, h3, h4, h5, h6) {
margin: 0 !important;
font-size: 1rem !important;
line-height: 1.5rem !important;
}
.item > :is(div, section, article) > :is(h1, h2, h3, h4, h5, h6) {
margin: 0 !important;
font-size: 1rem !important;
line-height: 1.5rem !important;
}
.item > :is(div, section, article) > p {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
color: var(--muted-foreground);
text-wrap: balance;
-webkit-box-orient: vertical;
margin: 0 !important;
}
.item > :-moz-any(div, section, article) {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0;
}
.item
> :-webkit-any(div, section, article)
> :-webkit-any(h1, h2, h3, h4, h5, h6) {
margin: 0 !important;
font-size: 1rem !important;
line-height: 1.5rem !important;
}
.item
> :-moz-any(div, section, article)
> :-moz-any(h1, h2, h3, h4, h5, h6) {
margin: 0 !important;
font-size: 1rem !important;
line-height: 1.5rem !important;
}
.item > :is(div, section, article) > :is(h1, h2, h3, h4, h5, h6) {
margin: 0 !important;
font-size: 1rem !important;
line-height: 1.5rem !important;
}
.item > :is(div, section, article) > p {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
color: var(--muted-foreground);
text-wrap: balance;
-webkit-box-orient: vertical;
margin: 0 !important;
}
.item > :is(div, section, article) {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0;
}
.item
> :-webkit-any(div, section, article)
> :-webkit-any(h1, h2, h3, h4, h5, h6) {
margin: 0 !important;
font-size: 1rem !important;
line-height: 1.5rem !important;
}
.item
> :-moz-any(div, section, article)
> :-moz-any(h1, h2, h3, h4, h5, h6) {
margin: 0 !important;
font-size: 1rem !important;
line-height: 1.5rem !important;
}
.item > :is(div, section, article) > :is(h1, h2, h3, h4, h5, h6) {
margin: 0 !important;
font-size: 1rem !important;
line-height: 1.5rem !important;
}
.item > :is(div, section, article) > p {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
color: var(--muted-foreground);
text-wrap: balance;
-webkit-box-orient: vertical;
margin: 0 !important;
}
.item > :not(svg):has(h1, h2, h3, h4, h5, h6, p) {
flex-grow: 1;
}
}
/* src/css/accordion.css */
@layer components {
:root {
interpolate-size: allow-keywords;
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--icon-lucide-chevron: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E");
}
:where(:scope) {
interpolate-size: allow-keywords;
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--icon-lucide-chevron: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E");
}
summary {
list-style: none;
}
summary::-webkit-details-marker {
display: none;
}
details {
border: 1px solid var(--border);
border-radius: calc(var(--radius) - 2px);
outline: none;
transition: translate 0.15s var(--ease-out);
font-size: 0.875rem;
line-height: 1.25rem;
}
details:hover {
cursor: pointer;
background-color: color-mix(in oklab, var(--accent) 50%, transparent);
}
details:focus-visible {
border-color: var(--ring);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
}
details:active:not(:disabled) {
translate: 0 0.125rem;
}
details > summary {
display: grid;
grid-template-columns: 1fr auto;
padding: 1rem;
font-size: 1rem !important;
font-weight: 500 !important;
line-height: 1 !important;
}
details > summary > * {
margin: 0 !important;
padding: 0 !important;
}
details > summary > :-webkit-any(h2, h3, h4, h5, h6, p, span) {
font-size: 1rem !important;
font-weight: 500 !important;
line-height: 1 !important;
}
details > summary > :-moz-any(h2, h3, h4, h5, h6, p, span) {
font-size: 1rem !important;
font-weight: 500 !important;
line-height: 1 !important;
}
details > summary > :is(h2, h3, h4, h5, h6, p, span) {
font-size: 1rem !important;
font-weight: 500 !important;
line-height: 1 !important;
}
details > summary:after {
content: "";
mask-size: contain;
mask-image: var(--icon-lucide-chevron);
mask-repeat: no-repeat;
background-color: currentColor;
flex-shrink: 0;
width: 1em;
height: 1em;
transition: transform 0.2s;
}
details:has(+ details) {
border-bottom-width: 0;
border-radius: 0;
}
details:not(:has(+ details)) {
border-radius: 0 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px);
}
details:has(+ details):first-of-type {
border-radius: calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0 0;
}
details > :not(summary) {
padding: 0 1rem 1rem !important;
}
details :-webkit-any(h2, h3, h4, h5, h6, p) {
padding: 0;
margin-bottom: 0 !important;
}
details :-moz-any(h2, h3, h4, h5, h6, p) {
padding: 0;
margin-bottom: 0 !important;
}
details :is(h2, h3, h4, h5, h6, p) {
padding: 0;
margin-bottom: 0 !important;
}
details::details-content {
transition-behavior: allow-discrete;
transition:
opacity 0.2s,
height 0.2s;
}
details:not([open])::details-content {
overflow: hidden;
opacity: 0;
content-visibility: visible;
height: 0;
}
details[open] summary:after {
transform: rotate(-180deg);
}
details[open]::details-content {
content-visibility: visible;
opacity: 1;
height: calc-size(auto, size);
}
@media (prefers-reduced-motion: reduce) {
details,
details > summary:after {
transition-duration: 0s;
}
details::details-content {
transition-duration: 0s;
}
}
}
/* src/css/button.css */
@layer button {
:-webkit-any(
button:not([role]),
input:-webkit-any([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *) {
display: inline-flex;
border-radius: calc(var(--radius) - 2px);
outline: none;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
justify-content: center;
align-items: center;
transition: all 0.15s ease-out;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.25rem;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *):is(
.card > header > [data-slot="card-action"],
.card > footer > *
) {
white-space: normal;
height: auto;
min-height: 2.25rem;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *):is(
dialog > footer button:not([role])
) {
height: auto;
min-height: 2.25rem;
overflow-wrap: anywhere;
white-space: normal;
max-inline-size: 100%;
}
@container (width < 12rem) {
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *):is(
.card > footer > *
) {
padding-inline: 0.5rem;
}
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *):active:not(
:disabled
) {
translate: 0 0.125rem;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *):disabled {
cursor: not-allowed;
opacity: 0.5;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *)[aria-busy="true"] {
cursor: wait;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *):focus-visible {
border-color: var(--ring);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *)[aria-invalid="true"] {
border-color: var(--destructive);
box-shadow: 0 0 0 3px
color-mix(in oklab, var(--destructive) 20%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *):is(
.dark *
)[aria-invalid="true"] {
box-shadow: 0 0 0 3px
color-mix(in oklab, var(--destructive) 40%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *)
svg {
pointer-events: none;
flex-shrink: 0;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *)
svg:not([class*="size-"]) {
width: 1rem;
height: 1rem;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *):not([data-size]) {
gap: 0.5rem;
height: 2.25rem;
padding: 0.5rem 1rem;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *):not([data-size]):has(
> svg
) {
padding-inline-start: 0.75rem;
padding-inline-end: 0.75rem;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *)[data-size="sm"] {
gap: 0.375rem;
height: 2rem;
padding-inline-start: 0.75rem;
padding-inline-end: 0.75rem;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *)[data-size="sm"]:has(
> svg
) {
padding-inline-start: 0.625rem;
padding-inline-end: 0.625rem;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *)[data-size="lg"] {
gap: 0.5rem;
height: 2.5rem;
padding-inline-start: 1.5rem;
padding-inline-end: 1.5rem;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *)[data-size="lg"]:has(
> svg
) {
padding-inline-start: 1rem;
padding-inline-end: 1rem;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *)[data-size="icon"] {
width: 2.25rem;
height: 2.25rem;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *):not([data-variant]) {
background: var(--primary);
color: var(--primary-foreground);
box-shadow: 0 1px 2px #0000000d;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *):not(
[data-variant]
):hover:not(:disabled) {
background: color-mix(in oklab, var(--primary) 90%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *):not(
[data-variant]
)[aria-pressed="true"] {
background: color-mix(in oklab, var(--primary) 90%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="primary"] {
background: var(--primary);
color: var(--primary-foreground);
box-shadow: 0 1px 2px #0000000d;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="primary"]:hover:not(:disabled) {
background: color-mix(in oklab, var(--primary) 90%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="primary"][aria-pressed="true"] {
background: color-mix(in oklab, var(--primary) 90%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="secondary"] {
background: var(--secondary);
color: var(--secondary-foreground);
box-shadow: 0 1px 2px #0000000d;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="secondary"]:hover:not(:disabled) {
background: color-mix(in oklab, var(--secondary) 80%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="secondary"][aria-pressed="true"] {
background: color-mix(in oklab, var(--secondary) 80%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="outline"] {
border: 1px solid var(--border);
background: var(--background);
box-shadow: 0 1px 2px #0000000d;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="outline"]:is(.dark *) {
border-color: var(--input);
background: color-mix(in oklab, var(--input) 30%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="outline"]:hover:not(:disabled) {
background: var(--accent);
color: var(--accent-foreground);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="outline"][aria-pressed="true"] {
background: var(--accent);
color: var(--accent-foreground);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="outline"]:is(.dark *):hover:not(:disabled) {
background: color-mix(in oklab, var(--accent) 50%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="outline"]:is(.dark *)[aria-pressed="true"] {
background: color-mix(in oklab, var(--accent) 50%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="ghost"]:hover:not(:disabled) {
background: var(--accent);
color: var(--accent-foreground);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="ghost"][aria-pressed="true"] {
background: var(--accent);
color: var(--accent-foreground);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="ghost"]:is(.dark *):hover:not(:disabled) {
background: color-mix(in oklab, var(--accent) 50%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="ghost"]:is(.dark *)[aria-pressed="true"] {
background: color-mix(in oklab, var(--accent) 50%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *)[data-variant="link"] {
color: var(--primary);
text-underline-offset: 4px;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="link"]:hover:not(:disabled) {
text-decoration-line: underline;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="link"][aria-pressed="true"] {
text-decoration-line: underline;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="destructive"] {
background: var(--destructive);
color: #fff;
box-shadow: 0 1px 2px #0000000d;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="destructive"]:focus-visible {
box-shadow: 0 0 0 3px
color-mix(in oklab, var(--destructive) 20%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="destructive"]:hover:not(:disabled) {
background: color-mix(in oklab, var(--destructive) 90%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="destructive"][aria-pressed="true"] {
background: color-mix(in oklab, var(--destructive) 90%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="destructive"]:is(.dark *) {
background: color-mix(in oklab, var(--destructive) 60%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="destructive"]:is(.dark *):focus-visible {
box-shadow: 0 0 0 3px
color-mix(in oklab, var(--destructive) 40%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="destructive"]:is(.dark *):hover:not(:disabled) {
background: color-mix(in oklab, var(--destructive) 50%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="destructive"]:is(.dark *)[aria-pressed="true"] {
background: color-mix(in oklab, var(--destructive) 50%, transparent);
}
:-moz-any(
button:not([role]),
input:-moz-any([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *) {
display: inline-flex;
border-radius: calc(var(--radius) - 2px);
outline: none;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
justify-content: center;
align-items: center;
transition: all 0.15s ease-out;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.25rem;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *):is(
.card > header > [data-slot="card-action"],
.card > footer > *
) {
white-space: normal;
height: auto;
min-height: 2.25rem;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *):is(
dialog > footer button:not([role])
) {
height: auto;
min-height: 2.25rem;
overflow-wrap: anywhere;
white-space: normal;
max-inline-size: 100%;
}
@container (width < 12rem) {
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *):is(
.card > footer > *
) {
padding-inline: 0.5rem;
}
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *):active:not(
:disabled
) {
translate: 0 0.125rem;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *):disabled {
cursor: not-allowed;
opacity: 0.5;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *)[aria-busy="true"] {
cursor: wait;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *):focus-visible {
border-color: var(--ring);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *)[aria-invalid="true"] {
border-color: var(--destructive);
box-shadow: 0 0 0 3px
color-mix(in oklab, var(--destructive) 20%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *):is(
.dark *
)[aria-invalid="true"] {
box-shadow: 0 0 0 3px
color-mix(in oklab, var(--destructive) 40%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *)
svg {
pointer-events: none;
flex-shrink: 0;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *)
svg:not([class*="size-"]) {
width: 1rem;
height: 1rem;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *):not([data-size]) {
gap: 0.5rem;
height: 2.25rem;
padding: 0.5rem 1rem;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *):not([data-size]):has(
> svg
) {
padding-inline-start: 0.75rem;
padding-inline-end: 0.75rem;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *)[data-size="sm"] {
gap: 0.375rem;
height: 2rem;
padding-inline-start: 0.75rem;
padding-inline-end: 0.75rem;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *)[data-size="sm"]:has(
> svg
) {
padding-inline-start: 0.625rem;
padding-inline-end: 0.625rem;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *)[data-size="lg"] {
gap: 0.5rem;
height: 2.5rem;
padding-inline-start: 1.5rem;
padding-inline-end: 1.5rem;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *)[data-size="lg"]:has(
> svg
) {
padding-inline-start: 1rem;
padding-inline-end: 1rem;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *)[data-size="icon"] {
width: 2.25rem;
height: 2.25rem;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *):not([data-variant]) {
background: var(--primary);
color: var(--primary-foreground);
box-shadow: 0 1px 2px #0000000d;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *):not(
[data-variant]
):hover:not(:disabled) {
background: color-mix(in oklab, var(--primary) 90%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *):not(
[data-variant]
)[aria-pressed="true"] {
background: color-mix(in oklab, var(--primary) 90%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="primary"] {
background: var(--primary);
color: var(--primary-foreground);
box-shadow: 0 1px 2px #0000000d;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="primary"]:hover:not(:disabled) {
background: color-mix(in oklab, var(--primary) 90%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="primary"][aria-pressed="true"] {
background: color-mix(in oklab, var(--primary) 90%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="secondary"] {
background: var(--secondary);
color: var(--secondary-foreground);
box-shadow: 0 1px 2px #0000000d;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="secondary"]:hover:not(:disabled) {
background: color-mix(in oklab, var(--secondary) 80%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="secondary"][aria-pressed="true"] {
background: color-mix(in oklab, var(--secondary) 80%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="outline"] {
border: 1px solid var(--border);
background: var(--background);
box-shadow: 0 1px 2px #0000000d;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="outline"]:is(.dark *) {
border-color: var(--input);
background: color-mix(in oklab, var(--input) 30%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="outline"]:hover:not(:disabled) {
background: var(--accent);
color: var(--accent-foreground);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="outline"][aria-pressed="true"] {
background: var(--accent);
color: var(--accent-foreground);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="outline"]:is(.dark *):hover:not(:disabled) {
background: color-mix(in oklab, var(--accent) 50%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="outline"]:is(.dark *)[aria-pressed="true"] {
background: color-mix(in oklab, var(--accent) 50%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="ghost"]:hover:not(:disabled) {
background: var(--accent);
color: var(--accent-foreground);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="ghost"][aria-pressed="true"] {
background: var(--accent);
color: var(--accent-foreground);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="ghost"]:is(.dark *):hover:not(:disabled) {
background: color-mix(in oklab, var(--accent) 50%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="ghost"]:is(.dark *)[aria-pressed="true"] {
background: color-mix(in oklab, var(--accent) 50%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *)[data-variant="link"] {
color: var(--primary);
text-underline-offset: 4px;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="link"]:hover:not(:disabled) {
text-decoration-line: underline;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="link"][aria-pressed="true"] {
text-decoration-line: underline;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="destructive"] {
background: var(--destructive);
color: #fff;
box-shadow: 0 1px 2px #0000000d;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="destructive"]:focus-visible {
box-shadow: 0 0 0 3px
color-mix(in oklab, var(--destructive) 20%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="destructive"]:hover:not(:disabled) {
background: color-mix(in oklab, var(--destructive) 90%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="destructive"][aria-pressed="true"] {
background: color-mix(in oklab, var(--destructive) 90%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="destructive"]:is(.dark *) {
background: color-mix(in oklab, var(--destructive) 60%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="destructive"]:is(.dark *):focus-visible {
box-shadow: 0 0 0 3px
color-mix(in oklab, var(--destructive) 40%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="destructive"]:is(.dark *):hover:not(:disabled) {
background: color-mix(in oklab, var(--destructive) 50%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="destructive"]:is(.dark *)[aria-pressed="true"] {
background: color-mix(in oklab, var(--destructive) 50%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *) {
display: inline-flex;
border-radius: calc(var(--radius) - 2px);
outline: none;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
justify-content: center;
align-items: center;
transition: all 0.15s ease-out;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.25rem;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *):is(
.card > header > [data-slot="card-action"],
.card > footer > *
) {
white-space: normal;
height: auto;
min-height: 2.25rem;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *):is(
dialog > footer button:not([role])
) {
height: auto;
min-height: 2.25rem;
overflow-wrap: anywhere;
white-space: normal;
max-inline-size: 100%;
}
@container (width < 12rem) {
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *):is(
.card > footer > *
) {
padding-inline: 0.5rem;
}
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *):active:not(
:disabled
) {
translate: 0 0.125rem;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *):disabled {
cursor: not-allowed;
opacity: 0.5;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *)[aria-busy="true"] {
cursor: wait;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *):focus-visible {
border-color: var(--ring);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *)[aria-invalid="true"] {
border-color: var(--destructive);
box-shadow: 0 0 0 3px
color-mix(in oklab, var(--destructive) 20%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *):is(
.dark *
)[aria-invalid="true"] {
box-shadow: 0 0 0 3px
color-mix(in oklab, var(--destructive) 40%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *)
svg {
pointer-events: none;
flex-shrink: 0;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *)
svg:not([class*="size-"]) {
width: 1rem;
height: 1rem;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *):not([data-size]) {
gap: 0.5rem;
height: 2.25rem;
padding: 0.5rem 1rem;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *):not([data-size]):has(
> svg
) {
padding-inline-start: 0.75rem;
padding-inline-end: 0.75rem;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *)[data-size="sm"] {
gap: 0.375rem;
height: 2rem;
padding-inline-start: 0.75rem;
padding-inline-end: 0.75rem;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *)[data-size="sm"]:has(
> svg
) {
padding-inline-start: 0.625rem;
padding-inline-end: 0.625rem;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *)[data-size="lg"] {
gap: 0.5rem;
height: 2.5rem;
padding-inline-start: 1.5rem;
padding-inline-end: 1.5rem;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *)[data-size="lg"]:has(
> svg
) {
padding-inline-start: 1rem;
padding-inline-end: 1rem;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *)[data-size="icon"] {
width: 2.25rem;
height: 2.25rem;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *):not([data-variant]) {
background: var(--primary);
color: var(--primary-foreground);
box-shadow: 0 1px 2px #0000000d;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *):not(
[data-variant]
):hover:not(:disabled) {
background: color-mix(in oklab, var(--primary) 90%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *):not(
[data-variant]
)[aria-pressed="true"] {
background: color-mix(in oklab, var(--primary) 90%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="primary"] {
background: var(--primary);
color: var(--primary-foreground);
box-shadow: 0 1px 2px #0000000d;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="primary"]:hover:not(:disabled) {
background: color-mix(in oklab, var(--primary) 90%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="primary"][aria-pressed="true"] {
background: color-mix(in oklab, var(--primary) 90%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="secondary"] {
background: var(--secondary);
color: var(--secondary-foreground);
box-shadow: 0 1px 2px #0000000d;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="secondary"]:hover:not(:disabled) {
background: color-mix(in oklab, var(--secondary) 80%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="secondary"][aria-pressed="true"] {
background: color-mix(in oklab, var(--secondary) 80%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="outline"] {
border: 1px solid var(--border);
background: var(--background);
box-shadow: 0 1px 2px #0000000d;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="outline"]:is(.dark *) {
border-color: var(--input);
background: color-mix(in oklab, var(--input) 30%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="outline"]:hover:not(:disabled) {
background: var(--accent);
color: var(--accent-foreground);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="outline"][aria-pressed="true"] {
background: var(--accent);
color: var(--accent-foreground);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="outline"]:is(.dark *):hover:not(:disabled) {
background: color-mix(in oklab, var(--accent) 50%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="outline"]:is(.dark *)[aria-pressed="true"] {
background: color-mix(in oklab, var(--accent) 50%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="ghost"]:hover:not(:disabled) {
background: var(--accent);
color: var(--accent-foreground);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="ghost"][aria-pressed="true"] {
background: var(--accent);
color: var(--accent-foreground);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="ghost"]:is(.dark *):hover:not(:disabled) {
background: color-mix(in oklab, var(--accent) 50%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="ghost"]:is(.dark *)[aria-pressed="true"] {
background: color-mix(in oklab, var(--accent) 50%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(form[method="dialog"]:not(dialog form) > *)[data-variant="link"] {
color: var(--primary);
text-underline-offset: 4px;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="link"]:hover:not(:disabled) {
text-decoration-line: underline;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="link"][aria-pressed="true"] {
text-decoration-line: underline;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="destructive"] {
background: var(--destructive);
color: #fff;
box-shadow: 0 1px 2px #0000000d;
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="destructive"]:focus-visible {
box-shadow: 0 0 0 3px
color-mix(in oklab, var(--destructive) 20%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="destructive"]:hover:not(:disabled) {
background: color-mix(in oklab, var(--destructive) 90%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="destructive"][aria-pressed="true"] {
background: color-mix(in oklab, var(--destructive) 90%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="destructive"]:is(.dark *) {
background: color-mix(in oklab, var(--destructive) 60%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="destructive"]:is(.dark *):focus-visible {
box-shadow: 0 0 0 3px
color-mix(in oklab, var(--destructive) 40%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="destructive"]:is(.dark *):hover:not(:disabled) {
background: color-mix(in oklab, var(--destructive) 50%, transparent);
}
:is(
button:not([role]),
input:is([type="submit"], [type="reset"], [type="button"]),
a.button
):not(
form[method="dialog"]:not(dialog form) > *
)[data-variant="destructive"]:is(.dark *)[aria-pressed="true"] {
background: color-mix(in oklab, var(--destructive) 50%, transparent);
}
}
/* src/css/utils.css */
@layer utilities {
:root {
--container-width: 640px;
}
:where(:scope) {
--container-width: 640px;
}
.page,
.container {
max-width: var(--container-width);
width: 100%;
margin-inline-start: auto;
margin-inline-end: auto;
padding: 1rem;
}
@media (min-width: 40rem) {
:is(.page, .container) {
padding: 1.5rem;
}
}
.section {
margin-bottom: 2rem;
}
.stack,
.y-stack {
display: flex;
gap: var(--layout-gap, 1rem);
flex-direction: column;
height: auto;
}
:is(.stack, .y-stack) > :-webkit-any(h1, h2, h3, h4, h5, h6, p) {
margin: 0 !important;
}
:is(.stack, .y-stack) > :-moz-any(h1, h2, h3, h4, h5, h6, p) {
margin: 0 !important;
}
:is(.stack, .y-stack) > :is(h1, h2, h3, h4, h5, h6, p) {
margin: 0 !important;
}
.cluster {
display: flex;
align-items: center;
gap: var(--layout-gap, 0.75rem);
flex-wrap: wrap;
}
.cluster > :-webkit-any(h1, h2, h3, h4, h5, h6, p) {
margin: 0 !important;
}
.cluster > :-moz-any(h1, h2, h3, h4, h5, h6, p) {
margin: 0 !important;
}
.cluster > :is(h1, h2, h3, h4, h5, h6, p) {
margin: 0 !important;
}
.x-stack {
display: flex;
align-items: center;
gap: 0.75rem;
}
.x-stack > :-webkit-any(h1, h2, h3, h4, h5, h6, p) {
margin: 0 !important;
}
.x-stack > :-moz-any(h1, h2, h3, h4, h5, h6, p) {
margin: 0 !important;
}
.x-stack > :is(h1, h2, h3, h4, h5, h6, p) {
margin: 0 !important;
}
.split {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--layout-gap, 1rem);
flex-wrap: wrap;
}
.auto-grid {
display: grid;
grid-template-columns: repeat(
auto-fit,
minmax(min(100%, var(--min-item-size, 16rem)), 1fr)
);
gap: var(--layout-gap, 1rem);
}
.text-muted-foreground {
color: var(--muted-foreground);
}
.flex-wrap {
flex-wrap: wrap;
}
.max-w-sm {
max-width: 24rem;
}
.border-t {
border-top: 1px solid var(--border);
}
.gap-1\! {
gap: 0.25rem !important;
}
.bg-blue-600 {
background-color: oklch(0.546 0.245 262.881);
}
.touch-hitbox {
position: relative;
}
.touch-hitbox:before {
content: "";
position: absolute;
display: block;
z-index: 9999;
width: 100%;
min-width: 44px;
height: 100%;
min-height: 44px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
/* src/css/index.css */
}
}