@custom-variant dark (&:is(.dark *));

@layer base {
    * {
        @apply border-border outline-ring/50;
    }
    html {
        @apply bg-background text-foreground font-sans;
        * {
            @apply touch-manipulation selection:bg-primary selection:text-primary-foreground;
        }
    }
    body {
        @apply bg-background text-foreground;
    }
    /* Chrome need this to have dark scrollbars on dark mode */
    .dark {
        color-scheme: dark;
    }
}

:root {
    --radius: 0.65rem;
    --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);

    --snippet-foreground: var(--foreground);
    --snippet-keyword: oklch(55% 0.25 300);
    --snippet-builtin: oklch(55% 0.2 20);
    --snippet-function: oklab(55% -0 -0.2);
    --snippet-string: oklch(40% 0.12 140);
    --snippet-symbol: oklch(50% 0.1 67);
    --snippet-regex: oklch(72% 0.17 340);
    --snippet-operator: oklch(70% 0.14 235);
    --snippet-constant: oklch(70% 0.2 42);
    --snippet-comment: oklch(40% 0 16);
    --snippet-cdata: oklch(60% 0.09 201);
    --snippet-builtin: oklch(55% 0.2 20);
    --snippet-inserted: oklch(40% 0.12 140);
}

.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);

    --snippet-foreground: var(--foreground);
    --snippet-keyword: oklch(78.715% 0.11877 304.749);
    --snippet-builtin: oklch(75.558% 0.12971 2.726);
    --snippet-function: oklch(76.643% 0.11144 259.903);
    --snippet-string: oklch(85.771% 0.10919 142.756);
    --snippet-symbol: oklch(91.93% 0.07032 86.528);
    --snippet-regex: oklch(87.003% 0.07521 336.235);
    --snippet-operator: oklch(84.672% 0.08339 210.315);
    --snippet-constant: oklch(82.367% 0.1014 52.601);
    --snippet-comment: oklch(68.652% 0.03744 274.725);
    --snippet-cdata: oklch(85.85% 0.07922 182.82);
    --snippet-deleted: oklch(75.558% 0.12971 2.726);
    --snippet-inserted: oklch(85.771% 0.10919 142.756);
}

@theme inline {
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);
    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);
    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);
    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);
    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);
    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);
    --color-destructive: var(--destructive);
    --color-destructive-foreground: var(--destructive-foreground);
    --color-border: var(--border);
    --color-input: var(--input);
    --color-ring: var(--ring);
    --color-chart-1: var(--chart-1);
    --color-chart-2: var(--chart-2);
    --color-chart-3: var(--chart-3);
    --color-chart-4: var(--chart-4);
    --color-chart-5: var(--chart-5);
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --color-sidebar: var(--sidebar);
    --color-sidebar-foreground: var(--sidebar-foreground);
    --color-sidebar-primary: var(--sidebar-primary);
    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
    --color-sidebar-accent: var(--sidebar-accent);
    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
    --color-sidebar-border: var(--sidebar-border);
    --color-sidebar-ring: var(--sidebar-ring);
}

@theme inline {
    --icon-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus-icon lucide-minus"><path d="M5 12h14"/></svg>');
    --icon-check: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>');
    --icon-chevron-down: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>');
}

/* ========================================================================== */
/* accordion (4 kb)                                                           */
/* ========================================================================== */

@utility accordion {
    &::details-content {
        block-size: 0;
        @apply block overflow-hidden opacity-0;
        transition-property: block-size, content-visibility, opacity;
        transition-duration: 0.2s;
        transition-behavior: allow-discrete;
    }
    [open]&::details-content {
        block-size: auto;
        block-size: calc-size(auto, size);
        @apply opacity-100;
    }
    &:not(.accordion--default):not(.accordion--menu) {
        @apply accordion--default;
    }
}

@utility accordion--default {
    & + details {
        @apply border-t border-border;
    }
}

@utility accordion__summary {
    @apply flex items-center w-full justify-between gap-2;
    @apply focus-visible:border-ring focus-visible:ring-ring/50;
    @apply rounded-md py-4 text-sm font-medium transition-all;
    @apply outline-none hover:underline focus-visible:ring-[3px];
    @apply disabled:pointer-events-none disabled:opacity-50;
    @apply cursor-pointer select-none;
    &::marker {
        @apply content-none;
    }
    &::-webkit-details-marker {
        @apply hidden;
    }
    &::after {
        @apply bg-muted-foreground block size-4 content-[''] ml-auto;
        @apply mask-[image:var(--icon-chevron-down)] mask-size-[1rem] mask-center mask-no-repeat;
        @apply transition-transform;
    }
    [open] > &::after {
        @apply rotate-180;
    }
    & > svg {
        @apply h-5;
    }
}

@utility accordion__content {
    @apply pb-4;
}

/* ========================================================================== */
/* alert (< 1 kb)                                                             */
/* ========================================================================== */

@utility alert {
    @apply relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current;

    &:not([class~="alert--destructive"]) {
        @apply alert--primary;
    }
}

@utility alert--primary {
    @apply bg-card text-card-foreground border-border;
}
@utility alert--destructive {
    @apply text-destructive bg-card [&>svg]:text-current border-border;
    > * {
        @apply text-destructive;
    }
}

