/* Accordion */
@layer components {
  .accordion > details {
    @apply not-last:border-b;
  }

  .accordion > details > summary {
    @apply focus-visible:ring-ring/50 focus-visible:border-ring rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-3;
  }

  .accordion > details > summary > svg:last-child {
    @apply text-muted-foreground ms-auto size-4;
  }

  .accordion > details > :not(summary) {
    @apply pt-0 pb-2.5 text-sm;
  }

  /* Button */
  .btn {
    @apply rounded-lg 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-8 gap-1.5 px-2.5 has-[[data-icon='inline-end']]:pr-2 has-[[data-icon='inline-start']]:pl-2;
  }

  .btn[data-size='xs'] {
    @apply h-6 gap-1 px-2 text-xs rounded-[min(var(--radius-md),10px)] [&_svg:not([class*='size-'])]:size-3 has-[[data-icon='inline-end']]:pr-1.5 has-[[data-icon='inline-start']]:pl-1.5;
  }

  .btn[data-size='sm'] {
    @apply h-7 gap-1 px-2.5 text-[0.8rem] rounded-[min(var(--radius-md),12px)] [&_svg:not([class*='size-'])]:size-3.5 has-[[data-icon='inline-end']]:pr-1.5 has-[[data-icon='inline-start']]:pl-1.5;
  }

  .btn[data-size='lg'] {
    @apply h-9 gap-1.5 px-2.5 has-[[data-icon='inline-end']]:pr-2 has-[[data-icon='inline-start']]:pl-2;
  }

  .btn[data-size='icon'] {
    @apply size-8;
  }

  .btn[data-size='icon-xs'] {
    @apply size-6 rounded-[min(var(--radius-md),10px)] [&_svg:not([class*='size-'])]:size-3;
  }

  .btn[data-size='icon-sm'] {
    @apply size-7 rounded-[min(var(--radius-md),12px)];
  }

  .btn[data-size='icon-lg'] {
    @apply size-9;
  }

  .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-background hover:bg-muted hover:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50 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-lg!;
    }
  }

  .button-group[data-orientation='vertical'] {
    > :last-child,
    > :is(.dropdown-menu, .popover, .select):last-child > button {
      @apply rounded-b-lg!;
    }
  }

  .button-group > :is(span, label, output) {
    @apply bg-muted gap-2 rounded-lg 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-lg p-[3px] h-8;
  }

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

  .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-md border border-transparent px-1.5 py-0.5 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 ;
  }

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

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

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

  /* Textarea */
  .field > textarea,
  .textarea {
    @apply border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors 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 dark: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 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm;
  }

  /* Native Select */
  .field > select,
  select.select {
    @apply border-input 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-8 w-fit rounded-lg border bg-transparent py-1 ps-2.5 pe-8 text-sm transition-colors focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5;
    @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 {
    @apply grid gap-0.5 rounded-lg border px-2.5 py-2 text-start text-sm has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 [&>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 end-2;
  }
  /* 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;
  }

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

  .breadcrumb li {
    @apply gap-1;
  }

  .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-xl! p-1;
  }

  .command-dialog > .command {
    @apply bg-popover text-popover-foreground ring-foreground/10 rounded-xl! ring-1 duration-100;
  }

  .command > header {
    @apply m-1 mb-0 h-8 gap-0 rounded-lg border border-input/30 bg-input/30 px-2;
  }

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

  .command > header input {
    @apply ps-1.5 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-2 py-1.5 text-xs font-medium;
  }

  .command [role='separator'] {
    @apply bg-border -mx-1 h-px;
  }

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

  .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 dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent py-1 ps-2.5 pe-8 text-sm transition-colors focus-visible:ring-3 aria-invalid:ring-3;
  }

  .combobox > svg,
  .combobox-trigger-icon {
    @apply text-muted-foreground end-2.5 top-1/2 size-4 -translate-y-1/2;
  }

  .combobox [data-popover] {
    @apply bg-popover text-popover-foreground ring-foreground/10 max-h-72 gap-0 rounded-lg p-0 shadow-md 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-2 py-1.5 text-xs;
  }

  .combobox [role='option'] {
    @apply gap-2 rounded-md py-1 ps-1.5 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 -mx-1 my-1 h-px;
  }

  .combobox-chips {
    @apply dark: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-8 gap-1 rounded-lg border bg-transparent bg-clip-padding px-1 py-1 text-sm transition-colors focus-within:ring-3 has-[[aria-invalid=true]]:ring-3;
  }

  .combobox-chip {
    @apply bg-muted text-foreground h-5.25 gap-1 rounded-sm px-1.5 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-8 w-auto border-input/30 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 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-8 data-[size=sm]:h-7 gap-1.5 rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] border bg-transparent py-2 ps-2.5 pe-2 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 [&_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/10 rounded-lg p-1 shadow-md 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-1.5 py-1 text-xs;
  }

  .select:not(select) [role='option'] {
    @apply gap-1.5 rounded-md py-1 ps-1.5 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 -mx-1 my-1 h-px;
  }


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

  .alert-dialog > * {
    @apply bg-popover text-popover-foreground ring-foreground/10 max-w-xs gap-4 rounded-xl p-4 ring-1 duration-100 sm:max-w-sm;
  }

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

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

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

  .alert-dialog > * > header {
    @apply gap-x-4 gap-y-1.5;
  }

  .alert-dialog > * > header > figure {
    @apply bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md [&>svg:not([class*='size-'])]:size-6;
  }

  .alert-dialog > * > footer,
  .dialog > * > footer {
    @apply bg-muted/50 -mx-4 -mb-4 gap-2 rounded-b-xl border-t p-4;
  }

  .dialog > * > header > h2,
  .dialog > * > [data-title] {
    @apply text-base leading-none font-medium;
  }

  .alert-dialog > * > header > h2,
  .alert-dialog > * > [data-title] {
    @apply text-base 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/10 backdrop-blur-xs;
  }

  .drawer > * {
    @apply bg-popover text-popover-foreground text-sm;
  }

  .drawer:not([data-side]) > *,
  .drawer[data-side='bottom'] > * {
    @apply rounded-t-xl border-t;
  }

  .drawer[data-side='top'] > * {
    @apply rounded-b-xl border-b;
  }

  .drawer[data-side='left'] > * {
    @apply rounded-r-xl border-r;
  }

  .drawer[data-side='right'] > * {
    @apply rounded-l-xl border-l;
  }

  .drawer > * > header {
    @apply gap-0.5 p-4 text-start;
  }

  .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/10 gap-0 overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100;
  }

  .dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']) {
    @apply gap-1.5 rounded-md px-1.5 py-1 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-1 pe-8 ps-1.5;
  }

  .dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio'])[data-inset],
  .dropdown-menu [role='heading'][data-inset] {
    @apply ps-7;
  }

  .dropdown-menu [data-indicator] {
    @apply absolute end-2 flex items-center justify-center;
  }

  .dropdown-menu [role='heading'] {
    @apply text-muted-foreground px-1.5 py-1 text-xs font-medium;
  }

  .dropdown-menu [role='separator'] {
    @apply bg-border -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/10 flex flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 duration-100;
  }
  .popover > [data-popover] > header,
  .popover > [data-popover] > [data-header] {
    @apply flex flex-col gap-0.5 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 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-xl text-sm ring-1 has-[>footer]:pb-0 has-[>img:first-child]:pt-0 [&>img:first-child]:rounded-t-xl [&>img:last-child]:rounded-b-xl;
  }

  .card {
    @apply gap-4 py-4;
  }

  .card[data-size='sm'] {
    @apply gap-3 py-3;
  }

  .card > header {
    @apply gap-1 rounded-t-xl px-4 [.border-b]:pb-4;
  }

  .card[data-size='sm'] > header {
    @apply px-3 [.border-b]:pb-3;
  }

  .card > header > :is(h2, h3, [data-title], .card-title) {
    @apply text-base leading-snug font-medium;
  }

  .card[data-size='sm'] > header > :is(h2, h3, [data-title], .card-title) {
    @apply text-sm;
  }

  .card > header > :is(p, [data-description], .card-description) {
    @apply text-muted-foreground text-sm;
  }

  .card > section {
    @apply px-4;
  }

  .card[data-size='sm'] > section {
    @apply px-3;
  }

  .card > footer {
    @apply bg-muted/50 rounded-b-xl border-t p-4;
  }

  .card[data-size='sm'] > footer {
    @apply p-3;
  }

  /* 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-[4px] border transition-colors 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-2;
  }

  .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-3 aria-invalid:ring-3;
  }

  :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-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3;
  }

  .fieldset > legend {
    @apply mb-1.5 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-5;

    &[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-2;
  }

  .field > section {
    @apply gap-0.5;
  }

  .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-lg border;
  }

  .field > label:has(input[type='radio']),
  .field > label:has(input[type='checkbox']),
  .field > label:has(input[role='switch']) {
    @apply p-2.5;
  }

  :is(.field > label, label:has(> .field)) > .field {
    @apply p-2.5;
  }
  .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-8 has-[>textarea]:h-auto rounded-lg border border-input transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-3 has-[[aria-invalid=true]]:ring-destructive/20 dark:bg-input/30 dark:has-[[aria-invalid=true]]:ring-destructive/40;
  }


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

  .input-group > :is(input, select, [data-control]) {
    @apply px-2.5 py-1 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-2.5 py-2 text-sm;
  }

  .input-group > :is(span, [role='group'], header, footer),
  .input-group > :is(svg, kbd, .popover, .dropdown-menu) {
    @apply gap-2 py-1.5 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-2;
  }

  .input-group > :is([data-align='end'], [data-align='inline-end']) {
    @apply pe-2;
  }

  .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-align='block-start'] {
    @apply px-2.5 pt-2;
  }

  .input-group > [data-align='block-end'] {
    @apply px-2.5 pb-2;
  }

  .input-group > [data-align='block-start'].border-b {
    @apply pb-2;
  }

  .input-group > [data-align='block-end'].border-t {
    @apply pt-2;
  }
  .input-group[data-orientation='vertical'] > :is(header, footer, [role='group'], [data-align]) {
    @apply px-2.5;
  }

  .input-group[data-orientation='vertical'] > :is(header[data-align='start'], [data-align='block-start']) {
    @apply px-2.5 pt-2;
  }

  .input-group[data-orientation='vertical'] > :is(footer[data-align='end'], [data-align='block-end']) {
    @apply px-2.5 pb-2;
  }

  .input-group[data-orientation='vertical']:has(> input) > :is(header[data-align='start'], [data-align='block-start']) {
    @apply pt-2;
  }

  .input-group[data-orientation='vertical']:has(> input) > :is(footer[data-align='end'], [data-align='block-end']) {
    @apply pb-2;
  }

  .input-group[data-orientation='vertical'] > :is(header[data-align='start'], [data-align='block-start']).border-b {
    @apply pb-2;
  }

  .input-group[data-orientation='vertical'] > :is(footer[data-align='end'], [data-align='block-end']).border-t {
    @apply pt-2;
  }


  .input-group > :is(kbd, span > kbd, [role='group'] > kbd, header > kbd, footer > kbd) {
    @apply rounded-[calc(var(--radius)-5px)];
  }

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

  /* Empty */
  .empty {
    @apply gap-4 rounded-xl border-dashed p-6;
  }

  .empty > header {
    @apply gap-2;
  }

  .empty figure {
    @apply mb-2;
  }

  .empty figure:has(> svg:only-child) {
    @apply bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-4;
  }

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

  .empty > header > p {
    @apply text-muted-foreground text-sm/relaxed;
  }

  .empty > :is(section, footer) {
    @apply gap-2.5 text-sm;
  }

  /* Item */
  .item {
    @apply rounded-lg 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-2.5 px-3 py-2.5;
  }

  .item[data-size='sm'] {
    @apply gap-2.5 px-3 py-2.5;
  }

  .item[data-size='xs'] {
    @apply gap-2 px-2.5 py-2;
  }

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

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

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

  .item > section {
    @apply gap-1;
  }

  .item[data-size='xs'] > section {
    @apply gap-0;
  }

  .item :is(h2, h3, h4) {
    @apply gap-2 text-sm leading-snug font-medium underline-offset-4;
  }

  .item p {
    @apply text-sm leading-normal;
  }

  .item[data-size='xs'] p {
    @apply text-xs;
  }

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

  .sidebar nav > section {
    @apply gap-0;
  }

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

  .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-md p-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-8 text-sm;
  }

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

  .sidebar nav li > :is(a, button)[data-size=lg],
  .sidebar nav li > details > summary[data-size=lg] {
    @apply h-12 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-1 rounded-full;
  }

  .progress > span {
    @apply bg-primary;
  }

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

  /* 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-10 px-2 text-start align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pe-0;
  }

  .table td {
    @apply p-2 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-md px-3 py-1.5 text-xs has-[.kbd]:pe-1.5 [&_.kbd]:relative [&_.kbd]:isolate [&_.kbd]:z-50 [&_.kbd]:rounded-sm;
  }

  [data-tooltip][data-arrow]::after {
    @apply bg-foreground absolute z-[60] size-2.5 rotate-45 rounded-[2px];
  }

  /* 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.25rem;
    --slider-thumb-size: 0.75rem;
  }

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

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

  :is(.field > input[type='range'], .input[type='range'])::-ms-track {
    @apply bg-muted h-1 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 border-ring ring-ring/50 relative size-3 rounded-full border bg-white transition-[color,box-shadow] hover:ring-3 focus-visible:ring-3 active:ring-3 -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 border-ring ring-ring/50 relative size-3 rounded-full border bg-white transition-[color,box-shadow] hover:ring-3 focus-visible:ring-3 active:ring-3 focus-visible:outline-hidden;
  }

  :is(.field > input[type='range'], .input[type='range'])::-ms-thumb {
    @apply border-ring ring-ring/50 relative size-3 rounded-full border bg-white transition-[color,box-shadow] hover:ring-3 focus-visible:ring-3 active:ring-3 focus-visible:outline-hidden;
  }

}