/*
 * Numeric range facet: chips of the leading values, then two typed inputs.
 *
 * Ships with the block rather than with the theme: the render callback emits
 * these class names, so a theme that does not know them would leave the block
 * unstyled. Colours and sizes are theme.json tokens — the contract is written
 * down in docs/design/block-css-contract.md.
 */

/* The heading matches gsl/facet-title: same size, same caps, same badge and
   «Скинути» at the right, so the rail reads as one instrument. */
.gsl-range__title {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	margin: 0 0 var(--wp--preset--spacing--20);
}

.gsl-range__unit {
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var(--wp--preset--color--muted);
}

/* ------------------------------------------------------------------ chips ----
   The leaders of the field in this view, as pills. A pressed chip is filled
   with the deep brand tone; the visible range is the span from the lowest
   pressed chip to the highest. */
.gsl-range__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10) 6px;
	padding-block: 2px 0;
}

.gsl-range__chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	padding-inline: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 0.12s, background-color 0.12s, color 0.12s;
}

.gsl-range__chip:hover {
	border-color: var(--wp--preset--color--brand-action);
}

.gsl-range__chip.is-on {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

.gsl-range__chip:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
}

/* «Свій діапазон»: a link-looking button that unfolds the typed range. */
.gsl-range__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 28px;
	margin-block: var(--wp--preset--spacing--10) 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--brand-action);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	cursor: pointer;
}

.gsl-range__more::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.14s;
}

.gsl-range__more[aria-expanded="true"]::after {
	transform: translateY(2px) rotate(-135deg);
}

/* ---------------------------------------------------------------- inputs ----
   Two fields side by side, «від»/«до» inside as a quiet prefix and the unit
   as a suffix, then the button. With scripting on and chips present, the
   row folds behind «Свій діапазон» and the button retires: the desktop
   applies on change, the phone sheet applies through its own button. */
.gsl-range__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin-block-start: var(--wp--preset--spacing--20);
}

.gsl-range__chips + .gsl-range__more + .gsl-range__row {
	margin-block-start: var(--wp--preset--spacing--20);
}

.gsl-js .gsl-range:not(.is-custom) .gsl-range__row,
.gsl-js .gsl-range:not(.is-custom) .gsl-range__hint {
	display: none;
}

.gsl-js .gsl-range__go {
	display: none;
}

.gsl-range__field {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	height: 36px;
	padding-inline: var(--wp--preset--spacing--20);
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--base);
	cursor: text;
}

.gsl-range__field:focus-within {
	border-color: var(--wp--preset--color--brand-action);
}

.gsl-range__label,
.gsl-range__suffix {
	flex: 0 0 auto;
	font-size: var(--wp--preset--font-size--label);
	color: var(--wp--preset--color--muted);
}

.gsl-range__input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
	-moz-appearance: textfield;
}

.gsl-range__input::-webkit-outer-spin-button,
.gsl-range__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.gsl-range__input:focus {
	outline: none;
}

.gsl-range__go {
	height: 36px;
	padding-inline: var(--wp--preset--spacing--30);
	border: 0;
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--brand-action);
	color: var(--wp--preset--color--base);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	cursor: pointer;
}

.gsl-range__go:hover {
	background: var(--wp--preset--color--brand-text);
}

.gsl-range__hint {
	margin: var(--wp--preset--spacing--10) 0 0;
	font-size: var(--wp--preset--font-size--label);
	color: var(--wp--preset--color--muted);
}

/* Under a thumb: taller chips and fields. */
@media (hover: none) {
	.gsl-range__chip {
		min-height: 40px;
		padding-inline: var(--wp--preset--spacing--40);
		font-size: var(--wp--preset--font-size--base);
	}

	.gsl-range__more {
		min-height: 40px;
	}

	.gsl-range__field,
	.gsl-range__go {
		height: 44px;
	}
}