@layer components {
  .tag {
    white-space: nowrap;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 1em;
    background-color: var(--color-ink-lightest);
    transition: background-color 150ms ease, color 150ms ease;
  }

  .tag:has(input:checked),
  .tag:hover {
    background-color: var(--color-link);
    color: var(--color-ink-inverted);
  }

  .tag input[type="checkbox"] {
    display: none;
  }
}