/**
 * The listing filter bar.
 *
 * A plain GET form, so everything here is static: no open/close states, no
 * JavaScript hooks. Layout only has to survive Lithuanian labels, which run
 * longer than the English ones this was written against.
 */

@layer components {
	.hauto-car-filters {
		/*
		 * A facet is as wide as this whatever is ticked in it. Sized by its
		 * own width and not by its content, the row never reflows when a
		 * visitor ticks a third fuel type and pushes the year filter onto a
		 * line of its own; the summary ellipses instead.
		 */
		--hauto-filter-facet-width: 11rem;

		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--50);
		margin-block-start: var(--wp--preset--spacing--50);
		padding: var(--wp--preset--spacing--50);
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--hauto-radius-md);
		background-color: var(--wp--preset--color--base);
	}

	.hauto-car-filters__title {
		font-size: var(--wp--preset--font-size--large);
	}

	/* The field is the control; the input inside it carries no chrome. */
	.hauto-car-filters__search {
		display: flex;
		gap: var(--wp--preset--spacing--30);
		align-items: center;
		width: 100%;
		max-width: 26rem;
		padding-inline: var(--wp--preset--spacing--40);
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--hauto-radius-sm);
		background-color: var(--wp--preset--color--base);
		color: var(--wp--preset--color--muted);
		transition:
			border-color 140ms ease-out,
			box-shadow 140ms ease-out;

		&:focus-within {
			border-color: var(--wp--preset--color--primary);
			box-shadow: 0 0 0 3px
				color-mix(in srgb, var(--wp--preset--color--primary) 15%, transparent);
			color: var(--wp--preset--color--primary-strong);
		}
	}

	.hauto-car-filters__search-input {
		flex: 1;
		height: 2.3rem;
		min-width: 0;
		padding: 0;
		border: 0;
		background: none;
		color: var(--wp--preset--color--contrast);
		font-size: var(--wp--preset--font-size--small);
		outline: none;

		&::-webkit-search-cancel-button {
			appearance: none;
		}
	}

	/*
	 * Bottom-aligned, not top: a range carries a label above its inputs and a
	 * facet does not, so aligning the controls themselves is what puts them on
	 * one line. The facet panel is absolutely positioned, so it is unaffected.
	 */
	.hauto-car-filters__facets {
		display: flex;
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--30);
		align-items: end;
	}

	/*
	 * Everything after the first two facets folds away on a phone, behind a
	 * toggle that sits under it. From 40rem up the fold generates no box, so
	 * its contents sit in the facet row as if it were not there, and the
	 * toggle is gone. `aria-expanded` is the only state; the fold precedes its
	 * button, so it is reached through the parent. See assets/js/filter-facets.js.
	 */
	.hauto-car-filters__more {
		display: contents;
	}

	.hauto-car-filters__more-toggle {
		display: none;
	}

	.hauto-car-filters__more-label--open,
	.hauto-car-filters__more-toggle[aria-expanded='true'] .hauto-car-filters__more-label--closed {
		display: none;
	}

	.hauto-car-filters__more-toggle[aria-expanded='true'] .hauto-car-filters__more-label--open {
		display: inline;
	}

	.hauto-car-filters__more-toggle[aria-expanded='true'] .hauto-icon {
		rotate: 180deg;
	}

	/*
	 * A facet is a native <details>: the panel opens and closes with no
	 * JavaScript, so the form stays the plain GET form the shareable URLs
	 * depend on. The panel floats, so opening one does not push the grid down.
	 */
	.hauto-car-filters__facet {
		min-width: 0;
		margin: 0;
		padding: 0;
		border: 0;
	}

	/*
	 * Every control in the bar names itself above itself — facets and ranges
	 * alike — so the closed control only has to show its value.
	 */
	.hauto-car-filters__legend {
		padding: 0;
		margin-block-end: var(--wp--preset--spacing--10);
		color: var(--wp--preset--color--muted);
		font-size: var(--wp--preset--font-size--small);
	}

	/* The panel hangs off the summary itself; a fieldset stretched by a taller
	   sibling would drop it half a row too low. */
	.hauto-car-filters__facet-disclosure {
		position: relative;
		width: var(--hauto-filter-facet-width);
	}

	.hauto-car-filters__facet-summary {
		display: flex;
		gap: var(--wp--preset--spacing--20);
		align-items: center;
		padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--hauto-radius-sm);
		background-color: var(--wp--preset--color--base);
		font-size: var(--wp--preset--font-size--small);
		list-style: none;
		cursor: pointer;
		transition:
			border-color 140ms ease-out,
			background-color 140ms ease-out;

		&:hover {
			border-color: var(--wp--preset--color--contrast);
		}

		&::-webkit-details-marker {
			display: none;
		}
	}

	/* Selected is legible on the closed summary, without a script to count it. */
	.hauto-car-filters__facet-disclosure:has(:checked) .hauto-car-filters__facet-summary {
		border-color: var(--wp--preset--color--primary);
		background-color: color-mix(in srgb, var(--wp--preset--color--primary) 8%, transparent);
		color: var(--wp--preset--color--primary-strong);
	}

	.hauto-car-filters__facet-value {
		flex: 1;
		min-width: 0;
		overflow: hidden;
		color: var(--wp--preset--color--muted);
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.hauto-car-filters__facet-disclosure[open] .hauto-icon {
		rotate: 180deg;
	}

	.hauto-car-filters__facet-summary .hauto-icon {
		margin-inline-start: auto;
		transition: rotate 180ms cubic-bezier(0.16, 1, 0.3, 1);
	}

	.hauto-car-filters__facet-panel {
		position: absolute;
		z-index: 5;
		inset-block-start: calc(100% + var(--wp--preset--spacing--10));
		inset-inline-start: 0;
		min-width: 100%;
		padding: var(--wp--preset--spacing--20);
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--hauto-radius-md);
		background-color: var(--wp--preset--color--base);
		box-shadow: var(--wp--preset--shadow--raised);
	}

	.hauto-car-filters__options {
		display: flex;
		flex-direction: column;
		gap: 1px;
		max-height: 14rem;
		margin: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: var(--wp--preset--color--border) transparent;
		font-size: var(--wp--preset--font-size--small);
	}

	.hauto-car-filters__option {
		display: flex;
		gap: var(--wp--preset--spacing--30);
		align-items: center;
		padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
		border-radius: var(--hauto-radius-sm);

		&:hover {
			background-color: var(--wp--preset--color--surface-light);
		}

		& label {
			flex: 1;
			min-width: 0;
			cursor: pointer;
		}
	}

	.hauto-car-filters__option input {
		width: 1rem;
		height: 1rem;
		margin: 0;
		accent-color: var(--wp--preset--color--primary);
	}

	@media (prefers-reduced-motion: reduce) {
		.hauto-car-filters__facet-summary,
		.hauto-car-filters__facet-summary .hauto-icon {
			transition: none;
		}
	}

	/*
	 * The plug-in hybrid flag: the same control as a facet summary, but there is
	 * nothing to open, so the whole control is the checkbox's label.
	 */
	.hauto-car-filters__flag {
		display: flex;
		gap: var(--wp--preset--spacing--20);
		align-items: center;
		padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--hauto-radius-sm);
		background-color: var(--wp--preset--color--base);
		font-size: var(--wp--preset--font-size--small);
		transition:
			border-color 140ms ease-out,
			background-color 140ms ease-out;

		&:hover {
			border-color: var(--wp--preset--color--contrast);
		}

		&:has(:checked) {
			border-color: var(--wp--preset--color--primary);
			background-color: color-mix(in srgb, var(--wp--preset--color--primary) 8%, transparent);
			color: var(--wp--preset--color--primary-strong);
		}

		& input {
			width: 1rem;
			height: 1rem;
			margin: 0;
			accent-color: var(--wp--preset--color--primary);
		}

		& label {
			cursor: pointer;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.hauto-car-filters__flag {
			transition: none;
		}
	}

	/*
	 * The ranges travel together: price and year belong on one line, and the
	 * bar should break before them rather than between them. Wrapping inside
	 * the group is left on, so a phone can still stack them.
	 */
	.hauto-car-filters__ranges {
		display: flex;
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--30);
		align-items: end;
	}

	/* Two fields reading as one range, with the dash carrying "to". */
	.hauto-car-filters__range {
		display: flex;
		flex-wrap: nowrap;
		gap: var(--wp--preset--spacing--20);
		align-items: center;
		min-width: 0;
	}

	.hauto-car-filters__range-field {
		display: flex;
		flex: none;
		gap: var(--wp--preset--spacing--10);
		align-items: center;
		min-width: 0;
		padding-inline: var(--wp--preset--spacing--30);
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--hauto-radius-sm);
		background-color: var(--wp--preset--color--base);
		color: var(--wp--preset--color--muted);
		transition: border-color 140ms ease-out;

		&:focus-within {
			border-color: var(--wp--preset--color--primary);
			color: var(--wp--preset--color--primary-strong);
		}
	}

	/* A year is picked, not typed: the same field, with a real option list. */
	.hauto-car-filters__range-select {
		/* The same width as a typed number, so picking a year moves nothing. */
		width: 4.5rem;
		height: 2.4rem;
		min-width: 0;
		padding: 0;
		border: 0;
		background: none;
		color: var(--wp--preset--color--contrast);
		font-size: var(--wp--preset--font-size--small);
		cursor: pointer;
		outline: none;
	}

	.hauto-car-filters__range-unit {
		font-size: var(--wp--preset--font-size--small);
	}

	.hauto-car-filters__range-dash {
		flex: none;
		width: var(--wp--preset--spacing--30);
		height: 1px;
		background-color: var(--wp--preset--color--border);
	}

	/*
	 * The range inputs carry no chrome of their own — the field around them is
	 * the control — so the spin buttons have to go with it.
	 */
	.hauto-car-filters__number {
		/* Four digits for a year, six for a price: one width serves both. */
		width: 4.5rem;
		min-width: 0;
		height: 2.4rem;
		padding: 0;
		border: 0;
		appearance: textfield;
		background: none;
		color: var(--wp--preset--color--contrast);
		font-size: var(--wp--preset--font-size--small);
		outline: none;

		&::-webkit-outer-spin-button,
		&::-webkit-inner-spin-button {
			appearance: none;
			margin: 0;
		}
	}

	.hauto-car-filters__actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
		align-items: end;
		justify-content: space-between;
		padding-block-start: var(--wp--preset--spacing--40);
		border-top: 1px solid var(--wp--preset--color--border);
	}

	.hauto-car-filters__buttons {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--40);
		justify-content: end;
		align-items: center;
	}

	.hauto-car-filters__clear {
		font-size: var(--wp--preset--font-size--small);
	}

	/*
	 * A phone gets two controls to a line. Last in the file, because it
	 * overrides widths the rules above set. The facet width is dropped so each
	 * fills its column, and a legend that wraps still leaves the controls level.
	 */
	@media (width < 40rem) {
		.hauto-car-filters__search {
			max-width: unset;
		}
		.hauto-car-filters {
			padding: var(--wp--preset--spacing--40);
			gap: var(--wp--preset--spacing--30);
		}
		.hauto-car-filters__title {
			display: none;
		}

		.hauto-car-filters__buttons button {
			width: 100%;
		}
		.hauto-car-filters__actions {
			border-top: none;
			padding-top: 0;
		}

		.hauto-car-filters__facets,
		.hauto-car-filters__more {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.hauto-car-filters__facet-disclosure {
			width: auto;
		}

		.hauto-car-filters__more,
		.hauto-car-filters__more-toggle,
		.hauto-car-filters__facet--flag,
		.hauto-car-filters__ranges {
			grid-column: 1 / -1;
		}

		.hauto-car-filters__more {
			gap: var(--wp--preset--spacing--30);
			align-items: end;
		}

		.hauto-car-filters__facets:has(> .hauto-car-filters__more-toggle[aria-expanded='false'])
			> .hauto-car-filters__more {
			display: none;
		}

		.hauto-car-filters__more-toggle {
			display: flex;
			gap: var(--wp--preset--spacing--20);
			align-items: center;
			justify-self: center;
			padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
			border: 0;
			background: none;
			color: var(--wp--preset--color--muted);
			font-size: var(--wp--preset--font-size--small);
			cursor: pointer;

			& .hauto-icon {
				transition: rotate 180ms cubic-bezier(0.16, 1, 0.3, 1);
			}
		}

		/*
		 * A range is two fields already, so it takes the whole line. A grid and
		 * not a flex column: Chrome sizes a stretched fieldset by its content.
		 */
		.hauto-car-filters__ranges {
			display: grid;
			grid-template-columns: minmax(0, 1fr);
		}

		.hauto-car-filters__range-field,
		.hauto-car-filters__number,
		.hauto-car-filters__range-select {
			flex: 1;
		}

		.hauto-car-filters__number,
		.hauto-car-filters__range-select {
			width: auto;
		}
	}

	/*
	 * Without scripting the toggle can do nothing, so the fold stays open and
	 * the toggle goes: every filter in view, which is what the markup is.
	 */
	@media (scripting: none) {
		.hauto-car-filters__facets:has(> .hauto-car-filters__more-toggle[aria-expanded='false'])
			> .hauto-car-filters__more {
			display: grid;
		}

		.hauto-car-filters__more-toggle {
			display: none;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.hauto-car-filters__more-toggle .hauto-icon {
			transition: none;
		}
	}

	/* The count and the sort share a line; a long label wraps the sort under it. */
	.hauto-archive__bar {
		display: flex;
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--30);
		align-items: center;
		justify-content: space-between;
		margin-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
	}

	.hauto-archive__count {
		color: var(--wp--preset--color--muted);
		font-size: var(--wp--preset--font-size--small);
	}

	.hauto-archive__sort-select {
		max-width: 100%;
		padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--hauto-radius-sm);
		background-color: var(--wp--preset--color--base);
		font-size: var(--wp--preset--font-size--small);
		cursor: pointer;
	}

	.hauto-archive__empty {
		margin-block-start: var(--wp--preset--spacing--60);
	}
}