@layer button {
  /* Button */
  :not(form[method='dialog']) > :is(button:not([role]), input:is([type='submit'], [type='reset'], [type='button']), a.button) {
    @apply bounce;
    @apply inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:cursor-not-allowed 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;

    /* Default size */
    &:not([data-size]) {
      @apply gap-2 h-9 px-4 py-2 has-[>svg]:px-3;
    }

    &[data-size='sm'] {
      @apply gap-1.5 h-8 px-3 has-[>svg]:px-2.5;
    }

    &[data-size='lg'] {
      @apply gap-2 h-10 px-6 has-[>svg]:px-4;
    }

    &[data-size='icon'] {
      @apply size-9;
    }

    &:not([data-variant]),
    &[data-variant='primary'] {
      @apply bg-primary text-primary-foreground shadow-xs hover:not-disabled:bg-primary/90;
      &[aria-pressed='true'] {
        @apply bg-primary/90;
      }
    }

    &[data-variant='secondary'] {
      @apply bg-secondary text-secondary-foreground shadow-xs;

      &:hover:not(disabled),
      &[aria-pressed='true'] {
        @apply bg-secondary/80;
      }
    }

    &[data-variant='outline'] {
      @apply border bg-background shadow-xs dark:bg-input/30 dark:border-input;
      &:hover:not(:disabled),
      &[aria-pressed='true'] {
        @apply bg-accent text-accent-foreground dark:bg-accent/50;
      }
    }

    &[data-variant='ghost'] {
      &:hover:not(:disabled),
      &[aria-pressed='true'] {
        @apply bg-accent text-accent-foreground dark:bg-accent/50;
      }
    }

    &[data-variant='link'] {
      @apply text-primary underline-offset-4;
      &:hover:not(:disabled),
      &[aria-pressed='true'] {
        @apply hover:underline;
      }
    }

    &[data-variant='destructive'] {
      @apply bg-destructive text-white shadow-xs focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60;
      &:hover:not(:disabled),
      &[aria-pressed='true'] {
        @apply bg-destructive/90 dark:bg-destructive/50;
      }
    }
  }
}