.btn {
  @apply relative isolate flex justify-center border-1 items-center gap-x-1.5 rounded-lg transition-colors duration-150 font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus:outline-primary disabled:opacity-50 disabled:pointer-events-none [&_svg]:shrink-0;
}

.btn:not(.btn--sm):not(.btn--xs):not(.btn--lg) {
  @apply px-3 py-1.5 text-sm/6 h-[38px];
}

.btn:not(.btn--icon) {
  @apply [&_svg]:size-4 [&_svg]:stroke-2;
}

.btn--sm {
  @apply px-2.5 py-1 text-sm/6;
}

.btn--xs {
  @apply px-1.5 py-1 text-xs !gap-x-1 [&_svg]:!size-3;
}

.btn--lg {
  @apply px-4 py-2 text-base/6 [&_svg]:size-5;
}

.btn--icon:not(.btn--lg) {
  @apply !size-7 [&_svg]:size-3 [&_svg]:stroke-2;
}

.btn--icon.btn--lg {
  @apply !size-9 [&_svg]:size-4;
}

.btn--primary {
  @apply bg-zinc-900 text-white shadow-xs border-zinc-900 hover:bg-zinc-800/90 dark:bg-zinc-600 dark:border-zinc-600/5 dark:hover:bg-zinc-500/90 after:absolute after:inset-0 after:rounded-lg after:shadow-[inset_0_1px_rgba(255,255,255,0.15)] [&_svg]:text-white;
}

.btn--primary:not(.btn--icon) {
  @apply [&_svg]:opacity-500;
}

.btn--secondary {
  @apply bg-foreground/5 text-foreground shadow-xs border-foreground/5 ring-inset hover:bg-foreground/10 [&_svg]:text-muted-foreground hover:[&_svg]:text-foreground;
}

.btn--tertiary {
  @apply bg-primary text-primary-foreground shadow-xs border-primary hover:bg-primary/90 after:absolute after:inset-0 after:rounded-lg after:shadow-[inset_0_1px_rgba(255,255,255,0.15)] [&_svg]:text-white/50;
}

.btn--ghost {
  @apply bg-transparent border-transparent text-foreground hover:bg-foreground/5 hover:text-foreground [&_svg]:text-muted-foreground hover:[&_svg]:text-foreground;
}

.btn--accent {
  @apply bg-foreground/10 text-foreground shadow-xs hover:bg-foreground/20 [&_svg]:text-foreground/60 hover:[&_svg]:text-foreground/75;
}

.btn--destructive {
  @apply bg-foreground/5 text-destructive shadow-xs border-foreground/10 ring-inset hover:bg-foreground/10 [&_svg]:text-destructive/90 hover:[&_svg]:text-destructive;
}