@utility range {
	appearance: none;
	-webkit-appearance: none;
	--range-thumb: var(--color-base-100);
	--range-thumb-size: calc(var(--size-selector, 0.25rem) * 6);
	--range-progress: currentColor;
	--range-fill: 1;
	--range-p: 0.25rem;
	--range-bg: color-mix(in oklab, currentColor 10%, #0000);
	@apply cursor-pointer overflow-hidden bg-transparent align-middle;
	width: clamp(3rem, 20rem, 100%);
	/* --radius-selector-max is a separate variable because ~ calc(min(calc(--var))) ~ gives build error in PostCSS+Nuxt */
	--radius-selector-max: calc(
		var(--radius-selector) + var(--radius-selector) + var(--radius-selector)
	);
	border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
	border: none;
	height: var(--range-thumb-size);

	[dir="rtl"] & {
		--range-dir: -1;
		writing-mode: vertical-lr;
	}

	&:focus {
		outline: none;
	}

	&:focus-visible {
		outline: 2px solid;
		outline-offset: 2px;
	}

	&::-webkit-slider-runnable-track {
		@apply w-full;
		background-color: var(--range-bg);
		border-radius: var(--radius-selector);
		height: calc(var(--range-thumb-size) * 0.5);
	}
	@media (forced-colors: active) {
		&::-webkit-slider-runnable-track {
			border: 1px solid;
		}
	}

	&::-webkit-slider-thumb {
		@apply relative box-border;
		border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
		background-color: var(--range-thumb);
		height: var(--range-thumb-size);
		width: var(--range-thumb-size);
		border: var(--range-p) solid;
		appearance: none;
		-webkit-appearance: none;
		top: 50%;
		color: var(--range-progress);
		transform: translateY(-50%);
		box-shadow:
			0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset,
			0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset,
			0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000),
			0 0 0 2rem var(--range-thumb) inset,
			calc((var(--range-dir, 1) * -100cqw) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0
				0 calc(100cqw * var(--range-fill));
	}

	&::-moz-range-track {
		@apply w-full;
		background-color: var(--range-bg);
		border-radius: var(--radius-selector);
		height: calc(var(--range-thumb-size) * 0.5);
	}
	@media (forced-colors: active) {
		&::-moz-range-track {
			border: 1px solid;
		}
	}

	&::-moz-range-thumb {
		@apply relative box-border;
		border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
		background-color: currentColor;
		height: var(--range-thumb-size);
		width: var(--range-thumb-size);
		border: var(--range-p) solid;
		top: 50%;
		color: var(--range-progress);
		box-shadow:
			0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset,
			0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset,
			0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000),
			0 0 0 2rem var(--range-thumb) inset,
			calc((var(--range-dir, 1) * -100cqw) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0
				0 calc(100cqw * var(--range-fill));
	}
	&:disabled {
		@apply cursor-not-allowed opacity-30;
	}
}

@utility range-primary {
	@apply text-primary;
	--range-thumb: var(--color-primary-content);
}

@utility range-secondary {
	@apply text-secondary;
	--range-thumb: var(--color-secondary-content);
}

@utility range-accent {
	@apply text-accent;
	--range-thumb: var(--color-accent-content);
}

@utility range-neutral {
	@apply text-neutral;
	--range-thumb: var(--color-neutral-content);
}

@utility range-success {
	@apply text-success;
	--range-thumb: var(--color-success-content);
}

@utility range-warning {
	@apply text-warning;
	--range-thumb: var(--color-warning-content);
}

@utility range-info {
	@apply text-info;
	--range-thumb: var(--color-info-content);
}

@utility range-error {
	@apply text-error;
	--range-thumb: var(--color-error-content);
}
@utility range-notice {
	@apply text-notice;
	--range-thumb: var(--color-notice-content);
}
@utility range-alert {
	@apply text-alert-color;
	--range-thumb: var(--color-alert-color-content);
}

@utility range-xs {
	--range-thumb-size: calc(var(--size-selector, 0.25rem) * 4);
}

@utility range-sm {
	--range-thumb-size: calc(var(--size-selector, 0.25rem) * 5);
}

@utility range-md {
	--range-thumb-size: calc(var(--size-selector, 0.25rem) * 6);
}

@utility range-lg {
	--range-thumb-size: calc(var(--size-selector, 0.25rem) * 7);
}

@utility range-xl {
	--range-thumb-size: calc(var(--size-selector, 0.25rem) * 8);
}