/* Platform-wide chip/tag component. `.global-chip` is the canonical small rounded
   label — the single treatment for a metadata tag, skill, role label, or
   key:value pair. The styleguide flags the gap it closes: today four
   hand-rolled shapes (.workers-skill-pill, .badge-role, .opportunities-property-chip, and a
   Bootstrap rounded-pill count) all do this one job. A numeric VALUE (a pay
   amount, a payout, a total) is not a chip — that is .global-value-pill
   (components/value-pill.css).

   Scope: this is the STATIC label chip. It deliberately does NOT cover
     • status pills — those route through the canonical .global-badge component;
     • interactive filter/toggle chips (.settings-scope-pill) — those carry control state
       (radio-backed fills) and stay their own thing;
     • notification count bubbles (.global-sidebar-badge) — a fixed circle, a different job.

       <span class="global-chip">Posing</span>
       <span class="global-chip global-chip--ink">Lead</span>
       <span class="global-chip"><span class="global-chip__label">City</span
             ><span class="global-chip__value">Austin</span></span>

   Chrome + text sizing only, so migrating a hand-rolled tag onto it is a class
   swap. Every color resolves to a token; adoption sweeps retire the raw-hex
   families onto these modifiers. */

/* ── Canonical component ── the neutral micro-tag: subtle fill, pill radius,
   11px meta text. A transparent hairline holds the box the same size whether or
   not a modifier colors the border. */
.global-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-2xs) var(--spacing-sm);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--color-surface-subtle);
    color: var(--color-text);
    font-size: var(--font-size-2xs);
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

/* ── Variants ── each collapses a recipe hand-rolled across feature CSS. */

/* --ink: an ink tint marking a role / lead / emphasized tag (today
   .opportunities-detail__role-chip and .payments-bill-row__referral-tag). Mutually exclusive with
   --outline: both set background + color at equal specificity, so combining
   them just lets whichever is declared later win — pick one, don't stack. */
.global-chip--ink {
    background: var(--color-action-tint-pressed);
    color: var(--color-action);
}

/* --outline: no fill, just a hairline and muted text — for a low-emphasis tag
   that should read as a quiet outline against a busy surface (today the
   availability outline pill). */
.global-chip--outline {
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

/* --md: the chunkier 14px tag for a headline-adjacent label like a City/Remote
   tag, where the 11px micro size reads too small. Size only — it does not make
   a chip the right home for a pay amount; a numeric value still routes through
   .global-value-pill (see the header note). */
.global-chip--md {
    font-size: var(--font-size-md);
    padding: var(--spacing-xs) var(--spacing-sm);
}

/* ── Key:value slots ── for a metadata pair in one chip (today .opportunities-property-chip):
   a muted key and an emphasized value. */
.global-chip__label {
    color: var(--color-text-muted);
}

.global-chip__value {
    font-weight: var(--font-weight-medium);
}

/* ── Remove control ─────────────────────────────────────────────────────────
   A chip that stands for a pick the reader can undo (the Properties card's
   chosen campuses). The × is a bare button INSIDE the chip so the chip stays
   one inline-flex row and the glyph inherits the chip's own colour. */
.global-chip__remove {
    display: inline-flex;
    align-items: center;
    margin-left: var(--spacing-2xs);
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
}

.global-chip__remove:hover,
.global-chip__remove:focus-visible {
    opacity: 1;
}

.global-chip__remove .bi {
    font-size: var(--font-size-sm);
}