.esther-filter-pills {
    padding-block: var(--s-4);
}

.esther-filter-pills__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin: 0;
}

.esther-filter-pills__pill {
    display: inline-block;
    padding: var(--s-2) var(--s-4);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text);
    background: transparent;
    border: 1px solid var(--color-border);
    text-decoration: none;
    transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
}

.esther-filter-pills__pill:hover {
    background: var(--color-text);
    color: var(--color-accent-ink);
    border-color: var(--color-text);
}

.esther-filter-pills__pill--active {
    background: var(--color-text);
    color: var(--color-accent-ink);
    border-color: var(--color-text);
}

.esther-filter-pills__pill--clear {
    color: var(--color-text-muted);
    border-color: transparent;
}

.esther-filter-pills__pill--clear:hover {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-text);
}