/*
 * petpartners/product-filters
 *
 * Operate mode: this is a tool. A checkbox looks like a checkbox, the panel is
 * where every shop puts it, and nothing here is clever. A filter people have to
 * learn is a filter they abandon.
 */

.petpartners-filters__panel {
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--md );
}

.petpartners-filters__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --wp--preset--spacing--sm );
}

.petpartners-filters__title {
	margin: 0;
	font-family: var( --wp--preset--font-family--sans );
	font-size: var( --wp--preset--font-size--heading );
	font-weight: 600;
	line-height: var( --wp--custom--typography--heading--line-height );
}

.petpartners-filters__group {
	margin: 0;
	padding: 0;
	border: 0;
	border-top: 1px solid var( --wp--preset--color--border );
	padding-top: var( --wp--preset--spacing--sm );
}

.petpartners-filters__legend {
	padding: 0;
	margin-bottom: var( --wp--preset--spacing--xs );
	font-family: var( --wp--preset--font-family--sans );
	font-size: var( --wp--preset--font-size--label );
	font-weight: 600;
	line-height: var( --wp--custom--typography--label--line-height );
	letter-spacing: var( --wp--custom--typography--label--letter-spacing );
	text-transform: uppercase;
	color: var( --wp--preset--color--text-muted );
}

.petpartners-filters__options {
	margin: 0;
	padding: 0;
	list-style: none;
}

.petpartners-filters__options .is-child {
	padding-left: var( --wp--preset--spacing--sm );
}

/*
 * The whole row is the target, not the 16px box the browser draws. WCAG 2.2
 * asks for 44px under a thumb, and a checkbox label that only responds on the
 * tick itself is the most common way a filter panel fails that.
 */
.petpartners-filters__option {
	display: flex;
	align-items: center;
	gap: var( --wp--preset--spacing--xs );
	min-height: var( --wp--custom--chrome--tap-target );
	cursor: pointer;
}

.petpartners-filters__option input {
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	accent-color: var( --wp--preset--color--purple );
	cursor: pointer;
}

.petpartners-filters__option-label {
	flex: 1 1 auto;
	font-size: var( --wp--preset--font-size--base );
	line-height: var( --wp--custom--typography--base--line-height );
}

/*
 * The count is decoration for the eye — the same number is in the label's
 * hidden text as "7 products", which is what a screen reader should hear
 * instead of a bare digit after a name.
 */
.petpartners-filters__option-count {
	flex: 0 0 auto;
	color: var( --wp--preset--color--text-muted );
	font-size: var( --wp--preset--font-size--sm );
	font-variant-numeric: tabular-nums;
}

/*
 * Selected is the ticked box plus the weight of its label. Never colour on its
 * own: WCAG 1.4.1, and the ticked box is the signal a checkbox already carries.
 */
.petpartners-filters__option input:checked + .petpartners-filters__option-label {
	font-weight: 600;
}

/* --- Applied filters --------------------------------------------------- */

.petpartners-filters__active-title {
	margin: 0 0 var( --wp--preset--spacing--xs );
	font-family: var( --wp--preset--font-family--sans );
	font-size: var( --wp--preset--font-size--label );
	font-weight: 600;
	line-height: var( --wp--custom--typography--label--line-height );
	letter-spacing: var( --wp--custom--typography--label--letter-spacing );
	text-transform: uppercase;
	color: var( --wp--preset--color--text-muted );
}

.petpartners-filters__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--xxs );
	margin: 0 0 var( --wp--preset--spacing--xs );
	padding: 0;
	list-style: none;
}

.petpartners-filters__chip {
	display: inline-flex;
	align-items: center;
	gap: var( --wp--preset--spacing--3xs, 0.25rem );
	min-height: var( --wp--custom--chrome--tap-target );
	padding-inline: var( --wp--preset--spacing--xs );
	border: 1px solid var( --wp--preset--color--brown );
	border-radius: var( --wp--preset--border-radius--pill );
	color: var( --wp--preset--color--brown );
	font-size: var( --wp--preset--font-size--sm );
	text-decoration: none;
}

/*
 * The cross is drawn, not typed. A multiplication sign in a text node is a
 * character a screen reader may read aloud, and the accessible name of this
 * link is already the sentence "Remove filter Category: Skin & Coat".
 */
.petpartners-filters__chip::after {
	content: "";
	width: 0.625rem;
	height: 0.625rem;
	background-color: currentColor;
	mask-image: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M1 1l8 8M9 1l-8 8" stroke="black" stroke-width="1.5" fill="none"/></svg>' );
	mask-size: contain;
	mask-repeat: no-repeat;
}

.petpartners-filters__chip:hover,
.petpartners-filters__chip:focus-visible {
	background-color: var( --wp--preset--color--brown );
	color: var( --wp--preset--color--white );
}

.petpartners-filters__clear {
	font-size: var( --wp--preset--font-size--sm );
	text-underline-offset: 0.2em;
}

.petpartners-filters__apply {
	align-self: start;
}

/* --- Mobile: the panel is a drawer ------------------------------------- */

.petpartners-filters__trigger,
.petpartners-filters__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var( --wp--preset--spacing--xxs );
	min-height: var( --wp--custom--chrome--tap-target );
	padding-inline: var( --wp--preset--spacing--sm );
	border: 1px solid var( --wp--preset--color--brown );
	border-radius: var( --wp--preset--border-radius--md );
	background: none;
	color: var( --wp--preset--color--brown );
	font-family: var( --wp--preset--font-family--sans );
	font-size: var( --wp--preset--font-size--base );
	font-weight: 600;
	cursor: pointer;
}

.petpartners-filters__trigger-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	height: 1.5rem;
	border-radius: var( --wp--preset--border-radius--pill );
	background-color: var( --wp--preset--color--brown );
	color: var( --wp--preset--color--white );
	font-size: var( --wp--preset--font-size--sm );
	font-variant-numeric: tabular-nums;
}

@media ( max-width: 899px ) {
	.petpartners-filters__panel {
		position: fixed;
		inset: 0;
		z-index: 100;
		display: none;
		overflow-y: auto;
		padding: var( --wp--preset--spacing--md );
		background-color: var( --wp--preset--color--white );
	}

	.petpartners-filters__panel.is-open {
		display: flex;
	}

	.petpartners-filters__apply {
		position: sticky;
		/*
		 * Clear of the bottom edge, and the panel below carries room for it:
		 * a sticky button inside a scrolling panel sits on top of whatever
		 * scrolls under it, and without the padding the last facet's options
		 * end up behind it with no way to reach them.
		 */
		bottom: var( --wp--preset--spacing--xs );
		align-self: stretch;
		text-align: center;
	}

	.petpartners-filters__panel.is-open {
		padding-bottom: calc( var( --wp--custom--chrome--tap-target ) + var( --wp--preset--spacing--md ) );
	}
}

@media ( min-width: 900px ) {
	.petpartners-filters__trigger,
	.petpartners-filters__close {
		display: none;
	}

	/*
	 * A tick submits the form, so the button would be a second way to do what
	 * just happened. The no-JavaScript stylesheet in functions.php puts it
	 * back, because there it is the only way to submit at all.
	 */
	.petpartners-filters__apply {
		display: none;
	}
}