// ------------------------------------------------------------------------------------
// XTS RANGE SLIDER [1]
// ------------------------------------------------------------------------------------

.xts-range-slider {
	margin-top: $xts-option-space * 1.5 !important;
	border: none !important;
	border-radius: $xts-option-border-radius;
	cursor: pointer;

	@extend %xts-js-loading-fadein;

	.ui-widget-header {
		border-radius: $xts-option-border-radius;
		background: $xts-color-primary;
	}

	&.ui-slider-horizontal {
		height: 6px;
		background-color: $xts-button-color-default;

		.ui-slider-handle {
			top: -5px;
			width: 16px;
			height: 16px;
			border-width: 2px;
			border-color: $xts-color-primary;
			border-radius: 50%;
			background: #FFF;
			cursor: pointer;
			transition: box-shadow .2s ease;
		}
	}

	.ui-slider-handle {

		&.ui-state-hover,
		&.ui-state-focus {
			box-shadow: 0 0 0 2px transparentize($xts-color-primary,.7);
		}
	}

	&:empty {
		height: 6px;
	}

	.xts-dashboard & {
		max-width: $xts-input-width;
	}
}

.xts-range-field-value-display {
	display: block;
	margin-top: $xts-option-space;
}

.xts-range-field-value-text {
	font-weight: 600;

	@extend %xts-js-loading-fadein;

	&:empty {
		display: none;
	}
}

// ------------------------------------------------------------------------------------
// XTS RANGE SLIDER [2]
// ------------------------------------------------------------------------------------

.wd-field-devices {
	margin-bottom: 15px;

	> span {
		@extend %xts-devices-tabs;
	}
}

.wd-sliders {
	position: relative;

	.wd-slider {
		display: none;
		align-items: center;
		animation: wd-fadeInTooltip .5s ease;

		&.xts-active {
			display: flex;
		}
	}
}

.wd-slider-units {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	text-transform: uppercase;
	font-size: 11px;

	.wd-slider-unit-control {
		min-width: 12px;
		text-align: center;
		opacity: .6;
		cursor: pointer;

		&:not(:last-child) {
			margin-inline-end: 3px;
		}

		&.xts-active {
			text-decoration: underline;
			opacity: 1;
		}
	}

	.rtl & {
		right: auto;
		left: 0;
	}
}

.wd-slider {

	&:first-child { // NOTE IF THERE IS NO RESPONSIVE DEVICES SELECTOR

		.wd-slider-units {
			top: -22px;
		}
	}
}