/* ══════════════════════════════════════════════════════════════════════
   ADS Chip — the single chip/badge/pill/status-label component for V2
   ──────────────────────────────────────────────────────────────────────
   Ports the Ads Design System Chip (Figma DJb3yM8aOQjIAbTQ9Cd8Mi,
   node 219:248). Every value below is that component's own token, with the
   Figma fallback inlined so the chip is correct even where the token layer
   isn't loaded.

   API — set on the element, no wrapper markup required:
     class="ads-chip"        the component
     data-variant=           default | info | success | warning | error | emphasis
     data-size=              small (default) | default
     data-interactive        opt in to the ADS hover treatment
     aria-disabled="true"    ADS disabled treatment
   The label is the element's own text, so nothing here can rewrite content.

   Anatomy note: ADS nests a _label frame with its own 4px padding-x inside
   the chip's padding-x. With no icon present the two are adjacent, so they
   are summed into one padding here (6+4=10, 8+4=12). Same rendered box,
   no extra DOM for page scripts that write chip innerHTML to trip over.
   ══════════════════════════════════════════════════════════════════════ */

.ads-chip {
  /* Small is the V2 table default: it keeps the 12px label the data tables
     already use, where ADS Default's 14px would loosen row density. */
  --ads-chip-pad-y: 3px;
  --ads-chip-pad-x: 10px;
  --ads-chip-font-size: 12px;
  --ads-chip-line: 18px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* Hugs its content — never stretched to the cell, never a fixed width.
     Height is declared rather than left alone because the legacy rules this
     replaces pinned it (v2-ar.css .badge height:22px, .detail-status-chip
     height:24px); padding plus line-height must decide the box instead.

     `fit-content`, not `auto`. A flex item only stretches to its parent's
     cross size while its cross-size property is auto, so `auto` left the chip
     at the mercy of whatever contained it: fine in a table cell, which is a
     row, but in the detail panel's column it grew to the full 210px and read
     as a button. An explicit width opts out of the stretch in both, and unlike
     `align-self` it means the same thing whichever way the parent runs — so
     this cannot quietly re-align chips inside the table rows. */
  width: fit-content;
  max-width: 100%;
  height: auto;
  min-height: 0;
  padding: var(--ads-chip-pad-y) var(--ads-chip-pad-x);
  box-sizing: border-box;
  border: 1px solid var(--chip-border, rgba(15, 18, 20, 0.1));
  border-radius: 100px;
  background: var(--chip-background, #eceeee);
  color: var(--chip-text, #1e2528);
  font-family: var(--font-family, "Open Sans");
  font-size: var(--ads-chip-font-size);
  font-style: normal;
  font-weight: 600;
  line-height: var(--ads-chip-line);
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  /* Status chips are output, not controls. */
  cursor: default;
}

.ads-chip[data-size="default"] {
  --ads-chip-pad-y: 4px;
  --ads-chip-pad-x: 12px;
  --ads-chip-font-size: 14px;
  --ads-chip-line: 20px;
}

/* ── Variants ─────────────────────────────────────────────────────────── */
.ads-chip[data-variant="default"] {
  --chip-background: #eceeee;
  --chip-border: rgba(15, 18, 20, 0.1);
  --chip-text: #1e2528;
}

.ads-chip[data-variant="info"] {
  --chip-background: #dde6f7;
  --chip-border: #4f80e0;
  --chip-text: #143f90;
}

.ads-chip[data-variant="success"] {
  --chip-background: #e0ede5;
  --chip-border: #6cb288;
  --chip-text: #365944;
}

.ads-chip[data-variant="warning"] {
  --chip-background: #fae2c8;
  --chip-border: #f5bb7a;
  --chip-text: #5c3711;
}

.ads-chip[data-variant="error"] {
  --chip-background: #f8e0e2;
  --chip-border: #db5461;
  --chip-text: #993b44;
}

.ads-chip[data-variant="emphasis"] {
  --chip-background: #e2e3f2;
  --chip-border: #6567ce;
  --chip-text: #2d2f8c;
}

/* ── States ───────────────────────────────────────────────────────────── */
/* Hover is opt-in. A status chip is not clickable, so it must not react to
   the pointer or advertise an affordance it doesn't have. */
.ads-chip[data-interactive] {
  cursor: pointer;
}

.ads-chip[data-interactive]:hover {
  opacity: 0.85;
}

.ads-chip[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

/* Optional leading icon, sized to the label. Present for API completeness;
   V2's existing chips are text-only and none is added by the migration. */
.ads-chip > svg,
.ads-chip > img {
  flex: 0 0 auto;
  width: var(--ads-chip-line);
  height: var(--ads-chip-line);
}

/* Semantic `.status-chip--*` / `.inv-chip--*` classes stay on the markup so
   page scripts that rewrite className keep working. Colour comes only from
   data-variant after v2-chip.js maps the label. */

/* Combined with the legacy class v2-chip.js leaves on the element, this
   outranks leftover page rules (.ap-tag padding, .badge height) so the
   ADS chip box is the one that paints. */
.badge.ads-chip,
.badge-sm.ads-chip,
.detail-status-chip.ads-chip,
.ap-tag.ads-chip,
.owa-priority-chip.ads-chip {
  padding: var(--ads-chip-pad-y) var(--ads-chip-pad-x);
  border-radius: 100px;
  font-size: var(--ads-chip-font-size);
  font-weight: 600;
  line-height: var(--ads-chip-line);
  height: auto;
  min-height: 0;
  background: var(--chip-background, #eceeee);
  color: var(--chip-text, #1e2528);
  border: 1px solid var(--chip-border, rgba(15, 18, 20, 0.1));
}