/* Recipe-detail "Save recipe" button (issue #182, slice B1).

   This is the recipe-detail page's PRIMARY call to action — a labelled
   button, deliberately its OWN component, distinct from the shared
   .save-heart (the bare heart used by recipe cards, /saved, and the
   Explore preview panel). Restyling save-heart would regress those
   surfaces; this component exists so the labelled CTA can carry its own
   treatment without touching the heart.

   The filled-tomato treatment is the one sanctioned exception to the
   design bible's shy-accent rule: this is the single page CTA, so it
   gets --md-primary as its surface.

   Cascade-layer note: lives in `components`. */

@layer components {
  .recipe-save-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-h);
    padding: 0 var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: var(--md-primary);
    color: var(--md-on-primary);
    box-shadow: var(--shadow-sm);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects);

    &:is(:active, [data-force~="active"]) {
      transform: scale(0.97);
    }

    &:focus-visible {
      outline: none;
      box-shadow: var(--focus-ring), var(--shadow-sm);
    }
  }

  /* Hover / active use the .state-layer utility (globals.css), the
     canonical interaction pattern for primary-surface buttons per
     design-bible 7.4.3 / the tokens.css INTERACTION PATTERN SPLIT.
     .state-layer paints a currentColor ::after overlay; on a
     white-on-tomato button currentColor is white, which would lighten
     the surface and invert the affordance -- so the overlay is
     repainted in the foreground tint here so hover darkens it. */
  .recipe-save-button.state-layer::after {
    background: var(--md-on-surface);
  }

  .recipe-save-button__icon {
    flex: 0 0 auto;
  }

  /* Saved state — the action is reversible (clicking again unsaves), so
     the button stays a button but drops the filled-primary treatment:
     a quiet outlined surface with the tomato heart + "Saved" label. The
     .state-layer overlay here uses the default currentColor (tomato on
     a light surface), so no ::after override is needed for this state. */
  .recipe-save-button--saved {
    background: var(--md-surface-container-low);
    color: var(--md-primary);
    border-color: var(--md-primary-muted);
    box-shadow: none;
  }

  .recipe-save-button--saved.state-layer::after {
    background: var(--md-primary);
  }

  /* On mobile the button stretches to fill the action row. */
  @media (max-width: 640px) {
    .recipe-save-button {
      flex: 1;
    }
  }
}