@use "../kit-deps" as *;

.range {
	width: 100%;
	max-width: 600px;
	accent-color: $color-secondary;

	input[type="range"] {
		-webkit-appearance: none;
		appearance: none;
		width: 100%;
		height: $control-height-md;
		margin: 0;
		background: transparent;
		cursor: pointer;
	}

	input[type="range"]::-webkit-slider-runnable-track {
		height: $border-width-accent;
		background: $surface-panel-strong;
		border: $border-width-base solid $border-color-muted;
	}

	input[type="range"]::-webkit-slider-thumb {
		width: $range-thumb-size;
		height: $control-height-sm;
		margin-top: calc(-#{$control-height-sm} / 2);
		border: $border-width-base solid $color-secondary;
		background: $color-secondary;
		-webkit-appearance: none;
	}

	input[type="range"]::-moz-range-track {
		height: $border-width-accent;
		background: $surface-panel-strong;
		border: $border-width-base solid $border-color-muted;
	}

	input[type="range"]::-moz-range-thumb {
		width: $range-thumb-size;
		height: $control-height-sm;
		border: $border-width-base solid $color-secondary;
		border-radius: $border-radius-sm;
		background: $color-secondary;
	}
}