Skip to main content

SOURCE

Constant SOURCE 

Source
pub const SOURCE: &str = "@custom-variant dark (&:is(.dark *));\n\n:root {\n  --radius: 0.625rem;\n  --background: oklch(1 0 0);\n  --foreground: oklch(0.145 0 0);\n  --card: oklch(1 0 0);\n  --card-foreground: oklch(0.145 0 0);\n  --popover: oklch(1 0 0);\n  --popover-foreground: oklch(0.145 0 0);\n  --primary: oklch(0.205 0 0);\n  --primary-foreground: oklch(0.985 0 0);\n  --secondary: oklch(0.97 0 0);\n  --secondary-foreground: oklch(0.205 0 0);\n  --muted: oklch(0.97 0 0);\n  --muted-foreground: oklch(0.556 0 0);\n  --accent: oklch(0.97 0 0);\n  --accent-foreground: oklch(0.205 0 0);\n  --destructive: oklch(0.577 0.245 27.325);\n  --border: oklch(0.922 0 0);\n  --input: oklch(0.922 0 0);\n  --ring: oklch(0.708 0 0);\n  --chart-1: oklch(0.646 0.222 41.116);\n  --chart-2: oklch(0.6 0.118 184.704);\n  --chart-3: oklch(0.398 0.07 227.392);\n  --chart-4: oklch(0.828 0.189 84.429);\n  --chart-5: oklch(0.769 0.188 70.08);\n  --sidebar: oklch(0.985 0 0);\n  --sidebar-foreground: oklch(0.145 0 0);\n  --sidebar-primary: oklch(0.205 0 0);\n  --sidebar-primary-foreground: oklch(0.985 0 0);\n  --sidebar-accent: oklch(0.97 0 0);\n  --sidebar-accent-foreground: oklch(0.205 0 0);\n  --sidebar-border: oklch(0.922 0 0);\n  --sidebar-ring: oklch(0.708 0 0);\n  --sidebar-width: 16rem;\n  --sidebar-mobile-width: 18rem;\n  --scrollbar-track: transparent;\n  --scrollbar-thumb: rgba(0, 0, 0, 0.3);\n  --scrollbar-width: 6px;\n  --scrollbar-radius: 6px;\n  --chevron-down-icon: url(\'data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"oklch(0.556 0 0)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-chevron-down-icon lucide-chevron-down\"><path d=\"m6 9 6 6 6-6\"/></svg>\'); /* --muted-foreground */\n  --chevron-down-icon-50: url(\'data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"oklch(0.556 0 0 / 0.5)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-chevron-down-icon lucide-chevron-down\"><path d=\"m6 9 6 6 6-6\"/></svg>\'); /* --muted-foreground + 50% opacity */\n  --check-icon: url(\'data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"oklch(0.556 0 0)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check-icon lucide-check\"><path d=\"M20 6 9 17l-5-5\"/></svg>\'); /* --muted-foreground */\n}\n\n.dark {\n  --background: oklch(0.145 0 0);\n  --foreground: oklch(0.985 0 0);\n  --card: oklch(0.205 0 0);\n  --card-foreground: oklch(0.985 0 0);\n  --popover: oklch(0.269 0 0);\n  --popover-foreground: oklch(0.985 0 0);\n  --primary: oklch(0.922 0 0);\n  --primary-foreground: oklch(0.205 0 0);\n  --secondary: oklch(0.269 0 0);\n  --secondary-foreground: oklch(0.985 0 0);\n  --muted: oklch(0.269 0 0);\n  --muted-foreground: oklch(0.708 0 0);\n  --accent: oklch(0.371 0 0);\n  --accent-foreground: oklch(0.985 0 0);\n  --destructive: oklch(0.704 0.191 22.216);\n  --border: oklch(1 0 0 / 10%);\n  --input: oklch(1 0 0 / 15%);\n  --ring: oklch(0.556 0 0);\n  --chart-1: oklch(0.488 0.243 264.376);\n  --chart-2: oklch(0.696 0.17 162.48);\n  --chart-3: oklch(0.769 0.188 70.08);\n  --chart-4: oklch(0.627 0.265 303.9);\n  --chart-5: oklch(0.645 0.246 16.439);\n  --sidebar: oklch(0.205 0 0);\n  --sidebar-foreground: oklch(0.985 0 0);\n  --sidebar-primary: oklch(0.488 0.243 264.376);\n  --sidebar-primary-foreground: oklch(0.985 0 0);\n  --sidebar-accent: oklch(0.269 0 0);\n  --sidebar-accent-foreground: oklch(0.985 0 0);\n  --sidebar-border: oklch(1 0 0 / 10%);\n  --sidebar-ring: oklch(0.439 0 0);\n  --scrollbar-thumb: rgba(255, 255, 255, 0.3);\n  --chevron-down-icon: url(\'data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"oklch(0.708 0 0)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-chevron-down-icon lucide-chevron-down\"><path d=\"m6 9 6 6 6-6\"/></svg>\'); /* --muted-foreground */\n  --chevron-down-icon-50: url(\'data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"oklch(0.708 0 0 / 0.5)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-chevron-down-icon lucide-chevron-down\"><path d=\"m6 9 6 6 6-6\"/></svg>\'); /* --muted-foreground + 50% opacity */\n  --check-icon: url(\'data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"oklch(0.708 0 0)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-check-icon lucide-check\"><path d=\"M20 6 9 17l-5-5\"/></svg>\');/* --muted-foreground */\n  color-scheme: dark;\n}\n\n@theme {\n  --radius-sm: calc(var(--radius) - 4px);\n  --radius-md: calc(var(--radius) - 2px);\n  --radius-lg: var(--radius);\n  --radius-xl: calc(var(--radius) + 4px);\n  --color-background: var(--background);\n  --color-foreground: var(--foreground);\n  --color-card: var(--card);\n  --color-card-foreground: var(--card-foreground);\n  --color-popover: var(--popover);\n  --color-popover-foreground: var(--popover-foreground);\n  --color-primary: var(--primary);\n  --color-primary-foreground: var(--primary-foreground);\n  --color-secondary: var(--secondary);\n  --color-secondary-foreground: var(--secondary-foreground);\n  --color-muted: var(--muted);\n  --color-muted-foreground: var(--muted-foreground);\n  --color-accent: var(--accent);\n  --color-accent-foreground: var(--accent-foreground);\n  --color-destructive: var(--destructive);\n  --color-border: var(--border);\n  --color-input: var(--input);\n  --color-ring: var(--ring);\n  --color-chart-1: var(--chart-1);\n  --color-chart-2: var(--chart-2);\n  --color-chart-3: var(--chart-3);\n  --color-chart-4: var(--chart-4);\n  --color-chart-5: var(--chart-5);\n  --color-sidebar: var(--sidebar);\n  --color-sidebar-foreground: var(--sidebar-foreground);\n  --color-sidebar-primary: var(--sidebar-primary);\n  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);\n  --color-sidebar-accent: var(--sidebar-accent);\n  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);\n  --color-sidebar-border: var(--sidebar-border);\n  --color-sidebar-ring: var(--sidebar-ring);\n}\n\n@layer base {\n  * {\n    @apply border-border outline-ring/50;\n  }\n  html {\n    @apply scroll-smooth;\n  }\n  body {\n    @apply bg-background text-foreground overscroll-none antialiased;\n  }\n  .scrollbar {\n    scrollbar-width: thin;\n    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);\n\n    &::-webkit-scrollbar {\n      width: var(--scrollbar-width);\n    }\n    &::-webkit-scrollbar-track {\n      background: var(--scrollbar-track);\n    }\n    &::-webkit-scrollbar-thumb {\n      background: var(--scrollbar-thumb);\n      border-radius: var(--scrollbar-radius);\n    }\n  }\n}\n\n/* Alert */\n@layer components {\n  .alert,\n  .alert-destructive {\n    @apply relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[--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;\n    \n    > h2,\n    > h3,\n    > h4,\n    > h5,\n    > h6,\n    > strong,\n    > [data-title] {\n      @apply col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight;\n    }\n    > section {\n      @apply text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed;\n\n      ul {\n        @apply list-inside list-disc text-sm;\n      }\n    }\n  }\n  .alert {\n    @apply bg-card text-card-foreground;\n  }\n  .alert-destructive {\n    @apply text-destructive bg-card [&>svg]:text-current;\n\n    > section {\n      @apply text-destructive;\n    }\n  }\n}\n\n/* Badge */\n@layer components {\n  .badge,\n  .badge-primary,\n  .badge-secondary,\n  .badge-destructive,\n  .badge-outline {\n    @apply inline-flex items-center justify-center rounded-full border px-2 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;\n  }\n  .badge,\n  .badge-primary {\n    @apply border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90;\n  }\n  .badge-secondary {\n    @apply border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90;\n  }\n  .badge-destructive {\n    @apply border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60;\n  }\n  .badge-outline {\n    @apply text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground;\n  }\n}\n\n/* Button */\n@layer components {\n  .btn,\n  .btn-primary,\n  .btn-secondary,\n  .btn-outline,\n  .btn-ghost,\n  .btn-link,\n  .btn-destructive,\n  .btn-sm,\n  .btn-sm-primary,\n  .btn-sm-secondary,\n  .btn-sm-outline,\n  .btn-sm-ghost,\n  .btn-sm-link,\n  .btn-sm-destructive,\n  .btn-lg,\n  .btn-lg-primary,\n  .btn-lg-secondary,\n  .btn-lg-outline,\n  .btn-lg-ghost,\n  .btn-lg-link,\n  .btn-lg-destructive,\n  .btn-icon,\n  .btn-icon-primary,\n  .btn-icon-secondary,\n  .btn-icon-outline,\n  .btn-icon-ghost,\n  .btn-icon-link,\n  .btn-icon-destructive,\n  .btn-sm-icon,\n  .btn-sm-icon-primary,\n  .btn-sm-icon-secondary,\n  .btn-sm-icon-outline,\n  .btn-sm-icon-ghost,\n  .btn-sm-icon-link,\n  .btn-sm-icon-destructive,\n  .btn-lg-icon,\n  .btn-lg-icon-primary,\n  .btn-lg-icon-secondary,\n  .btn-lg-icon-outline,\n  .btn-lg-icon-ghost,\n  .btn-lg-icon-link,\n  .btn-lg-icon-destructive {\n    @apply inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-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 cursor-pointer rounded-md;\n  }\n  .btn,\n  .btn-primary,\n  .btn-secondary,\n  .btn-outline,\n  .btn-ghost,\n  .btn-link,\n  .btn-destructive {\n    @apply gap-2 h-9 px-4 py-2 has-[>svg]:px-3;\n  }\n  .btn-icon,\n  .btn-icon-primary,\n  .btn-icon-secondary,\n  .btn-icon-outline,\n  .btn-icon-ghost,\n  .btn-icon-link,\n  .btn-icon-destructive {\n    @apply size-9;\n  }\n  .btn-sm,\n  .btn-sm-primary,\n  .btn-sm-secondary,\n  .btn-sm-outline,\n  .btn-sm-ghost,\n  .btn-sm-link,\n  .btn-sm-destructive {\n    @apply gap-1.5 h-8 px-3 has-[>svg]:px-2.5;\n  }\n  .btn-sm-icon,\n  .btn-sm-icon-primary,\n  .btn-sm-icon-secondary,\n  .btn-sm-icon-outline,\n  .btn-sm-icon-ghost,\n  .btn-sm-icon-link,\n  .btn-sm-icon-destructive {\n    @apply size-8;\n  }\n  .btn-lg,\n  .btn-lg-primary,\n  .btn-lg-secondary,\n  .btn-lg-outline,\n  .btn-lg-ghost,\n  .btn-lg-link,\n  .btn-lg-destructive {\n    @apply gap-2 h-10 px-6 has-[>svg]:px-4;\n  }\n  .btn-lg-icon,\n  .btn-lg-icon-primary,\n  .btn-lg-icon-secondary,\n  .btn-lg-icon-outline,\n  .btn-lg-icon-ghost,\n  .btn-lg-icon-link,\n  .btn-lg-icon-destructive {\n    @apply size-10;\n  }\n  .btn,\n  .btn-primary,\n  .btn-sm,\n  .btn-sm-primary,\n  .btn-lg,\n  .btn-lg-primary,\n  .btn-icon,\n  .btn-icon-primary,\n  .btn-sm-icon,\n  .btn-sm-icon-primary,\n  .btn-lg-icon,\n  .btn-lg-icon-primary {  \n    @apply bg-primary text-primary-foreground shadow-xs hover:bg-primary/90;\n    &[aria-pressed=\'true\'] {\n      @apply bg-primary/90;\n    }\n  }\n  .btn-secondary,\n  .btn-sm-secondary,\n  .btn-lg-secondary,\n  .btn-icon-secondary,\n  .btn-sm-icon-secondary,\n  .btn-lg-icon-secondary {\n    @apply bg-secondary text-secondary-foreground shadow-xs;\n    &:hover,\n    &[aria-pressed=\'true\'] {\n      @apply bg-secondary/80;\n    }\n  }\n  .btn-outline,\n  .btn-sm-outline,\n  .btn-lg-outline,\n  .btn-icon-outline,\n  .btn-sm-icon-outline,\n  .btn-lg-icon-outline {\n    @apply border bg-background shadow-xs dark:bg-input/30 dark:border-input;\n    &:hover,\n    &[aria-pressed=\'true\'] {\n      @apply bg-accent text-accent-foreground dark:bg-accent/50;\n    }\n  }\n  .btn-ghost,\n  .btn-sm-ghost,\n  .btn-lg-ghost,\n  .btn-icon-ghost,\n  .btn-sm-icon-ghost,\n  .btn-lg-icon-ghost {\n    &:hover,\n    &[aria-pressed=\'true\'] {\n      @apply bg-accent text-accent-foreground dark:bg-accent/50;\n    }\n  }\n  .btn-link,\n  .btn-sm-link,\n  .btn-lg-link,\n  .btn-icon-link,\n  .btn-sm-icon-link,\n  .btn-lg-icon-link {\n    @apply text-primary underline-offset-4;\n    &:hover,\n    &[aria-pressed=\'true\'] {\n      @apply hover:underline;\n    }\n  }\n  .btn-destructive,\n  .btn-sm-destructive,\n  .btn-lg-destructive,\n  .btn-icon-destructive,\n  .btn-sm-icon-destructive,\n  .btn-lg-icon-destructive {\n    @apply bg-destructive text-white shadow-xs focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60;\n    &:hover,\n    &[aria-pressed=\'true\'] {\n      @apply bg-destructive/90 dark:bg-destructive/50;\n    }\n  }\n}\n\n/* Button Group */\n@layer components {\n  .button-group {\n    @apply inline-flex w-fit items-stretch;\n    /* isolate */\n    \n    > *:focus-visible,\n    > :is(.dropdown-menu, .popover, .select) > button:focus-visible {\n      @apply relative z-10;\n    }\n\n    > hr[role=\'separator\'] {\n      @apply w-0 h-auto self-stretch border border-input shrink-0 m-0;\n    }\n\n    &:not([data-orientation=\'vertical\']) {\n      > *:not(:first-child),\n      > :is(.dropdown-menu, .popover, .select):not(:first-child) > button {\n        @apply rounded-l-none border-l-0;\n      }\n      > *:not(:last-child),\n      > :is(.dropdown-menu, .popover, .select):not(:last-child) > button {\n        @apply rounded-r-none;\n      }\n    }  \n    &[data-orientation=\'vertical\'] {\n      @apply flex-col;\n\n      > hr[role=\'separator\'] {\n        @apply w-auto h-px;\n      }\n      \n      > *:not(:first-child),\n      > :is(.dropdown-menu, .popover, .select):not(:first-child) > button {\n        @apply rounded-t-none border-t-0;\n      }\n      > *:not(:last-child),\n      > :is(.dropdown-menu, .popover, .select):not(:last-child) > button {\n        @apply rounded-b-none;\n      }\n    }\n  }\n}\n\n/* Card */\n@layer components {\n  .card {\n    @apply bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm;\n\n    > header {\n      @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;\n      /* TODO: CLEAN has-data-[slot=card-action] */\n\n      h2 {\n        @apply leading-none font-semibold;\n      }\n      p {\n        @apply text-muted-foreground text-sm;\n      }\n    }\n    > section {\n      @apply px-6;\n    }\n    > footer {\n      @apply flex items-center px-6 [.border-t]:pt-6;\n    }\n  }\n}\n\n/* Checkbox */\n@layer components {\n  :is(.form, .field) input[type=\'checkbox\']:not([role=\'switch\']),\n  .input[type=\'checkbox\']:not([role=\'switch\']) {\n    @apply appearance-none border-input dark:bg-input/30 checked:bg-primary dark:checked:bg-primary checked:border-primary 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 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50;\n    \n    &:checked:after {\n      @apply content-[\'\'] block size-3.5 bg-primary-foreground;\n      @apply mask-(--check-icon) mask-size-[0.875rem] mask-no-repeat mask-center;\n    }\n  }\n}\n\n/* Collapsible */\n@layer components {\n  details {\n    &::details-content {\n      block-size: 0;\n      @apply block opacity-0 transition-discrete transition-all;\n    }\n    &[open]::details-content {\n      block-size: auto;\n      block-size: calc-size(auto, size);\n      @apply opacity-100;\n    }\n    summary {\n      @apply inline-flex items-center cursor-pointer;\n    }\n  }\n  details > summary::-webkit-details-marker {\n    display: none;\n  }\n}\n\n/* Command */\n@layer components {\n  .command-dialog {\n    @apply inset-y-0 opacity-0 transition-all transition-discrete;\n\n    &:is([open],:popover-open) {\n      @apply opacity-100;\n\n      &::backdrop {\n        @apply opacity-100;\n      }\n      > * {\n        @apply scale-100;\n      }\n\n      @starting-style {\n        @apply opacity-0;\n\n        &::backdrop {\n          @apply opacity-0;\n        }\n        > * {\n          @apply scale-95;\n        }\n      }\n    }\n    &::backdrop {\n      @apply bg-black/50 opacity-0 transition-all transition-discrete;\n    }\n    > * {\n      @apply bg-background fixed top-[50%] left-[50%] z-50 flex flex-col w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-lg border shadow-lg sm:max-w-lg max-h-[min(640px,calc(100%-2rem))];\n      @apply transition-all scale-95;\n\n      > button,\n      > form[method=\'dialog\'] {\n        @apply absolute top-4 right-4;\n      }\n      > button,\n      > form[method=\'dialog\'] > button {\n        @apply ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground  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;\n      }\n    }\n\n    .command {\n      > header input {\n        @apply h-12;\n      }\n      [role=\'menu\'] {\n        @apply px-2;\n\n        [role=\'menuitem\'] {\n          @apply py-3 px-2 [&_svg]:size-5;\n        }\n        [role=\'heading\'] {\n          @apply px-2 py-1.5 font-medium text-muted-foreground;\n        }\n      }\n    }\n  }\n\n  .command {\n    > header {\n      @apply flex items-center border-b px-3 gap-2;\n\n      svg {\n        @apply size-4 shrink-0 opacity-50;\n      }\n      input {\n        @apply placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50;\n      }\n    }\n    [role=\'menu\'] {\n      @apply max-h-75 overflow-y-auto overflow-x-hidden p-1;\n\n      [role=\'menuitem\'] {\n        @apply aria-hidden:hidden relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none aria-disabled:opacity-50 aria-disabled:pointer-events-none disabled:opacity-50 disabled:pointer-events-none w-full truncate [&_svg:not([class*=\'text-\'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4;\n\n        &.active {\n          @apply bg-accent text-accent-foreground;\n        }\n      }\n      [role=\'heading\'] {\n        @apply text-muted-foreground flex px-2 py-1.5 text-xs font-medium;\n      }\n      [role=\'group\']:not(:has([role=\'menuitem\']:not([aria-hidden=\'true\']))) {\n        @apply hidden;\n      }\n      [role=\'separator\'] {\n        @apply border-border -mx-1 my-1;\n      }\n      &:not(:has([role=\'menuitem\']:not([aria-hidden=\'true\'])))::before {\n        @apply flex items-center justify-center py-6 px-3 text-sm truncate -m-1;\n      }\n      &[data-empty]:not(:has([role=\'menuitem\']:not([aria-hidden=\'true\'])))::before {\n        @apply content-[attr(data-empty)];\n      }\n      &:not([data-empty]):not(:has([role=\'menuitem\']:not([aria-hidden=\'true\'])))::before {\n        @apply content-[\'No_results_found\'];\n      }\n    }\n    &:not([data-command-initialized]) [role=\'menuitem\'] {\n      @apply hover:bg-accent hover:text-accent-foreground;\n    }\n    &:has(> header input:not(:placeholder-shown)) [role=\'separator\'] {\n      @apply hidden;\n    }\n  }\n}\n\n/* Dialog */\n@layer components {\n  .dialog {\n    @apply inset-y-0 opacity-0 transition-all transition-discrete;\n\n    &:is([open],:popover-open) {\n      @apply opacity-100;\n\n      &::backdrop {\n        @apply opacity-100;\n      }\n      > * {\n        @apply scale-100;\n      }\n\n      @starting-style {\n        @apply opacity-0;\n\n        &::backdrop {\n          @apply opacity-0;\n        }\n        > * {\n          @apply scale-95;\n        }\n      }\n    }\n    &::backdrop {\n      @apply bg-black/50 opacity-0 transition-all transition-discrete;\n    }\n    > * {\n      @apply bg-background fixed top-[50%] left-[50%] z-50 flex flex-col w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg max-h-[calc(100%-2rem)];\n      @apply transition-all scale-95;\n\n      > header {\n        @apply flex flex-col gap-2 text-center sm:text-left;\n\n        > h2 {\n          @apply text-lg leading-none font-semibold;\n        }\n        > p {\n          @apply text-muted-foreground text-sm;\n        }\n      }\n      > section {\n        @apply flex-1 -mx-6 px-6;\n      }\n      > footer {\n        @apply flex flex-col-reverse gap-2 sm:flex-row sm:justify-end;\n      }\n      > button,\n      > form[method=\'dialog\'] {\n        @apply absolute top-4 right-4;\n      }\n      > button,\n      > form[method=\'dialog\'] > button {\n        @apply ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground  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;\n      }\n    }\n  }\n}\n\n/* Dropdown Menu */\n@layer components {\n  .dropdown-menu {\n    @apply relative inline-flex;\n\n    [data-popover] {\n      @apply p-1;\n      min-width: anchor-size(width);\n\n      [role=\'menuitem\'],\n      [role=\'menuitemcheckbox\'],\n      [role=\'menuitemradio\'] {\n        @apply aria-hidden:hidden [&_svg]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none [&_svg]:shrink-0 [&_svg]:size-4 aria-disabled:opacity-50 aria-disabled:pointer-events-none disabled:opacity-50 disabled:pointer-events-none w-full truncate;\n\n        &:not([aria-disabled=\'true\']) {\n          @apply focus-visible:bg-accent focus-visible:text-accent-foreground;\n        }\n\n        &.active {\n          @apply bg-accent text-accent-foreground;\n        }\n      }\n      [role=\'menu\'] [role=\'heading\'] {\n        @apply flex px-2 py-1.5 text-sm font-medium;\n      }\n      [role=\'separator\'] {\n        @apply border-border -mx-1 my-1;\n      }\n    }\n    &:not([data-dropdown-menu-initialized]) [data-popover] {\n      [role=\'menuitem\'],\n      [role=\'menuitemcheckbox\'],\n      [role=\'menuitemradio\'] {\n        @apply hover:bg-accent hover:text-accent-foreground;\n      }\n    }\n  }\n}\n\n/* Field */\n@layer components {\n  .fieldset {\n    @apply flex flex-col gap-6;\n\n    > legend {\n      @apply text-base font-medium mb-3;\n    }\n  }\n  .field {\n    @apply flex flex-col w-full gap-3 data-[invalid=true]:text-destructive *:w-full [&>.sr-only]:w-auto;\n\n    h2,\n    h3 {\n      @apply flex w-fit items-center gap-2 text-sm leading-snug font-medium;\n    }\n    [role=\"alert\"] {\n      @apply text-sm text-destructive font-normal;\n      \n      ul {\n        @apply ml-4 flex list-disc flex-col gap-1;\n      }\n    }\n    section {\n      @apply flex flex-1 flex-col gap-1.5 leading-snug;\n    }\n\n    &[data-orientation=\'horizontal\'] {\n      @apply flex-row items-center [&>label]:flex-auto has-[>section]:items-start has-[>section]:[&>[type=checkbox],[type=radio]]:mt-px [&_p]:text-balance;\n    }\n  }\n  .fieldset legend + p,\n  .field > p,\n  .field section > p {\n    @apply text-muted-foreground text-sm leading-normal font-normal [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4;\n  }\n  .fieldset legend + p {\n    @apply -mt-1.5;\n  }\n  .field > p {\n    @apply last:mt-0 nth-last-2:-mt-1;\n  }\n}\n\n/* Input */\n@layer components {\n  :is(.form, .field) input[type=\'text\']:not(:is(.select [data-popover] > header input[role=\'combobox\'], .command > header input, .dialog > * > header input)),\n  :is(.form, .field) input[type=\'email\'],\n  :is(.form, .field) input[type=\'password\'],\n  :is(.form, .field) input[type=\'number\'],\n  :is(.form, .field) input[type=\'file\'],\n  :is(.form, .field) input[type=\'tel\'],\n  :is(.form, .field) input[type=\'url\'],\n  :is(.form, .field) input[type=\'search\']:not(:is(.select [data-popover] > header input[role=\'combobox\'], .command > header input, .dialog > * > header input)),\n  :is(.form, .field) input[type=\'date\'],\n  :is(.form, .field) input[type=\'datetime-local\'],\n  :is(.form, .field) input[type=\'month\'],\n  :is(.form, .field) input[type=\'week\'],\n  :is(.form, .field) input[type=\'time\'],\n  .input[type=\'text\'],\n  .input[type=\'email\'],\n  .input[type=\'password\'],\n  .input[type=\'number\'],\n  .input[type=\'file\'],\n  .input[type=\'tel\'],\n  .input[type=\'url\'],\n  .input[type=\'search\'],\n  .input[type=\'date\'],\n  .input[type=\'datetime-local\'],\n  .input[type=\'month\'],\n  .input[type=\'week\'],\n  .input[type=\'time\'] {\n    @apply appearance-none file:text-foreground placeholder:text-muted-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;\n    @apply focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px];\n    @apply aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive;\n  }\n}\n\n/* Kbd */\n@layer components {\n  .kbd {\n    @apply bg-muted text-muted-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;\n  }\n}\n\n/* Label */\n@layer components {\n  :is(.form, .field) label,\n  .label {\n    @apply flex items-center gap-2 text-sm leading-none font-medium select-none peer-disabled:pointer-events-none peer-disabled:opacity-50;\n\n     &:has(>*:disabled),\n     &:has(+*:disabled) {\n       @apply opacity-50 pointer-events-none;\n     }\n  }\n}\n\n/* Popover */\n@layer components {\n  [data-popover] {\n    @apply absolute bg-popover text-popover-foreground overflow-x-hidden overflow-y-auto rounded-md border shadow-md z-50 visible opacity-100 scale-100 min-w-full w-max transition-all;\n\n    &[aria-hidden=\'true\'] {\n      @apply invisible opacity-0 scale-95;\n      \n      &:not([data-side]),\n      &[data-side=\'bottom\'] {\n        @apply -translate-y-2;\n      }\n      &[data-side=\'top\'] {\n        @apply translate-y-2;\n      }\n      &[data-side=\'left\'] {\n        @apply translate-x-2;\n      }\n      &[data-side=\'right\'] {\n        @apply -translate-x-2;\n      }\n    }\n    &:not([data-side]),\n    &[data-side=\'bottom\'] {\n      @apply mt-1 top-full;\n    }\n    &[data-side=\'top\'] {\n      @apply mb-1 bottom-full;\n    }\n    &[data-side=\'left\'] {\n      @apply mr-1 right-full;\n    }\n    &[data-side=\'right\'] {\n      @apply ml-1 left-full;\n    }\n    &:not([data-side]),\n    &[data-side=\'bottom\'],\n    &[data-side=\'top\'] {\n      &:not([data-align]),\n      &[data-align=\'start\'] {\n        @apply left-0;\n      }\n      &[data-align=\'end\'] {\n        @apply right-0;\n      }\n      &[data-align=\'center\'] {\n        @apply left-1/2 -translate-x-1/2;\n      }\n    }\n    &[data-side=\'left\'],\n    &[data-side=\'right\'] {\n      &:not([data-align]),\n      &[data-align=\'start\'] {\n        @apply top-0;\n      }\n      &[data-align=\'end\'] {\n        @apply bottom-0;\n      }\n      &[data-align=\'center\'] {\n        @apply top-1/2 -translate-y-1/2;\n      }\n    }\n  }\n  .popover {\n    @apply relative inline-flex;\n\n    [data-popover] {\n      @apply p-4;\n    }\n  } \n}\n\n/* Radio */\n@layer components {\n  :is(.form, .field) input[type=\'radio\'],\n  .input[type=\'radio\'] {\n    @apply appearance-none border-input text-primary 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 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 relative;\n\n    &:checked:before {\n      @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 content-[\'\'] rounded-full size-2 bg-primary;\n    }\n  }\n}\n\n/* Range */\n@layer components {\n  :is(.form, .field) input[type=\'range\'],\n  .input[type=\'range\'] {\n    @apply appearance-none flex items-center p-0 outline-none;\n    --slider-value: 20%;\n\n    &:hover,\n    &:focus-visible {\n      &::-webkit-slider-thumb {\n        @apply ring-4;\n      }\n      &::-moz-range-thumb {\n        @apply ring-4;\n      }\n      &::-ms-thumb {\n        @apply ring-4;\n      }\n    }\n\n    &::-webkit-slider-thumb {\n      @apply appearance-none border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm -mt-1.25;\n    }\n    &::-webkit-slider-runnable-track {\n      @apply appearance-none rounded-full h-1.5 w-full;\n      background: linear-gradient(to right, var(--primary) var(--slider-value), var(--muted) var(--slider-value));\n    }    \n    &::-moz-range-thumb {\n      @apply appearance-none border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm -mt-1.25;\n    }\n    &::-moz-range-track {\n      @apply appearance-none rounded-full h-1.5 w-full;\n      background: linear-gradient(to right, var(--primary) var(--slider-value), var(--muted) var(--slider-value));\n    }\n    &::-ms-thumb {\n      @apply appearance-none border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm -mt-1.25;\n    }\n    &::-ms-track {\n      @apply appearance-none rounded-full h-1.5 w-full;\n    }\n    &::-ms-fill-lower {\n      @apply bg-primary rounded-full;\n    }\n    &::-ms-fill-upper {\n      @apply bg-muted rounded-full;\n    }\n  }\n}\n\n/* Select */\n@layer components {\n  :is(.form, .field) select,\n  select.select {\n    @apply appearance-none 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 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent pl-3 pr-9 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 h-9;\n    @apply bg-(image:--chevron-down-icon-50) bg-no-repeat bg-position-[center_right_0.75rem] bg-size-[1rem];\n\n    option,\n    optgroup {\n      @apply bg-popover text-popover-foreground;\n    }\n  }\n  *:not(select).select {\n    @apply relative inline-flex;\n    \n    & > button {\n      @apply justify-between font-normal;\n\n      &[aria-invalid=\'true\'] {\n        @apply ring-destructive/20 dark:ring-destructive/40 border-destructive;\n      }\n    }\n\n    [data-popover] {\n      @apply p-1;\n\n      [role=\'option\'] {\n        @apply aria-hidden:hidden [&_svg]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm pl-2 py-1.5 pr-7.5 text-sm outline-hidden select-none [&_svg]:shrink-0 [&_svg]:size-4 aria-disabled:opacity-50 aria-disabled:pointer-events-none disabled:opacity-50 disabled:pointer-events-none w-full truncate;\n        \n        &[aria-selected=\'true\'] {\n          @apply bg-(image:--check-icon) bg-no-repeat bg-position-[center_right_0.5rem] bg-size-[0.875rem];\n        }\n        &.active,\n        &:focus-visible {\n          @apply bg-accent text-accent-foreground;\n        }\n      }\n      [role=\'listbox\'] [role=\'heading\'] {\n        @apply flex text-muted-foreground px-2 py-1.5 text-xs;\n      }\n      [role=\'listbox\'] [role=\'group\']:not(:has([role=\'option\']:not([aria-hidden=\'true\']))) {\n        @apply hidden;\n      }\n      [role=\'separator\'] {\n        @apply border-border -mx-1 my-1;\n      }\n      > header {\n        @apply flex h-9 items-center gap-2 border-b px-3 -mx-1 -mt-1 mb-1;\n\n        svg {\n          @apply size-4 shrink-0 opacity-50;\n        }\n        input[role=\'combobox\'] {\n          @apply placeholder:text-muted-foreground flex h-10 flex-1 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50 min-w-0;\n        }\n      }\n      [role=\'listbox\']:not(:has([data-value]:not([aria-hidden=\'true\'])))::before {\n        @apply flex items-center justify-center p-6 text-sm truncate;\n      }\n      [role=\'listbox\'][data-empty]:not(:has([data-value]:not([aria-hidden=\'true\'])))::before {\n        @apply content-[attr(data-empty)];\n      }\n      [role=\'listbox\']:not([data-empty]):not(:has([data-value]:not([aria-hidden=\'true\'])))::before {\n        @apply content-[\'No_results_found\'];\n      }\n    }\n    [data-popover]:has(> header input:not(:placeholder-shown)) [role=\'separator\'] {\n      @apply hidden;\n    }\n    &:not([data-select-initialized]) [data-popover] [role=\'option\'] {\n      @apply hover:bg-accent hover:text-accent-foreground;\n    }\n  }\n}\n\n/* Sidebar */\n@layer components {\n  .sidebar {\n    &:not([data-sidebar-initialized]) {\n      @apply max-md:hidden;\n    }\n    &:not([aria-hidden]),\n    &[aria-hidden=false] {\n      @apply max-md:bg-black/50 max-md:fixed max-md:inset-0 max-md:z-40;\n    }\n    nav {\n      @apply bg-sidebar text-sidebar-foreground flex flex-col w-(--sidebar-mobile-width) md:w-(--sidebar-width) fixed inset-y-0 z-50 transition-transform ease-in-out duration-300;\n    }\n    & + * {\n      @apply transition-[margin] ease-in-out duration-300;\n    }\n    &:not([data-side]),\n    &[data-side=left] {\n      nav {\n        @apply left-0 border-r;\n      }\n      & + * {\n        @apply relative md:ml-(--sidebar-width);\n      }\n      &[aria-hidden=true] {\n        nav {\n          @apply -translate-x-full;\n        }\n        & + * {\n          @apply md:ml-0;\n        }\n      }\n    }\n    &[data-side=right] {\n      nav {\n        @apply right-0 border-l;\n      }\n      & + * {\n        @apply relative md:mr-(--sidebar-width);\n      }\n      &[aria-hidden=true] {\n        nav {\n          @apply translate-x-full;\n        }\n        & + * {\n          @apply md:mr-0;\n        }\n      }\n    }\n    nav {\n      > header,\n      > footer {\n        @apply flex flex-col gap-2 p-2;\n      }\n      [role=separator] {\n        @apply border-sidebar-border mx-2 w-auto;\n      }\n      > section {\n        @apply flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto;\n\n        > [role=group] {\n          @apply relative flex w-full min-w-0 flex-col p-2;\n        }\n        h3 {\n          @apply text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0;\n        }\n        ul {\n          @apply flex w-full min-w-0 flex-col gap-1;\n\n          li {\n            @apply relative;\n\n            > a,\n            > details > summary {\n              @apply flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-[current=page]:bg-sidebar-accent aria-[current=page]:font-medium aria-[current=page]:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0;\n\n              &:not([data-variant]),\n              &[data-variant=default] {\n                @apply hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;\n              }\n              &[data-variant=outline] {\n                @apply bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))];\n              }\n              &:not([data-size]),\n              &[data-size=default] {\n                @apply h-8 text-sm;\n              }\n              &[data-size=sm] {\n                @apply h-7 text-xs;\n              }\n              &[data-size=lg] {\n                @apply h-12 text-sm group-data-[collapsible=icon]:p-0!;\n              }\n            }\n            > details {\n              &:not([open]) {\n                > summary {\n                  &::after {\n                    @apply -rotate-90;\n                  }\n                }\n              }\n              > summary {\n                &::after {\n                  @apply content-[\'\'] block size-3.5 bg-primary ml-auto transition-transform ease-linear;\n                  @apply mask-(--chevron-down-icon) mask-size-[1rem] mask-no-repeat mask-center;\n                }\n              }\n              &::details-content {\n                @apply px-3.5;\n              }\n            }\n          }\n          ul {\n            @apply border-sidebar-border flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5 w-full;\n          }\n        }\n      }\n    }\n  }\n}\n\n/* Switch */\n@layer components {\n  :is(.form, .field) input[type=\'checkbox\'][role=\'switch\'],\n  .input[type=\'checkbox\'][role=\'switch\'] {\n    @apply appearance-none focus-visible:border-ring focus-visible:ring-ring/50 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50;\n    @apply bg-input dark:bg-input/80 checked:bg-primary dark:checked:bg-primary;\n    @apply before:content-[\'\'] before:pointer-events-none before:block before:size-4 before:rounded-full before:ring-0 before:transition-all;\n    @apply before:bg-background dark:before:bg-foreground;\n    @apply dark:checked:before:bg-primary-foreground checked:before:ms-3.5;\n  }\n}\n\n/* Tables */\n@layer components {\n  .table {\n    @apply w-full caption-bottom text-sm;\n    thead {\n      @apply [&_tr]:border-b;\n    }\n    tbody {\n      @apply [&_tr:last-child]:border-0;\n    }\n    tfoot {\n      @apply bg-muted/50 border-t font-medium [&>tr]:last:border-b-0;\n    }\n    tr {\n      @apply hover:bg-muted/50 border-b transition-colors;\n    }\n    th {\n      @apply text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap has-[[role=checkbox]]:pr-0 *:[[role=checkbox]]:translate-y-0.5;\n    }\n    td {\n      @apply p-2 align-middle whitespace-nowrap has-[[role=checkbox]]:pr-0 *:[[role=checkbox]]:translate-y-0.5;\n    }\n    caption {\n      @apply text-muted-foreground mt-4 text-sm;\n    }\n  }\n}\n\n/* Tabs */\n@layer components {\n  .tabs {\n    @apply flex flex-col gap-2;\n    \n    [role=\'tablist\'] {\n      @apply bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-0.75;\n\n      [role=\'tab\'] {\n        @apply focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring 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] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4;\n\n        &[aria-selected=\'true\'] {\n          @apply bg-background dark:text-foreground dark:border-input dark:bg-input/30 shadow-sm;\n        }\n      }\n    }\n    [role=\'tabpanel\'] {\n      @apply flex-1 outline-none;\n    }\n  }\n}\n\n/* Textarea */\n@layer components {\n  :is(.form, .field) textarea,\n  .textarea {\n    @apply border-input placeholder:text-muted-foreground 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;\n  }\n}\n\n/* Toasts */\n@layer components {\n  .toaster {\n    @apply fixed bottom-0 p-4 pointer-events-none z-50 w-full sm:max-w-90 flex flex-col-reverse;\n\n    &:not([data-align]),\n    &[data-align=\'end\'] {\n      @apply right-0;\n    }\n    &[data-align=\'start\'] {\n      @apply left-0;\n    }\n    &[data-align=\'center\'] {\n      @apply left-1/2 -translate-x-1/2;\n    }\n    .toast {\n      @apply pointer-events-auto w-full mt-4 animate-[toast-up_0.3s_ease-in-out] grid  grid-rows-[1fr] transition-[grid-template-rows,opacity,margin] duration-300 ease-in-out;\n      \n      .toast-content {\n        @apply text-popover-foreground text-[13px] bg-popover border shadow-lg rounded-lg overflow-hidden flex gap-2.5 p-3 items-center;\n\n        svg {\n          @apply size-4 shrink-0;\n        }\n        section {\n          h2 {\n            @apply font-medium tracking-tight;\n          }\n          p {\n            @apply text-muted-foreground break-all;\n          }\n        }\n        footer {\n          @apply ml-auto flex flex-col gap-2;\n\n          [data-toast-action],\n          [data-toast-cancel] {\n            @apply h-6 px-2.5 text-xs;\n          }\n        }\n      }\n      &[aria-hidden=\'true\'] {\n        @apply grid-rows-[0fr] opacity-0 m-0 border-0 p-0 overflow-hidden;\n\n        .toast-content {\n          @apply border-0;\n        }\n      }\n    }\n  }\n}\n@keyframes toast-up {\n  from {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n}\n\n/* Tooltip */\n@layer components {\n  [data-tooltip] {\n    @apply relative;\n\n    &:before {\n      @apply absolute content-[attr(data-tooltip)] bg-foreground text-background z-60 truncate max-w-xs w-fit rounded-md px-3 py-1.5 text-xs invisible opacity-0 scale-95 transition-all pointer-events-none;\n    }\n    &:hover:before {\n      @apply visible opacity-100 scale-100;\n    }\n    &:focus-visible:not(:hover):before {\n      @apply hidden;\n    }\n    &:not([data-side]),\n    &[data-side=\'top\'] {\n    @apply before:bottom-full before:mb-1.5 before:translate-y-2 hover:before:translate-y-0 ;\n    }\n    &[data-side=\'bottom\'] {\n      @apply before:top-full before:mt-1.5 before:-translate-y-2 hover:before:translate-y-0 ;\n    }\n    &:not([data-side]),\n    &[data-side=\'top\'],\n    &[data-side=\'bottom\'] {\n      &[data-align=\'start\'] {\n        @apply before:left-0;\n      }\n      &[data-align=\'end\'] {\n        @apply before:right-0;\n      }\n      &:not([data-align]),\n      &[data-align=\'center\'] {\n        @apply before:left-1/2 before:-translate-x-1/2; \n      }\n    }\n    &[data-side=\'left\'] {\n      @apply before:right-full before:mr-1.5 before:translate-x-2 hover:before:translate-x-0;\n    }\n    &[data-side=\'right\'] {\n      @apply before:left-full before:ml-1.5 before:-translate-x-2 hover:before:translate-x-0;\n    }\n    &[data-side=\'left\'],\n    &[data-side=\'right\'] {\n      &[data-align=\'start\'] {\n        @apply before:top-0;\n      }\n      &[data-align=\'end\'] {\n        @apply before:bottom-0;\n      }\n      &:not([data-align]),\n      &[data-align=\'center\'] {\n        @apply before:top-1/2 before:-translate-y-1/2;\n      }\n    }\n  }\n}\n";
Expand description

The full basecoat-css source as a &'static str.