@utility alert__title {
    @apply col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight;
}

@utility alert__content {
    @apply text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed;
}

/* ========================================================================== */
/* aspect-ratio (< 1 kb)                                                      */
/* ========================================================================== */

@utility aspect-ratio {
    @apply overflow-hidden bg-muted size-full object-cover;
}

@utility aspect-ratio--16-9 {
    @apply aspect-[16/9];
}
@utility aspect-ratio--4-3 {
    @apply aspect-[4/3];
}
@utility aspect-ratio--1-1 {
    @apply aspect-[1/1];
}
@utility aspect-ratio--rounded {
    @apply rounded-md;
}

/* ========================================================================== */
/* avatar (< 1 kb)                                                            */
/* ========================================================================== */

@utility avatar {
    @apply relative flex shrink-0 overflow-hidden rounded-full;
    @apply bg-accent text-accent-foreground;

    &:not([class~="avatar--rounded-lg"]) {
        @apply avatar--circle;
    }

    &:not([class~="avatar--xs"]):not([class~="avatar--md"]):not(
            [class~="avatar--lg"]
        ):not([class~="avatar--xl"]) {
        @apply avatar--sm;
    }
}

@utility avatar--circle {
    @apply rounded-full;
}
@utility avatar--rounded-lg {
    @apply rounded-lg;
}

@utility avatar--grayscale {
    @apply grayscale;
}

@utility avatar--xs {
    @apply size-6;
}
@utility avatar--sm {
    @apply size-8;
}
@utility avatar--md {
    @apply size-9;
}
@utility avatar--lg {
    @apply size-10;
}
@utility avatar--xl {
    @apply size-12;
}

@utility avatar--empty {
    & .avatar__img {
        @apply hidden;
    }
    & .avatar__fallback {
        @apply grid place-content-center;
    }
}

@utility avatar__img {
    @apply aspect-square size-full bg-accent;
}

@utility avatar__fallback {
    @apply hidden aspect-square size-full;
}

/* ========================================================================== */
/* avatar-group (< 1 kb)                                                      */
/* ========================================================================== */

@utility avatar-group {
    @apply flex;
    & > .avatar {
        @apply ring-background ring-2;
    }

    &:not([class~="avatar-group--space-1"]):not(
            [class~="avatar-group--space-2"]
        ) {
        @apply avatar-group--stacked;
    }
}

@utility avatar-group--stacked {
    @apply -space-x-2;
}
@utility avatar-group--space-1 {
    @apply gap-1;
}
@utility avatar-group--space-2 {
    @apply gap-2;
}

/* ========================================================================== */
/* badge (4 kb)                                                               */
/* ========================================================================== */

@utility badge {
    @apply inline-flex items-center justify-center py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent [a&]:hover:bg-secondary/90;
    @apply h-5 min-w-5;

    &:not([class~="badge--pill"]) {
        @apply badge--rounded;
    }

    &:not([class~="badge--secondary"]):not([class~="badge--destructive"]):not(
            [class~="badge--outline"]
        ) {
        @apply badge--primary;
    }
}

@utility badge--rounded {
    @apply rounded-md px-2;
}
@utility badge--pill {
    @apply rounded-full px-1 tabular-nums font-mono;
}

@utility badge--primary {
    @apply bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent;
}
@utility badge--secondary {
    @apply bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent;
}
@utility badge--destructive {
    @apply bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white border-transparent;
}
@utility badge--outline {
    @apply text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground border border-border;
}

/* ========================================================================== */
/* breadcrumb (< 1 kb)                                                        */
/* ========================================================================== */

@utility breadcrumb {
    ol {
        @apply text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5;
    }
    li {
        @apply inline-flex items-center gap-1.5 sm:gap-2.5 text-sm;
    }
    li:not(:last-child)::after {
        @apply bg-muted-foreground block size-3.5 content-[''];
        @apply mask-[image:var(--icon-chevron-down)] -rotate-90 mask-size-[0.875rem] mask-center mask-no-repeat;
    }
    li a {
        @apply transition-colors;
    }
    li a[aria-current="page"] {
        @apply text-foreground;
    }
    li a:hover {
        @apply text-foreground;
    }
}

/* ========================================================================== */
/* busy (4 kb)                                                                */
/* ========================================================================== */

@utility busy {
    @apply relative size-full rounded-[inherit];
    @apply aria-[busy=true]:[&>*]:pointer-events-none;

    &[aria-busy="true"] {
        @apply cursor-wait;
    }

    &:not([class~="busy--opaque"]) {
        @apply busy--transparent;
    }
}

@utility busy--transparent {
    @apply aria-[busy=true]:[&>*:not(.Busy-indicator)]:opacity-30;
    @apply aria-[busy=true]:[&>*:not(.Busy-indicator)]:transition-opacity;
    @apply aria-[busy=true]:[&>*:not(.Busy-indicator)]:duration-1000;
}

@utility busy--opaque {
    @apply aria-[busy=true]:[&>*:not(.Busy-indicator)]:opacity-0;
}

