// ------------------------------------------------------------------------------------
// 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-color: #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 {

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

.wd-sliders {
	position: relative;

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

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

.wd-slider-units {
	position: relative;

	.wd-slider-unit-control {
		display: inline-block;
		min-width: 19px;
		text-align: center;
		cursor: default;

		&:not(.xts-active) {
			position: absolute;
			bottom: 100%;
			left: 0;
			visibility: hidden;
			opacity: 0;
		}

		&:not(:last-child) {

			&,
			~ .wd-slider-unit-control {
				padding: 1px 2px;
				border-radius: 3px;
				background-color: #E3E3E3;
				font-size: 14px;
				line-height: 18px;
				font-weight: 400;
				cursor: pointer;
				user-select: none;
				
				&:hover {
					background-color: #7A7A7A;
					color: #FFF;
				}
			}

		}
	}

	&:hover {

		.wd-slider-unit-control {
			
			&:not(.xts-active) {
				transition: all .1s ease;
				visibility: visible;
				opacity: 1;
			}
		}
	}
}

// .wd-slider-unit-control {
// 	display: none;

// 	&.xts-active {
// 		display: block;
// 	}
// }