/* icon-button — @tokens: --icon-button-size, --icon-button-icon-size, --icon-button-radius, --icon-button-color, --icon-button-hover-bg, --icon-button-hover-color

   The general-purpose square/round icon control: a bare <button> (or <a>) whose
   only content is an icon (svg / icon font). Sibling to the specialized
   `.hzo-close` (which is the dismiss-specific variant); use `.hzo-icon-button`
   for toolbar actions, card actions, pagination arrows, share/like toggles, etc.

   Token-only: control DIMENSIONS (box + icon size) have no semantic token in the
   scale, so they are component tokens with a literal fallback — the same dial
   pattern buttons.css uses (`var(--btn-padding-y, 14px)`). Everything else reads
   a semantic/L1 token. */
.hzo-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--icon-button-size, 40px);
    height: var(--icon-button-size, 40px);
    padding: 0;
    border: var(--border-1) solid transparent;
    background: transparent;
    color: var(--icon-button-color, var(--text-muted));
    border-radius: var(--icon-button-radius, var(--radius-control));
    cursor: pointer;
    transition: background var(--transition-base) ease, color var(--transition-base) ease, border-color var(--transition-base) ease;
}
.hzo-icon-button > svg,
.hzo-icon-button > .hzo-icon {
    display: block;
    width: var(--icon-button-icon-size, 20px);
    height: var(--icon-button-icon-size, 20px);
}

/* Hover / active — ghost fill on the alt surface with heading-ink foreground. */
.hzo-icon-button:hover,
.hzo-icon-button.is-active {
    background: var(--icon-button-hover-bg, var(--bg-alt));
    color: var(--icon-button-hover-color, var(--text-heading));
}

/* Variants — solid (brand) and outline. Default (no modifier) is the ghost above. */
.hzo-icon-button--solid {
    background: var(--brand);
    color: var(--text-on-brand);
    border-color: var(--brand);
}
.hzo-icon-button--solid:hover,
.hzo-icon-button--solid.is-active {
    background: var(--brand-hover-on-light);
    color: var(--text-on-brand);
    border-color: var(--brand-hover-on-light);
}
.hzo-icon-button--outline {
    border-color: var(--border);
    color: var(--text-body);
}
.hzo-icon-button--outline:hover,
.hzo-icon-button--outline.is-active {
    border-color: var(--brand);
    color: var(--brand-text);
    background: transparent;
}

/* Sizes — small / large dial the box + icon together. */
.hzo-icon-button--sm { --icon-button-size: 32px; --icon-button-icon-size: 16px; }
.hzo-icon-button--lg { --icon-button-size: 48px; --icon-button-icon-size: 24px; }

/* A11y — required. Focus ring; disabled state. Reduced-motion handled globally
   by components/_base/a11y.css. */
.hzo-icon-button:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}
.hzo-icon-button[disabled],
.hzo-icon-button[aria-disabled="true"],
.hzo-icon-button.is-disabled {
    opacity: var(--opacity-disabled);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .hzo-icon-button { transition: none; }
}