/* Personal feed row - layout of the picker and the chosen state of a chip.

   The chips themselves are the theme's own .sort-btn, the filter switch that sits above every
   listing, so their shape, size, colours and dark theme all come from the theme and not from here.
   This file adds only what .sort-btn has no opinion about: how the picker is arranged, and what a
   chip looks like once it is picked.

   Every colour below is a theme variable. The site already defines --bg-button twice, once per
   theme, so a chip follows the light and dark palettes without this feature knowing either exists. */

.pf-picker {
	margin: 0 0 16px;
}

.pf-picker__head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin-bottom: 10px;
}

.pf-picker__title {
	color: var(--color-main);
	font-weight: 700;
	font-size: 16px;
}

.pf-picker__hint {
	color: var(--color-secondary);
	font-size: 12px;
}

.pf-picker__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* The theme clears the browser's own button border in its .button rule, and its filter switches
   carry .button alongside .sort-btn to get it. Ours cannot take that class as well: the same rule
   sets height 50px and a 20px radius, which would undo the switch's own shape. So the border is
   cleared here instead - same result, nothing else dragged in, and the shared class left alone. */
.pf-chip {
	border: none;
}

/* Chosen. The theme paints a filter switch this way on hover, so a picked chip and a hovered one
   look the same on purpose - it is the site's existing vocabulary for "this one is on". */
.pf-chip--on {
	background-color: var(--color-active);
	color: var(--color-primary);
	border: none;
}

.pf-chip--on:hover {
	background-color: var(--color-active-darkness);
}

.pf-empty {
	margin: 0;
	padding: 8px 0 4px;
	color: var(--color-secondary);
	font-size: 14px;
}

@media (max-width: 600px) {
	/* One line that scrolls sideways rather than four lines that push the row itself below the
	   fold. The chips keep their own width; only the strip moves. */
	.pf-picker__chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
	}

	.pf-chip {
		flex: none;
	}
}