.btn {
  @apply rounded-md px-3 py-2 text-sm font-semibold text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 cursor-pointer text-center;

  &-primary {
    @apply bg-primary-600 hover:bg-primary-500 focus-visible:outline-primary-600;
  }

  &-dark {
    @apply bg-primary-900 hover:bg-primary-950 focus-visible:outline-primary-950;
  }

  &-attention {
    @apply bg-[#f43f5e] hover:bg-[#ff0000] focus-visible:outline-[#ff0000];
  }

  &-alert {
    @apply bg-[#ff0000] hover:bg-[#ff0000] focus-visible:outline-[#ff0000];
  }

  &-fw {
    @apply w-28;
  }
}