/* Basecoat v1.1.0, maia, single-file source. Import after tailwindcss. */
@custom-variant dark (&:is(html.dark *));
:root {
--radius: 0.625rem;
--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: #93c5fd;
--chart-2: #3b82f6;
--chart-3: #2563eb;
--chart-4: #1d4ed8;
--chart-5: #1e40af;
--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: var(--border);
--scrollbar-width: 0.625rem;
--scrollbar-sm-width: 0.375rem;
--scrollbar-radius: 9999px;
--chevron-down-icon: url('data:image/svg+xml;utf8,'); /* --muted-foreground */
--chevron-down-icon-50: url('data:image/svg+xml;utf8,'); /* --muted-foreground + 50% opacity */
--check-icon: url('data:image/svg+xml;utf8,'); /* --muted-foreground */
}
.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.205 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: #93c5fd;
--chart-2: #3b82f6;
--chart-3: #2563eb;
--chart-4: #1d4ed8;
--chart-5: #1e40af;
--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);
--chevron-down-icon: url('data:image/svg+xml;utf8,'); /* --muted-foreground */
--chevron-down-icon-50: url('data:image/svg+xml;utf8,'); /* --muted-foreground + 50% opacity */
--check-icon: url('data:image/svg+xml;utf8,');/* --muted-foreground */
color-scheme: dark;
}
@theme {
--font-sans: "Geist", "Geist Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--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-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);
--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);
}
@layer base {
* {
@apply border-border outline-ring/50;
}
html {
@apply scroll-smooth;
}
body {
@apply bg-background text-foreground overscroll-none;
}
hr:where([aria-orientation='vertical']) {
flex-shrink: 0;
align-self: stretch;
inline-size: 1px;
block-size: auto;
margin: 0;
border-block-start-width: 0;
border-inline-start-width: 1px;
}
}
/* Components */
/* Accordion */
@layer components {
.accordion {
@apply flex w-full flex-col;
}
.accordion > details > summary {
@apply relative flex w-full flex-1 cursor-pointer list-none items-start justify-between border border-transparent transition-all outline-none;
}
.accordion > details > summary > svg:last-child {
@apply pointer-events-none shrink-0 transition-transform;
}
.accordion > details[open] > summary > svg:last-child {
@apply rotate-180;
}
.accordion > details[aria-disabled='true'] > summary,
.accordion > details > summary[aria-disabled='true'] {
@apply pointer-events-none opacity-50;
}
.accordion > details > :not(summary) {
@apply overflow-hidden;
}
}
/* Alert */
@layer components {
.alert {
@apply relative w-full;
}
.alert:has(> footer) {
@apply pe-[4.5rem];
}
.alert > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
@apply min-h-4;
}
.alert > section {
@apply grid justify-items-start gap-1;
:where(p, ul, ol) {
@apply m-0;
}
:where(p, ul, ol):not(:last-child) {
@apply mb-4;
}
ul {
@apply list-inside list-disc;
}
ol {
@apply list-inside list-decimal;
}
}
.alert > footer {
@apply absolute;
}
}
/* Avatar */
@layer components {
.avatar {
@apply relative inline-flex shrink-0 select-none appearance-none border-0 bg-transparent p-0 align-middle outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 after:absolute after:inset-0 after:rounded-[inherit] after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten;
}
.avatar > img {
@apply absolute inset-0 aspect-square size-full rounded-[inherit] object-cover;
}
.avatar > span:not(.avatar-badge) {
@apply flex size-full items-center justify-center rounded-[inherit] text-sm;
}
.avatar[data-size='sm'] > span:not(.avatar-badge) {
@apply text-xs;
}
.avatar > .avatar-badge {
@apply absolute end-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none;
}
.avatar[data-size='sm'] > .avatar-badge {
@apply size-2 [&>svg]:hidden;
}
.avatar > .avatar-badge {
@apply size-2.5 [&>svg]:size-2;
}
.avatar[data-size='lg'] > .avatar-badge {
@apply size-3 [&>svg]:size-2;
}
.avatar-group {
@apply flex -space-x-2;
}
.avatar-group > .avatar,
.avatar-group > [data-count] {
@apply ring-2 ring-background;
}
.avatar-group > [data-count] {
@apply relative flex shrink-0 items-center justify-center;
}
}
/* Badge */
@layer components {
.badge {
@apply inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none;
}
}
/* Breadcrumb */
@layer components {
.breadcrumb > ol {
@apply m-0 flex list-none flex-wrap items-center p-0 break-words;
}
.breadcrumb li {
@apply inline-flex items-center;
}
.breadcrumb a {
@apply rounded-sm outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50;
}
.breadcrumb [aria-current='page'] {
@apply cursor-default;
}
.breadcrumb li[aria-hidden='true'] {
@apply select-none;
}
.breadcrumb li > span[aria-hidden='true'] {
@apply flex items-center justify-center;
}
.breadcrumb [data-rtl-flip] {
@apply rtl:rotate-180;
}
}
/* Button */
@layer components {
.btn {
@apply inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0;
}
}
/* Button Group */
@layer components {
.button-group {
@apply isolate inline-flex w-fit items-stretch;
&:has(> :is(.dropdown-menu, .popover, .select) > [data-popover][aria-hidden='false']) {
@apply relative z-50;
}
> .input {
@apply flex-1;
}
> *:focus-visible,
> :is(.dropdown-menu, .popover, .select) > button:focus-visible {
@apply relative z-10;
}
> hr[role='separator'] {
@apply relative w-px h-auto self-stretch shrink-0 border-0 my-px mx-0;
}
&:not([data-orientation='vertical']) {
> *:not(:first-child),
> :is(.dropdown-menu, .popover, .select):not(:first-child) > button {
@apply rounded-s-none border-s-0;
}
> *:not(:last-child),
> :is(.dropdown-menu, .popover, .select):not(:last-child) > button {
@apply rounded-e-none;
}
}
&[data-orientation='vertical'] {
@apply flex-col;
> hr[role='separator'] {
@apply w-auto h-px mx-px my-0;
}
> *:not(:first-child),
> :is(.dropdown-menu, .popover, .select):not(:first-child) > button {
@apply rounded-t-none border-t-0;
}
> *:not(:last-child),
> :is(.dropdown-menu, .popover, .select):not(:last-child) > button {
@apply rounded-b-none;
}
}
}
.button-group > :is(span, label, output) {
@apply flex items-center [&_svg]:pointer-events-none;
}
}
/* Card */
@layer components {
.card {
@apply flex flex-col;
> header {
@apply @container/card-header grid auto-rows-min items-start has-[>[data-slot=card-action],>.card-action]:grid-cols-[1fr_auto] has-[>p]:grid-rows-[auto_auto];
}
> header > :is(h2, h3, [data-title], .card-title) {
@apply leading-none;
}
> header > :is([data-slot='card-action'], .card-action) {
@apply col-start-2 row-span-2 row-start-1 self-start justify-self-end;
}
> header > menu.card-action {
@apply m-0 list-none p-0;
}
> footer {
@apply flex items-center;
}
}
}
/* Chart */
@layer components {
.chart {
@apply relative flex aspect-video w-full justify-center text-xs;
}
.chart > canvas {
@apply block size-full;
}
.chart-tooltip {
@apply pointer-events-none fixed z-50 grid min-w-32 -translate-x-1/2 translate-y-2 items-start transition-[left,top,opacity] duration-150 ease-out;
}
.chart-tooltip[hidden] {
@apply opacity-0;
}
.chart-tooltip-items {
@apply grid gap-1.5;
}
.chart-tooltip-item {
@apply flex w-full flex-wrap items-center gap-2;
}
.chart-tooltip-indicator {
@apply size-2.5 shrink-0 rounded-[2px];
background-color: var(--chart-indicator-color);
}
.chart-legend-indicator {
@apply size-2 shrink-0 rounded-[2px];
background-color: var(--chart-indicator-color);
}
.chart-tooltip-label {
@apply text-muted-foreground leading-none;
}
.chart-tooltip-value {
@apply ms-auto font-mono font-medium leading-none tabular-nums;
}
.chart-legend {
@apply flex flex-wrap items-center justify-center gap-4 pt-3;
}
.chart-legend-item {
@apply flex items-center gap-1.5 text-xs;
}
.chart-legend-item[aria-pressed='false'] {
@apply opacity-70;
}
}
/* Collapsible */
@layer components {
details {
&::details-content {
block-size: 0;
@apply block opacity-0 transition-discrete transition-all;
}
&[open]::details-content {
block-size: auto;
block-size: calc-size(auto, size);
@apply opacity-100;
}
summary {
@apply inline-flex items-center cursor-pointer;
}
}
details > summary::-webkit-details-marker {
display: none;
}
}
/* Command */
@layer components {
.command-dialog {
@apply inset-y-0 bg-transparent p-0 text-inherit opacity-0 transition-all transition-discrete;
max-width: none;
max-height: none;
&:is([open], :popover-open) {
@apply opacity-100;
&::backdrop {
@apply opacity-100;
}
> .command {
@apply scale-100;
}
@starting-style {
@apply opacity-0;
&::backdrop {
@apply opacity-0;
}
> .command {
@apply scale-95;
}
}
}
&::backdrop {
@apply opacity-0 transition-all transition-discrete;
}
> .command {
@apply fixed top-1/3 left-1/2 z-50 flex max-h-[min(640px,calc(100%_-_2rem))] w-full max-w-[calc(100%_-_2rem)] -translate-x-1/2 translate-y-0 scale-95 flex-col overflow-hidden transition-all sm:max-w-sm;
}
> .command > :is(button, form[method='dialog']) {
@apply absolute;
}
> .command > :is(button, form[method='dialog'] > button) {
@apply inline-flex items-center justify-center opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0;
}
> .command > :is(button, form[method='dialog'] > button) > svg:not([class*='size-']) {
@apply size-4;
}
}
.command {
@apply flex w-full flex-col overflow-hidden;
}
.command > header {
@apply flex items-center;
}
.command > header svg {
@apply shrink-0;
}
.command > header input {
@apply w-full bg-transparent outline-hidden disabled:cursor-not-allowed disabled:opacity-50;
}
.command [role='menu'] {
@apply overflow-x-hidden overflow-y-auto outline-hidden;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
.command [role='menuitem'] {
@apply aria-hidden:hidden relative flex w-full cursor-default items-center outline-hidden select-none disabled:pointer-events-none disabled:opacity-50 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0;
}
.command [role='menuitem'].active,
.command [role='menuitem'][data-selected='true'] {
@apply bg-muted text-foreground;
}
.command [role='group'] {
@apply overflow-hidden;
}
.command [role='group']:not(:has([role='menuitem']:not([aria-hidden='true']))) {
@apply hidden;
}
.command [role='heading'] {
@apply flex;
}
.command [role='separator'] {
@apply border-0;
}
.command [data-shortcut] {
@apply ms-auto;
}
.command [data-indicator] {
@apply ms-auto opacity-0;
}
.command [role='menuitem'][data-checked='true'] [data-indicator],
.command [role='menuitem'][aria-selected='true'] [data-indicator],
.command [role='menuitem'][data-selected='true'] [data-indicator] {
@apply opacity-100;
}
.command [role='menuitem']:has([data-shortcut]) [data-indicator] {
@apply hidden;
}
.command [role='menu']:not(:has([role='menuitem']:not([aria-hidden='true'])))::before {
@apply flex items-center justify-center truncate;
}
.command [role='menu'][data-empty]:not(:has([role='menuitem']:not([aria-hidden='true'])))::before {
@apply content-[attr(data-empty)];
}
.command [role='menu']:not([data-empty]):not(:has([role='menuitem']:not([aria-hidden='true'])))::before {
@apply content-['No_results_found'];
}
.command:not([data-command-initialized]) [role='menuitem']:not([aria-disabled='true']):not(:disabled):hover {
@apply bg-muted text-foreground;
}
.command:has(> header input:not(:placeholder-shown)) [role='separator'] {
@apply hidden;
}
}
/* Combobox */
@layer components {
.combobox {
@apply relative inline-flex w-fit flex-col;
}
.combobox > input[role='combobox'] {
@apply w-full min-w-0 outline-hidden placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50;
}
.combobox .input-group input[role='combobox'],
.combobox [data-popover] input[role='combobox'] {
@apply min-w-0 outline-hidden placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50;
}
.combobox > svg,
.combobox-trigger-icon {
@apply pointer-events-none absolute shrink-0;
}
.combobox:has(> .combobox-chips) > .combobox-trigger-icon {
@apply hidden;
}
.combobox [data-clear] {
@apply inline-flex size-6 shrink-0 cursor-default appearance-none items-center justify-center border-0 bg-transparent p-0 text-current disabled:pointer-events-none disabled:opacity-50;
}
.combobox [data-clear][hidden] {
@apply hidden;
}
.combobox .input-group:has([data-clear]:not([hidden])) button[aria-haspopup='listbox'] {
@apply hidden;
}
.combobox [data-popover] {
@apply isolate overflow-hidden;
min-width: max(100%, 9rem);
}
.combobox [role='listbox'] {
@apply outline-hidden overflow-x-hidden overflow-y-auto;
}
.combobox [role='listbox'] [role='group']:not(:has([role='option']:not([aria-hidden='true']))) {
@apply hidden;
}
.combobox [role='listbox']:not(:has([data-value]:not([aria-hidden='true'])))::before {
@apply flex items-center justify-center truncate;
}
.combobox [role='listbox'][data-empty]:not(:has([data-value]:not([aria-hidden='true'])))::before {
@apply content-[attr(data-empty)];
}
.combobox [role='listbox']:not([data-empty]):not(:has([data-value]:not([aria-hidden='true'])))::before {
@apply content-['No_results_found'];
}
.combobox [role='option'] {
@apply aria-hidden:hidden relative flex w-full cursor-default items-center truncate outline-hidden select-none aria-disabled:pointer-events-none aria-disabled:opacity-50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0;
}
.combobox [role='option'][aria-selected='true'] {
@apply bg-[image:var(--check-icon)] bg-no-repeat bg-position-[center_right_0.5rem] bg-size-[0.875rem];
}
.combobox [role='option'][aria-selected='true']:dir(rtl) {
@apply bg-position-[center_left_0.5rem];
}
.combobox [role='separator'] {
@apply border-0;
}
.combobox [role='option'].active,
.combobox [role='option']:focus-visible,
.combobox:not([data-combobox-initialized]) [role='option']:not([aria-disabled='true']):not(:disabled):hover {
@apply bg-accent text-accent-foreground;
}
.combobox-chips {
@apply flex w-full min-w-0 flex-wrap items-center;
}
.combobox-chips > input[role='combobox'] {
@apply min-w-16 flex-1 bg-transparent outline-hidden placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50;
}
.combobox-chip {
@apply inline-flex w-fit shrink-0 items-center whitespace-nowrap;
}
.combobox-chip-remove {
@apply inline-flex shrink-0 items-center justify-center;
}
}
/* Dialog */
@keyframes dialog-scroll-lock {
from, to {
scrollbar-gutter: stable;
}
}
@layer components {
/* Lock page scroll while a modal dialog is open. The scroll timeline only
reserves the scrollbar gutter if the page can scroll, so nothing shifts. */
html:has(:is(.dialog, .alert-dialog, .command-dialog, .drawer):modal) {
overflow: hidden;
animation: dialog-scroll-lock linear both;
animation-timeline: scroll(self);
}
.dialog,
.alert-dialog {
@apply bg-transparent p-0 text-inherit opacity-0 transition-all transition-discrete backdrop:opacity-0 backdrop:transition-all backdrop:transition-discrete;
max-width: none;
max-height: none;
&:is([open], :popover-open) {
@apply opacity-100 backdrop:opacity-100;
> * {
@apply scale-100;
}
@starting-style {
@apply opacity-0 backdrop:opacity-0;
> * {
@apply scale-95;
}
}
}
> * {
@apply fixed top-1/2 left-1/2 z-50 flex max-h-[calc(100%_-_2rem)] w-full -translate-x-1/2 -translate-y-1/2 scale-95 flex-col transition-all outline-hidden;
}
}
.dialog {
> * > header {
@apply flex flex-col;
}
> * > section {
@apply flex-1;
}
> * > footer {
@apply flex flex-col-reverse sm:flex-row sm:justify-end;
}
> * > :is(button, form[method='dialog']) {
@apply absolute;
}
> * > :is(button, form[method='dialog'] > button) {
@apply inline-flex items-center justify-center opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0;
}
> * > :is(button, form[method='dialog'] > button) > svg:not([class*='size-']) {
@apply size-4;
}
}
.alert-dialog {
> * > header {
@apply grid grid-rows-[auto_1fr] place-items-center text-center sm:place-items-start sm:text-start;
}
> * > header:has(> figure) {
@apply grid-rows-[auto_auto_1fr] sm:grid-rows-[auto_1fr];
}
> * > header > figure {
@apply m-0 shrink-0 sm:row-span-2 [&_svg]:pointer-events-none [&_svg]:shrink-0;
}
> * > header > figure:has(img) {
@apply overflow-hidden [&_img]:size-full [&_img]:object-cover;
}
> * > header:has(> figure) > :is(h2, p) {
@apply sm:col-start-2;
}
> * > footer {
@apply flex flex-col-reverse sm:flex-row sm:justify-end;
}
&:is([data-size='sm']) > * > header,
> [data-size='sm'] > header {
@apply sm:place-items-center sm:text-center;
}
&:is([data-size='sm']) > * > header:has(> figure),
> [data-size='sm'] > header:has(> figure) {
@apply sm:grid-rows-[auto_auto_1fr];
}
&:is([data-size='sm']) > * > header:has(> figure) > :is(h2, p),
> [data-size='sm'] > header:has(> figure) > :is(h2, p) {
@apply sm:col-start-auto;
}
&:is([data-size='sm']) > * > footer,
> [data-size='sm'] > footer {
@apply grid grid-cols-2 sm:grid sm:grid-cols-2;
}
}
}
/* Drawer */
@layer components {
.drawer {
@apply fixed inset-0 m-0 size-auto max-h-none max-w-none overflow-visible bg-transparent p-0 text-inherit opacity-0 transition-all transition-discrete duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] backdrop:opacity-0 backdrop:transition-all backdrop:transition-discrete backdrop:duration-500 backdrop:ease-[cubic-bezier(0.32,0.72,0,1)];
> * {
@apply fixed z-50 flex h-auto flex-col transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] will-change-transform outline-hidden;
}
&:not([data-side]) > *,
&[data-side='bottom'] > * {
@apply inset-x-0 bottom-0 mt-24 max-h-[80vh] translate-y-full;
}
&[data-side='top'] > * {
@apply inset-x-0 top-0 mb-24 max-h-[80vh] -translate-y-full;
}
&[data-side='left'] > * {
@apply inset-y-0 left-0 w-3/4 max-w-sm -translate-x-full;
}
&[data-side='right'] > * {
@apply inset-y-0 right-0 w-3/4 max-w-sm translate-x-full;
}
&[data-closing] {
@apply opacity-0 backdrop:opacity-0;
}
&[data-closing]:not([data-side]) > *,
&[data-closing][data-side='bottom'] > * {
@apply translate-y-full;
}
&[data-closing][data-side='top'] > * {
@apply -translate-y-full;
}
&[data-closing][data-side='left'] > * {
@apply -translate-x-full;
}
&[data-closing][data-side='right'] > * {
@apply translate-x-full;
}
&:is([open], :popover-open):not([data-closing]) {
@apply opacity-100 backdrop:opacity-100;
> * {
@apply translate-x-0 translate-y-0;
}
@starting-style {
@apply opacity-0 backdrop:opacity-0;
&:not([data-side]) > *,
&[data-side='bottom'] > * {
@apply translate-y-full;
}
&[data-side='top'] > * {
@apply -translate-y-full;
}
&[data-side='left'] > * {
@apply -translate-x-full;
}
&[data-side='right'] > * {
@apply translate-x-full;
}
}
}
> * > header {
@apply flex flex-col;
}
> * > section {
@apply min-h-0 flex-1 overflow-y-auto;
}
> * > footer {
@apply mt-auto flex flex-col;
}
}
}
/* Dropdown Menu */
@layer components {
.dropdown-menu {
@apply relative inline-flex;
}
.dropdown-menu > [data-popover] {
min-width: anchor-size(width);
}
.dropdown-menu [role='menu'] {
@apply outline-hidden;
}
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']) {
@apply aria-hidden:hidden relative flex w-full cursor-default items-center truncate outline-hidden select-none disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0;
}
.dropdown-menu [role='menu'] [role='heading'] {
@apply flex;
}
.dropdown-menu [role='separator'] {
@apply border-0;
}
.dropdown-menu :is([data-shortcut], kbd:last-child, .kbd:last-child) {
@apply ms-auto shrink-0 text-end;
}
.dropdown-menu [data-shortcut] {
@apply ps-8;
}
.dropdown-menu :is(kbd:last-child, .kbd:last-child):not([data-shortcut]) {
@apply ps-8;
}
.dropdown-menu [data-indicator] {
@apply pointer-events-none invisible;
}
.dropdown-menu :is([role='menuitemcheckbox'], [role='menuitemradio'])[aria-checked='true'] [data-indicator] {
@apply visible;
}
.dropdown-menu [data-rtl-flip] {
@apply rtl:rotate-180;
}
.dropdown-menu:not([data-dropdown-menu-initialized]) :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']) {
&:not([aria-disabled='true']):not(:disabled):hover {
@apply bg-accent text-accent-foreground;
}
}
}
/* Empty */
@layer components {
.empty {
@apply flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance;
}
.empty > header {
@apply flex max-w-sm flex-col items-center;
}
.empty figure {
@apply flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0;
}
.empty figure:has(img) {
@apply overflow-hidden [&_img]:size-full [&_img]:object-cover;
}
.empty > :is(section, footer) {
@apply flex w-full max-w-sm min-w-0 flex-col items-center text-balance;
}
.empty > header > p {
@apply [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary;
}
}
/* Field */
@layer components {
.fieldset {
@apply flex flex-col;
}
.fieldset > :is([role='group'], [role='radiogroup']):not(.field),
.field > :is(fieldset, [role='group'], [role='radiogroup']):not(.field) {
@apply @container/field-group flex w-full flex-col;
}
.field {
@apply flex w-full flex-col data-invalid:text-destructive data-[invalid=true]:text-destructive [&>*]:w-full [&>.sr-only]:w-auto;
&[data-orientation='horizontal'] {
@apply flex-row items-center [&>*]:w-auto [&>label]:flex-auto has-[>section]:items-start has-[>section]:[&>section]:flex-1 has-[>section]:[&>[type=checkbox],[type=radio]]:mt-px [&_p]:text-balance;
}
&[data-orientation='responsive'] {
@apply flex-col @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:has-[>section]:items-start @md/field-group:[&>label]:flex-auto @md/field-group:has-[>section]:[&>[type=checkbox],[type=radio]]:mt-px;
}
section {
@apply flex flex-1 flex-col leading-snug;
}
h2,
h3 {
@apply flex w-fit items-center;
}
[role='alert'] {
@apply font-normal;
ul {
@apply ms-4 flex list-disc flex-col gap-1;
}
}
}
.field > label,
.field > section > label,
label:has(> .field) {
@apply w-fit;
}
.field > label:has(> .field),
.field > label:has(input[type='radio']),
.field > label:has(input[type='checkbox']),
.field > label:has(input[role='switch']),
label:has(> .field) {
@apply w-full;
}
.field > label:has(> .field),
label:has(> .field) {
@apply flex-col;
}
.fieldset legend + p,
.field > p,
.field section > p {
@apply leading-normal font-normal [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4;
}
.field > p,
.field section > p {
@apply last:mt-0 nth-last-2:-mt-1;
}
.field-separator {
@apply relative;
}
.field-separator > hr[role='separator'] {
@apply absolute inset-x-0 top-1/2;
}
.field-separator > span {
@apply relative mx-auto block w-fit bg-background;
}
}
/* Checkbox */
@layer components {
.field > input[type='checkbox']:not([role='switch']),
.input[type='checkbox']:not([role='switch']) {
@apply relative shrink-0 appearance-none outline-none disabled:cursor-not-allowed disabled:opacity-50;
&:checked:after {
@apply content-[''] block bg-current;
@apply mask-[image:var(--check-icon)] mask-size-[0.875rem] mask-no-repeat mask-center;
}
}
}
/* Input */
@layer components {
.field > input[type='text']:not(:is(.command > header input, .dialog > * > header input)),
.field > input[type='email'],
.field > input[type='password'],
.field > input[type='number'],
.field > input[type='file'],
.field > input[type='tel'],
.field > input[type='url'],
.field > input[type='search']:not(:is(.command > header input, .dialog > * > header input)),
.field > input[type='date'],
.field > input[type='datetime-local'],
.field > input[type='month'],
.field > input[type='week'],
.field > input[type='time'],
.input[type='text'],
.input[type='email'],
.input[type='password'],
.input[type='number'],
.input[type='file'],
.input[type='tel'],
.input[type='url'],
.input[type='search'],
.input[type='date'],
.input[type='datetime-local'],
.input[type='month'],
.input[type='week'],
.input[type='time'],
.input:not([type]) {
@apply w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50;
}
}
/* Item */
@layer components {
.item-group {
@apply flex w-full flex-col;
}
.item-group > hr {
@apply w-full shrink-0 border-0 border-t;
}
.item {
@apply flex w-full flex-wrap items-center border transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50;
}
a.item {
@apply hover:bg-muted;
}
.item > figure {
@apply flex shrink-0 items-center justify-center [&_svg]:pointer-events-none;
}
.item > figure:has(> img) {
@apply overflow-hidden [&_img]:size-full [&_img]:object-cover;
}
.item > section {
@apply flex flex-1 flex-col;
}
.item > section + section {
@apply flex-none;
}
.item > aside {
@apply flex items-center;
}
.item > :is(header, footer) {
@apply flex basis-full items-center justify-between;
}
.item :is(h2, h3, h4) {
@apply line-clamp-1 flex w-fit items-center;
}
.item p {
@apply text-muted-foreground line-clamp-2 text-start font-normal [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary;
}
}
/* Kbd */
@layer components {
.kbd {
@apply pointer-events-none inline-flex items-center justify-center select-none;
}
}
/* Label */
@layer components {
.field > label,
.field > section > label,
.label {
@apply flex items-center select-none peer-disabled:pointer-events-none;
&:has(>*:disabled),
&:has(+*:disabled) {
@apply pointer-events-none;
}
}
}
/* Native Select */
@layer components {
.field > select,
select.select {
@apply min-w-0 appearance-none outline-none select-none disabled:cursor-not-allowed disabled:opacity-50;
option,
optgroup {
@apply bg-[Canvas] text-[CanvasText];
}
}
}
/* Popover */
@layer components {
[data-popover] {
@apply absolute z-50 min-w-full w-max overflow-x-hidden overflow-y-auto visible opacity-100 scale-100 transition-all outline-hidden;
&[aria-hidden='true'] {
@apply invisible opacity-0 scale-95;
&:not([data-side]),
&[data-side='bottom'] {
@apply -translate-y-2;
}
&[data-side='top'] {
@apply translate-y-2;
}
&[data-side='left'] {
@apply translate-x-2;
}
&[data-side='right'] {
@apply -translate-x-2;
}
&[data-side='inline-start'] {
@apply translate-x-2;
}
&[data-side='inline-start']:dir(rtl) {
@apply -translate-x-2;
}
&[data-side='inline-end'] {
@apply -translate-x-2;
}
&[data-side='inline-end']:dir(rtl) {
@apply translate-x-2;
}
}
&:not([data-side]),
&[data-side='bottom'] {
@apply mt-1 top-full;
}
&[data-side='top'] {
@apply mb-1 bottom-full;
}
&[data-side='left'] {
@apply me-1 end-full;
}
&[data-side='right'] {
@apply ms-1 start-full;
}
&[data-side='inline-start'] {
@apply me-1 end-full;
}
&[data-side='inline-end'] {
@apply ms-1 start-full;
}
&:not([data-side]),
&[data-side='bottom'],
&[data-side='top'] {
&:not([data-align]),
&[data-align='start'] {
@apply start-0;
}
&[data-align='end'] {
@apply end-0;
}
&[data-align='center'] {
@apply start-1/2 -translate-x-1/2;
}
}
&[data-side='left'],
&[data-side='right'],
&[data-side='inline-start'],
&[data-side='inline-end'] {
&:not([data-align]),
&[data-align='start'] {
@apply top-0;
}
&[data-align='end'] {
@apply bottom-0;
}
&[data-align='center'] {
@apply top-1/2 -translate-y-1/2;
}
}
}
.popover {
@apply relative inline-flex;
}
}
/* Progress */
@layer components {
.progress {
@apply flex w-full items-center overflow-hidden;
}
.progress:dir(rtl) {
@apply flex-row-reverse;
}
.progress > span {
@apply h-full transition-all;
}
}
/* Radio */
@layer components {
.field > input[type='radio'],
.input[type='radio'] {
@apply relative shrink-0 appearance-none border outline-none disabled:cursor-not-allowed disabled:opacity-50;
&:checked:before {
@apply absolute top-1/2 left-1/2 content-[''] -translate-x-1/2 -translate-y-1/2 rounded-full;
}
}
}
/* Range */
@layer components {
.field > input[type='range'],
.input[type='range'] {
@apply flex appearance-none items-center p-0 outline-none disabled:pointer-events-none disabled:opacity-50;
--slider-value: 20%;
&::-webkit-slider-thumb {
@apply block shrink-0 appearance-none;
}
&::-webkit-slider-runnable-track {
@apply w-full appearance-none;
background: linear-gradient(to right, var(--primary) var(--slider-value), var(--muted) var(--slider-value));
}
&:dir(rtl)::-webkit-slider-runnable-track {
background: linear-gradient(to left, var(--primary) var(--slider-value), var(--muted) var(--slider-value));
}
&::-moz-range-thumb {
@apply block shrink-0 appearance-none;
}
&::-moz-range-track {
@apply w-full appearance-none;
background: linear-gradient(to right, var(--primary) var(--slider-value), var(--muted) var(--slider-value));
}
&:dir(rtl)::-moz-range-track {
background: linear-gradient(to left, var(--primary) var(--slider-value), var(--muted) var(--slider-value));
}
&::-ms-thumb {
@apply block shrink-0 appearance-none;
}
&::-ms-track {
@apply w-full appearance-none;
}
&::-ms-fill-lower {
@apply bg-primary;
}
&::-ms-fill-upper {
@apply bg-muted;
}
}
}
/* Select */
@layer components {
.select:not(select) {
@apply relative inline-flex;
}
.select:not(select) > button {
@apply flex w-fit items-center justify-between whitespace-nowrap font-normal outline-hidden disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0;
}
.select:not(select) > button > span {
@apply flex flex-1 truncate text-start;
}
.select:not(select) > button > svg {
@apply shrink-0;
}
.select:not(select) [data-popover] {
@apply isolate overflow-x-hidden;
min-width: max(100%, 9rem);
}
.select:not(select) [role='listbox'] {
@apply outline-hidden;
}
.select:not(select) [role='listbox'] [role='group']:not(:has([role='option']:not([aria-hidden='true']))) {
@apply hidden;
}
.select:not(select) [role='listbox']:not(:has([data-value]:not([aria-hidden='true'])))::before {
@apply flex items-center justify-center truncate;
}
.select:not(select) [role='listbox'][data-empty]:not(:has([data-value]:not([aria-hidden='true'])))::before {
@apply content-[attr(data-empty)];
}
.select:not(select) [role='listbox']:not([data-empty]):not(:has([data-value]:not([aria-hidden='true'])))::before {
@apply content-['No_results_found'];
}
.select:not(select) [role='option'] {
@apply aria-hidden:hidden relative flex w-full cursor-default items-center truncate outline-hidden select-none aria-disabled:pointer-events-none aria-disabled:opacity-50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0;
}
.select:not(select) [role='option'][aria-selected='true'] {
@apply bg-[image:var(--check-icon)] bg-no-repeat bg-position-[center_right_0.5rem] bg-size-[0.875rem];
}
.select:not(select) [role='option'][aria-selected='true']:dir(rtl) {
@apply bg-position-[center_left_0.5rem];
}
.select:not(select) [role='separator'] {
@apply border-0;
}
.select:not(select):not([data-select-initialized]) [role='option']:not([aria-disabled='true']):not(:disabled):hover,
.select:not(select) [role='option'].active {
@apply bg-accent text-accent-foreground;
}
}
/* Sidebar */
@layer components {
.sidebar {
&:not([data-sidebar-initialized]) {
@apply max-md:hidden;
}
&:not([aria-hidden]),
&[aria-hidden=false] {
@apply max-md:bg-black/50 max-md:fixed max-md:inset-0 max-md:z-40;
}
> nav {
@apply fixed inset-y-0 z-50 flex w-(--sidebar-mobile-width) flex-col transition-transform duration-300 ease-in-out md:w-(--sidebar-width);
}
& + * {
@apply transition-[margin] ease-in-out duration-300;
}
&:not([data-side]),
&[data-side=left] {
> nav {
@apply left-0 border-r;
}
& + * {
@apply relative md:ml-(--sidebar-width);
}
&[aria-hidden=true] {
> nav {
@apply -translate-x-full;
}
& + * {
@apply md:ml-0;
}
}
}
&[data-side=right] {
> nav {
@apply right-0 border-l;
}
& + * {
@apply relative md:mr-(--sidebar-width);
}
&[aria-hidden=true] {
> nav {
@apply translate-x-full;
}
& + * {
@apply md:mr-0;
}
}
}
> nav {
> header,
> footer {
@apply flex flex-col;
}
[role=separator] {
@apply w-auto;
}
> section {
@apply flex min-h-0 flex-1 flex-col overflow-y-auto;
> [role=group] {
@apply relative flex w-full min-w-0 flex-col;
}
h3 {
@apply flex shrink-0 items-center outline-hidden transition-[margin,opacity] duration-200 ease-linear [&>svg]:shrink-0;
}
ul {
@apply flex w-full min-w-0 flex-col;
li {
@apply relative;
> a,
> button,
> details > summary {
@apply flex w-full items-center overflow-hidden text-left outline-hidden transition-[width,height,padding] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0;
}
> details {
&:not([open]) {
> summary {
&::after {
@apply -rotate-90;
}
&:where(:dir(rtl), [dir='rtl'], [dir='rtl'] *)::after {
@apply rotate-90;
}
}
}
> summary {
&::after {
@apply ms-auto block size-3.5 bg-current content-[''] transition-transform ease-linear;
@apply mask-[image:var(--chevron-down-icon)] mask-size-[1rem] mask-no-repeat mask-center;
}
}
}
}
ul {
@apply flex min-w-0 flex-col;
}
}
}
}
}
}
/* Scrollbar */
@layer components {
.scrollbar {
scrollbar-width: auto;
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
&::-webkit-scrollbar {
width: var(--scrollbar-width);
height: var(--scrollbar-width);
}
&::-webkit-scrollbar-track {
background: var(--scrollbar-track);
}
&::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb);
border-radius: var(--scrollbar-radius);
border: 1px solid transparent;
background-clip: padding-box;
}
&::-webkit-scrollbar-corner {
background: var(--scrollbar-track);
}
}
.scrollbar-sm {
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
&::-webkit-scrollbar {
width: var(--scrollbar-sm-width);
height: var(--scrollbar-sm-width);
}
&::-webkit-scrollbar-track {
background: var(--scrollbar-track);
}
&::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb);
border-radius: var(--scrollbar-radius);
border: 1px solid transparent;
background-clip: padding-box;
}
&::-webkit-scrollbar-corner {
background: var(--scrollbar-track);
}
}
}
/* Skeleton */
@layer components {
.skeleton {
@apply animate-pulse;
}
}
/* Switch */
@layer components {
.field > input[type='checkbox'][role='switch'],
.input[type='checkbox'][role='switch'] {
@apply inline-flex shrink-0 appearance-none items-center transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50;
@apply before:pointer-events-none before:block before:content-[''] before:ring-0 before:transition-transform;
}
}
/* Tables */
@layer components {
.table-container {
@apply relative w-full overflow-x-auto;
}
.table {
@apply w-full caption-bottom;
thead {
@apply [&_tr]:border-b;
}
tbody {
@apply [&_tr:last-child]:border-0;
}
tfoot {
@apply border-t font-medium [&>tr]:last:border-b-0;
}
tr {
@apply border-b transition-colors data-[state=selected]:bg-muted;
}
th {
@apply align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pe-0 [&>[role=checkbox]]:translate-y-[2px];
}
td {
@apply align-middle whitespace-nowrap [&:has([role=checkbox])]:pe-0 [&>[role=checkbox]]:translate-y-[2px];
}
}
}
/* Tabs */
@layer components {
.tabs {
@apply flex;
&:has(> [role='tablist'][aria-orientation='horizontal']),
&:not(:has(> [role='tablist'][aria-orientation='vertical'])) {
@apply flex-col;
}
&:has(> [role='tablist'][aria-orientation='vertical']) {
@apply flex-row;
}
> [role='tablist'] {
@apply text-muted-foreground inline-flex w-fit items-center justify-center;
&[aria-orientation='vertical'] {
@apply h-fit flex-col;
}
> [role='tab'] {
@apply relative inline-flex flex-1 items-center justify-center whitespace-nowrap transition-all outline-none disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0;
}
}
> [role='tabpanel'] {
@apply flex-1 outline-none;
}
}
}
/* Textarea */
@layer components {
.field > textarea,
.textarea {
@apply flex field-sizing-content min-h-16 w-full outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50;
}
}
/* Input Group */
@layer components {
.input-group {
@apply relative flex w-full min-w-0 items-center outline-none;
&[data-orientation='vertical'],
&:has(> [data-align='block-start']),
&:has(> [data-align='block-end']) {
@apply h-auto flex-col items-stretch;
}
}
.input-group > :is(input, textarea, select, [data-control]) {
@apply text-foreground placeholder:text-muted-foreground block min-w-0 flex-1 appearance-none rounded-none border-0 bg-transparent shadow-none outline-none ring-0 focus-visible:ring-0 aria-invalid:ring-0;
}
.input-group > :is(input, select, [data-control]) {
@apply h-full;
}
.input-group > [data-control] {
@apply w-full;
}
.input-group:is([data-orientation='vertical'], :has(> [data-align='block-start']), :has(> [data-align='block-end'])) > :is(input, select, [data-control]) {
@apply h-auto flex-none;
}
.input-group[data-orientation='vertical']:has(> footer[data-align='end']) > :is(input, select, [data-control]),
.input-group:has(> [data-align='block-end']) > :is(input, select, [data-control]) {
@apply pt-3;
}
.input-group[data-orientation='vertical']:has(> header[data-align='start']) > :is(input, select, [data-control]),
.input-group:has(> [data-align='block-start']) > :is(input, select, [data-control]) {
@apply pb-3;
}
.input-group > textarea {
@apply field-sizing-content min-h-20 w-full resize-none;
}
.input-group > :is(span, kbd, svg, [role='group'], .popover, .dropdown-menu, button, footer, header, hr[role='separator']) {
@apply shrink-0;
}
.input-group > :is(span, [role='group'], footer, header) {
@apply inline-flex items-center;
}
.input-group > svg {
@apply pointer-events-none;
}
.input-group > :is([data-align='start'], [data-align='inline-start'], [data-align='block-start']) {
@apply order-first;
}
.input-group > :is([data-align='end'], [data-align='inline-end'], [data-align='block-end']) {
@apply order-last;
}
.input-group > :is([data-align='block-start'], [data-align='block-end']) {
@apply w-full justify-start;
}
.input-group > button:is([data-align='start'], [data-align='inline-start']) {
@apply ms-1;
}
.input-group > button:is([data-align='end'], [data-align='inline-end']) {
@apply me-1;
}
}
/* Toasts */
@layer components {
.toaster {
@apply pointer-events-none fixed bottom-0 z-50 flex w-full flex-col-reverse gap-4 p-4 sm:max-w-90;
&:not([data-align]),
&[data-align='end'] {
@apply right-0;
}
&[data-align='start'] {
@apply left-0;
}
&[data-align='center'] {
@apply left-1/2 -translate-x-1/2;
}
.toast {
@apply pointer-events-auto grid w-full grid-rows-[1fr] animate-[toast-up_0.3s_ease-in-out] transition-[grid-template-rows,opacity] duration-300 ease-in-out;
.toast-content {
@apply flex items-center gap-2.5 overflow-hidden p-3 text-[13px];
svg {
@apply size-4 shrink-0;
}
section {
h2 {
@apply font-medium tracking-tight;
}
p {
@apply text-muted-foreground break-all;
}
}
footer {
@apply ms-auto flex flex-col gap-2;
[data-toast-action],
[data-toast-cancel] {
@apply h-6 px-2.5 text-xs;
}
}
}
&[aria-hidden='true'] {
@apply grid-rows-[0fr] overflow-hidden border-0 p-0 opacity-0;
.toast-content {
@apply border-0;
}
}
}
}
}
@keyframes toast-up {
from {
opacity: 0;
transform: translateY(100%);
}
}
/* Tooltip */
@layer components {
[data-tooltip] {
@apply relative;
&:before {
@apply absolute block z-[60] w-fit max-w-xs origin-(--transform-origin) scale-95 truncate invisible opacity-0 transition-all pointer-events-none content-[attr(data-tooltip)];
}
&:hover:before {
@apply visible opacity-100 scale-100;
}
&:focus-visible:not(:hover):before {
@apply hidden;
}
&:not([data-side]),
&[data-side='top'] {
@apply before:bottom-full before:mb-1.5 before:translate-y-2 hover:before:translate-y-0;
}
&[data-side='bottom'] {
@apply before:top-full before:mt-1.5 before:-translate-y-2 hover:before:translate-y-0;
}
&:not([data-side]),
&[data-side='top'],
&[data-side='bottom'] {
&[data-align='start'] {
@apply before:left-0;
}
&[data-align='end'] {
@apply before:right-0;
}
&:not([data-align]),
&[data-align='center'] {
@apply before:left-1/2 before:-translate-x-1/2;
}
}
&[data-side='left'] {
@apply before:right-full before:mr-1.5 before:translate-x-2 hover:before:translate-x-0;
}
&[data-side='right'] {
@apply before:left-full before:ml-1.5 before:-translate-x-2 hover:before:translate-x-0;
}
&[data-side='inline-start'] {
@apply before:right-full before:mr-1.5 before:translate-x-2 hover:before:translate-x-0;
}
&[data-side='inline-start']:dir(rtl) {
@apply before:right-auto before:left-full before:mr-0 before:ml-1.5 before:-translate-x-2 hover:before:translate-x-0;
}
&[data-side='inline-end'] {
@apply before:left-full before:ml-1.5 before:-translate-x-2 hover:before:translate-x-0;
}
&[data-side='inline-end']:dir(rtl) {
@apply before:left-auto before:right-full before:ml-0 before:mr-1.5 before:translate-x-2 hover:before:translate-x-0;
}
&[data-side='left'],
&[data-side='right'],
&[data-side='inline-start'],
&[data-side='inline-end'] {
&[data-align='start'] {
@apply before:top-0;
}
&[data-align='end'] {
@apply before:bottom-0;
}
&:not([data-align]),
&[data-align='center'] {
@apply before:top-1/2 before:-translate-y-1/2;
}
}
}
}
/* Accordion */
@layer components {
.accordion {
@apply overflow-hidden rounded-2xl border;
}
.accordion > details {
@apply open:bg-muted/50 not-last:border-b;
}
.accordion > details > summary {
@apply gap-6 p-4 text-left text-sm font-medium hover:underline;
}
.accordion > details > summary > svg:last-child {
@apply text-muted-foreground ms-auto size-4;
}
.accordion > details > :not(summary) {
@apply px-4 pt-0 pb-4 text-sm;
}
/* Button */
.btn {
@apply rounded-4xl border border-transparent bg-clip-padding text-sm font-medium focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4;
}
.btn:not([data-size]),
.btn[data-size='default'] {
@apply h-9 gap-1.5 px-3 has-[[data-icon='inline-end']]:pr-2.5 has-[[data-icon='inline-start']]:pl-2.5;
}
.btn[data-size='xs'] {
@apply h-6 gap-1 px-2.5 text-xs [&_svg:not([class*='size-'])]:size-3 has-[[data-icon='inline-end']]:pr-2 has-[[data-icon='inline-start']]:pl-2;
}
.btn[data-size='sm'] {
@apply h-8 gap-1 px-3 has-[[data-icon='inline-end']]:pr-2 has-[[data-icon='inline-start']]:pl-2;
}
.btn[data-size='lg'] {
@apply h-10 gap-1.5 px-4 has-[[data-icon='inline-end']]:pr-3 has-[[data-icon='inline-start']]:pl-3;
}
.btn[data-size='icon'] {
@apply size-9;
}
.btn[data-size='icon-xs'] {
@apply size-6 [&_svg:not([class*='size-'])]:size-3;
}
.btn[data-size='icon-sm'] {
@apply size-8;
}
.btn[data-size='icon-lg'] {
@apply size-10;
}
.btn:not([data-variant]),
.btn[data-variant='primary'] {
@apply bg-primary text-primary-foreground hover:bg-primary/80;
}
.btn[data-variant='secondary'] {
@apply bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground;
}
.btn[data-variant='outline'] {
@apply border-border bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground;
}
.btn[data-variant='ghost'] {
@apply hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground;
}
.btn[data-variant='link'] {
@apply text-primary underline-offset-4 hover:underline;
}
.btn[data-variant='destructive'] {
@apply bg-destructive/10 text-destructive hover:bg-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40;
}
/* Button Group */
.button-group {
@apply has-[>.button-group]:gap-2;
}
.button-group:not([data-orientation='vertical']) {
> :last-child,
> :is(.dropdown-menu, .popover, .select):last-child > button {
@apply rounded-e-4xl!;
}
}
.button-group[data-orientation='vertical'] {
> :last-child,
> :is(.dropdown-menu, .popover, .select):last-child > button {
@apply rounded-b-4xl!;
}
}
.button-group > :is(span, label, output) {
@apply bg-muted gap-2 rounded-4xl border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4;
}
.button-group > hr[role='separator'] {
@apply bg-input;
}
/* Tabs */
.tabs {
@apply gap-2;
}
.tabs > [role='tablist'] {
@apply rounded-4xl p-[3px] h-9;
}
.tabs > [role='tablist']:not([data-variant='line']) {
@apply bg-muted;
}
.tabs > [role='tablist'][data-variant='line'] {
@apply gap-1 rounded-none bg-transparent;
}
.tabs > [role='tablist'][aria-orientation='vertical'] {
@apply h-fit rounded-2xl;
}
.tabs > [role='tablist'] > [role='tab'] {
@apply text-foreground/60 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:text-muted-foreground dark:hover:text-foreground gap-1.5 rounded-xl border border-transparent px-2 py-1 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 focus-visible:ring-[3px] focus-visible:outline-1;
@apply after:absolute after:bg-foreground after:opacity-0 after:transition-opacity;
}
.tabs > [role='tablist'][aria-orientation='vertical'] > [role='tab'] {
@apply w-full justify-start px-2.5 py-1.5;
}
.tabs > [role='tablist'][data-variant='line'][aria-orientation='horizontal'] > [role='tab'] {
@apply bg-transparent shadow-none after:inset-x-0 after:bottom-[-5px] after:h-0.5;
}
.tabs > [role='tablist'][data-variant='line'][aria-orientation='vertical'] > [role='tab'] {
@apply bg-transparent shadow-none after:inset-y-0 after:end-[-4px] after:w-0.5;
}
.tabs > [role='tablist']:not([data-variant='line']) > [role='tab'][aria-selected='true'] {
@apply bg-background text-foreground dark:border-input dark:bg-input/30 dark:text-foreground shadow-sm;
}
.tabs > [role='tablist'][data-variant='line'] > [role='tab'][aria-selected='true'] {
@apply bg-transparent text-foreground shadow-none dark:border-transparent dark:bg-transparent dark:text-foreground after:opacity-100;
}
.tabs > [role='tablist'] > [role='tab']:has(> svg:first-child) {
@apply ps-1.5;
}
.tabs > [role='tablist'] > [role='tab']:has(> svg:last-child) {
@apply pe-1.5;
}
.tabs > [role='tabpanel'] {
@apply text-sm;
}
/* Textarea */
.field > textarea,
.textarea {
@apply border-input 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 dark:aria-invalid:border-destructive/50 resize-none rounded-xl border px-3 py-3 text-base transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm;
}
/* Input */
.field > input[type='text']:not(:is(.command > header input, .dialog > * > header input)),
.field > input[type='email'],
.field > input[type='password'],
.field > input[type='number'],
.field > input[type='file'],
.field > input[type='tel'],
.field > input[type='url'],
.field > input[type='search']:not(:is(.command > header input, .dialog > * > header input)),
.field > input[type='date'],
.field > input[type='datetime-local'],
.field > input[type='month'],
.field > input[type='week'],
.field > input[type='time'],
.field > input:not([type]),
.input[type='text'],
.input[type='email'],
.input[type='password'],
.input[type='number'],
.input[type='file'],
.input[type='tel'],
.input[type='url'],
.input[type='search'],
.input[type='date'],
.input[type='datetime-local'],
.input[type='month'],
.input[type='week'],
.input[type='time'],
.input:not([type]) {
@apply bg-input/30 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:aria-invalid:border-destructive/50 h-9 rounded-4xl border px-3 py-1 text-base transition-colors file:h-7 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm;
}
/* Native Select */
.field > select,
select.select {
@apply border-input bg-input/30 placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 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:aria-invalid:border-destructive/50 h-9 w-fit rounded-4xl border py-1 ps-3 pe-8 text-base md:text-sm transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=sm]:h-8;
@apply bg-[image:var(--chevron-down-icon-50)] bg-no-repeat bg-position-[center_right_0.875rem] bg-size-[1rem];
}
:is(.field > select, select.select):dir(rtl) {
@apply bg-position-[center_left_0.875rem];
}
/* Alert */
.alert {
@apply grid gap-0.5 rounded-lg border px-4 py-3 text-start text-sm has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 [&>svg]:row-span-2 [&>svg]:translate-y-0.5 [&>svg]:text-current [&>svg:not([class*='size-'])]:size-4;
}
.alert {
@apply bg-card text-card-foreground;
}
.alert[data-variant='destructive'] {
@apply text-destructive bg-card [&>svg]:text-current;
}
.alert > :is(h2, h3, h4, h5, h6, strong, [data-title]),
.alert[data-variant='destructive'] > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
@apply font-medium;
}
.alert:has(> svg) > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
@apply col-start-2;
}
.alert > section {
@apply text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4;
}
.alert[data-variant='destructive'] > section {
@apply text-destructive/90 text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4;
}
.alert > footer,
.alert[data-variant='destructive'] > footer {
@apply top-2.5 end-3;
}
/* Avatar */
.avatar {
@apply rounded-full after:rounded-[inherit];
}
.avatar {
@apply size-8;
}
.avatar[data-size='sm'] {
@apply size-6;
}
.avatar[data-size='lg'] {
@apply size-10;
}
.avatar > span:not(.avatar-badge) {
@apply bg-muted text-muted-foreground rounded-[inherit];
}
.avatar > img {
@apply rounded-[inherit];
}
.avatar > .avatar-badge {
@apply bg-primary text-primary-foreground ring-background;
}
.avatar-group > [data-count] {
@apply bg-muted text-muted-foreground size-8 rounded-full text-sm [&>svg]:size-4;
}
.avatar-group:has(> .avatar[data-size='sm']) > [data-count] {
@apply size-6 [&>svg]:size-3;
}
.avatar-group:has(> .avatar[data-size='lg']) > [data-count] {
@apply size-10 [&>svg]:size-5;
}
/* Badge */
.badge {
@apply h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all [&>svg]:size-3!;
}
.badge:not([data-variant]),
.badge[data-variant='primary'] {
@apply bg-primary text-primary-foreground [a]:hover:bg-primary/80;
}
.badge[data-variant='secondary'] {
@apply bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80;
}
.badge[data-variant='outline'] {
@apply border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-input/30;
}
.badge[data-variant='destructive'] {
@apply bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20;
}
.badge[data-variant='ghost'] {
@apply hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50;
}
.badge[data-variant='link'] {
@apply text-primary underline-offset-4 hover:underline;
}
/* Breadcrumb */
.breadcrumb > ol {
@apply text-muted-foreground gap-1.5 text-sm sm:gap-2.5;
}
.breadcrumb li {
@apply gap-1.5;
}
.breadcrumb a {
@apply transition-colors hover:text-foreground;
}
.breadcrumb [aria-current='page'] {
@apply font-normal text-foreground;
}
.breadcrumb li[aria-hidden='true'] > svg {
@apply size-3.5;
}
.breadcrumb li > span[aria-hidden='true'] {
@apply size-5 [&>svg]:size-4;
}
/* Command */
.command {
@apply bg-popover text-popover-foreground rounded-4xl! p-1;
}
.command-dialog > .command {
@apply bg-popover text-popover-foreground ring-foreground/5 rounded-4xl! ring-1 duration-100;
}
.command > header {
@apply m-1 mb-0 h-9 gap-0 rounded-3xl bg-input/30 px-3;
}
.command > header svg {
@apply size-4 opacity-50;
}
.command > header input {
@apply ps-1.5 text-base md:text-sm placeholder:text-muted-foreground;
}
.command [role='menu'] {
@apply max-h-72 scroll-py-1;
}
.command [role='menu']:not(:has([role='menuitem']:not([aria-hidden='true'])))::before {
@apply py-6 text-center text-sm;
}
.command [role='group'] {
@apply p-1 text-foreground;
}
.command [role='heading'] {
@apply text-muted-foreground px-3 py-2 text-xs font-medium;
}
.command [role='separator'] {
@apply bg-border/50 my-1 h-px;
}
.command [role='menuitem'] {
@apply gap-2 rounded-lg px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-4 in-[.command-dialog]:rounded-2xl;
}
.command [role='menuitem'].active {
@apply bg-muted text-foreground [&_svg]:text-foreground;
}
.command [data-shortcut] {
@apply text-muted-foreground text-xs tracking-widest;
}
.command [role='menuitem'].active [data-shortcut] {
@apply text-foreground;
}
/* Combobox */
.combobox > input[role='combobox'] {
@apply border-input 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 dark:aria-invalid:border-destructive/50 h-9 rounded-4xl border py-2 ps-3 pe-8 text-base md:text-sm transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px];
}
.combobox > svg,
.combobox-trigger-icon {
@apply text-muted-foreground end-3 top-1/2 size-4 -translate-y-1/2;
}
.combobox [data-popover] {
@apply bg-popover text-popover-foreground ring-foreground/5 max-h-72 gap-0 rounded-2xl p-0 shadow-2xl ring-1 duration-100;
}
.combobox [role='listbox'] {
@apply max-h-[min(18rem,var(--available-height,18rem))] scroll-py-1 overflow-y-auto p-1;
}
.combobox [role='listbox']:not(:has([data-value]:not([aria-hidden='true']))) {
@apply p-0;
}
.combobox [role='listbox']:not(:has([data-value]:not([aria-hidden='true'])))::before {
@apply px-3 py-2 text-center text-sm text-muted-foreground;
}
.combobox [role='heading'] {
@apply text-muted-foreground px-3.5 py-2.5 text-xs;
}
.combobox [role='option'] {
@apply gap-2.5 rounded-xl py-2 ps-3 pe-8 text-sm [&_svg:not([class*='size-'])]:size-4;
}
.combobox [role='option'].active,
.combobox [role='option']:focus-visible {
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
}
.combobox [role='group'] {
@apply scroll-my-1 p-1;
}
.combobox [role='separator'] {
@apply bg-border/50 -mx-1 my-1 h-px;
}
.combobox-chips {
@apply bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-[[aria-invalid=true]]:ring-destructive/20 dark:has-[[aria-invalid=true]]:ring-destructive/40 has-[[aria-invalid=true]]:border-destructive dark:has-[[aria-invalid=true]]:border-destructive/50 min-h-9 gap-1.5 rounded-4xl border bg-clip-padding px-1.5 py-1.5 text-sm transition-colors focus-within:ring-[3px] has-[[aria-invalid=true]]:ring-[3px];
}
.combobox-chips > input[role='combobox'] {
@apply text-base md:text-sm;
}
.combobox-chip {
@apply bg-muted-foreground/10 text-foreground h-5.5 gap-1 rounded-4xl px-2 text-xs font-medium has-[>.combobox-chip-remove]:pe-0;
}
.combobox-chip-remove {
@apply -ms-1 opacity-50 hover:opacity-100 [&_svg]:size-3.5;
}
.combobox [data-popover] > .input-group {
@apply m-1 mb-0 h-9 w-auto border-none bg-input/30 shadow-none focus-within:border-inherit focus-within:ring-0;
}
.combobox [data-popover] > input[role='combobox'] {
@apply mb-1 w-full;
}
/* Select */
.select:not(select) > button {
@apply border-input bg-input/30 dark:hover:bg-input/50 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:aria-invalid:border-destructive/50 h-9 data-[size=sm]:h-8 gap-1.5 rounded-4xl border px-3 py-2 text-sm transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4;
}
.select:not(select) > button > span {
@apply gap-1.5;
}
.select:not(select) > button > svg {
@apply text-muted-foreground size-4;
}
.select:not(select) [data-popover] {
@apply bg-popover text-popover-foreground ring-foreground/5 rounded-2xl p-1 shadow-2xl ring-1 duration-100;
}
.select:not(select) [role='listbox'] {
@apply scroll-py-1;
}
.select:not(select) [role='listbox']:not(:has([data-value]:not([aria-hidden='true'])))::before {
@apply py-6 text-center text-sm;
}
.select:not(select) [role='heading'] {
@apply text-muted-foreground px-3 py-2.5 text-xs;
}
.select:not(select) [role='option'] {
@apply gap-2.5 rounded-xl py-2 ps-3 pe-8 text-sm [&_svg:not([class*='size-'])]:size-4;
}
.select:not(select) [role='option'].active,
.select:not(select) [role='option']:focus-visible {
@apply bg-muted text-foreground [&_svg]:text-foreground;
}
.select:not(select) [role='group'] {
@apply scroll-my-1 p-1;
}
.select:not(select) [role='separator'] {
@apply bg-border/50 -mx-1 my-1 h-px;
}
/* Dialog */
.dialog::backdrop,
.alert-dialog::backdrop,
.command-dialog::backdrop {
@apply bg-black/80 backdrop-blur-xs duration-100;
}
.alert-dialog > * {
@apply bg-popover text-popover-foreground ring-foreground/5 max-w-xs gap-6 rounded-4xl p-6 ring-1 duration-100 sm:max-w-md;
}
.alert-dialog:is([data-size='sm']) > *,
.alert-dialog > [data-size='sm'] {
@apply sm:max-w-xs;
}
.dialog > * {
@apply bg-popover text-popover-foreground ring-foreground/5 max-w-[calc(100%-2rem)] gap-6 rounded-4xl p-6 text-sm ring-1 duration-100 sm:max-w-md;
}
.dialog > * > :is(button, form[method='dialog']) {
@apply top-4 end-4;
}
.dialog > * > header {
@apply gap-2;
}
.alert-dialog > * > header {
@apply gap-x-6 gap-y-1.5;
}
.alert-dialog > * > header > figure {
@apply bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-full [&>svg:not([class*='size-'])]:size-8;
}
.alert-dialog > * > footer,
.dialog > * > footer {
@apply gap-2;
}
.dialog > * > header > h2,
.dialog > * > [data-title] {
@apply text-base leading-none font-medium;
}
.alert-dialog > * > header > h2,
.alert-dialog > * > [data-title] {
@apply text-lg font-medium;
}
.dialog > * > header > p,
.dialog > * > [data-description] {
@apply text-muted-foreground text-sm leading-normal [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
}
.alert-dialog > * > header > p,
.alert-dialog > * > [data-description] {
@apply text-muted-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
}
/* Drawer */
.drawer::backdrop {
@apply bg-black/80 backdrop-blur-xs;
}
.drawer > * {
@apply before:bg-popover text-popover-foreground before:border-border bg-transparent p-4 text-sm before:absolute before:inset-2 before:-z-10 before:rounded-4xl before:border;
}
.drawer > * > header {
@apply gap-0.5 p-4 text-start md:gap-1.5;
}
.drawer:not([data-side]) > * > header,
.drawer[data-side='bottom'] > * > header,
.drawer[data-side='top'] > * > header {
@apply text-center;
}
.drawer > * > footer {
@apply gap-2 p-4;
}
.drawer > * > header > h2,
.drawer > * > [data-title] {
@apply text-lg font-semibold leading-none tracking-tight;
}
.drawer > * > header > p,
.drawer > * > [data-description] {
@apply text-muted-foreground text-sm;
}
/* Dropdown Menu */
.dropdown-menu > [data-popover] {
@apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 min-w-48 gap-0 overflow-x-hidden overflow-y-auto rounded-2xl p-1 shadow-2xl ring-1 duration-100;
}
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']) {
@apply gap-2.5 rounded-xl px-3 py-2 text-sm focus-visible:bg-accent focus-visible:text-accent-foreground [&_svg:not([class*='size-'])]:size-4;
}
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']).active {
@apply bg-muted text-foreground;
}
.dropdown-menu [data-variant='destructive'] {
@apply text-destructive;
}
.dropdown-menu [data-variant='destructive']:is(:focus-visible, .active) {
@apply bg-destructive/10 text-destructive dark:bg-destructive/20;
}
.dropdown-menu [data-variant='destructive'] svg {
@apply text-destructive;
}
.dropdown-menu :is([role='menuitemcheckbox'], [role='menuitemradio']) {
@apply py-2 pe-8 ps-3;
}
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio'])[data-inset],
.dropdown-menu [role='heading'][data-inset] {
@apply ps-9.5;
}
.dropdown-menu [data-indicator] {
@apply absolute end-2 flex items-center justify-center;
}
.dropdown-menu [role='heading'] {
@apply text-muted-foreground px-3 py-2.5 text-xs;
}
.dropdown-menu [role='separator'] {
@apply bg-border/50 -mx-1 my-1 h-px;
}
.dropdown-menu :is([data-shortcut], kbd:last-child, .kbd:last-child) {
@apply text-muted-foreground font-sans text-xs tracking-widest;
}
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):is(:focus-visible, .active) :is([data-shortcut], kbd:last-child, .kbd:last-child) {
@apply text-accent-foreground;
}
/* Popover */
[data-popover] {
@apply bg-popover text-popover-foreground ring-foreground/5 flex flex-col gap-4 rounded-2xl p-4 text-sm shadow-2xl ring-1 duration-100;
}
.popover > [data-popover] > header,
.popover > [data-popover] > [data-header] {
@apply flex flex-col gap-1 text-sm;
}
.popover > [data-popover] > header > :is(h1, h2, h3, h4, h5, h6),
.popover > [data-popover] > :is(h1, h2, h3, h4, h5, h6, [data-title]) {
@apply text-base font-medium;
}
.popover > [data-popover] > header > p,
.popover > [data-popover] > [data-description] {
@apply text-muted-foreground;
}
/* Card */
.card {
@apply ring-foreground/10 bg-card text-card-foreground overflow-hidden rounded-2xl text-sm ring-1 has-[>img:first-child]:pt-0 [&>img:first-child]:rounded-t-xl [&>img:last-child]:rounded-b-xl;
}
.card {
@apply gap-6 py-6;
}
.card[data-size='sm'] {
@apply gap-4 py-4;
}
.card > header {
@apply gap-2 rounded-t-xl px-6 [.border-b]:pb-6;
}
.card[data-size='sm'] > header {
@apply px-4 [.border-b]:pb-4;
}
.card > header > :is(h2, h3, [data-title], .card-title) {
@apply text-base font-medium;
}
.card > header > :is(p, [data-description], .card-description) {
@apply text-muted-foreground text-sm;
}
.card > section {
@apply px-6;
}
.card[data-size='sm'] > section {
@apply px-4;
}
.card > footer {
@apply rounded-b-xl px-6 [.border-t]:pt-6;
}
.card[data-size='sm'] > footer {
@apply px-4 [.border-t]:pt-4;
}
/* Chart */
.chart {
--chart-bar-radius: 6px;
}
.chart-tooltip {
@apply border-border/50 bg-background text-foreground gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl;
}
.chart-tooltip-title {
@apply font-medium;
}
.chart-legend-item {
@apply text-foreground;
}
.chart-legend-item[aria-pressed='false'] {
@apply text-muted-foreground;
}
/* Checkbox */
.field > input[type='checkbox']:not([role='switch']),
.input[type='checkbox']:not([role='switch']) {
@apply border-input dark:bg-input/30 checked:bg-primary checked:text-primary-foreground dark:checked:bg-primary checked:border-primary aria-invalid:checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[6px] border transition-shadow in-data-[disabled=true]:opacity-50 focus-visible:ring-[3px] aria-invalid:ring-[3px];
}
:is(.field > input[type='checkbox']:not([role='switch']), .input[type='checkbox']:not([role='switch'])):checked:after {
@apply size-3.5;
}
/* Radio */
[role='radiogroup'] {
@apply grid gap-3;
}
.field > input[type='radio'],
.input[type='radio'] {
@apply border-input dark:bg-input/30 checked:bg-primary checked:text-primary-foreground dark:checked:bg-primary checked:border-primary aria-invalid:checked:border-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 flex size-4 rounded-full focus-visible:ring-3 aria-invalid:ring-3;
}
:is(.field > input[type='radio'], .input[type='radio']):checked:before {
@apply bg-primary-foreground size-2;
}
/* Switch */
.field > input[type='checkbox'][role='switch'],
.input[type='checkbox'][role='switch'] {
@apply checked:bg-primary not-checked:bg-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:aria-invalid:border-destructive/50 dark:not-checked:bg-input/80 rounded-full border border-transparent focus-visible:ring-[3px] aria-invalid:ring-[3px];
}
:is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):not([data-size='sm']) {
@apply h-[18.4px] w-[32px];
}
:is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch'])[data-size='sm'] {
@apply h-[14px] w-[24px];
}
:is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):before {
@apply bg-background rounded-full;
}
html.dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):not(:checked):before {
@apply bg-foreground;
}
html.dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):checked:before {
@apply bg-primary-foreground;
}
:is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):not([data-size='sm']):before {
@apply size-4;
}
:is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch'])[data-size='sm']:before {
@apply size-3;
}
:is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):checked:not([data-size='sm']):before {
@apply translate-x-[calc(100%-2px)];
}
:is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):checked[data-size='sm']:before {
@apply translate-x-[calc(100%-2px)];
}
:is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):dir(rtl):checked:not([data-size='sm']):before {
@apply -translate-x-[calc(100%-2px)];
}
:is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):dir(rtl):checked[data-size='sm']:before {
@apply -translate-x-[calc(100%-2px)];
}
:is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):not(:checked):before {
@apply translate-x-0;
}
/* Field */
.fieldset {
@apply gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3;
}
.fieldset > legend {
@apply mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base;
}
.fieldset > :is([role='group'], [role='radiogroup']):not(.field),
.field > :is(fieldset, [role='group'], [role='radiogroup']):not(.field) {
@apply gap-7;
&[role='radiogroup'],
&:has(> .field > input[type='checkbox']:not([role='switch'])),
&:has(> .field > input[type='radio']),
&[data-slot='checkbox-group'],
&[data-slot='radio-group'] {
@apply gap-3;
}
}
:is(.fieldset, .field) > :is([role='group'], [role='radiogroup']):not(.field) > :is([role='group'], [role='radiogroup']):not(.field),
.field > fieldset:not(.field) > :is([role='group'], [role='radiogroup']):not(.field) {
@apply gap-4;
}
.field {
@apply data-invalid:text-destructive data-[invalid=true]:text-destructive gap-3;
}
.field > section {
@apply gap-1;
}
.field > label,
.field > section > label,
label:has(> .field) {
@apply has-[:checked]:bg-primary/5 has-[:checked]:border-primary/30 dark:has-[:checked]:border-primary/20 dark:has-[:checked]:bg-primary/10 gap-2 leading-snug in-data-[disabled=true]:opacity-50;
}
.field > label:has(input[type='radio']),
.field > label:has(input[type='checkbox']),
.field > label:has(input[role='switch']),
.field > label:has(> .field),
label:has(> .field) {
@apply rounded-xl border;
}
.field > label:has(input[type='radio']),
.field > label:has(input[type='checkbox']),
.field > label:has(input[role='switch']) {
@apply p-4;
}
:is(.field > label, label:has(> .field)) > .field {
@apply p-4;
}
.field h2,
.field h3 {
@apply gap-2 leading-snug text-sm font-medium in-data-[disabled=true]:opacity-50;
}
.fieldset legend + p,
.field > p,
.field section > p {
@apply text-muted-foreground text-start text-sm [[data-variant=legend]+&]:-mt-1.5;
}
.fieldset > legend[data-variant='label'] {
@apply mb-0;
}
.fieldset > legend:not([data-variant]) + p,
.fieldset > legend[data-variant='legend'] + p {
@apply -mt-1.5;
}
.field-separator {
@apply -my-2 h-5 text-sm in-data-[variant=outline]:-mb-2;
}
.field-separator > span {
@apply text-muted-foreground px-2;
}
.field [role="alert"] {
@apply text-destructive text-sm;
}
/* Input Group */
.input-group {
@apply h-9 has-[>textarea]:h-auto rounded-4xl border border-input bg-input/30 transition-colors focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-[3px] has-[[aria-invalid=true]]:ring-destructive/20 has-[>textarea]:rounded-xl dark:has-[[aria-invalid=true]]:ring-destructive/40;
}
.input-group:has(> :is(input, textarea, select, [data-control]):disabled) {
@apply opacity-50;
}
.input-group[data-orientation='vertical'] {
@apply rounded-2xl;
}
.input-group > :is(input, select, [data-control]) {
@apply px-3 py-1 text-base md:text-sm;
}
.input-group:not([data-orientation='vertical']):has(> :is([data-align='start'], [data-align='inline-start'])) > :is(input, select, [data-control]) {
@apply ps-1.5;
}
.input-group:not([data-orientation='vertical']):has(> :is([data-align='end'], [data-align='inline-end'])) > :is(input, select, [data-control]) {
@apply pe-1.5;
}
.input-group > textarea {
@apply px-3 py-2 text-base md:text-sm;
}
.input-group > :is(span, [role='group'], header, footer),
.input-group > :is(svg, kbd, .popover, .dropdown-menu) {
@apply gap-2 py-2 text-sm font-medium text-muted-foreground select-none [&>svg:not([class*='size-'])]:size-4;
}
.input-group > :is([data-align='start'], [data-align='inline-start']) {
@apply ps-3;
}
.input-group > :is([data-align='end'], [data-align='inline-end']) {
@apply pe-3;
}
.input-group > :is([data-align='start'], [data-align='inline-start']):has(> button) {
@apply -ms-1;
}
.input-group > :is([data-align='end'], [data-align='inline-end']):has(> button) {
@apply -me-1;
}
.input-group > :is([data-align='start'], [data-align='inline-start']):has(> kbd) {
@apply -ms-0.5;
}
.input-group > :is([data-align='end'], [data-align='inline-end']):has(> kbd) {
@apply -me-0.5;
}
.input-group[data-orientation='vertical'] > :is(header, footer, [role='group'], [data-align]) {
@apply px-3;
}
.input-group > [data-align='block-start'] {
@apply px-3 pt-2;
}
.input-group > [data-align='block-end'] {
@apply px-3 pb-2;
}
.input-group[data-orientation='vertical'] > :is(header[data-align='start'], [data-align='block-start']) {
@apply px-3 pt-3;
}
.input-group[data-orientation='vertical'] > :is(footer[data-align='end'], [data-align='block-end']) {
@apply px-3 pb-3;
}
.input-group[data-orientation='vertical']:has(> input) > :is(header[data-align='start'], [data-align='block-start']) {
@apply pt-3;
}
.input-group[data-orientation='vertical']:has(> input) > :is(footer[data-align='end'], [data-align='block-end']) {
@apply pb-3;
}
.input-group[data-orientation='vertical'] > :is(header[data-align='start'], [data-align='block-start']).border-b {
@apply pb-3;
}
.input-group[data-orientation='vertical'] > :is(footer[data-align='end'], [data-align='block-end']).border-t {
@apply pt-3;
}
.input-group > :is(kbd, span > kbd, [role='group'] > kbd, header > kbd, footer > kbd) {
@apply rounded-4xl bg-muted-foreground/10 px-1.5;
}
.input-group > :is(button, [role='group'] > button, header > button, footer > button) {
@apply gap-2 rounded-4xl text-sm shadow-none [&>svg:not([class*='size-'])]:size-3.5;
}
.input-group > :is(button, [role='group'] > button, header > button, footer > button):has(> svg):not(:has(> :not(svg))) {
@apply size-6 p-0;
}
/* Empty */
.empty {
@apply gap-4 rounded-lg border-dashed p-12;
}
.empty > header {
@apply gap-2;
}
.empty figure {
@apply mb-2;
}
.empty figure:has(> svg:only-child) {
@apply bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6;
}
.empty :is(h2, h3, h4) {
@apply text-lg font-medium tracking-tight;
}
.empty > header > p {
@apply text-muted-foreground text-sm/relaxed;
}
.empty > :is(section, footer) {
@apply gap-4 text-sm;
}
/* Item */
.item {
@apply rounded-2xl border text-sm;
}
.item:not([data-variant]),
.item[data-variant='default'] {
@apply border-transparent;
}
.item[data-variant='outline'] {
@apply border-border;
}
.item[data-variant='muted'] {
@apply bg-muted/50 border-transparent;
}
.item:not([data-size]),
.item[data-size='default'] {
@apply gap-3.5 px-4 py-3.5;
}
.item[data-size='sm'] {
@apply gap-3.5 px-3.5 py-3;
}
.item[data-size='xs'] {
@apply gap-2.5 px-3 py-2.5;
}
.item > figure {
@apply gap-2;
}
.item:has(p) > figure {
@apply translate-y-0.5 self-start;
}
.item > figure:has(> svg:only-child) {
@apply [&_svg:not([class*='size-'])]:size-4;
}
.item > figure:has(> img) {
@apply size-10 overflow-hidden rounded-lg;
}
.item[data-size='sm'] > figure:has(> img) {
@apply size-8;
}
.item[data-size='xs'] > figure:has(> img) {
@apply size-6 rounded-md;
}
.item > section {
@apply gap-1;
}
.item[data-size='xs'] > section {
@apply gap-0.5;
}
.item :is(h2, h3, h4) {
@apply gap-2 text-sm leading-snug font-medium underline-offset-4;
}
.item p {
@apply text-sm;
}
.item[data-size='xs'] p {
@apply text-sm;
}
.item > aside,
.item > :is(header, footer) {
@apply gap-2;
}
.item-group {
@apply gap-4;
}
.item-group:has(> .item[data-size='sm']) {
@apply gap-2.5;
}
.item-group:has(> .item[data-size='xs']) {
@apply gap-2;
}
.item-group > hr {
@apply my-2;
}
/* Kbd */
.kbd {
@apply bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3;
}
/* Label */
.field > label,
.label {
@apply gap-2 text-sm leading-none font-medium in-data-[disabled=true]:opacity-50 peer-disabled:opacity-50;
}
.field > section > label {
@apply gap-2 text-sm leading-snug font-medium in-data-[disabled=true]:opacity-50 peer-disabled:opacity-50;
}
/* Sidebar */
.sidebar > nav {
@apply bg-sidebar text-sidebar-foreground;
}
.sidebar > nav > header,
.sidebar > nav > footer {
@apply gap-2 p-2 [--radius:var(--radius-xl)];
}
.sidebar > nav > section {
@apply gap-2 [--radius:var(--radius-xl)];
}
.sidebar > nav [role=separator] {
@apply border-sidebar-border mx-2;
}
.sidebar > nav > section > [role=group] {
@apply p-2;
}
.sidebar > nav h3 {
@apply text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-3 text-xs font-medium focus-visible:ring-2 [&>svg]:size-4 transition-[margin,opacity] duration-200 ease-linear;
}
.sidebar > nav > section > [role=group] > ul {
@apply gap-1;
}
.sidebar > nav > section > [role=group] {
@apply text-sm;
}
.sidebar > nav li > :is(a, button),
.sidebar > nav li > details > summary {
@apply ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground gap-2 rounded-lg px-3 py-2 text-sm focus-visible:ring-2 text-left focus-visible:outline-hidden data-[open]:hover:bg-sidebar-accent data-[open]:hover:text-sidebar-accent-foreground [&>svg]:shrink-0 [&>svg]:size-4;
}
.sidebar > nav li > :is(a, button):is([aria-current=page], [data-active=true]),
.sidebar > nav li > details > summary:is([aria-current=page], [data-active=true]) {
@apply bg-sidebar-accent text-sidebar-accent-foreground font-medium;
}
.sidebar > nav li > :is(a, button):not([data-variant]),
.sidebar > nav li > details > summary:not([data-variant]),
.sidebar > nav li > :is(a, button)[data-variant=default],
.sidebar > nav li > details > summary[data-variant=default] {
@apply hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
}
.sidebar > nav li > :is(a, button)[data-variant=outline],
.sidebar > nav li > details > summary[data-variant=outline] {
@apply bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
}
.sidebar > nav li > :is(a, button):not([data-size]),
.sidebar > nav li > details > summary:not([data-size]),
.sidebar > nav li > :is(a, button)[data-size=default],
.sidebar > nav li > details > summary[data-size=default] {
@apply h-9 text-sm;
}
.sidebar > nav li > :is(a, button)[data-size=sm],
.sidebar > nav li > details > summary[data-size=sm] {
@apply h-8 text-xs;
}
.sidebar > nav li > :is(a, button)[data-size=lg],
.sidebar > nav li > details > summary[data-size=lg] {
@apply h-14 px-3 text-sm;
}
.sidebar > nav li > details > summary::after {
@apply size-4;
}
.sidebar > nav li > details::details-content {
@apply px-3.5;
}
.sidebar > nav ul ul {
@apply border-sidebar-border translate-x-px gap-1 border-s px-2.5 py-0.5 rtl:-translate-x-px;
}
.sidebar > nav ul ul > li > :is(a, button),
.sidebar > nav ul ul > li > details > summary {
@apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 text-sm focus-visible:ring-2 [&>svg]:size-4;
}
/* Progress */
.progress {
@apply bg-muted h-3 rounded-4xl;
}
.progress > span {
@apply bg-primary;
}
/* Skeleton */
.skeleton {
@apply bg-muted rounded-xl;
}
/* Table */
.table-container {
@apply relative w-full overflow-x-auto;
}
.table {
@apply w-full caption-bottom text-sm;
}
.table thead {
@apply [&_tr]:border-b;
}
.table tbody {
@apply [&_tr:last-child]:border-0;
}
.table tfoot {
@apply bg-muted/50 border-t font-medium [&>tr]:last:border-b-0;
}
.table tr {
@apply hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors;
}
.table th {
@apply text-foreground h-12 px-3 text-start align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pe-0;
}
.table td {
@apply p-3 align-middle whitespace-nowrap [&:has([role=checkbox])]:pe-0;
}
.table caption {
@apply text-muted-foreground mt-4 text-sm;
}
/* Tooltip */
[data-tooltip]::before {
@apply bg-foreground text-background rounded-2xl px-3 py-1.5 text-xs;
}
[data-tooltip][data-arrow]::after {
@apply bg-foreground absolute z-[60] size-2.5 rotate-45 rounded-[2px];
}
[data-tooltip][data-arrow][data-side='left']::after {
@apply translate-x-[-1.5px];
}
[data-tooltip][data-arrow][data-side='right']::after {
@apply translate-x-[1.5px];
}
/* Toast */
.toast-content {
@apply bg-popover text-popover-foreground border shadow-lg rounded-2xl;
}
/* Slider */
.field > input[type='range'],
.input[type='range'] {
@apply h-5;
--slider-track-height: 0.75rem;
--slider-thumb-size: 1rem;
}
:is(.field > input[type='range'], .input[type='range'])::-webkit-slider-runnable-track {
@apply bg-muted h-3 rounded-4xl;
}
:is(.field > input[type='range'], .input[type='range'])::-moz-range-track {
@apply bg-muted h-3 rounded-4xl;
}
:is(.field > input[type='range'], .input[type='range'])::-ms-track {
@apply bg-muted h-3 rounded-4xl;
}
:is(.field > input[type='range'], .input[type='range'])::-ms-fill-lower,
:is(.field > input[type='range'], .input[type='range'])::-ms-fill-upper {
@apply rounded-[inherit];
}
:is(.field > input[type='range'], .input[type='range'])::-webkit-slider-thumb {
@apply border-primary ring-ring/50 size-4 rounded-4xl border bg-white shadow-sm transition-colors -mt-[calc((var(--slider-thumb-size)-var(--slider-track-height))/2)];
}
:is(.field > input[type='range'], .input[type='range'])::-moz-range-thumb {
@apply border-primary ring-ring/50 size-4 rounded-4xl border bg-white shadow-sm transition-colors;
}
:is(.field > input[type='range'], .input[type='range'])::-ms-thumb {
@apply border-primary ring-ring/50 size-4 rounded-4xl border bg-white shadow-sm transition-colors;
}
/* States go before the thumb pseudo-element so they still apply with native CSS nesting. */
@media (hover: hover) {
:is(.field > input[type='range'], .input[type='range']):hover::-webkit-slider-thumb {
@apply ring-4;
}
:is(.field > input[type='range'], .input[type='range']):hover::-moz-range-thumb {
@apply ring-4;
}
:is(.field > input[type='range'], .input[type='range']):hover::-ms-thumb {
@apply ring-4;
}
}
:is(.field > input[type='range'], .input[type='range']):focus-visible::-webkit-slider-thumb {
@apply ring-4 outline-hidden;
}
:is(.field > input[type='range'], .input[type='range']):focus-visible::-moz-range-thumb {
@apply ring-4 outline-hidden;
}
:is(.field > input[type='range'], .input[type='range']):focus-visible::-ms-thumb {
@apply ring-4 outline-hidden;
}
}