.btn {
  @apply inline-flex items-center justify-center whitespace-nowrap rounded-lg font-semibold transition-colors;
  @apply cursor-pointer;
  @apply focus-within:outline-none focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1;
  @apply disabled:pointer-events-none disabled:bg-zinc-100 disabled:text-zinc-400;

  &-primary {
    @apply bg-blue-600 text-white hover:bg-blue-600/90;
  }

  &-secondary-blue {
    @apply bg-blue-200 text-blue-600 hover:bg-blue-300/50;
  }

  &-danger {
    @apply bg-danger text-danger-foreground hover:bg-danger/90;
  }

  &-secondary-danger {
    @apply bg-red-200 text-red-600 hover:bg-red-300/50;
  }

  &-outline {
    @apply border-input border bg-transparent;
  }

  &-secondary {
    @apply bg-secondary text-secondary-foreground hover:bg-secondary/80;
  }

  &-success {
    @apply bg-green-500 text-white hover:bg-green-500/80;
  }

  &-ghost {
    @apply hover:bg-secondary hover:text-secondary-foreground;
  }

  &-sm {
    @apply h-7 rounded-md px-3 text-xs;
  }

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

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

  &-loading {
    @apply pointer-events-none opacity-50;
    &-circle {
      @apply mr-2 h-4 animate-spin opacity-50;
      > circle {
        opacity: 0.25;
      }
      > path {
        opacity: 0.75;
      }
    }
  }
}

[type='button'],
[type='reset'],
[type='submit'] {
  &.btn-primary {
    @apply bg-blue-600 hover:bg-blue-600/90;
    @apply disabled:pointer-events-none disabled:bg-zinc-100 disabled:text-zinc-400;
  }
  &.btn-secondary {
    @apply bg-secondary hover:bg-secondary/80;
    @apply disabled:pointer-events-none disabled:bg-zinc-100 disabled:text-zinc-400;
  }
  &.btn-secondary-blue {
    @apply bg-blue-200 text-blue-900 hover:bg-blue-200/80;
    @apply disabled:pointer-events-none disabled:bg-zinc-100 disabled:text-zinc-400;
  }
  &.btn-danger {
    @apply bg-danger hover:bg-danger/90;
    @apply disabled:pointer-events-none disabled:bg-zinc-100 disabled:text-zinc-400;
  }
}