// See https://github.com/darlanrod/input-range-scss
@use "sass:math";

.nelio-forms-form .nelio-forms-field__value--number-slider {
	$track-border-color: var(
		--nelio-forms-unfocused-field-border,
		#00f
	) !default;
	$track-border-width: 1px !default;
	$track-color: var(--nelio-forms-unfocused-field-background, #00f) !default;
	$track-height: 8px !default;
	$track-radius: 0 !default;
	$track-width: 100% !default;

	$thumb-border-color: var(
		--nelio-forms-unfocused-field-border,
		#00f
	) !default;
	$thumb-border-width: 1px !default;
	$thumb-color: var(--nelio-forms-unfocused-field-background, #00f) !default;
	$thumb-height: 24px !default;
	$thumb-radius: 0 !default;
	$thumb-width: 12px !default;

	@mixin track {
		border-radius: 0;
		height: $track-height;
		width: $track-width;
	}

	@mixin thumb {
		background: $thumb-color;
		border: $thumb-border-width solid $thumb-border-color;
		border-radius: $thumb-radius;
		box-sizing: border-box;
		cursor: default;
		height: $thumb-height;
		width: $thumb-width;
	}

	appearance: none;
	background: transparent;
	margin: math.div($thumb-height, 2) 0;
	width: $track-width;

	&::-moz-focus-outer {
		border: 0;
	}

	&:focus {
		outline: 2px solid var(--nelio-forms-outline, #00f);
		outline-offset: 1px;

		&::-webkit-slider-runnable-track,
		&::-ms-fill-lower,
		&::-ms-fill-upper {
			background: $track-color;
		}
	}

	#{&}::-webkit-slider-runnable-track {

		@include track;
		background: $track-color;
		border: $track-border-width solid $track-border-color;
		border-radius: $track-radius;
	}

	&::-webkit-slider-thumb {

		@include thumb;
		-webkit-appearance: none;
		margin-top: (
			math.div((-$track-border-width * 2 + $track-height), 2) - math.div(
					$thumb-height,
					2
				)
		);
	}

	&::-moz-range-track {

		@include track;
		background: $track-color;
		border: $track-border-width solid $track-border-color;
		border-radius: $track-radius;
		height: math.div($track-height, 2);
	}

	&::-moz-range-thumb {

		@include thumb;
	}

	&::-ms-track {

		@include track;
		background: transparent;
		border-color: transparent;
		border-width: math.div($thumb-height, 2) 0;
		color: transparent;
	}

	#{&}::-ms-fill-lower {
		background: $track-color;
		border: $track-border-width solid $track-border-color;
		border-radius: ($track-radius * 2);
	}

	#{&}::-ms-fill-upper {
		background: $track-color;
		border: $track-border-width solid $track-border-color;
		border-radius: ($track-radius * 2);
	}

	&::-ms-thumb {

		@include thumb;
		margin-top: math.div($track-height, 4);
	}

	&:disabled {

		&::-webkit-slider-thumb,
		&::-moz-range-thumb,
		&::-ms-thumb,
		&::-webkit-slider-runnable-track,
		&::-ms-fill-lower,
		&::-ms-fill-upper {
			cursor: not-allowed;
		}
	}
}