/**
 * Dual Range Slider - Bootstrap 5 Compatible
 * SCSS Styles with Nesting
 * 
 * CSS Variables for easy customization:
 * --drs-height: Track height
 * --drs-handle-size: Handle diameter
 * --drs-track-color: Track background color
 * --drs-progress-color: Progress bar color (between handles)
 * --drs-handle-color: Handle background color
 * --drs-handle-border: Handle border color
 * --drs-tooltip-bg: Tooltip background
 * --drs-tooltip-color: Tooltip text color
 */
.drs-slider {
	--drs-height: 6px;
	--drs-handle-size: 20px;
	--drs-track-color: #dee2e6;
	--drs-progress-color: #0d6efd;
	--drs-handle-color: #ffffff;
	--drs-handle-border: #0d6efd;
	--drs-tooltip-bg: #212529;
	--drs-tooltip-color: #ffffff;
}

	.drs-slider .drs-container {
		position: relative;
		width: 100%;
		height: var(--drs-handle-size);
		user-select: none;
		touch-action: none;
	}

		.drs-slider .drs-container .drs-track {
			position: absolute;
			top: 50%;
			left: 0;
			right: 0;
			height: var(--drs-height);
			background-color: var(--drs-track-color);
			border-radius: calc(var(--drs-height) / 2);
			transform: translateY(-50%);
		}

		.drs-slider .drs-container .drs-progress {
			position: absolute;
			top: 0;
			height: 100%;
			background-color: var(--drs-progress-color);
			border-radius: calc(var(--drs-height) / 2);
		}

		.drs-slider .drs-container .drs-handle {
			position: absolute;
			top: 50%;
			width: var(--drs-handle-size);
			height: var(--drs-handle-size);
			background-color: var(--drs-handle-color);
			border: 2px solid var(--drs-handle-border);
			border-radius: 50%;
			transform: translate(-50%, -50%);
			cursor: pointer;
			transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;
			z-index: 2;
		}

			.drs-slider .drs-container .drs-handle:hover {
				box-shadow: 0 0 0 4px rgba(var(--drs-handle-border-rgb, 13, 110, 253), 0.25);
			}

			.drs-slider .drs-container .drs-handle:active, .drs-slider .drs-container .drs-handle.active {
				transform: translate(-50%, -50%) scale(1.1);
				box-shadow: 0 0 0 6px rgba(var(--drs-handle-border-rgb, 13, 110, 253), 0.25);
				z-index: 3;
			}

			.drs-slider .drs-container .drs-handle .drs-tooltip {
				position: absolute;
				bottom: calc(100% + 8px);
				left: 50%;
				transform: translateX(-50%);
				padding: 4px 8px;
				background-color: var(--drs-tooltip-bg);
				color: var(--drs-tooltip-color);
				font-size: 12px;
				font-weight: 500;
				border-radius: 4px;
				white-space: nowrap;
				opacity: 0;
				visibility: hidden;
				transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
				pointer-events: none;
			}

				.drs-slider .drs-container .drs-handle .drs-tooltip::after {
					content: "";
					position: absolute;
					top: 100%;
					left: 50%;
					transform: translateX(-50%);
					border: 5px solid transparent;
					border-top-color: var(--drs-tooltip-bg);
				}

			.drs-slider .drs-container .drs-handle:hover .drs-tooltip, .drs-slider .drs-container .drs-handle.active .drs-tooltip {
				opacity: 1;
				visibility: visible;
			}

	.drs-slider .drs-values {
		display: flex;
		justify-content: space-between;
		margin-top: 8px;
		font-size: 14px;
	}

		.drs-slider .drs-values .min-value,
		.drs-slider .drs-values .max-value {
			font-weight: 500;
			color: #495057;
			padding: 0.25rem;
			border: 1px solid transparent;
		}

		.drs-slider .drs-values .drs-edit-input {
			text-align: center;
			border: 1px solid var(--bs-border-color);
			border-radius: 0.375rem;
			padding: 0.25rem;
			font-size: inherit;
		}

			.drs-slider .drs-values .drs-edit-input:focus {
				outline: none;
			}

	.drs-slider input::-webkit-outer-spin-button,
	.drs-slider input::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	.drs-slider input[type=number] {
		-moz-appearance: textfield;
	}

	.drs-slider.drs-primary {
		--drs-progress-color: #0c4a6e;
		--drs-handle-border: #0c4a6e;
		--drs-handle-border-rgb: 13, 110, 253;
		--drs-track-color: #7dd3fc;
	}

	.drs-slider.drs-success {
		--drs-progress-color: #198754;
		--drs-handle-border: #198754;
		--drs-handle-border-rgb: 25, 135, 84;
		--drs-track-color: #bbf7d0;
	}

	.drs-slider.drs-danger {
		--drs-progress-color: #dc3545;
		--drs-handle-border: #dc3545;
		--drs-handle-border-rgb: 220, 53, 69;
		--drs-track-color: #f8d7da;
	}

	.drs-slider.drs-warning {
		--drs-progress-color: #ffc107;
		--drs-handle-border: #ffc107;
		--drs-handle-border-rgb: 255, 193, 7;
		--drs-track-color: #fff3cd;
	}

	.drs-slider.drs-info {
		--drs-progress-color: #0dcaf0;
		--drs-handle-border: #0dcaf0;
		--drs-handle-border-rgb: 13, 202, 240;
		--drs-track-color: #bee5eb;
	}

	.drs-slider.drs-dark {
		--drs-progress-color: #212529;
		--drs-handle-border: #212529;
		--drs-handle-border-rgb: 33, 37, 41;
		--drs-track-color: #dee2e6;
	}

	.drs-slider.disabled {
		opacity: 0.3;
		filter: grayscale(1);
		pointer-events: none;
		display: none;
	}

		.drs-slider.disabled .drs-handle {
			cursor: not-allowed;
		}