/* Pill: an order's standing in one round line, filled (sheet 1c) or ink on nothing in its outlined
   form (sheet 1k). Each child is a part; a `·` in the fill's grey goes between each two, and none
   before a meter, which sits last in a round of the shell's colour. The first part, the stage, is a
   little heavier than the rest. The filled form's colours are three tokens (`--color-pill` and its
   two inks): the ground with the ground's inks in light, the ink with the shell's colour on it in
   dark, because a ground-coloured fill on the dark shell reads quieter than the outlined form and
   turns the pill's emphasis over (tokens.css, the dark theme). Inside it the inks every part reads
   are those, so a part in plain ink needs no class. */
.pill {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  padding: var(--pill-padding);
  border: var(--hairline) solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--text-pill);
  font-weight: var(--weight-regular);
  line-height: var(--leading-section);
}

/* With a meter at its end, the pill closes round the meter's own round. */
.pill:has(> .meter) {
  padding-block: var(--space-1);
  padding-right: var(--space-1);
}

.pill > :first-child {
  font-weight: var(--weight-medium);
}

.pill > * + :not(.meter)::before {
  content: "\00B7";
  margin-right: var(--space-2);
  color: var(--color-muted);
  font-weight: var(--weight-regular);
}

/* The meter as the pill's last part: a round of the shell's colour, the shell's ink in it. */
.pill > .meter {
  padding: var(--space-1) var(--space-3);
  background: var(--color-shell);
  color: var(--color-shell-ink);
  border-radius: var(--radius-pill);
}

.pill-filled {
  --color-ink: var(--color-pill-ink);
  --color-muted: var(--color-pill-muted);
  background: var(--color-pill);
  border-color: var(--color-pill);
  color: var(--color-ink);
}

.pill-outlined {
  background: transparent;
  border-color: var(--color-ink);
  color: var(--color-ink);
}