@theme {
    --animate-fade-spin: spin 1s linear infinite, custom-fade 1s linear;
    @keyframes custom-fade {
        0% {
            opacity: 0;
        }
        30% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
}

@utility busy__indicator {
    @apply absolute top-1/2 left-1/2 z-30 hidden -translate-1/2;
    @apply animate-fade-spin transform rounded-full border-current border-t-transparent;

    [aria-busy="true"] & {
        display: inline-block;
    }
    [aria-busy="true"] .button & {
        @apply text-current;
        + * {
            opacity: 0;
        }
    }

    @apply busy__indicator--md busy__indicator--primary;
}

@utility busy__indicator--sm {
    @apply size-5 border-2;
}
@utility busy__indicator--md {
    @apply size-6 border-3;
}
@utility busy__indicator--lg {
    @apply size-8 border-4;
}

@utility busy__indicator--primary {
    @apply text-primary;
}
@utility busy__indicator--onprimary {
    @apply text-primary-foreground;
}

/* ========================================================================== */
/* button (12 kb)                                                             */
/* ========================================================================== */

@utility button {
    @apply inline-flex shrink-0 items-center justify-center gap-2 font-medium whitespace-nowrap transition-all outline-none;
    @apply focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] has-focus-visible:border-ring has-focus-visible:ring-ring/50 has-focus-visible:ring-[3px];
    @apply aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40;
    @apply cursor-pointer select-none relative;
    @apply disabled:opacity-50 disabled:cursor-not-allowed has-disabled:opacity-50 has-disabled:cursor-not-allowed;
    @apply [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4;

    input {
        @apply sr-only;
    }

    &:not(.button-group--sm *):not(.button-group--lg *):not(
            [class~="button--sm"]
        ):not([class~="button--lg"]) {
        @apply button--md;
    }

    &:not([class~="button--primary"]):not([class~="button--destructive"]):not(
            [class~="button--secondary"]
        ):not([class~="button--ghost"]) {
        @apply button--outline;
    }
}

@utility button--sm {
    @apply h-8 gap-1.5 rounded-md px-3 text-sm has-[>svg]:px-2.5;
    &.button--icon {
        @apply size-8;
    }
}
@utility button--md {
    @apply h-9 rounded-md px-4 text-sm has-[>svg]:px-3;
    &.button--icon {
        @apply size-9;
    }
}
@utility button--lg {
    @apply h-10 rounded-md px-6 text-sm has-[>svg]:px-4;
    &.button--icon {
        @apply size-10;
    }
}

@utility button--icon {
    @apply [&>span]:sr-only;
}

@utility button--primary {
    @apply bg-primary text-primary-foreground shadow-xs;
    &:not(:disabled):not(:has(input:disabled)) {
        @apply hover:bg-primary/90;
    }
}
@utility button--outline {
    @apply border border-border bg-background shadow-xs dark:bg-input/30 dark:border-input;
    &[aria-pressed="true"] {
        @apply bg-accent text-accent-foreground dark:bg-accent/50;
    }
    &:has(input[type="checkbox"]),
    &:has(input[type="radio"]) {
        @apply bg-transparent border-input has-checked:bg-accent has-checked:text-accent-foreground;
        &:not(:disabled):not(:has(input:disabled)) {
            @apply has-checked:dark:hover:bg-accent;
        }
    }
    &:not(:disabled):not(:has(input:disabled)) {
        @apply hover:bg-accent dark:hover:bg-accent/50 hover:text-accent-foreground;
    }
}
@utility button--secondary {
    @apply bg-secondary text-secondary-foreground shadow-xs;
    &:not(:disabled):not(:has(input:disabled)) {
        @apply hover:bg-secondary/80;
    }
}
@utility button--ghost {
    @apply has-checked:bg-accent has-checked:text-accent-foreground;
    &:not(:disabled):not(:has(input:disabled)) {
        @apply hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 has-checked:dark:hover:bg-accent;
    }
}
@utility button--destructive {
    @apply bg-destructive text-white shadow-xs;
    @apply focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60;
    &:not(:disabled):not(:has(input:disabled)) {
        @apply not-has-disabled:hover:bg-destructive/90;
    }
}

/* ========================================================================== */
/* button-group (< 1 kb)                                                      */
/* ========================================================================== */

@utility button-group {
    @apply flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative;

    &:not([class~="button-group--space-1"]):not(
            [class~="button-group--space-2"]
        ) {
        @apply button-group--space-0;
    }
}

@utility button-group--space-0 {
    .button {
        @apply not-first:border-l-0 not-first:rounded-l-none not-last:rounded-r-none;
    }
}

@utility button-group--space-1 {
    @apply gap-1;
}

@utility button-group--space-2 {
    @apply gap-2;
}

@utility button-group--sm {
    & .button {
        @apply button--sm;
    }
}

@utility button-group--lg {
    & .button {
        @apply button--lg;
    }
}

/* ========================================================================== */
/* card (< 1 kb)                                                               */
/* ========================================================================== */

@utility card {
    @apply bg-card text-card-foreground flex flex-col gap-6 rounded-xl border border-border py-6 shadow-sm;
}

@utility card__header {
    @apply @container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6;
}

@utility card__title {
    @apply leading-none font-semibold;
}

@utility card__desc {
    @apply text-muted-foreground text-sm;
}

@utility card__content {
    @apply px-6;
}

@utility card__footer {
    @apply flex items-center px-6 [.border-t]:pt-6;
}

/* ========================================================================== */
/* checkbox (4 kb)                                                            */
/* ========================================================================== */

@utility checkbox {
    @apply border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 appearance-none rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50;
    @apply cursor-pointer;

    &:checked,
    &:indeterminate {
        @apply bg-primary dark:bg-primary border-primary;
    }
    &:checked::after,
    &:indeterminate::after {
        @apply bg-primary-foreground block size-3.5 content-[''];
        @apply mask-size-[0.875rem] mask-center mask-no-repeat;
    }
    &:checked::after {
        @apply mask-[image:var(--icon-check)];
    }
    &:indeterminate::after {
        @apply mask-[image:var(--icon-indeterminate)];
    }
}

@utility checkbox--master {
    &:checked,
    &:indeterminate {
        @apply bg-accent dark:bg-accent border-accent;
    }
    &:checked::after,
    &:indeterminate::after {
        @apply bg-accent-foreground;
    }
}

/* ========================================================================== */
/* checkbox-group (< 1 kb)                                                    */
/* ========================================================================== */

@utility checkbox-group {
    @apply flex flex-col gap-3;
    @apply relative pl-6;
    &::before {
        @apply absolute top-0 bottom-0 left-1.75 z-10 block w-0.5 h-full content-[''] bg-border;
    }
}

/* ========================================================================== */
/* dialog (4 kb)                                                              */
/* ========================================================================== */

@utility dialog {
    &:is([open], :popover-open) {
        @apply opacity-100;

        &::backdrop {
            @apply opacity-100;
        }
        > .dialog__shape {
            @apply scale-100;
        }

        @starting-style {
            @apply opacity-0;

            &::backdrop {
                @apply opacity-0;
            }
            > .dialog__shape {
                @apply scale-95;
            }
        }
    }
    &::backdrop {
        @apply bg-black/50 opacity-0 transition-all transition-discrete;
    }
}

@utility dialog__shape {
    @apply bg-background text-foreground fixed top-1/2 left-1/2 z-50 flex max-h-[calc(100%-2rem)] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 rounded-lg border border-border shadow-lg sm:max-w-[425px];
    @apply scale-95 transition-all;
}

@utility dialog__header {
    @apply flex flex-col gap-2 text-center sm:text-left px-6 pt-6;
}

@utility dialog__title {
    @apply text-lg leading-none font-semibold;
}

@utility dialog__desc {
    @apply text-muted-foreground text-sm;
}

@utility dialog__content {
    @apply flex-1 px-6 -my-0.5 py-0.5;
}
@utility dialog__content--wide {
    @apply px-0 my-0 py-0;
}
@utility dialog__content--scrollable {
    @apply border-y border-border overflow-y-auto;
}

@utility dialog__footer {
    @apply flex flex-col-reverse gap-2 sm:flex-row sm:justify-end pb-6 px-6;
}

@utility dialog__cancel {
    @apply ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4;
}

/* ========================================================================== */
/* diff                                                                       */
/* ========================================================================== */

@utility diff {
    @apply relative size-full block overflow-hidden;
    --slider-value: 50%;
    @apply focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px];
}

