@layer components {
  .filters {
    display: flex;
    gap: var(--inline-space-half);
  }

  .filters__item {
    display: inline-block;
    padding: 0.25em 0.75em;
    font-size: var(--text-footnote);
    border-radius: var(--border-radius-pill);
    text-decoration: none;
    background: var(--color-border);
    color: var(--color-ink);
    transition: all 150ms ease;

    @media (any-hover: hover) {
      &:hover {
        background: var(--color-ink);
        color: var(--color-ink-inverted);
      }
    }

    &--active {
      background: var(--color-ink);
      color: var(--color-ink-inverted);
    }
  }
}