/* badge — .badge (styles: soft · solid · outline · plain), .trend
 *
 * data-variant picks the tone (palette roles from core.css), data-style
 * picks how those roles are used. Sizes sit on the 8px grid: 20 / 24 / 32px.
 */
@layer components {
  .badge {
    --badge-h-sm: 1.25rem;
    /* tone roles — neutral by default */
    --t: var(--inverse);
    --t-soft: var(--neutral-soft);
    --t-text: var(--neutral-text);
    --t-line: var(--neutral-line);
    --t-on: var(--inverse-ink);

    /* appearance — soft by default */
    --badge-bg: var(--t-soft);
    --badge-ink: var(--t-text);
    --badge-line: transparent;
    --badge-h: var(--space-3);
    --badge-px: var(--space-1);

    display: inline-flex;
    align-items: center;
    gap: var(--space-0-5);
    block-size: var(--badge-h);
    padding-inline: var(--badge-px);
    border-radius: var(--radius-full);
    background: var(--badge-bg);
    color: var(--badge-ink);
    box-shadow: inset 0 0 0 var(--border-width) var(--badge-line);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: var(--leading-none);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    transition: background-color var(--dur), color var(--dur), box-shadow var(--dur);

    .icon { inline-size: 1.15em; block-size: 1.15em; }

    &[data-variant="accent"] { --t: var(--accent-fill); --t-soft: var(--accent-soft); --t-text: var(--accent-text); --t-line: var(--accent-line); --t-on: var(--accent-ink); }
    &[data-variant="success"] { --t: var(--success); --t-soft: var(--success-soft); --t-text: var(--success-text); --t-line: var(--success-line); --t-on: var(--on-success); }
    &[data-variant="warning"] { --t: var(--warning); --t-soft: var(--warning-soft); --t-text: var(--warning-text); --t-line: var(--warning-line); --t-on: var(--on-warning); }
    &[data-variant="danger"] { --t: var(--danger); --t-soft: var(--danger-soft); --t-text: var(--danger-text); --t-line: var(--danger-line); --t-on: var(--on-danger); }
    &[data-variant="info"] { --t: var(--info); --t-soft: var(--info-soft); --t-text: var(--info-text); --t-line: var(--info-line); --t-on: var(--on-info); }
    &[data-variant="violet"] { --t: var(--violet); --t-soft: var(--violet-soft); --t-text: var(--violet-text); --t-line: var(--violet-line); --t-on: var(--on-violet); }
    &[data-variant="teal"] { --t: var(--teal); --t-soft: var(--teal-soft); --t-text: var(--teal-text); --t-line: var(--teal-line); --t-on: var(--on-teal); }
    &[data-variant="pink"] { --t: var(--pink); --t-soft: var(--pink-soft); --t-text: var(--pink-text); --t-line: var(--pink-line); --t-on: var(--on-pink); }

    /* styles */
    &[data-style="solid"] { --badge-bg: var(--t); --badge-ink: var(--t-on); }
    &[data-style="outline"] { --badge-bg: transparent; --badge-line: var(--t-line); }
    &[data-style="plain"] { --badge-bg: transparent; --badge-ink: var(--ink-2); --badge-px: 0; }

    /* sizes */
    &.badge--sm { --badge-h: var(--badge-h-sm); font-size: var(--text-2xs); }
    &.badge--lg { --badge-h: var(--space-4); --badge-px: var(--space-2); gap: var(--space-1); font-size: var(--text-sm); }

    /* shape */
    &.badge--square { border-radius: var(--radius-xs); }

    /* leading status dot, optionally pulsing ("live") */
    &.badge--dot::before {
      content: "";
      flex-shrink: 0;
      inline-size: 0.5em;
      aspect-ratio: 1;
      border-radius: 50%;
      background: var(--t);
    }
    &[data-style="solid"].badge--dot::before { background: currentColor; }
    &.badge--pulse::before { animation: badge-pulse var(--dur-loop) ease-out infinite; }

    /* numeric counter: a circle for one digit, a pill for more */
    &.badge--count {
      justify-content: center;
      min-inline-size: var(--badge-h);
      padding-inline: var(--space-0-5);
      font-weight: var(--weight-semibold);
    }

    /* removable tag */
    .badge__remove {
      display: grid;
      place-items: center;
      inline-size: 1.25em;
      aspect-ratio: 1;
      margin-inline-end: calc(var(--space-0-5) * -1);
      border-radius: 50%;
      color: inherit;
      opacity: 0.6;
      transition: opacity var(--dur-fast), background-color var(--dur-fast);

      .icon { inline-size: 1em; block-size: 1em; }
      &:hover { opacity: 1; background: color-mix(in oklab, currentColor 14%, transparent); }
      &:focus-visible { outline: none; opacity: 1; box-shadow: 0 0 0 var(--border-width-strong) currentColor; }
    }
  }

  @keyframes badge-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--t) 60%, transparent); }
    70%, 100% { box-shadow: 0 0 0 0.45em color-mix(in oklab, var(--t) 0%, transparent); }
  }

  .trend {
    display: inline-flex;
    align-items: center;
    gap: var(--space-0-5);
    font-size: var(--text-xs);
    color: var(--muted);
    white-space: nowrap;

    strong { font-weight: var(--weight-medium); color: var(--trend-ink, inherit); }
    &[data-dir="up"] { --trend-ink: var(--success-text); }
    &[data-dir="down"] { --trend-ink: var(--danger-text); }
  }
}