/* chip — @tokens: --chip-padding-x, --chip-padding-y

   A compact interactive pill: filter / selection token / removable tag. Sibling
   to the static `.hzo-badge` (a chip is INTERACTIVE — hover / selected / focus /
   removable — so it lives on its own). Composes inside `.hzo-tag-group`.

   Token-only: the control's padding pair has no semantic token in the scale, so
   it's a component token with a literal fallback — the same dial pattern
   icon-button.css / buttons.css use. Everything else reads a semantic/L1 token. */
.hzo-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--chip-padding-y, 4px) var(--chip-padding-x, 12px);
    border: var(--border-1) solid transparent;
    border-radius: var(--radius-full);
    background: var(--bg-alt);
    color: var(--text-body);
    font-size: var(--fs-50);
    line-height: var(--lh-none);
    cursor: pointer;
    transition: background var(--transition-base) ease, color var(--transition-base) ease, border-color var(--transition-base) ease;
}

/* Leading dot / icon — optional status swatch or glyph. */
.hzo-chip__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hzo-chip__icon > svg { display: block; }

/* Trailing × — its OWN focusable <button>, so it gets its own focus ring. */
.hzo-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    border-radius: var(--radius-full);
    opacity: var(--opacity-muted);
    cursor: pointer;
    transition: opacity var(--transition-base) ease;
}
.hzo-chip__remove:hover { opacity: 1; }
.hzo-chip__remove > svg { display: block; }

/* Hover — border firms up to signal interactivity (ghost, no fill). */
.hzo-chip:hover {
    border-color: var(--border);
    color: var(--text-heading);
}

/* Selected — brand fill with on-brand ink. Two spellings of one meaning: the
   `--selected` modifier for static markup, `.is-active` for the JS-toggled state. */
.hzo-chip--selected,
.hzo-chip.is-active {
    background: var(--brand);
    color: var(--text-on-brand);
    border-color: var(--brand);
}

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

@media (prefers-reduced-motion: reduce) {
    .hzo-chip,
    .hzo-chip__remove { transition: none; }
}