.filterbar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-bottom: var(--space-xl);
}

.filterbar__pill {
	padding: 0.375rem var(--space-md);
	background-color: var(--color-surface);
	border-radius: var(--radius-pill);
	color: var(--color-text-muted);
	transition: background-color var(--transition), color var(--transition);
}

.filterbar__pill:hover {
	background-color: var(--color-surface-high);
	color: var(--color-primary);
}

.filterbar__pill--active,
.filterbar__pill--active:hover {
	background-color: var(--color-primary);
	color: var(--color-on-primary);
	font-weight: 500;
}

.filterbar__pill--active:hover {
	background-color: var(--color-primary-soft);
}