/* Base button. Compose with one variant + zero or more modifiers:
 *
 *   <%= button_to "Save",    path, class: "btn primary" %>
 *   <%= button_to "Sign in", path, class: "btn primary full" %>
 *   <%= link_to   "Cancel",  path, class: "btn secondary" %>
 *   <%= button_to "Reset",   path, class: "btn warning" %>
 *
 * Variants (primary/secondary/destructive/warning) are exclusive — pick one.
 * Modifiers (`full`) are additive. Keeping the API in CSS rather than a Ruby
 * helper means views read like idiomatic Rails — no `btn(:primary)`-shaped
 * indirection between the view and the class string. */

.btn {
  @apply inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-bold transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60;

  /* ---- Variants (pick one) ---------------------------------------------- */

  &.primary {
    @apply bg-heroku-30 text-white hover:bg-heroku-20 focus-visible:ring-heroku-30;
  }

  &.secondary {
    @apply border border-slate-300 bg-white text-slate-700 hover:bg-slate-50 focus-visible:ring-slate-400;
  }

  &.destructive {
    @apply bg-danger text-white hover:bg-danger-dark focus-visible:ring-danger;
  }

  /* Amber-on-amber: destructive but recoverable. Used by the admin
   * "Reset application" action — clears progress without deleting the
   * student row, audited via `ApplicationResetLog`. Visually distinct
   * from `.destructive` so an admin can't muscle-memory through it. */
  &.warning {
    @apply bg-warning-dark text-white hover:bg-amber-950 focus-visible:ring-warning;
  }

  /* ---- Modifiers (combine freely) --------------------------------------- */

  /* Full-width block button. The `text-center` is load-bearing for
   * `<a class="btn">`: `.btn`'s `inline-flex` would otherwise leave the
   * label left-aligned when the anchor stretches to full width. */
  &.full {
    @apply block w-full text-center;
  }
}