@utility diff--rounded {
    @apply rounded-md;
}

@utility diff__line {
    @apply absolute top-0 left-[var(--slider-value)] w-0.5 h-full bg-background;
    @apply transform-gpu translate-x-[-50%] pointer-events-none z-10 flex items-center justify-center;
}

@utility diff__line__thumb {
    @apply absolute top-1/2 left-1/2 size-7 -translate-1/2 bg-background rounded-md flex items-center justify-center;
}

@utility diff__content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    pointer-events: none;
    display: block;
    z-index: 2;
    clip-path: inset(0 calc(100% - var(--slider-value)) 0 0);

    & + & {
        z-index: 1;
        clip-path: none;
    }
}

@utility diff__range {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    cursor: grab;
    opacity: 0;
    z-index: 100;
    -webkit-appearance: none;
    appearance: none;

    &::-webkit-slider-track {
        -webkit-appearance: none;
        width: 100%;
        height: 100%;
        background: rgba(255, 0, 0, 0.1);
        cursor: grab;
    }

    &::-moz-range-track {
        width: 100%;
        height: 100%;
        background: rgba(255, 0, 0, 0.1);
        cursor: grab;
        border: none;
    }

    &::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 1px;
        height: 100vh;
        background: transparent;
        cursor: grab;
    }

    &::-moz-range-thumb {
        width: 1px;
        height: 100vh;
        background: transparent;
        cursor: grab;
        border: none;
    }
}

/* ========================================================================== */
/* field                                                                      */
/* ========================================================================== */

@utility field {
    &:not([class~="field--horizontal"]) {
        @apply flex w-full gap-3 flex-col [&>*]:w-full [&>.sr-only]:w-auto;
    }

    &:has(input[disabled]),
    &:has(select[disabled]),
    &:has(textarea[disabled]) {
        @apply cursor-not-allowed opacity-50;
    }
    &:has([aria-invalid="true"]) {
        @apply ring-destructive/20 dark:ring-destructive/40 border-destructive;
    }
    /* &:has(input[type="checkbox"]) {
        @apply cursor-pointer;
    } */
}

@utility field--horizontal {
    @apply flex flex-row gap-3 items-center;
}

