@layer components {
  /* 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);
  }
}