/* Width and height filter (includes/shop-filters.php). */

.eux-rq-dim + .eux-rq-dim {
	margin-top: 22px;
}

.eux-rq-dim-head {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
	font-size: 14px;
}

.eux-rq-dim-label {
	color: var(--wd-title-color, #242424);
}

.eux-rq-dim-value {
	color: var(--color-gray-500, #767676);
}

/* Two range inputs on one track; only their handles take the pointer. */
.eux-rq-range {
	position: relative;
	height: 18px;
}

.eux-rq-range::before,
.eux-rq-range-fill {
	content: "";
	position: absolute;
	top: 50%;
	height: 2px;
	margin-top: -1px;
	background: var(--brdcolor-gray-300, #ddd);
}

.eux-rq-range::before {
	left: 0;
	right: 0;
}

.eux-rq-range-fill {
	left: 0;
	right: 0;
	background: var(--wd-primary-color, #323438);
}

.eux-rq-range input[type="range"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 18px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	-webkit-appearance: none;
	appearance: none;
	pointer-events: none;
}

.eux-rq-range input[type="range"]::-webkit-slider-runnable-track {
	height: 18px;
	background: none;
	border: 0;
}

.eux-rq-range input[type="range"]::-moz-range-track {
	height: 18px;
	background: none;
	border: 0;
}

.eux-rq-range input[type="range"]::-webkit-slider-thumb {
	width: 16px;
	height: 16px;
	margin-top: 1px;
	border: 2px solid var(--wd-primary-color, #323438);
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	pointer-events: auto;
	-webkit-appearance: none;
	appearance: none;
}

.eux-rq-range input[type="range"]::-moz-range-thumb {
	width: 12px;
	height: 12px;
	border: 2px solid var(--wd-primary-color, #323438);
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	pointer-events: auto;
}

.eux-rq-range input[type="range"]:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 3px rgba(50, 52, 56, 0.2);
}

.eux-rq-dims-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 18px;
}

/* With JavaScript the sliders apply on release, so the button is only a fallback. */
.eux-rq-dims-js .eux-rq-dims-apply {
	display: none;
}

.eux-rq-dims-clear {
	font-size: 13px;
	text-decoration: underline;
}