// Fylgja (https://fylgja.dev)
// Licensed under MIT Open Source

$track-size: 0.8ex !default;
$track-radius: 0.3rem !default;
$track-color: color-mix(in srgb, currentcolor 24%, canvas) !default;
$track-fill: var(--form-active-color, currentcolor) !default;

$thumb-size-y: 2.5em !default;
$thumb-size-x: 1em !default;
$thumb-radius: 1em !default;
$thumb-stroke: var(--root-bg) !default;
$thumb-stroke-size: 3px !default;
$thumb-color: var(--form-active-color, currentcolor) !default;

@mixin thumb {
	appearance: none;
	block-size: var(--thumb-size-y);
	inline-size: var(--thumb-size-x);
	box-shadow: var(--thumb-shadow);
	border-radius: var(--thumb-radius);
	border: solid var(--thumb-stroke);
	border-width: var(--thumb-stroke-size);
	background-color: var(--thumb-color);
}

:where(input[type="range"]) {
	--range-value: 0;

	--track-dir: to right;
	--track-size: #{$track-size};
	--track-radius: #{$track-radius};
	--track-color: #{$track-color};
	--track-fill: #{$track-fill};

	--thumb-size-y: #{$thumb-size-y};
	--thumb-size-x: #{$thumb-size-x};
	--thumb-radius: #{$thumb-radius};
	--thumb-stroke: #{$thumb-stroke};
	--thumb-stroke-size: #{$thumb-stroke-size};
	--thumb-color: #{$thumb-color};

	display: block;
	appearance: none;
	min-block-size: var(--thumb-size-y);
	inline-size: 100%;
	margin: 0;
	background: none;
	cursor: grab;

	&:active {
		cursor: grabbing;
	}

	&:dir(rtl) {
		--track-dir: to left;
	}

	&::-webkit-slider-runnable-track {
		--_val: calc(var(--range-value) * 100% / 100);
		block-size: var(--track-size);
		border-radius: var(--track-radius);
		background: var(--track-color)
			linear-gradient(
				var(--track-dir),
				var(--track-fill) var(--_val),
				var(--track-color) var(--_val)
			);
	}

	&::-moz-range-track {
		block-size: var(--track-size);
		border-radius: var(--track-radius);
		background: var(--track-color);
	}

	&::-webkit-slider-thumb {
		@include thumb;
		margin-block-start: var(
			--thumb-offset,
			calc(0.5 * (var(--track-size) - var(--thumb-size-y)))
		);
	}

	&::-moz-range-thumb {
		@include thumb;
		box-sizing: border-box;
	}
}