/**
 * Range: .mk-range (templates/components/range.php, store range.js).
 *
 * Two transparent native inputs lie on one track; only their thumbs take the
 * pointer. A thumb centre travels between thumb/2 and 100% − thumb/2, so the
 * fill and the values sit on a rail inset by half a thumb, where a position
 * is simply --mk-range-from / --mk-range-to (0–1) × 100%. Values above the
 * thumbs shift from left- to right-aligned as they move, so they never leave
 * the box; .is-merged (set by the store) shows one "from – to" value instead.
 */

.mk-range {
	--mk-range-thumb: var(--wp--custom--range--thumb-size);
	--mk-range-half: calc(var(--mk-range-thumb) / 2);
	--mk-range-from: 0;
	--mk-range-to: 1;

	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--range--label-gap);
}

.mk-range__values,
.mk-range__field {
	position: relative;
}

.mk-range__field {
	block-size: var(--mk-range-thumb);
}

/* Rail: the box in which 0–1 maps to the thumb centre (values use their margin). */
.mk-range__rail {
	position: absolute;
	inset-block: 0;
	inset-inline: var(--mk-range-half);
}

.mk-range__values {
	margin-inline: var(--mk-range-half);
	block-size: calc(var(--wp--custom--text--body-medium--line-height) * 1em);
	color: var(--wp--custom--color--text--primary);
	font-family: var(--wp--custom--text--body-medium--font-family);
	font-size: var(--wp--custom--text--body-medium--font-size);
	font-weight: var(--wp--custom--text--body-medium--font-weight);
	line-height: var(--wp--custom--text--body-medium--line-height);
	letter-spacing: var(--wp--custom--text--body-medium--letter-spacing);
	white-space: nowrap;
}

.mk-range__value {
	--mk-range-at: var(--mk-range-from);

	position: absolute;
	inset-block-start: 0;
	inset-inline-start: calc(var(--mk-range-at) * 100%);
	transform: translateX(calc(var(--mk-range-at) * -100%));
}

.mk-range__value--to {
	--mk-range-at: var(--mk-range-to);
}

.mk-range__value--both {
	--mk-range-at: calc((var(--mk-range-from) + var(--mk-range-to)) / 2);
}

.mk-range__value--both,
.mk-range.is-merged :is(.mk-range__value--from, .mk-range__value--to) {
	visibility: hidden;
}

.mk-range.is-merged .mk-range__value--both {
	visibility: visible;
}

.mk-range__track {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 50%;
	block-size: var(--wp--custom--range--track-height);
	border-radius: var(--wp--custom--range--track-radius);
	background-color: var(--wp--custom--color--range--track);
	transform: translateY(-50%);
}

.mk-range__rail::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: calc(var(--mk-range-from) * 100%);
	inline-size: calc((var(--mk-range-to) - var(--mk-range-from)) * 100%);
	background-color: var(--wp--custom--color--range--fill);
}

/* Native inputs: transparent, full width; only the thumbs catch the pointer. */
.mk-range__input {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	margin: 0;
	background: none;
	pointer-events: none;
	appearance: none;
}

.mk-range__input::-webkit-slider-runnable-track {
	block-size: 100%;
	background: none;
}

.mk-range__input::-moz-range-track {
	background: none;
}

.mk-range__input::-webkit-slider-thumb {
	box-sizing: border-box;
	inline-size: var(--mk-range-thumb);
	block-size: var(--mk-range-thumb);
	border: var(--wp--custom--range--thumb-border-width) solid
		var(--wp--custom--color--range--thumb-border);
	border-radius: 50%;
	background-color: var(--wp--custom--color--range--thumb-background);
	cursor: grab;
	pointer-events: auto;
	appearance: none;
}

.mk-range__input::-moz-range-thumb {
	box-sizing: border-box;
	inline-size: var(--mk-range-thumb);
	block-size: var(--mk-range-thumb);
	border: var(--wp--custom--range--thumb-border-width) solid
		var(--wp--custom--color--range--thumb-border);
	border-radius: 50%;
	background-color: var(--wp--custom--color--range--thumb-background);
	cursor: grab;
	pointer-events: auto;
}

.mk-range__input:active::-webkit-slider-thumb {
	cursor: grabbing;
}

.mk-range__input:active::-moz-range-thumb {
	cursor: grabbing;
}

.mk-range__input:focus-visible {
	outline: none;
}

.mk-range__input:focus-visible::-webkit-slider-thumb {
	outline: var(--wp--custom--focus--ring-width) solid
		var(--wp--custom--color--focus--ring);
	outline-offset: var(--wp--custom--focus--ring-offset);
}

.mk-range__input:focus-visible::-moz-range-thumb {
	outline: var(--wp--custom--focus--ring-width) solid
		var(--wp--custom--color--focus--ring);
	outline-offset: var(--wp--custom--focus--ring-offset);
}