.filters {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--block-space);
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 0.75em;
  font-size: 0.875rem;
  color: var(--color-ink-muted);
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: 50px;
  transition: all 150ms ease;
  
  &::before {
    content: "";
    width: 0.875em;
    height: 0.875em;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    flex-shrink: 0;
  }
  
  &:hover {
    color: var(--color-ink);
    border-color: color-mix(in oklch, var(--color-ink) 20%, var(--color-border));
  }
  
  &.active {
    color: var(--color-ink);
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    
    &::before {
      background: var(--color-primary);
      border-color: var(--color-primary);
      content: "✓";
      color: white;
      font-size: 0.6em;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.filters--align-left {
  justify-content: flex-start;
}

.filter--