.container {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-4);
	max-width: 100%;
}

.categorySection {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	margin: 0 auto;
	max-width: 100%;
}

.categoryLabel {
	font-size: var(--font-sm);
	font-weight: var(--weight-semi);
	color: var(--color-text-high);
}

.categoryPill {
	display: flex;
	align-items: center;
	background-color: var(--color-bg-high);
	border: 2px solid var(--color-border);
	border-radius: var(--radius-full);
	overflow-x: auto;
	overflow-y: hidden;
	max-width: 100%;
	width: fit-content;
}

.categoryItem {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-1);
	padding: var(--s-1) var(--s-4);
	border-left: 1.5px solid var(--color-border);
	flex-shrink: 0;

	&[data-first="true"] {
		border-left: none;
	}
}

.categoryName {
	font-size: var(--font-2xs);
	font-weight: var(--weight-semi);
	white-space: nowrap;
}