@utility field__label {
    /* group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4 has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10; */
    @apply items-center text-sm font-medium select-none flex w-fit gap-2 leading-snug;
    @apply has-checked:border-primary has-checked:bg-primary/5 dark:has-checked:bg-primary/10;

    :has(input[disabled], select[disabled], textarea[disabled]) > & {
        @apply cursor-not-allowed opacity-50;
    }
    :has(input[required], select[required], textarea[required]) > & {
        @apply after:text-destructive;
        @apply after:content-['*'];
        @apply after:font-medium;
    }
}

@utility field__label--normal {
    @apply font-normal;
}

@utility field__desc {
    @apply text-muted-foreground text-sm leading-normal font-normal;
    @apply min-h-5 flex items-center gap-1;
    @apply [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4;
    @apply [&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg:not([class*='size-'])]:size-4;
}

@utility field__error {
    @apply invisible;
    :has(
            input:invalid:user-invalid,
            select:invalid:user-invalid,
            textarea:invalid:user-invalid
        )
        > & {
        @apply visible;
    }
    :has(
            input[aria-invalid="true"],
            select[aria-invalid="true"],
            textarea[aria-invalid="true"]
        )
        > & {
        @apply visible;
    }
    @apply text-destructive text-sm leading-normal font-normal;
    @apply min-h-5 flex items-center gap-1;
    @apply [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4;
    @apply [&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg:not([class*='size-'])]:size-4;
}

@utility field-group {
    @apply flex flex-col w-full gap-7;

    .field-group > & {
        @apply gap-4;
    }
    .checkbox-group > & {
        @apply gap-3;
    }
}

@utility field-group__horizontal {
    @apply flex-row flex-wrap;
    & > .field {
        @apply flex-1 basis-0 min-w-[140px];
    }
}

/* ========================================================================== */
/* fieldset (< 1 kb)                                                          */
/* ========================================================================== */

@utility fieldset {
    @apply flex flex-col gap-6 has-[.checkbox-group]:gap-3;

    /* Not correctly reset by tailwind preflight: */
    min-inline-size: 0;
    margin-inline: 0;
    padding-block: 0;
    padding-inline: 0;
}

@utility fieldset__legend {
    @apply mb-3 font-medium text-base;
}
@utility fieldset__legend--label {
    @apply text-sm;
}

@utility fieldset__desc {
    @apply text-muted-foreground text-sm leading-normal font-normal last:mt-0 nth-last-2:-mt-1 [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4;
    @apply -mt-1.5;
}

/* ========================================================================== */
/* hgroup (4 kb)                                                              */
/* ========================================================================== */

@utility hgroup {
    @apply scroll-mt-[calc(6*var(--spacing)_+_env(safe-area-inset-top))];

    &:has(h1) {
        @apply [&:not(:first-child)]:mt-12;
    }
    h1 {
        @apply scroll-m-20 text-4xl font-extrabold tracking-tight text-balance;
        @apply pb-4;
        @apply flex items-center gap-2;
    }
    &:has(h2) {
        @apply border-b border-border pb-2 [&:not(:first-child)]:mt-10;
    }
    h2 {
        @apply scroll-m-20 text-3xl font-semibold tracking-tight;
        @apply pb-2;
        @apply flex items-center gap-2;
    }
    &:has(h3) {
        @apply [&:not(:first-child)]:mt-8;
    }
    h3 {
        @apply scroll-m-20 text-2xl font-semibold tracking-tight;
        @apply pb-1.5;
        @apply flex items-center gap-2;
    }
    &:has(h4) {
        @apply [&:not(:first-child)]:mt-6;
    }
    h4 {
        @apply scroll-m-20 text-xl font-semibold tracking-tight;
        @apply pb-1;
        @apply flex items-center gap-2;
    }
    h1 + p {
        @apply text-muted-foreground leading-8;
    }
    h2 + p {
        @apply text-muted-foreground leading-7;
    }
    h3 + p {
        @apply text-muted-foreground leading-6;
    }
    h4 + p {
        @apply text-muted-foreground leading-4;
    }
}

/* ========================================================================== */
/* input (4 kb)                                                               */
/* ========================================================================== */

@utility input {
    @apply file:text-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm;
    @apply placeholder:text-muted-foreground;
    @apply focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px];
    @apply aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive;
    @apply invalid:user-invalid:ring-destructive/20 dark:invalid:user-invalid:ring-destructive/40 invalid:user-invalid:border-destructive;

    &::-webkit-search-cancel-button {
        display: none;
    }

    &[type="file"],
    &[type="color"] {
        @apply cursor-pointer;
    }
}

@utility input-error {
    @apply text-destructive cursor-default;
    @apply min-h-5 text-sm leading-5;
    @apply peer-disabled:cursor-not-allowed peer-disabled:opacity-50;
    @apply peer-invalid/input:opacity-100 peer-invalid/input:cursor-auto;
}

/* ========================================================================== */
/* item                                                                       */
/* ========================================================================== */

@utility item {
    @apply flex items-center text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] p-4 gap-2.5;
    & > svg {
        @apply h-5;
    }
}

/* ========================================================================== */
/* kbd                                                                        */
/* ========================================================================== */

@utility kbd {
    @apply bg-muted text-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3;

    /* TODO: tooltip integration */
    /* Tooltip > & {
        @apply bg-background/20 text-background dark:bg-background/10;
    } */
}
@utility kbd-group {
    @apply inline-flex items-center gap-1;
}

/* ========================================================================== */
/* label (< 1 kb)                                                             */
/* ========================================================================== */

@utility label {
    @apply flex h-3.5 items-center gap-2 text-sm leading-none select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50;
    @apply has-[+input[aria-invalid=true],+select[aria-invalid=true],+textarea[aria-invalid=true]]:text-destructive;
    @apply has-disabled:cursor-not-allowed has-disabled:opacity-50;
    @apply has-[+input:disabled,+select:disabled,+textarea:disabled]:cursor-not-allowed;
    @apply has-[+input:disabled,+select:disabled,+textarea:disabled]:opacity-50;
    @apply has-[input[type=checkbox],input[type=radio]]:cursor-pointer;

    &:not([class~="label--normal"]) {
        @apply label--medium;
    }
}

@utility label--medium {
    @apply font-medium;
}
@utility label--normal {
    @apply font-normal;
}

@utility label--required {
    @apply after:text-destructive;
    @apply after:-ms-1;
    @apply after:content-['*'];
    @apply after:text-lg;
    @apply after:font-medium;
}

/* ========================================================================== */
/* link (< 1 kb)                                                              */
/* ========================================================================== */

@utility link {
    @apply underline underline-offset-4 inline-flex items-center gap-2;
    @apply [&_svg:not([class*='size-'])]:size-4;
    @apply cursor-pointer;
}

/* ========================================================================== */
/* hover-card (< 1 kb)                                                        */
/* ========================================================================== */

@utility hover-card {
    @apply z-50 outline-none aria-hidden:hidden;
    @apply bg-popover text-popover-foreground z-50 rounded-md border border-border p-4 shadow-md;
    @apply transition-all opacity-100 scale-100;
    @starting-style {
        @apply opacity-0 scale-95;
    }
}

/* ========================================================================== */
/* progress                                                                   */
/* ========================================================================== */

@utility progress {
    @apply appearance-none bg-muted relative h-2 w-full overflow-hidden rounded-full;
    &::-webkit-progress-bar {
        @apply bg-muted;
    }
    &::-webkit-progress-value {
        @apply bg-primary transition-[width];
    }
    &::-moz-progress-bar {
        @apply bg-primary;
    }
    &::-ms-fill {
        @apply bg-primary;
    }
}

/* ========================================================================== */
/* radio-group                                                                */
/* ========================================================================== */

@utility radio-group {
    @apply flex flex-col gap-3;
}

@utility radio {
    @apply border-input text-primary dark:bg-input/30 relative aspect-square size-4 shrink-0 appearance-none rounded-full border shadow-xs transition-[color,box-shadow] outline-none;
    &:focus-visible {
        @apply border-ring ring-[3px] ring-ring/50;
    }
    &:disabled {
        @apply cursor-not-allowed opacity-50;
    }
    &[aria-invalid="true"] {
        @apply aria-invalid:ring-destructive/20 dark:ring-destructive/40 border-destructive;
    }
    &:checked:before {
        @apply bg-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full content-[''];
    }
}

/* ========================================================================== */
/* select                                                                     */
/* ========================================================================== */

@utility select {
    /* TODO: find better method to color arrow without modifying the svg directly */
    --icon-chevron-down-50: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.708 0 0 / 0.5)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>');

    @apply border-input selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border !bg-popover text-popover-foreground [color-scheme:light] dark:[color-scheme:dark] px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive;
    @apply bg-[image:var(--icon-chevron-down-50)] bg-size-[1rem] bg-position-[center_right_0.75rem] bg-no-repeat;
    @apply cursor-pointer;

    option {
        @apply bg-popover text-popover-foreground;
        @apply disabled:text-muted-foreground;
    }

    optgroup {
        @apply bg-popover text-popover-foreground;
        @apply disabled:text-muted-foreground;
    }

    &:has(option[value=""]:checked) {
        @apply text-muted-foreground;
    }
}

