/**
 * Based on Styling Cross-Browser Compatible Range Inputs with Sass v1.4.1
 * Github: https://github.com/darlanrod/input-range-sass
 * Author: Darlan Rod https://github.com/darlanrod
 * MIT License
 */

// NOTE: Styles with different vendor prefixes must not be grouped

$track-color: $border-color linear-gradient(
	to right,
	// NOTE: Using color-mix() instead of oklch() for Firefox 128 ESR
	color-mix(in oklch, $link-color, transparent),
	$link-color var(--value),
	transparent var(--value)
);
$track-focus-color: null;
$track-height: g(.25);
$track-radius: $br;

@mixin range-thumb {
	opacity: 0;
	width: 0;
}

@mixin range-track {
	height: $track-height;
	width: 100%;
}

@mixin range {
	appearance: none;
	background: none;
	cursor: pointer;
	height: $track-height;
	margin: $track-height 0;
	width: 100%;

	&::-webkit-slider-runnable-track {
		@include range-track;
		background: $track-color;
		border-radius: $track-radius;
		margin: 0;
	}

	&::-webkit-slider-thumb {
		@include range-thumb;
	}

	&::-moz-range-track {
		@include range-track;
		background: $track-color;
		border: 0;
		border-radius: $track-radius;
	}

	&:focus-visible::-moz-range-track,
	&:hover::-moz-range-track {
		height: calc(#{$track-height} * 2);
		margin: calc(#{$track-height} * -.5) 0;
	}

	&::-moz-range-thumb {
		@include range-thumb;
	}
}