/*
 * F-01 Button — app/components/ui/button_component.rb
 *
 * Six variants (primary/secondary/tertiary/ghost/danger/danger-ghost),
 * three sizes (sm/md/lg). Token vars only — enforced by
 * test/lint/css_token_lint_test.rb.
 *
 * Loading uses a CSS grid overlay: .ui-button__content and
 * .ui-button__loading-content both occupy grid-area 1/1, so the button's
 * intrinsic size is the max of the two and never reflows when the loading
 * class toggles (the "width locked" requirement in the spec).
 *
 * Forced-state classes (.is-hover / .is-active) share their declarations
 * with the real :hover / :active rules via compound selectors, so the
 * styleguide can show hover/active without requiring interaction.
 */

.ui-button {
  display: inline-grid;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: none;
  border-radius: var(--radius-lg);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.ui-button:focus-visible {
  box-shadow: var(--focus-halo);
}

.ui-button--full-width {
  width: 100%;
}

/* Sizes */
.ui-button--sm {
  min-height: var(--control-h-sm);
  padding-inline: var(--space-4);
}

.ui-button--md {
  min-height: var(--control-h);
  padding-inline: var(--space-6);
}

.ui-button--lg {
  min-height: var(--control-h-lg);
  padding-inline: var(--space-6);
}

/* Content / loading overlay */
.ui-button__content,
.ui-button__loading-content {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.ui-button__loading-content {
  visibility: hidden;
}

.ui-button--loading .ui-button__content {
  visibility: hidden;
}

.ui-button--loading .ui-button__loading-content {
  visibility: visible;
}

.ui-button__icon svg {
  display: block;
}

/* Spinner */
.ui-button__spinner-svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
  animation: ui-spin var(--duration-spin) linear infinite;
}

.ui-button--lg .ui-button__spinner-svg {
  width: var(--icon-md);
  height: var(--icon-md);
}

.ui-button__spinner-dot {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .ui-button__spinner-svg {
    animation: none;
  }

  .ui-button__spinner-ring {
    display: none;
  }

  .ui-button__spinner-dot {
    display: block;
  }
}

/* Primary */
.ui-button--primary {
  background: var(--color-accent-strong);
  color: var(--color-on-accent);
}

.ui-button--primary:hover,
.ui-button--primary.is-hover {
  background: var(--color-accent-strong-hover);
}

.ui-button--primary:active,
.ui-button--primary.is-active {
  background: var(--color-accent-pressed);
}

/*
 * Secondary — --color-border-glass is white at 60%, which is a highlight edge
 * for a card sitting on the grey page, not an edge for a control: on the
 * button's own near-white fill it disappears and the button reads as a blank
 * white slab. That was the "doesn't look clickable" note in the 20 Aug review.
 * --color-border-strong is the token for an edge that has to be seen.
 */
.ui-button--secondary {
  background: var(--color-surface);
  color: var(--color-ink);
  border: 1px solid var(--color-border-strong);
}

.ui-button--secondary:hover,
.ui-button--secondary.is-hover {
  background: var(--color-surface-hover);
}

.ui-button--secondary:active,
.ui-button--secondary.is-active {
  background: var(--color-surface-inset);
}

/* Tertiary */
.ui-button--tertiary {
  background: var(--color-accent-100);
  color: var(--color-accent-pressed);
}

.ui-button--tertiary:hover,
.ui-button--tertiary.is-hover {
  background: var(--color-accent-200);
}

/*
 * --color-accent-300 is the disabled-accent fill; accent-pressed text on it
 * is 3.74:1. The pressed state stays one step lighter so the label keeps AA.
 */
.ui-button--tertiary:active,
.ui-button--tertiary.is-active {
  background: var(--color-accent-200);
}

/* Ghost */
.ui-button--ghost {
  background: transparent;
  color: var(--color-ink-muted);
}

.ui-button--ghost:hover,
.ui-button--ghost.is-hover {
  background: var(--color-surface-hover);
  color: var(--color-ink);
}

.ui-button--ghost:active,
.ui-button--ghost.is-active {
  background: var(--color-surface-inset);
  color: var(--color-ink);
}

/* Danger */
.ui-button--danger {
  background: var(--color-danger-strong);
  color: var(--color-on-accent);
}

.ui-button--danger:hover,
.ui-button--danger.is-hover,
.ui-button--danger:active,
.ui-button--danger.is-active {
  background: var(--color-danger-strong-hover);
}

/* Danger ghost */
.ui-button--danger-ghost {
  background: transparent;
  color: var(--color-danger-strong);
}

.ui-button--danger-ghost:hover,
.ui-button--danger-ghost.is-hover,
.ui-button--danger-ghost:active,
.ui-button--danger-ghost.is-active {
  background: var(--color-danger-subtle);
}

/* Disabled — covers real [disabled] buttons and aria-disabled links alike */
.ui-button--disabled {
  cursor: not-allowed;
  pointer-events: none;
  color: var(--color-ink-disabled);
}

.ui-button--primary.ui-button--disabled {
  background: var(--color-accent-300);
}

.ui-button--secondary.ui-button--disabled,
.ui-button--tertiary.ui-button--disabled,
.ui-button--ghost.ui-button--disabled,
.ui-button--danger.ui-button--disabled,
.ui-button--danger-ghost.ui-button--disabled {
  background: var(--color-surface-inset);
  border-color: transparent;
}