/*
 * F-02 Icon button — app/components/ui/icon_button_component.rb
 *
 * Circular (--radius-round). Four variants (glass/plain/accent/danger),
 * two sizes (default 44px / dense 36px). Token vars only — enforced by
 * test/lint/css_token_lint_test.rb.
 *
 * Forced-state classes (.is-hover / .is-active) share their declarations
 * with the real :hover / :active rules via compound selectors.
 */

.ui-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-round);
  background: transparent;
  color: var(--color-ink-muted);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

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

.ui-icon-button svg {
  display: block;
}

/* Sizes */
.ui-icon-button--default {
  width: var(--control-h);
  height: var(--control-h);
}

.ui-icon-button--dense {
  position: relative;
  width: var(--control-h-sm);
  height: var(--control-h-sm);
}

/* Tap-target extension (matches the technique in pagination.css): the
   button itself stays painted at --control-h-sm (36px), but an invisible
   ::after extends the actual hit area out to --tap-min (44px) — a click
   on the extra margin still lands on the button, since generated content
   is part of its own box for hit-testing.

   Vertical-only expansion (§4.3 adjacent-target separation, WCAG 2.5.5-
   style rationale): expanding horizontally too would grow each dense
   button's hit area past its own footprint, and two dense buttons placed
   with a typical 8px gap (--space-2) would then have overlapping hit
   areas — a click near the gap could land on the wrong button. Capping
   the horizontal inset to 0 keeps the hit area's width equal to the
   button's own painted width, so adjacent dense buttons never overlap
   regardless of gap; the full 44px target is still reached vertically. */
.ui-icon-button--dense::after {
  content: "";
  position: absolute;
  inset-block: calc((var(--control-h-sm) - var(--tap-min)) / 2);
  inset-inline: 0;
}

/* Glass (default) */
.ui-icon-button--glass {
  background: var(--color-surface-inset);
}

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

.ui-icon-button--glass:active,
.ui-icon-button--glass.is-active {
  background: var(--color-surface-sunken);
  color: var(--color-ink);
}

/* Plain */
.ui-icon-button--plain {
  background: transparent;
}

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

.ui-icon-button--plain:active,
.ui-icon-button--plain.is-active {
  background: var(--color-surface-sunken);
  color: var(--color-ink);
}

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

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

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

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

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

/* Disabled */
.ui-icon-button--disabled {
  cursor: not-allowed;
  pointer-events: none;
  background: var(--color-surface-inset);
  color: var(--color-ink-disabled);
}