@use '../../base/mixins/typography' as font;

@mixin slider-thumb {
	width: var(--radius-extra-large);
	height: var(--radius-extra-large);
	border-radius: var(--radius-full);
	background: var(--neutral-6);
	transition: transform var(--transition-fast);
	cursor: pointer;
}

.slider {
	--slider-color: var(--color-violet);

	display: flex;
	flex-direction: column;
	gap: var(--padding-small);

	.slider-track-wrapper {
		position: relative;
	}

	input[type='range'] {
		appearance: none;
		border-radius: var(--radius-pill);
		cursor: pointer;
		width: 100%;
		height: 0.75rem;
		background: linear-gradient(
			to right,
			var(--slider-color) 0%,
			var(--slider-color) var(--slider-progress),
			var(--ui-fill) var(--slider-progress),
			var(--ui-fill) 100%
		);

		&::-webkit-slider-thumb {
			appearance: none;

			@include slider-thumb;
		}

		&::-moz-range-thumb {
			appearance: none;

			@include slider-thumb;
		}

		&:focus-visible {
			outline: var(--action-outline) solid 0.1875rem;
			outline-offset: var(--padding-slim);
			border-radius: var(--radius-pill);
		}

		&:disabled {
			cursor: not-allowed;
		}
	}

	.slider-tooltip {
		--tooltip-fill: var(--slider-color);
		--tooltip-foreground: var(--slider-contrast);

		top: 0;
		width: 0;
		pointer-events: none;

		&::after {
			@include font.get-typography(body-small-medium, $include-emphasis: false);

			padding: var(--padding-slim) var(--padding-extra-small);
		}
	}

	.slider-track-wrapper:hover,
	.slider-track-wrapper:focus-within {
		.slider-tooltip {
			&::before {
				opacity: 1;
				transform: translate(-50%, var(--tooltip-gap));
			}

			&::after {
				opacity: 1;
				transform: translate(-50%, calc(100% + var(--tooltip-gap))) scale(1);
			}
		}
	}

	.slider-ticks {
		position: relative;
		width: 100%;
		height: 1.5rem;
		margin-top: var(--padding-slim);
	}

	.slider-tick {
		position: absolute;
		transform: translateX(-50%);
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--padding-slim);
		opacity: 0.5;
	}

	.slider-tick-mark {
		display: block;
		width: 1px;
		height: 0.375rem;
		background: var(--ui-stroke);
	}

	.slider-tick-label {
		@include font.get-typography(body-small-medium);

		font-family: var(--txt-code-family);
		line-height: 1;
		color: var(--ui-stroke);
	}

	&.disabled {
		opacity: 0.5;
		pointer-events: none;
	}

	&.tertiary {
		--slider-color: var(--action-tertiary);
		--slider-contrast: var(--action-tertiary-contrast);
	}
}

.slider-label-container {
	display: flex;
	align-items: center;
	gap: var(--padding-extra-small);
}