@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .link {
    @apply text-blue-600 hover:text-blue-700;
  }

  .link-underline {
    @apply text-blue-600 hover:text-blue-700 underline;
  }

  .btn {
    @apply inline-flex items-center rounded-md px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2;
  }

  .btn.btn--primary {
    @apply bg-blue-600 text-white hover:bg-blue-700 focus-visible:outline-blue-600;
  }

  .btn.btn--secondary {
    @apply bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50;
  }

  .btn.btn--danger {
    @apply bg-red-600 text-white hover:bg-red-500 focus-visible:outline-red-600;
  }
}