/* ========================================================================== */
/* separator                                                                  */
/* ========================================================================== */

@utility separator {
    @apply my-4 bg-border shrink-0;

    &:not([class~="separator--vertical"]) {
        @apply separator--horizontal;
    }
}

@utility separator--horizontal {
    @apply h-px w-full;
}
@utility separator--vertical {
    @apply h-full w-px;
}

/* ========================================================================== */
/* slider (4kb)                                                               */
/* ========================================================================== */

@utility slider {
    @apply block;
    --slider-value: 0%;
}

@utility slider__range {
    @apply appearance-none flex items-center p-0 outline-none w-full h-6;

    &:hover,
    &:focus-visible {
        &::-webkit-slider-thumb {
            @apply ring-4 cursor-pointer;
        }
        &::-moz-range-thumb {
            @apply ring-4 cursor-pointer;
        }
        &::-ms-thumb {
            @apply ring-4 cursor-pointer;
        }
    }

    &::-webkit-slider-thumb {
        @apply appearance-none border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm -mt-1.25;
    }
    &::-webkit-slider-runnable-track {
        @apply appearance-none rounded-full h-1.5 w-full;
        background: linear-gradient(
            to right,
            var(--primary) var(--slider-value),
            var(--muted) var(--slider-value)
        );
    }
    &::-moz-range-thumb {
        @apply appearance-none border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm -mt-1.25;
    }
    &::-moz-range-track {
        @apply appearance-none rounded-full h-1.5 w-full;
        background: linear-gradient(
            to right,
            var(--primary) var(--slider-value),
            var(--muted) var(--slider-value)
        );
    }
    &::-ms-thumb {
        @apply appearance-none border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm -mt-1.25;
    }
    &::-ms-track {
        @apply appearance-none rounded-full h-1.5 w-full;
    }
    &::-ms-fill-lower {
        @apply bg-primary rounded-full;
    }
    &::-ms-fill-upper {
        @apply bg-muted rounded-full;
    }
}

