@layer components {
  .pill {
    display: inline-block;
    padding: 0.45em 1.2em;
    border-radius: var(--radius-full);
    background: color-mix(
      in srgb,
      var(--accent, var(--color-brand-green)) 10%,
      var(--color-white)
    );
    color: var(--accent, var(--color-brand-green));
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1;
  }
}