@layer components {
  .action-link {
    @apply text-sm/6 font-semibold text-indigo-400 hover:text-indigo-300 transition-colors;
  }

  .btn-primary {
    @apply inline-flex items-center justify-center rounded-md
           bg-indigo-600 font-semibold text-white
           hover:bg-indigo-500 transition-colors
           px-6 py-2.5 text-sm;

    &.-xs { @apply px-3 py-1.5 text-xs; }
    &.-sm { @apply px-4 py-2 text-sm; }
    &.-lg { @apply px-6 py-3 text-sm; }
    &.-auth {
      @apply w-full justify-center px-3 py-1.5 text-sm/6 shadow-sm
             focus-visible:outline-2 focus-visible:outline-offset-2
             focus-visible:outline-indigo-500 cursor-pointer;
    }
  }
}