@use "sass:math";

$crc: '.h-slider';

$handleSize: 20px;

#{$crc}{
	display: flex;
	position: relative;
	--handle-scale: 0.72;
	--animate: #{$s-fast};

	&:hover {
		--handle-scale: 1.0;

		#{$crc}__handle {
			box-shadow: $sd-hover--primary-box-shadow;
		}

	}

	&.-dragging {
		--animate: 0;
		--handle-scale: 1.0;

		#{$crc}__handle {
			border-color: $c-active--primary-border;
			box-shadow: $sd-active--primary-box-shadow;
		}
		#{$crc}__filler {
			background: $c-active--primary-border;
		}
	}

	&.-disabled {
		--handle-scale: 0.8;

		#{$crc}__handle {
		    cursor: not-allowed;
			border-color: $c-primary-border;
			background: $c-disabled--primary-background;
		}
		#{$crc}__step {
			background: $c-disabled--primary-background;
		}
		#{$crc}__filler {
			background: $c-primary-border;
		}
	}

	&.-horizontal {
		height: $v-control-height;

		#{$crc}__bar {
			height: 6px;
			margin: math.div($v-control-height - 6px, 2) 0;
		}

		#{$crc}__step {
			height: 100%;
		}

		#{$crc}__filler {
			height: 100%;
			left: 0;
			width: var(--size);
		}

		#{$crc}__handle {
			margin: math.div($v-control-height - $handleSize, 2) #{-(math.div($handleSize, 2))};
			left: var(--offset);
		}

		&.-invert {
			#{$crc}__filler {
				left: auto;
				right: 0;
			}
			#{$crc}__handle {
				left: auto;
				right: var(--offset);
			}
		}
	}

	&.-vertical {
		width: $v-control-height;
		height: 100%;

		#{$crc}__bar {
			width: 6px;
			margin: 0 math.div($v-control-height - 6px, 2);
		}

		#{$crc}__back {
			flex-direction: column;
		}

		#{$crc}__step {
			width: 100%;
		}

		#{$crc}__filler {
			width: 100%;
			top: 0;
			height: var(--size);
		}

		#{$crc}__handle {
			margin: #{-(math.div($handleSize, 2))} math.div($v-control-height - $handleSize, 2);
			top: var(--offset);
		}

		&.-invert {
			#{$crc}__filler {
				top: auto;
				bottom: 0;
			}
			#{$crc}__handle {
				top: auto;
				bottom: var(--offset);
			}
		}
	}
}

#{$crc}__bar{
	position: relative;
	overflow: hidden;
	flex-grow: 1;
	display: inline-block;
}
#{$crc}__back {
    width: 100%;
	height: 100%;
	display: flex;
	gap: $g-4;
	position: absolute;
	pointer-events: none;
}


#{$crc}__step {
	background: $c-primary-border;
	border-radius: math.div(6px, 2);
	flex-grow: 1;
	min-width: 1px;
	min-height: 1px;
	transition: background $t-fast-standard;
}


#{$crc}__filler{
	background: $c-primary-text;
	border-radius: math.div(6px, 2);
	position: absolute;
	overflow: hidden;
	transition: width var(--animate) $e-deceleration, height var(--animate) $e-deceleration, background $t-fast-standard;
	display: flex;
	justify-content: flex-end;
	pointer-events: none;
}


#{$crc}__handle{
	height: $handleSize;
	width: $handleSize;
	background: $c-fill;
	border-width: $v-control-border-width;
	border-style: solid;
	border-color: $c-primary-text;
	border-radius: 50%;
	box-sizing: border-box;
	position: absolute;
	overflow: hidden;
	transition: transform $t-fast-deceleration, border-color $t-fast-standard, background $t-fast-standard, left var(--animate) $e-deceleration, top var(--animate) $e-deceleration, right var(--animate) $e-deceleration, bottom var(--animate) $e-deceleration;
	transform: scale(var(--handle-scale));
}