@layer components {
  .filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-space-half);
    margin-block-end: var(--block-space);
  }

  .filter {
    padding-block: 0.2rem;
    padding-inline: 0.6rem;
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-round);
    text-decoration: none;
    color: var(--color-muted);
    font-size: var(--text-small);
    transition: background-color 120ms, border-color 120ms, color 120ms;

    &:hover {
      border-color: var(--color-muted);
      color: var(--color-ink);
    }
  }

  .filter--on {
    border-color: var(--color-ink);
    background: var(--color-ink);
    color: var(--color-page);

    &:hover {
      border-color: var(--color-ink);
      color: var(--color-page);
    }
  }

  .filter__count {
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
  }

  .filter--on .filter__count {
    color: inherit;
    opacity: 0.7;
  }
}