@layer components {
  .btn {
    @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors
      focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring
      disabled:pointer-events-none disabled:opacity-50
      [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0;
  }

  .btn-primary {
    @apply bg-primary text-primary-foreground shadow hover:bg-primary/90;
  }

  .btn-secondary {
    @apply bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80;
  }

  .btn-ghost {
    @apply hover:bg-accent hover:text-accent-foreground;
  }

  .btn-outline {
    @apply border border-input shadow-sm hover:bg-accent hover:text-accent-foreground;
  }

  .btn-accent {
    @apply bg-accent text-accent-foreground shadow hover:bg-accent/90;
  }

  .btn-destructive {
    @apply bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90;
  }

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

  .btn-sm {
    @apply h-8 rounded-md px-3 text-xs;
  }

  .btn-md {
    @apply h-9 px-4 py-2;
  }

  .btn-lg {
    @apply h-10 rounded-md px-8;
  }

  .btn-icon {
    @apply h-9 w-9;
  }
}