@utility slider__datalist {
    @apply flex gap-1 justify-between h-3;

    > * {
        @apply text-center empty:mx-2 text-muted-foreground empty:border-e text-xs;
    }
}

/* ========================================================================== */
/* snippet (< 1 kb)                                                           */
/* ========================================================================== */

@utility snippet {
    @apply block relative;

    pre {
        @apply !bg-muted rounded-md overflow-x-auto p-4 text-sm;
        * {
            color: var(--snippet-foreground);
        }
    }
    &:has(x-copy-text) {
        x-copy-text {
            @apply absolute right-2 top-2;
        }
        pre {
            @apply pe-14;
        }
    }
    /* https://prismjs.com/tokens.html */
    .token.keyword,
    .token.doctype,
    .token.important,
    .token.prolog {
        color: var(--snippet-keyword);
    }
    .token.builtin,
    .token.entity {
        color: var(--snippet-builtin);
    }
    .token.function,
    .token.property,
    .token.tag {
        color: var(--snippet-function);
    }
    .token.boolean,
    .token.constant,
    .token.number {
        color: var(--snippet-constant);
    }
    .token.string,
    .token.attr-value,
    .token.char,
    .token.url {
        color: var(--snippet-string);
    }
    .token.symbol,
    .token.class-name,
    .token.attr-name,
    .token.namespace {
        color: var(--snippet-symbol);
    }
    .token.regex {
        color: var(--snippet-regex);
    }
    .token.operator {
        color: var(--snippet-operator);
    }
    .token.comment,
    .token.punctuation {
        color: var(--snippet-comment);
    }
    .token.cdata {
        color: var(--snippet-cdata);
    }
    .token.deleted {
        color: var(--snippet-deleted);
    }
    .token.inserted {
        color: var(--snippet-inserted);
    }
    .token.important,
    .token.bold {
        font-weight: bold;
    }
    .token.italic {
        font-style: italic;
    }
}

/* ========================================================================== */
/* spinner (< 1 kb)                                                           */
/* ========================================================================== */

@utility spinner {
    @apply size-4 animate-spin flex items-center;
    @apply [&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg:not([class*='size-'])]:size-4;
}

/* ========================================================================== */
/* switch (4 kb)                                                              */
/* ========================================================================== */

@utility switch {
    @apply focus-visible:border-ring focus-visible:ring-ring/50 inline-flex h-[1.15rem] w-8 shrink-0 appearance-none items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50;
    @apply bg-input dark:bg-input/80 checked:bg-primary dark:checked:bg-primary;
    @apply before:pointer-events-none before:block before:size-4 before:rounded-full before:ring-0 before:transition-all before:content-[''];
    @apply before:bg-background dark:before:bg-foreground;
    @apply dark:checked:before:bg-primary-foreground checked:before:ms-3.5;
    @apply cursor-pointer;
}

/* ========================================================================== */
/* tabs (4 kb)                                                                */
/* ========================================================================== */

@utility tabs {
    @apply block;
}

@utility tabs__list {
    @apply h-9 inline-flex w-fit items-center justify-center rounded-lg p-[3px];
    @apply bg-muted text-muted-foreground;

    [role="tab"] {
        @apply text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow];
        @apply focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring;
        @apply disabled:pointer-events-none disabled:opacity-50;
        @apply [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4;
    }
    [role="tab"][aria-selected="true"] {
        @apply bg-background dark:text-foreground shadow-sm select-none;
        @apply dark:border-input;
    }
    [role="tab"]:focus-visible {
        @apply border-ring ring-2 ring-ring/50 outline-none;
    }
}

@utility tabs__panel {
    @apply h-fit rounded-lg mt-2;
}

@utility tabs__panel--border {
    @apply border;
}

/* ========================================================================== */
/* textarea (< 1 kb)                                                          */
/* ========================================================================== */

@utility textarea {
    @apply border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm;
    @apply placeholder:text-muted-foreground;
}

/* ========================================================================== */
/* tooltip (12 kb)                                                            */
/* ========================================================================== */

@utility tooltip {
    /* --tooltip-content: "your content"; */
    @apply aria-hidden:hidden relative;

    &:before {
        @apply bg-foreground text-background pointer-events-none invisible absolute z-50 w-fit max-w-xs scale-95 truncate rounded-md px-3 py-1.5 text-xs opacity-0 transition-all delay-300 ease-out content-[var(--tooltip-content)];
    }
    &:after {
        @apply pointer-events-none invisible absolute z-50 scale-95 border-4 border-transparent opacity-0 transition-all delay-300 ease-out content-[''];
    }
    &:hover:before,
    &:hover:after,
    &:focus-visible:before,
    &:focus-visible:after {
        @apply visible scale-100 opacity-100;
    }

    &:not(.tooltip--top):not(.tooltip--bottom):not(.tooltip--left):not(
            .tooltip--right
        ) {
        @apply tooltip--top;
    }
    &:not(.tooltip--center):not(.tooltip--start):not(.tooltip--end) {
        @apply tooltip--center;
    }
}

