/* Button */
@layer components {
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-outline,
  .btn-ghost,
  .btn-link,
  .btn-destructive,
  .btn-xs,
  .btn-xs-primary,
  .btn-xs-secondary,
  .btn-xs-outline,
  .btn-xs-ghost,
  .btn-xs-link,
  .btn-xs-destructive,
  .btn-sm,
  .btn-sm-primary,
  .btn-sm-secondary,
  .btn-sm-outline,
  .btn-sm-ghost,
  .btn-sm-link,
  .btn-sm-destructive,
  .btn-lg,
  .btn-lg-primary,
  .btn-lg-secondary,
  .btn-lg-outline,
  .btn-lg-ghost,
  .btn-lg-link,
  .btn-lg-destructive,
  .btn-icon,
  .btn-icon-primary,
  .btn-icon-secondary,
  .btn-icon-outline,
  .btn-icon-ghost,
  .btn-icon-link,
  .btn-icon-destructive,
  .btn-xs-icon,
  .btn-xs-icon-primary,
  .btn-xs-icon-secondary,
  .btn-xs-icon-outline,
  .btn-xs-icon-ghost,
  .btn-xs-icon-link,
  .btn-xs-icon-destructive,
  .btn-sm-icon,
  .btn-sm-icon-primary,
  .btn-sm-icon-secondary,
  .btn-sm-icon-outline,
  .btn-sm-icon-ghost,
  .btn-sm-icon-link,
  .btn-sm-icon-destructive,
  .btn-lg-icon,
  .btn-lg-icon-primary,
  .btn-lg-icon-secondary,
  .btn-lg-icon-outline,
  .btn-lg-icon-ghost,
  .btn-lg-icon-link,
  .btn-lg-icon-destructive {
    @apply rounded-4xl border border-transparent bg-clip-padding text-sm font-medium focus-visible:border-ring focus-visible:ring-ring/30 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,
  .btn-primary,
  .btn-secondary,
  .btn-outline,
  .btn-ghost,
  .btn-link,
  .btn-destructive {
    @apply h-9 gap-1.5 px-3;

    &:has(> [data-icon=inline-start]) {
      @apply ps-2.5;
    }

    &:has(> [data-icon=inline-end]) {
      @apply pe-2.5;
    }
  }

  .btn-xs,
  .btn-xs-primary,
  .btn-xs-secondary,
  .btn-xs-outline,
  .btn-xs-ghost,
  .btn-xs-link,
  .btn-xs-destructive {
    @apply h-6 gap-1 px-2.5 text-xs [&_svg:not([class*='size-'])]:size-3;

    &:has(> [data-icon=inline-start]) {
      @apply ps-2;
    }

    &:has(> [data-icon=inline-end]) {
      @apply pe-2;
    }
  }

  .btn-sm,
  .btn-sm-primary,
  .btn-sm-secondary,
  .btn-sm-outline,
  .btn-sm-ghost,
  .btn-sm-link,
  .btn-sm-destructive {
    @apply h-8 gap-1 px-3;

    &:has(> [data-icon=inline-start]) {
      @apply ps-2;
    }

    &:has(> [data-icon=inline-end]) {
      @apply pe-2;
    }
  }

  .btn-lg,
  .btn-lg-primary,
  .btn-lg-secondary,
  .btn-lg-outline,
  .btn-lg-ghost,
  .btn-lg-link,
  .btn-lg-destructive {
    @apply h-10 gap-1.5 px-4;

    &:has(> [data-icon=inline-start]) {
      @apply ps-3;
    }

    &:has(> [data-icon=inline-end]) {
      @apply pe-3;
    }
  }

  .btn-icon,
  .btn-icon-primary,
  .btn-icon-secondary,
  .btn-icon-outline,
  .btn-icon-ghost,
  .btn-icon-link,
  .btn-icon-destructive {
    @apply size-9;
  }

  .btn-xs-icon,
  .btn-xs-icon-primary,
  .btn-xs-icon-secondary,
  .btn-xs-icon-outline,
  .btn-xs-icon-ghost,
  .btn-xs-icon-link,
  .btn-xs-icon-destructive {
    @apply size-6 [&_svg:not([class*='size-'])]:size-3;
  }

  .btn-sm-icon,
  .btn-sm-icon-primary,
  .btn-sm-icon-secondary,
  .btn-sm-icon-outline,
  .btn-sm-icon-ghost,
  .btn-sm-icon-link,
  .btn-sm-icon-destructive {
    @apply size-8;
  }

  .btn-lg-icon,
  .btn-lg-icon-primary,
  .btn-lg-icon-secondary,
  .btn-lg-icon-outline,
  .btn-lg-icon-ghost,
  .btn-lg-icon-link,
  .btn-lg-icon-destructive {
    @apply size-10;
  }

  .btn,
  .btn-primary,
  .btn-xs,
  .btn-xs-primary,
  .btn-sm,
  .btn-sm-primary,
  .btn-lg,
  .btn-lg-primary,
  .btn-icon,
  .btn-icon-primary,
  .btn-xs-icon,
  .btn-xs-icon-primary,
  .btn-sm-icon,
  .btn-sm-icon-primary,
  .btn-lg-icon,
  .btn-lg-icon-primary {
    @apply bg-primary text-primary-foreground hover:bg-primary/80;
  }

  .btn-secondary,
  .btn-xs-secondary,
  .btn-sm-secondary,
  .btn-lg-secondary,
  .btn-icon-secondary,
  .btn-xs-icon-secondary,
  .btn-sm-icon-secondary,
  .btn-lg-icon-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-outline,
  .btn-xs-outline,
  .btn-sm-outline,
  .btn-lg-outline,
  .btn-icon-outline,
  .btn-xs-icon-outline,
  .btn-sm-icon-outline,
  .btn-lg-icon-outline {
    @apply border-border bg-background hover:bg-muted hover:text-foreground dark:bg-transparent dark:hover:bg-input/30 aria-expanded:bg-muted aria-expanded:text-foreground;
  }

  .btn-ghost,
  .btn-xs-ghost,
  .btn-sm-ghost,
  .btn-lg-ghost,
  .btn-icon-ghost,
  .btn-xs-icon-ghost,
  .btn-sm-icon-ghost,
  .btn-lg-icon-ghost {
    @apply hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground;
  }

  .btn-link,
  .btn-xs-link,
  .btn-sm-link,
  .btn-lg-link,
  .btn-icon-link,
  .btn-xs-icon-link,
  .btn-sm-icon-link,
  .btn-lg-icon-link {
    @apply text-primary underline-offset-4 hover:underline;
  }

  .btn-destructive,
  .btn-xs-destructive,
  .btn-sm-destructive,
  .btn-lg-destructive,
  .btn-icon-destructive,
  .btn-xs-icon-destructive,
  .btn-sm-icon-destructive,
  .btn-lg-icon-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:has(> :is(.btn-outline, .btn-icon-outline, .btn-xs-outline, .btn-xs-icon-outline, .btn-sm-outline, .btn-sm-icon-outline, .btn-lg-outline, .btn-lg-icon-outline)),
  .button-group:has(> .select > button:is(.btn-outline, .btn-icon-outline, .btn-xs-outline, .btn-xs-icon-outline, .btn-sm-outline, .btn-sm-icon-outline, .btn-lg-outline, .btn-lg-icon-outline)) {
    > .input,
    > .select > button {
      @apply border-border focus-visible:border-ring;
    }
  }

  .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-text {
    @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'],
  .button-group-separator {
    @apply bg-input;
  }


  /* Tabs */
  .tabs {
    @apply gap-2;
  }

  .tabs > [role='tablist'] {
    @apply rounded-full p-1 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-2 rounded-full border border-transparent! px-3 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-3 py-1.5 rounded-2xl;
  }

  .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-2;
  }

  .tabs > [role='tablist'] > [role='tab']:has(> svg:last-child) {
    @apply pe-2;
  }

  .tabs > [role='tabpanel'] {
    @apply text-sm;
  }

  /* Textarea */
  .field > textarea,
  .textarea {
    @apply bg-input/50 border-transparent focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 resize-none rounded-2xl border px-3 py-3 text-base transition-[color,box-shadow,background-color] focus-visible:ring-3 aria-invalid:ring-3 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/50 border-transparent focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 rounded-3xl border px-3 py-1 text-base transition-[color,box-shadow,background-color] file:h-7 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm;
  }

  /* Native Select */
  .field > select,
  select.select {
    @apply bg-input/50 border-transparent placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground focus-visible:border-ring focus-visible:ring-ring/30 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-3xl border py-1 ps-3 pe-8 text-sm transition-[color,box-shadow,background-color] focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-8;
    @apply bg-[image:var(--chevron-down-icon-50)] bg-no-repeat bg-position-[center_right_0.625rem] bg-size-[1rem];
  }

  :is(.field > select, select.select):dir(rtl) {
    @apply bg-position-[center_left_0.625rem];
  }

  /* Alert */
  .alert,
  .alert-destructive {
    @apply grid gap-0.5 rounded-2xl border px-4 py-3 text-start text-sm has-[>[data-action]]:relative has-[>[data-action]]:pe-18 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-destructive {
    @apply text-destructive bg-card [&>section]:text-destructive/90 [&>svg]:text-current;
  }

  .alert > :is(h2, h3, h4, h5, h6, strong, [data-title]),
  .alert-destructive > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
    @apply font-medium;
  }


  :is(.alert, .alert-destructive):has(> svg) > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
    @apply col-start-2;
  }
  .alert > section,
  .alert-destructive > section {
    @apply text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4;
  }

  .alert > [data-action],
  .alert-destructive > [data-action] {
    @apply absolute top-2.5 end-3;
  }

  /* Badge */
  .badge,
  .badge-primary,
  .badge-secondary,
  .badge-destructive,
  .badge-outline,
  .badge-ghost,
  .badge-link {
    @apply h-5 gap-1 rounded-3xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&>svg]:size-3!;
  }

  .badge,
  .badge-primary {
    @apply bg-primary text-primary-foreground [a]:hover:bg-primary/80;
  }

  .badge-secondary {
    @apply bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80;
  }

  .badge-outline {
    @apply border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground;
  }

  .badge-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-ghost {
    @apply hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50;
  }

  .badge-link {
    @apply text-primary underline-offset-4 hover:underline;
  }

  /* Command */
  .command {
    @apply bg-popover text-popover-foreground rounded-4xl p-1;
  }

  .command-dialog > * {
    @apply rounded-4xl p-0;
  }

  .command > header {
    @apply m-1 mb-0 h-9 gap-2 rounded-3xl bg-input/50 px-3;
  }

  .command > header svg {
    @apply size-4 opacity-50;
  }

  .command > header input {
    @apply h-full 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.5 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.5 h-px;
  }

  .command [role='menuitem'] {
    @apply gap-2 rounded-2xl px-3 py-2 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 in-[.command-dialog]:rounded-3xl;
  }

  .command [role='menuitem'].active {
    @apply bg-accent text-accent-foreground [&_svg]:text-accent-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 bg-input/50 border-transparent focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 rounded-3xl border py-2 ps-3 pe-8 text-sm transition-[color,box-shadow,background-color] focus-visible:ring-3 aria-invalid:ring-3;
  }

  .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 dark:ring-foreground/10 max-h-72 rounded-3xl p-1.5 shadow-lg ring-1 duration-100;
  }

  .combobox [role='listbox'] {
    @apply max-h-[min(18rem,var(--available-height,18rem))] scroll-py-1.5 overflow-y-auto;
  }

  .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 py-2.5 text-xs;
  }

  .combobox [role='option'] {
    @apply gap-2.5 rounded-2xl py-2 ps-3 pe-8 text-sm font-medium [&_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.5 p-1.5;
  }

  .combobox [role='separator'] {
    @apply bg-border -mx-1.5 my-1.5 h-px;
  }

  .combobox-chips {
    @apply bg-input/50 border-transparent focus-within:border-ring focus-within:ring-ring/30 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-3xl border bg-clip-padding px-1.5 py-1.5 text-sm transition-[color,box-shadow,background-color] focus-within:ring-3 has-[[aria-invalid=true]]:ring-3;
  }

  .combobox-chip {
    @apply bg-input text-foreground dark:bg-input/60 h-5.5 gap-1 rounded-3xl 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;
  }
  /* Select */
  *:not(select).select > button {
    @apply bg-input/50 border-transparent focus-visible:border-ring focus-visible:ring-ring/30 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-3xl border px-3 py-2 text-sm transition-[color,box-shadow,background-color] focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4;
  }

  *:not(select).select > button > span {
    @apply gap-1.5;
  }

  *:not(select).select > button > svg {
    @apply text-muted-foreground size-4;
  }

  *:not(select).select [data-popover] {
    @apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 rounded-3xl p-1.5 shadow-lg ring-1 duration-100;
  }




  *:not(select).select [role='listbox'] {
    @apply scroll-py-1.5;
  }

  *:not(select).select [role='listbox']:not(:has([data-value]:not([aria-hidden='true'])))::before {
    @apply py-6 text-center text-sm;
  }

  *:not(select).select [role='heading'] {
    @apply text-muted-foreground px-3 py-2.5 text-xs;
  }

  *:not(select).select [role='option'] {
    @apply gap-2.5 rounded-2xl py-2 ps-3 pe-8 text-sm font-medium [&_svg:not([class*='size-'])]:size-4;
  }

  *:not(select).select [role='option'].active,
  *:not(select).select [role='option']:focus-visible {
    @apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
  }

  *:not(select).select [role='group'] {
    @apply scroll-my-1.5 p-1.5;
  }

  *:not(select).select [role='separator'] {
    @apply bg-border -mx-1.5 my-1.5 h-px;
  }


  /* Dialog */
  .dialog::backdrop,
  .command-dialog::backdrop {
    @apply bg-black/30 backdrop-blur-sm duration-100;
  }

  .dialog > * {
    @apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 max-w-[calc(100%-2rem)] gap-6 rounded-4xl p-6 text-sm shadow-xl ring-1 duration-100 sm:max-w-md;
  }

  .dialog > * > :is(button, form[method='dialog']) {
    @apply top-4 end-4;
  }

  .dialog > * > :is(button, form[method='dialog'] > button) {
    @apply bg-secondary;
  }

  .dialog > * > header {
    @apply gap-1.5;
  }

  .dialog > * > footer {
    @apply gap-2;
  }

  .dialog > * > header > h2,
  .dialog > * > [data-title] {
    @apply text-base leading-none 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;
  }

  /* 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-3xl p-1.5 shadow-lg ring-1 duration-100;
  }

  .dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']) {
    @apply gap-2.5 rounded-2xl px-3 py-2 text-sm font-medium 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-accent text-accent-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.5 my-1.5 h-px;
  }

  .dropdown-menu [data-shortcut] {
    @apply text-muted-foreground text-xs tracking-widest;
  }

  .dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):is(:focus-visible, .active) [data-shortcut] {
    @apply text-accent-foreground;
  }

  /* Popover */
  [data-popover] {
    @apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 flex flex-col gap-4 rounded-3xl p-4 text-sm shadow-lg 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 bg-card text-card-foreground ring-foreground/5 dark:ring-foreground/10 gap-6 overflow-hidden rounded-4xl py-6 text-sm shadow-md ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 [&>img:first-child]:rounded-t-4xl [&>img:last-child]:rounded-b-4xl;
  }

  .card > header {
    @apply gap-1.5 rounded-t-4xl px-6 in-data-[size=sm]:px-4 [.border-b]:pb-6 in-data-[size=sm]:[.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 in-data-[size=sm]:px-4;
  }

  .card > footer {
    @apply rounded-b-4xl px-6 in-data-[size=sm]:px-4 [.border-t]:pt-6 in-data-[size=sm]:[.border-t]:pt-4;
  }

  /* Checkbox */
  .field > input[type='checkbox']:not([role='switch']),
  .input[type='checkbox']:not([role='switch']) {
    @apply bg-input/90 checked:bg-primary checked:text-primary-foreground dark:checked:bg-primary checked:border-primary border-transparent aria-invalid:checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[5px] border transition-shadow in-data-[disabled=true]:opacity-50 focus-visible:ring-3 aria-invalid:ring-3;
  }

  :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 bg-input/90 checked:bg-primary checked:text-primary-foreground dark:checked:bg-primary border-transparent aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 flex size-4 rounded-full border focus-visible:ring-3 aria-invalid:ring-3;
  }

  :is(.field > input[type='radio'], .input[type='radio']):checked:before {
    @apply bg-primary-foreground size-2 dark:size-2.5;
  }

  /* Switch */
  .field > input[type='checkbox'][role='switch'],
  .input[type='checkbox'][role='switch'] {
    @apply checked:bg-primary not-checked:bg-input/90 checked:border-primary border-2 not-checked:border-transparent focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-full focus-visible:ring-3 aria-invalid:ring-3;
  }

  :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):not([data-size='sm']) {
    @apply h-5 w-11;
  }

  :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch'])[data-size='sm'] {
    @apply h-4 w-7;
  }

  :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):before {
    @apply bg-background dark:not-checked:bg-foreground dark:checked:bg-primary-foreground rounded-full shadow-sm not-dark:bg-clip-padding;
  }

  :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):not([data-size='sm']):before {
    @apply h-4 w-6;
  }

  :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch'])[data-size='sm']:before {
    @apply h-3 w-4;
  }

  :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):checked:not([data-size='sm']):before {
    @apply translate-x-[calc(100%-8px)];
  }

  :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):checked[data-size='sm']:before {
    @apply translate-x-[calc(100%-8px)];
  }

  :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%-8px)];
  }

  :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):dir(rtl):checked[data-size='sm']:before {
    @apply -translate-x-[calc(100%-8px)];
  }

  :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,
  .field-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'],
    &[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=true]:text-destructive gap-3;
  }

  .field > section,
  .field-content {
    @apply gap-1;
  }

  .field > label,
  label:has(> .field) {
    @apply has-[:checked]:bg-input/30 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-2xl 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,
  .field-title {
    @apply gap-2 leading-snug text-sm font-medium in-data-[disabled=true]:opacity-50;
  }

  .fieldset legend + p,
  .field > p,
  .field section > p,
  .field-description {
    @apply text-muted-foreground text-start text-sm [[data-variant=legend]+&]:-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"],
  .field-error {
    @apply text-destructive text-sm;
  }

  /* Input Group */
  .input-group {
    @apply h-9 has-[>textarea]:h-auto rounded-4xl border border-transparent bg-input/50 transition-[color,box-shadow,background-color] focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/30 has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-3 has-[[aria-invalid=true]]:ring-destructive/20 has-[>textarea]:rounded-2xl dark:has-[[aria-invalid=true]]:ring-destructive/40;
  }

  .input-group[data-orientation='vertical'] {
    @apply rounded-3xl;
  }

  .input-group:has(> :is(input, textarea, select, [data-control]):disabled) {
    @apply opacity-50;
  }

  .input-group > :is(input, select, [data-control]) {
    @apply px-3 py-1 text-sm;
  }

  .input-group:not([data-orientation='vertical']):has(> [data-align='start']) > :is(input, select, [data-control]) {
    @apply ps-1.5;
  }

  .input-group:not([data-orientation='vertical']):has(> [data-align='end']) > :is(input, select, [data-control]) {
    @apply pe-1.5;
  }

  .input-group > textarea {
    @apply px-3 py-2.5 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 > [data-align='start'] {
    @apply ps-3;
  }

  .input-group > [data-align='end'] {
    @apply pe-3;
  }

  .input-group > [data-align='start']:has(> button) {
    @apply -ms-1;
  }

  .input-group > [data-align='end']:has(> button) {
    @apply -me-1;
  }

  .input-group > [data-align='start']:has(> kbd) {
    @apply -ms-0.5;
  }

  .input-group > [data-align='end']:has(> kbd) {
    @apply -me-0.5;
  }
  .input-group[data-orientation='vertical'] > :is(header, footer, [role='group'], [data-align]) {
    @apply px-3;
  }

  .input-group > :is(kbd, span > kbd, [role='group'] > kbd, header > kbd, footer > kbd) {
    @apply rounded-3xl bg-muted-foreground/10 px-1.5;
  }

  .input-group > :is(button, [role='group'] > button, header > button, footer > button) {
    @apply gap-2 rounded-xl 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 rounded-xl p-0;
  }

  /* Empty */
  .empty {
    @apply gap-4 rounded-2xl 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-xl [&_svg:not([class*='size-'])]:size-5;
  }

  .empty :is(h2, h3, h4) {
    @apply text-lg font-medium tracking-tight;
  }

  .empty 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-xl;
  }

  .item[data-size='sm'] > figure:has(img) {
    @apply size-8;
  }

  .item[data-size='xs'] > figure:has(img) {
    @apply size-6 rounded-lg;
  }

  .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.5 w-fit min-w-5.5 gap-1 rounded-lg px-1.5 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3;
  }

  .kbd-group {
    @apply gap-1;
  }

  /* Label */
  .field > label,
  .label {
    @apply gap-2 text-sm leading-none 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-xl 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-0.5;
  }

  .sidebar nav > section > [role=group] {
    @apply text-sm;
  }

  .sidebar nav li > :is(a, button, 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-xl 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, 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, details > summary):not([data-variant]),
  .sidebar nav li > :is(a, button, details > summary)[data-variant=default] {
    @apply hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
  }

  .sidebar nav li > :is(a, button, 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, details > summary):not([data-size]),
  .sidebar nav li > :is(a, button, details > summary)[data-size=default] {
    @apply h-9 text-sm;
  }

  .sidebar nav li > :is(a, button, details > summary)[data-size=sm] {
    @apply h-8 text-xs;
  }

  .sidebar nav li > :is(a, button, 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 mx-3.5 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, 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-xl px-3 text-sm focus-visible:ring-2 [&>svg]:size-4;
  }

  /* Skeleton */
  .skeleton {
    @apply bg-muted rounded-2xl;
  }

  /* 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 inline-flex items-center gap-1.5 rounded-xl px-3 py-1.5 text-xs has-[.kbd]:pe-1.5 [&_.kbd]:relative [&_.kbd]:isolate [&_.kbd]:z-50 [&_.kbd]:rounded-lg;
  }

  [data-tooltip][data-arrow]::after {
    @apply bg-foreground absolute z-[60] size-2.5 rotate-45 rounded-[2px] data-[side=left]:translate-x-[-1.5px] data-[side=right]: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.5rem;
    --slider-thumb-size: 1rem;
  }

  :is(.field > input[type='range'], .input[type='range'])::-webkit-slider-runnable-track {
    @apply bg-input/90 h-2 rounded-full;
  }

  :is(.field > input[type='range'], .input[type='range'])::-moz-range-track {
    @apply bg-input/90 h-2 rounded-full;
  }

  :is(.field > input[type='range'], .input[type='range'])::-ms-track {
    @apply bg-input/90 h-2 rounded-full;
  }

  :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 ring-black/10 not-dark:bg-clip-padding ring-1 h-4 w-6 rounded-full bg-white shadow-md transition-[color,box-shadow,background-color] hover:ring-4 hover:ring-ring/30 focus-visible:ring-4 focus-visible:ring-ring/30 -mt-[calc((var(--slider-thumb-size)-var(--slider-track-height))/2)] focus-visible:outline-hidden;
  }

  :is(.field > input[type='range'], .input[type='range'])::-moz-range-thumb {
    @apply ring-black/10 not-dark:bg-clip-padding ring-1 h-4 w-6 rounded-full bg-white shadow-md transition-[color,box-shadow,background-color] hover:ring-4 hover:ring-ring/30 focus-visible:ring-4 focus-visible:ring-ring/30 focus-visible:outline-hidden;
  }

  :is(.field > input[type='range'], .input[type='range'])::-ms-thumb {
    @apply ring-black/10 not-dark:bg-clip-padding ring-1 h-4 w-6 rounded-full bg-white shadow-md transition-[color,box-shadow,background-color] hover:ring-4 hover:ring-ring/30 focus-visible:ring-4 focus-visible:ring-ring/30 focus-visible:outline-hidden;
  }

}