@utility btn {
  @apply inline-flex gap-2 cursor-pointer items-center justify-center rounded-lg px-4 py-2 text-sm font-medium no-underline transition-all duration-150 focus-visible:ring-2 focus-visible:ring-primary-600 focus-visible:outline-none active:scale-96;

  &.btn-sm {
    @apply gap-1.5 px-3 py-1.5 text-xs;
  }

  > svg {
    @apply first:-ml-0.75 last:-mr-0.75;
  }
}

@utility btn-primary {
  &:not(.btn-muted) {
    @apply bg-primary-600 dark:bg-primary-700 text-white hover:bg-primary-700 dark:hover:bg-primary-600;
  }

  &.btn-muted {
    @apply bg-primary-200/70 text-primary-600 hover:bg-primary-300/60 active:bg-primary-300 dark:bg-primary-900/70 dark:text-primary-500 dark:hover:bg-primary-800/60 dark:active:bg-primary-800;
  }
}

@utility btn-secondary {
  @apply bg-neutral-200 dark:bg-neutral-800 text-normal hover:bg-neutral-300 dark:hover:bg-neutral-700 active:bg-neutral-400 dark:active:bg-neutral-600;

  &.btn-muted {
    @apply bg-neutral-200/70 dark:bg-neutral-800/70 text-light hover:bg-neutral-300/70 dark:hover:bg-neutral-700/70 active:bg-neutral-300 dark:active:bg-neutral-700;
  }
}

@utility btn-destructive {
  @apply bg-rose-600 text-white hover:bg-rose-700 focus:ring-rose-500 active:bg-rose-800;

  &.btn-muted {
    @apply bg-rose-200/70 text-rose-600 hover:bg-rose-300/60 focus:ring-rose-500 active:bg-rose-300 dark:bg-rose-900/70 dark:text-rose-400 dark:hover:bg-rose-800/60 dark:active:bg-rose-800;
  }
}

@utility btn-transparent {
  @apply bg-transparent text-primary-600 hover:bg-primary-200/70 active:bg-primary-300/60 dark:hover:bg-primary-900/70 dark:active:bg-primary-800/60;

  &.btn-muted {
    @apply bg-transparent text-light hover:text-normal hover:bg-neutral-200 dark:hover:bg-neutral-800 active:bg-neutral-300 dark:active:bg-neutral-700;
  }
}

@utility btn-link {
  &:not(.btn-muted) {
    @apply cursor-pointer text-sm text-light underline transition-colors duration-150 hover:text-soft;
  }

  &.btn-muted {
    @apply cursor-pointer text-sm text-muted transition-colors duration-150 hover:text-soft;
  }
}

@utility btn-link-primary {
  @apply text-primary-600 focus:ring-primary-500 underline transition-colors duration-150 hover:text-primary-700;
}