/*
 * A short status word (DESIGN.md §5). Always a word, colour second. The
 * filled brand colours carry text that passes AA: ink on orange, paper on
 * forest.
 */
@layer components {
  .badge {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-s);
    font: var(--text-small);
    font-weight: 500;
    white-space: nowrap;
    background: var(--color-surface-2);
    color: var(--color-muted);
  }

  .badge--attention {
    background: var(--color-attention);
    color: var(--color-ink);
  }

  .badge--positive {
    background: var(--color-positive);
    color: var(--color-paper);
  }

  .badge--negative {
    background: var(--color-negative);
    color: var(--color-paper);
  }

  /* A badge that opens something (the schedule popover): same look, clickable. */
  .badge--button {
    min-block-size: auto;
    border: 0;
    cursor: pointer;

    &:hover {
      filter: brightness(0.92);
    }

    &.badge--attention:hover {
      background: var(--color-attention);
      color: var(--color-ink);
    }

    &.badge--positive:hover {
      background: var(--color-positive);
      color: var(--color-paper);
    }
  }
}