/**
 * @file
 * gdrfa-Chips — the Dubai Design System chip, reproduced verbatim.
 *
 * Class names, property order, units and token fallbacks below are the design
 * system's own, not this module's. The component is shared with the GDRFA host
 * site and has to stay comparable with it line for line, so nothing here is
 * rewritten to match the conventions the rest of this module follows: the `0px`
 * stays `0px`, the hex fallbacks stay upper-case, and `height`/`max-height` stay
 * physical rather than becoming logical properties.
 *
 * Note the namespace is `gdrfa-`, with no `d` — that is the host design system,
 * distinct from this module's own `gdrfad-` prefix.
 *
 * It lives in its own file, and its own library, so both the archive page and
 * the standalone award page can depend on it. Previously the equivalent styling
 * sat only in gdrfad-awards.css, which meant a direct visit to an award node
 * rendered the category as unstyled text — the archive happened to carry the
 * rule, so the bug only showed outside the dialog.
 */

.gdrfa-Chips {
    display: flex;
    height: 24px;
    max-height: 24px;
    padding: 0px var(--padding-padding-sm, 8px);
    align-items: center;
    gap: var(--gap-gap-xs, 4px);
    border-radius: var(--radius-pill, 999px);
    background: var(--primary-primary-variant, #E7F2FE);
}

.gdrfa-Chips-badge {
    color: var(--primary-on-primary-variant, #1E4B6A);
    font-size: var(--font-size-caption, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--line-height-caption, 20px);
    letter-spacing: 0.14px;
}

/* ------------------------------------------------------------ tone variants --
 *
 * Not part of the design system's own chip. GDRFA colours a chip per taxonomy
 * term through a `--color-<term-uuid>` variable that the host site defines and
 * writes inline; there is no such variable here, so the category's tone is
 * mapped onto the design system's semantic token pairs instead. Same rendering
 * mechanism, sourced from a token that exists on both sites.
 *
 * `primary` is deliberately absent: it is the base rule above, so a primary chip
 * is byte-for-byte the reference component with no override in play.
 */

.gdrfa-Chips[data-tone="secondary"] {
  background: var(--secondary-secondary-variant, #ffeed8);
}
.gdrfa-Chips[data-tone="secondary"] .gdrfa-Chips-badge {
  color: var(--secondary-on-secondary-variant, #4f3700);
}

.gdrfa-Chips[data-tone="info"] {
  background: var(--info-info-variant, #e3f0ff);
}
.gdrfa-Chips[data-tone="info"] .gdrfa-Chips-badge {
  color: var(--info-on-info-variant, #17427a);
}

.gdrfa-Chips[data-tone="success"] {
  background: var(--success-success-variant, #e7f7e6);
}
.gdrfa-Chips[data-tone="success"] .gdrfa-Chips-badge {
  color: var(--success-on-success-variant, #205d2c);
}

.gdrfa-Chips[data-tone="warning"] {
  background: var(--warning-warning-variant, #fff8e7);
}
.gdrfa-Chips[data-tone="warning"] .gdrfa-Chips-badge {
  color: var(--warning-on-warning-variant, #5a4300);
}

.gdrfa-Chips[data-tone="error"] {
  background: var(--error-error-variant, #ffebe6);
}
.gdrfa-Chips[data-tone="error"] .gdrfa-Chips-badge {
  color: var(--error-on-error-variant, #7a2016);
}