/**
 * FLUXX — the catalogue filter panel.
 *
 * One piece of markup rendered once, presented two ways: a slide-in drawer on
 * mobile, a static column beside the grid on desktop. Printing it twice would
 * guarantee the two eventually disagree.
 */

/* ------------------------------------------------------- the open button */

.fx-catalogue-head__controls {
	display: flex;
	align-items: center;
	gap: 8px;
}

.fx-filter-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: var(--fx-control-sm);
	padding-inline: 14px;
	border: 1px solid var(--fx-border-control);
	background: var(--fx-paper);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: var(--fx-tracking-nav);
	cursor: pointer;
	transition: border-color var(--fx-dur) var(--fx-ease);
}

.fx-filter-button:hover {
	border-color: var(--fx-ink);
}

.fx-filter-button__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding-inline: 5px;
	border-radius: var(--fx-radius-round);
	background: var(--fx-ink);
	color: var(--fx-text-on-dark);
	font-size: 10px;
	font-weight: var(--fx-weight-bold);
}

/* ----------------------------------------------------------- the groups */

.fx-filters__active {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 18px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--fx-border);
}

/*
 * One pill per applied filter, each removable on its own.
 *
 * The reference offers only "clear all", which is the single most common
 * complaint about its catalogue: narrowing by four things and wanting to undo
 * one of them means starting over.
 */
.fx-filter-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border: 1px solid var(--fx-ink);
	border-radius: var(--fx-radius-pill);
	background: var(--fx-ink);
	color: var(--fx-text-on-dark);
	font-size: 11px;
	white-space: nowrap;
}

.fx-filter-pill:hover {
	background: var(--fx-ink-hover);
	color: var(--fx-text-on-dark);
}

.fx-filter-group {
	border-bottom: 1px solid var(--fx-border);
}

.fx-filter-group__head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 0;
	cursor: pointer;
	list-style: none;
}

.fx-filter-group__head::-webkit-details-marker {
	display: none;
}

.fx-filter-group__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	border-radius: var(--fx-radius-round);
	background: var(--fx-ink);
	color: var(--fx-text-on-dark);
	font-size: 10px;
	font-weight: var(--fx-weight-bold);
}

.fx-filter-group__chevron {
	margin-inline-start: auto;
	transition: transform var(--fx-dur-exit) var(--fx-ease);
}

.fx-filter-group[open] .fx-filter-group__chevron {
	transform: rotate(180deg);
}

/* ---------------------------------------------------------- the options */

.fx-filter-list {
	display: grid;
	gap: 2px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
	/* Long lists scroll inside the group rather than pushing the rest off. */
	max-height: 240px;
	overflow-y: auto;
}

.fx-filter-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
	font-size: 13px;
	color: var(--fx-text);
}

.fx-filter-option:hover {
	color: var(--fx-ink);
}

.fx-filter-box {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	border: 1px solid var(--fx-border-control);
	background: var(--fx-paper);
	position: relative;
}

.fx-filter-option.is-on .fx-filter-box {
	background: var(--fx-ink);
	border-color: var(--fx-ink);
}

/* The tick, drawn rather than loaded. */
.fx-filter-option.is-on .fx-filter-box::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 4px;
	height: 9px;
	border: solid var(--fx-paper);
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg);
}

.fx-filter-option__label {
	flex: 1 1 auto;
	min-width: 0;
}

.fx-filter-option__count {
	flex-shrink: 0;
	color: var(--fx-text-muted);
	font-size: 11px;
}

.fx-filter-option.is-on .fx-filter-option__label {
	font-weight: var(--fx-weight-bold);
}

/* Colour shows as swatches in a wrapping row rather than a list. */
.fx-filter-list--swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-height: none;
}

.fx-filter-list--swatches li {
	width: calc(50% - 4px);
}

.fx-filter-list--swatches .fx-filter-option {
	padding: 4px 0;
}

.fx-filter-list--swatches .fx-swatch {
	width: 18px;
	height: 18px;
}

.fx-filter-list--swatches .fx-filter-option.is-on .fx-swatch {
	box-shadow: 0 0 0 1px var(--fx-paper), 0 0 0 2px var(--fx-ink);
}

/* --------------------------------------------------------------- price */

.fx-filter-price {
	margin-bottom: 16px;
}

.fx-filter-price__row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}

.fx-filter-price input {
	width: 100%;
	height: var(--fx-control-sm);
	padding-inline: 10px;
	border: 1px solid var(--fx-border-control);
	border-radius: var(--fx-radius-none);
	font-size: 13px;
	/* Firefox's spinner steals width the value needs. */
	-moz-appearance: textfield;
}

.fx-filter-price input::-webkit-outer-spin-button,
.fx-filter-price input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.fx-filter-price__dash {
	color: var(--fx-text-muted);
}

/* -------------------------------------------- desktop: a column, not a drawer */

@media (min-width: 1024px) {
	/*
	 * The panel stops being an overlay and becomes the first grid column.
	 * `position: static` and `display: block` undo the drawer treatment;
	 * everything else about it stays identical.
	 */
	.fx-shop-layout {
		display: grid;
		grid-template-columns: 240px minmax(0, 1fr);
		gap: 32px;
		align-items: start;
	}

	.fx-filters.fx-drawer {
		position: sticky;
		top: calc(var(--fx-header-h-md) + 20px);
		inset: auto;
		width: auto;
		height: auto;
		max-height: calc(100vh - var(--fx-header-h-md) - 40px);
		overflow-y: auto;
		background: transparent;
		animation: none;
		/* Beats the [hidden] rule, which only applies while it is a drawer. */
		display: block !important;
	}

	.fx-filters .fx-drawer__head,
	.fx-filters .fx-drawer__foot .fx-btn:not(.fx-btn--secondary) {
		display: none;
	}

	.fx-filters .fx-drawer__body {
		padding: 0;
		overflow: visible;
	}

	.fx-filters .fx-drawer__foot {
		padding: 16px 0 0;
		border-top: 0;
	}

	/* The open button is a mobile affordance only. */
	.fx-filter-button {
		display: none;
	}
}