/**
 * Fuel calculator — range slider fill (paired with part-fuel-calculator-bike.php).
 *
 * @package NewTechPrice
 */

.ntp-fuel-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 8px;
	border-radius: 4px;
	background: linear-gradient(
		to right,
		var(--ntp-primary-color, #0a58ca) 0%,
		var(--ntp-primary-color, #0a58ca) var(--slider-pct, 20%),
		var(--ntp-border-color, #dfe4ea) var(--slider-pct, 20%),
		var(--ntp-border-color, #dfe4ea) 100%
	);
	outline: none;
}

.ntp-fuel-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--ntp-primary-color, #0a58ca);
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.ntp-fuel-slider::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--ntp-primary-color, #0a58ca);
	cursor: pointer;
	border: none;
}

[data-theme='dark'] .ntp-fuel-slider {
	background: linear-gradient(
		to right,
		var(--ntp-primary-color, #0a58ca) 0%,
		var(--ntp-primary-color, #0a58ca) var(--slider-pct, 20%),
		var(--ntp-border-color, #334155) var(--slider-pct, 20%),
		var(--ntp-border-color, #334155) 100%
	);
}