@utility tooltip--top {
    @apply before:bottom-full before:mb-2 before:translate-y-2 hover:before:translate-y-0 focus-visible:before:translate-y-0;
    @apply after:border-t-foreground after:bottom-full after:mb-1 after:translate-y-2 after:border-b-0 after:border-x-transparent hover:after:translate-y-0 focus-visible:after:translate-y-0;
}
@utility tooltip--bottom {
    @apply before:top-full before:mt-2 before:-translate-y-2 hover:before:translate-y-0 focus-visible:before:translate-y-0;
    @apply after:border-b-foreground after:top-full after:mt-1 after:-translate-y-2 after:border-t-0 after:border-x-transparent hover:after:translate-y-0 focus-visible:after:translate-y-0;
}
@utility tooltip--left {
    @apply before:end-full before:me-2 before:translate-x-2 hover:before:translate-x-0 focus-visible:before:translate-x-0;
    @apply after:border-s-foreground after:end-full after:me-1 after:translate-x-2 after:border-e-0 after:border-y-transparent hover:after:translate-x-0 focus-visible:after:translate-x-0;
}
@utility tooltip--right {
    @apply before:start-full before:ms-2 before:-translate-x-2 hover:before:translate-x-0 focus-visible:before:translate-x-0;
    @apply after:border-e-foreground after:start-full after:ms-1 after:-translate-x-2 after:border-s-0 after:border-y-transparent hover:after:translate-x-0 focus-visible:after:translate-x-0;
}

@utility tooltip--center {
    &:not(.tooltip--top):not(.tooltip--bottom):not(.tooltip--left):not(
            .tooltip--right
        ),
    &.tooltip--top,
    &.tooltip--bottom {
        @apply before:start-1/2 before:-translate-x-1/2 after:start-1/2 after:-translate-x-1/2;
    }
    &.tooltip--left,
    &.tooltip--right {
        @apply before:top-1/2 before:-translate-y-1/2 after:top-1/2 after:-translate-y-1/2;
    }
}
@utility tooltip--start {
    &:not(.tooltip--top):not(.tooltip--bottom):not(.tooltip--left):not(
            .tooltip--right
        ),
    &.tooltip--top,
    &.tooltip--bottom {
        @apply before:start-0 after:start-3;
    }
    &.tooltip--left,
    &.tooltip--right {
        @apply before:bottom-0 after:bottom-3;
    }
}
@utility tooltip--end {
    &:not(.tooltip--top):not(.tooltip--bottom):not(.tooltip--left):not(
            .tooltip--right
        ),
    &.tooltip--top,
    &.tooltip--bottom {
        @apply before:end-0 after:end-3;
    }
    &.tooltip--left,
    &.tooltip--right {
        @apply before:top-0 after:top-3;
    }
}

/* ========================================================================== */
/* typography (4 kb)                                                          */
/* ========================================================================== */

@utility h1 {
    @apply scroll-m-20 text-4xl font-extrabold tracking-tight text-balance;
    @apply [&:not(:first-child)]:mt-12;
}

@utility h2 {
    @apply scroll-m-20 border-b border-border pb-2 text-3xl font-semibold tracking-tight;
    @apply [&:not(:first-child)]:mt-10;
}

@utility h3 {
    @apply scroll-m-20 text-2xl font-semibold tracking-tight;
    @apply [&:not(:first-child)]:mt-8;
}

@utility h4 {
    @apply scroll-m-20 text-xl font-semibold tracking-tight;
    @apply [&:not(:first-child)]:mt-6;
}

@utility p {
    @apply leading-7;
    @apply [&:not(:first-child)]:mt-6;
}

@utility blockquote {
    @apply border-s-2 ps-6 italic;
    @apply [&:not(:first-child)]:mt-6;
    @apply border-border;
}

@utility table {
    tr {
        @apply even:bg-muted m-0 border-t p-0;
    }
    th {
        @apply border border-border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right;
    }
    td {
        @apply border border-border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right;
    }
}

@utility linebreak {
    @apply leading-6.5;
}

/* @utility list {
    @apply my-6 ms-6 list-disc [&>li]:mt-2;
} */

@utility code {
    @apply bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold;
}

@utility lead {
    @apply text-muted-foreground text-xl;
}

@utility small {
    @apply text-sm leading-none font-medium;
}

@utility muted {
    @apply text-muted-foreground text-sm;
}

@utility typography {
    h1 {
        @apply h1;
    }
    h2 {
        @apply h2;
    }
    h3 {
        @apply h3;
    }
    h4 {
        @apply h4;
    }
    p {
        @apply p;
    }
    blockquote {
        @apply blockquote;
    }
    table {
        @apply table;
    }
    br {
        @apply linebreak;
    }
    /* ul {
        @apply list;
    } */
    code {
        @apply code;
    }
    small {
        @apply small;
    }
}