/* ══════════════════════════════════════════════════════════════════════════
   Button — one green action, plus a secondary and a tertiary (§2.3).

   Rectangle at --r-1. Not a pill: `border-radius: 999px` is the condemned
   kit's most recognisable tell (§6) and only two radii exist in the system.
   No border on the primary, no shadow anywhere, no `Npx Npx 0` offset and no
   shadow-shrink press — the active state is a 1px translate and nothing else.

   Sentence case, never uppercase. `KOSÁRBA` is shouting, and shouting is what
   the three rejected identities all did.
   ══════════════════════════════════════════════════════════════════════ */

@layer components {
  .rtv-btn {
    /* Height is a variable rather than three separate rules so the same
       component can be 48px on a PDP and 44px in a card without a modifier
       having to restate padding, radius and type. */
    --rtv-btn-h: var(--ctl-h);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-block-size: var(--rtv-btn-h);
    padding-inline: var(--s-4);
    border: 0;
    border-radius: var(--r-1);
    font-family: var(--rtv-font-goods);
    font-size: var(--t-15);
    font-weight: 700;
    line-height: var(--lh-tight);
    letter-spacing: .005em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dur-1) var(--ease-out),
                transform var(--dur-1) var(--ease-out),
                border-color var(--dur-1) var(--ease-out);
  }

  .rtv-btn--dense {
    --rtv-btn-h: var(--ctl-h-dense);
  }

  .rtv-btn--block {
    display: flex;
    inline-size: 100%;
  }

  /* ── primary: THE action ────────────────────────────────────────────────
     One per surface. Green is the action colour (ADR 0023), which is also why
     no price and no heading may be green — a green price looks clickable. */
  .rtv-btn--primary {
    background-color: var(--rtv-green-action);
    color: var(--rtv-on-action);
  }

  .rtv-btn--primary:hover {
    background-color: var(--rtv-green-action-hover);
  }

  /* ── secondary: a real alternative, not a second primary ────────────── */
  .rtv-btn--secondary {
    background-color: transparent;
    border: var(--bw-control) solid var(--rtv-line);
    color: var(--rtv-ink);
  }

  .rtv-btn--secondary:hover {
    border-color: var(--rtv-ink);
    background-color: var(--rtv-ground-sunk);
  }

  /* ── tertiary: a link that needs a tap target ───────────────────────── */
  .rtv-btn--tertiary {
    padding-inline: var(--s-2);
    background-color: transparent;
    color: var(--rtv-link);
    font-family: var(--rtv-font-system);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }

  .rtv-btn--tertiary:hover {
    color: var(--rtv-green-action-hover);
  }

  .rtv-btn:active:not([aria-disabled='true'], :disabled) {
    /* The fill does not change and nothing presses into a shadow. */
    transform: translateY(1px);
  }

  /* Ink, not green: a green ring on a green fill is invisible. */
  .rtv-btn:focus-visible {
    outline: 3px solid var(--rtv-ink);
    outline-offset: 2px;
  }

  /* ── disabled ───────────────────────────────────────────────────────────
     A bare disabled button is a defect, not a state (§2.3). The named reason
     is rendered by the caller as .rtv-btn__reason and is not optional. */
  .rtv-btn[aria-disabled='true'],
  .rtv-btn:disabled {
    background-color: var(--rtv-ground-sunk);
    border: var(--bw-control) solid var(--rtv-line);
    color: var(--rtv-ink-3);
    cursor: not-allowed;
  }

  .rtv-btn__reason {
    display: block;
    margin-block-start: var(--s-2);
    color: var(--rtv-ink-2);
    font-family: var(--rtv-font-system);
    font-size: var(--t-13);
    line-height: var(--lh-tight);
  }

  /* ── loading ────────────────────────────────────────────────────────────
     The label never changes and never becomes a spinner: a stopped frame must
     still say what the control does. The progress rule is the only motion,
     and under reduced motion it renders static at full width — still-frame
     sufficiency (ADR 0024). */
  .rtv-btn[aria-busy='true']::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: 0;
    block-size: 2px;
    background-color: var(--rtv-green-band);
    inline-size: 100%;
    animation: rtv-btn-progress var(--dur-3) var(--ease-out) both;
  }

  @keyframes rtv-btn-progress {
    from { inline-size: 12%; }
    to   { inline-size: 100%; }
  }

  @media (prefers-reduced-motion: reduce) {
    .rtv-btn[aria-busy='true']::after {
      animation: none;
    }
  }

  .rtv-btn .rtv-mark {
    --rtv-mark-size: 1.1em;
  }
}