@layer components {
  .singlestage-btn-primary,
  .singlestage-btn-secondary,
  .singlestage-btn-outline,
  .singlestage-btn-ghost,
  .singlestage-btn-link,
  .singlestage-btn-destructive,
  .singlestage-btn-icon {
    @apply [&_svg:not([class*='size-'])]:size-4
    [&_svg]:pointer-events-none
    [&_svg]:shrink-0
    aria-invalid:border-destructive
    aria-invalid:ring-destructive/20
    cursor-pointer
    disabled:opacity-50
    disabled:pointer-events-none
    focus-visible:border-ring
    focus-visible:ring-[3px]
    focus-visible:ring-ring/50
    font-medium
    inline-flex
    items-center
    justify-center
    outline-none
    rounded-md
    shrink-0
    text-sm
    transition-all
    whitespace-nowrap;
  }

  .singlestage-btn-primary,
  .singlestage-btn-secondary,
  .singlestage-btn-outline,
  .singlestage-btn-ghost,
  .singlestage-btn-link,
  .singlestage-btn-destructive {
    @apply gap-2
    h-9
    has-[>svg]:px-3
    px-4
    py-2;
  }

  .singlestage-btn-icon {
    @apply size-9;
  }

  .singlestage-btn-sm {
    @apply gap-1.5
    h-8
    has-[>svg]:px-2.5
    px-3;
  }

  .singlestage-btn-sm-icon {
    @apply size-8;
  }

  .singlestage-btn-lg {
    @apply gap-2
    h-10
    has-[>svg]:px-4
    px-6;
  }

  .singlestage-btn-lg-icon {
    @apply size-10;
  }

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

    &[aria-pressed="true"] {
      @apply bg-primary/90;
    }
  }

  .singlestage-btn-secondary {
    @apply bg-secondary
    shadow-xs
    text-secondary-foreground;

    &:hover,
    &[aria-pressed="true"] {
      @apply bg-secondary/80;
    }
  }

  .singlestage-btn-outline {
    @apply bg-background
    border
    shadow-xs;

    &:hover,
    &[aria-pressed="true"] {
      @apply bg-accent
      text-accent-foreground;
    }
  }

  .singlestage-btn-ghost {
    &:hover,
    &[aria-pressed="true"] {
      @apply bg-accent
      text-accent-foreground;
    }
  }

  .singlestage-btn-link {
    @apply text-primary
    underline-offset-4;

    &:hover,
    &[aria-pressed="true"] {
      @apply hover:underline;
    }
  }

  .singlestage-btn-destructive {
    @apply bg-destructive
    text-white
    shadow-xs
    focus-visible:ring-destructive/20;

    &:hover,
    &[aria-pressed="true"] {
      @apply bg-destructive/90;
    }
  }
}
