/* ============================================================================
   Tag / Default — COMPONENTS.md §12.1
   Plus the two to-do chips that are built on it.

   §12.1 contract: height 24, radius `shape/radius/chip`, padding `space/xs`,
   `Body/SM Regular`. `color=off` → `soft/neutral/default` + `border/strong` +
   `content/primary`; `color=on` → `soft/brand/default` + `border/brand/default`
   + `content/brand`.

   §12.1 F2: `bg only` and `bord+bg` produce identical output — the `bg only`
   treatment fails to drop its border. Not reproduced; `.tag--bg` here really
   has no border.

   TODO(tokens): every bare px length in this file is a SIZE.
   ========================================================================== */

.tag {
  display: inline-flex;
  flex: none;
  /* `inline-flex` is not enough: as a child of a column flex container the tag
     becomes a flex ITEM, and the default `align-items: stretch` blew it out to
     the full 286px of the pinned card instead of hugging "Crowdfunding".
     `align-self: start` makes the chip hug its content wherever it is placed. */
  align-self: start;
  align-items: center;
  gap: var(--space-2xs);
  block-size: 24px;
  padding-inline: var(--space-xs);
  border: var(--border-width-thin) solid transparent;
  border-radius: var(--shape-radius-chip);
  font-family: var(--font-family-text);
  font-size: var(--font-body-sm-size);
  line-height: var(--font-body-sm-line-height);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--font-letter-spacing-default);
  white-space: nowrap;
}

.tag .icon {
  /* TODO(tokens): size not built. 12px is the DS's tag icon slot. */
  inline-size: 12px;
  block-size: 12px;
}

/* --- color = off --------------------------------------------------------- */
.tag--neutral {
  background: var(--color-soft-neutral-default);
  border-color: var(--color-border-strong);
  color: var(--color-content-primary);
}

/* --- color = on ---------------------------------------------------------- */
.tag--brand {
  background: var(--color-soft-brand-default);
  border-color: var(--color-border-brand-default);
  color: var(--color-on-soft-brand);
}

/* --- TAG STYLE = bg only. Unlike the DS, this actually drops the border. -- */
.tag--bg {
  border-color: transparent;
}

/* --- TAG STYLE = Inline — no chrome at all, just icon + label ------------
   This is what `Row / To-Do / Category` uses for both the category label and
   the timing prefix: no fill, no border, no padding. */
.tag--inline {
  padding-inline: 0;
  border-color: transparent;
  background: none;
  block-size: auto;
}

/* ============================================================================
   p/tag/todo/state-live — the LIVE chip on a to-do row
   ========================================================================== */
.tag--live {
  background: var(--color-solid-danger-default);
  border-color: transparent;
  /* ⚠️ The DS uses `content/inverse` here. That breaks the DESIGN.md §4.4
     pairing contract — `on-solid/danger` is the only legal foreground on
     `solid/danger`, and `content/inverse`'s own description says it is "not the
     same as on-solid". Both are white in Light so the defect is invisible
     there; in Dark they resolve to different values. Corrected. See the README. */
  color: var(--color-on-solid-danger);
  padding-inline: var(--space-2xs);
}

/* `display` on .tag outranks the UA's `[hidden] { display: none }`, so a
   conditionally-shown chip — the LIVE state chip — needs this to hide. */
.tag[hidden] {
  display: none;
}