/* Pill Component
   ========================================================================== */

.pill {
  display: inline-block;
  padding: 0.25em 0.6em;
  font-size: 0.75em;
  font-weight: bold;
  color: var(--color-always-white);
  background-color: var(--color-ink-muted);
  border-radius: 999px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.pill-green {
  background-color: var(--color-green);
}

.pill-yellow {
  background-color: var(--color-yellow);
}

.pill-red {
  background-color: var(--color-red);
}

.pill-blue {
  background-color: var(--color-blue-bright);
}

.pill-blue-muted {
  background-color: oklch(75% 0.14 255);
}

.pill-blue-light {
  background-color: oklch(60% 0.16 255);
}

.pill-blue-vivid {
  background-color: oklch(45% 0.17 255);
}

.pill-blue-deep {
  background-color: oklch(30% 0.15 255);
}

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