/* icon-button.css — Icon-only button. Block alias: .icon-btn
   Shapes:   .icon-btn--square (default, --button-radius) | .icon-btn--circle
   Emphasis: (ghost default) | .icon-btn--outline | .icon-btn--primary
   Sizes:    .icon-btn--sm | (md default) | .icon-btn--lg   → square of --button-height-* (32 / 40 / 48px)
   Parts:    .icon-btn__icon (svg, aria-hidden), .icon-btn__badge (count dot, aria-hidden; count goes in aria-label)
   States:   :hover :focus-visible :active, disabled, aria-disabled="true", aria-pressed="true" (toggle icon buttons).
             Docs-only freeze classes share the selectors: .is-hover, .is-focus-visible, .is-active.
   Pattern:  copies .btn — modifiers set private props (--_bg, --_fg, --_border, --_h), states swap them.
   Name:     always aria-label (verb or noun: "Edit work order", "Notifications, 3 unread") + a tooltip with the same text. */
@layer components {
  .icon-btn {
    --_h: var(--button-height-md);
    --_icon: var(--icon-size-md);
    --_radius: var(--button-radius);
    --_bg: var(--color-action-ghost-bg);
    --_bg-hover: var(--color-action-ghost-bg-hover);
    --_bg-active: var(--color-action-ghost-bg-active);
    --_fg: var(--color-action-ghost-fg);
    --_border: transparent;

    position: relative;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    inline-size: var(--_h);
    block-size: var(--_h);
    padding: 0;
    border: var(--border-width-thin) solid var(--_border);
    border-radius: var(--_radius);
    background: var(--_bg);
    color: var(--_fg);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
      background-color var(--motion-duration-fast) var(--motion-easing-standard),
      border-color var(--motion-duration-fast) var(--motion-easing-standard),
      color var(--motion-duration-fast) var(--motion-easing-standard);
  }

  /* Shapes */
  .icon-btn--square { --_radius: var(--button-radius); }
  .icon-btn--circle { --_radius: var(--radius-full); }

  /* Emphasis */
  .icon-btn--outline {
    --_bg: var(--color-action-secondary-bg);
    --_bg-hover: var(--color-action-secondary-bg-hover);
    --_bg-active: var(--color-action-secondary-bg-active);
    --_fg: var(--color-action-secondary-fg);
    --_border: var(--color-action-secondary-border);
  }
  .icon-btn--primary {
    --_bg: var(--color-action-primary-bg);
    --_bg-hover: var(--color-action-primary-bg-hover);
    --_bg-active: var(--color-action-primary-bg-active);
    --_fg: var(--color-action-primary-fg);
  }

  /* Sizes — same heights as .btn--sm/md/lg so they sit in one row. */
  .icon-btn--sm { --_h: var(--button-height-sm); --_icon: var(--icon-size-sm); }
  .icon-btn--lg { --_h: var(--button-height-lg); --_icon: var(--icon-size-lg); }

  /* Parts */
  .icon-btn__icon {
    inline-size: var(--_icon);
    block-size: var(--_icon);
    stroke-width: var(--icon-stroke);
    pointer-events: none;
  }
  .icon-btn__badge {
    position: absolute;
    inset-block-start: var(--space-0-5);
    inset-inline-end: var(--space-0-5);
    min-inline-size: var(--space-4);
    block-size: var(--space-4);
    padding-inline: var(--space-1);
    border-radius: var(--radius-full);
    background: var(--color-action-danger-bg);
    color: var(--color-action-danger-fg);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: var(--space-4);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
  }

  /* States */
  .icon-btn:hover:not(:disabled, [aria-disabled="true"]),
  .icon-btn.is-hover { background: var(--_bg-hover); }

  .icon-btn:active:not(:disabled, [aria-disabled="true"]),
  .icon-btn.is-active { background: var(--_bg-active); }

  .icon-btn:focus-visible,
  .icon-btn.is-focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
  }

  /* Toggle icon buttons: pressed = selected colors + border, not color alone. */
  .icon-btn[aria-pressed="true"] {
    --_bg: var(--color-selected-bg);
    --_bg-hover: var(--color-selected-bg);
    --_fg: var(--color-selected-fg);
    --_border: var(--color-selected-border);
  }

  .icon-btn:disabled,
  .icon-btn[aria-disabled="true"] {
    --_bg: transparent;
    --_fg: var(--color-text-disabled);
    --_border: transparent;
    cursor: not-allowed;
  }
  .icon-btn--outline:disabled,
  .icon-btn--outline[aria-disabled="true"],
  .icon-btn--primary:disabled,
  .icon-btn--primary[aria-disabled="true"] { --_bg: var(--color-bg-muted); }

  @media (forced-colors: active) {
    .icon-btn { border-color: ButtonText; color: ButtonText; }
    .icon-btn[aria-pressed="true"] { background: Highlight; color: HighlightText; }
    .icon-btn:disabled, .icon-btn[aria-disabled="true"] { color: GrayText; border-color: GrayText; }
    .icon-btn__badge { border: var(--border-width-thin) solid CanvasText; }
  }
}