/**
 * Licensed Materials - Property of IBM
 * IBM Cognos Products: BI ui_commons
 * (C) Copyright IBM Corp. 2017, 2018
 * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 */

.uisliderContainer {
	padding: 5px 0px 5px 0px;
	position: relative;
	margin: 9px 10px 9px 10px;
	white-space: normal;
	display: flex;
	flex-direction: column;
}
.uisliderLabel {
	position: relative;
	padding-right: 20px;
	padding-bottom: 40px;
	color: $gray5;
}
.uislider.noUi-target {
	border: none;
	box-shadow: none;
	height: 6px;
	background-color: $gray3;
	margin: 0% 16% 0% 16%;
}

.uislider .noUi-base {
	transition: all $dramatic-time $custom-slider-transition;
	position: absolute;
	border-radius: 50%;
}
.uislider .noUi-connect {
	@include theming(background-color, primary2);
}

.uislider.noUi-horizontal .noUi-handle {
	cursor: pointer;
	background: $focus;
	box-shadow: none;
	border: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	left: -8px;
	transform: scale(1) translateY(1px);
	transition: all $semi-dramatic-time $custom-slider-transition;
}
.uislider.noUi-horizontal .noUi-handle:hover {
	@include theming(background-color, primary2);
	transform: scale(1.2) translateY(1px);
}
.uislider.noUi-horizontal .noUi-handle:active {
	@include theming(background-color, primary2);
	transform: scale(1.4) translateY(1px);
}
.uislider.noUi-horizontal .noUi-handle::before, .uislider .noUi-handle::after {
	display: none;
}
.uislider .noUi-connect:hover,
.uislider .noUi-connect:active{
	background: $gray1;
}

.uislider .text--bottom {
	float: left;
	margin-top: 10px;
	color: $gray5;
	text-align: right;
	transform: translateX(-100%) translateY(-100%);
}

.uislider .text--top {
	float: right;
	margin-top: 10px;
	color: $gray5;
	text-align: left;
	transform: translateX(100%) translateY(-100%);
}

.uislider .text--light{
	font-size: $body-size-s;
	padding: 0px 12px 0px 12px;
	border: none;
	outline: none;
}

.uislider .text--right {
	text-align: right;
}

.uislider .text--input {
	font-size: $body-size;
	position: absolute;
	top: -23px;
	height: 20px;
	left: 10px;
	@include theming(color, primary2);
	background: none;
	text-align: center;
	border-bottom: 0 solid;
	@include theming(border-bottom-color, primary3);
	transition: all $dramatic-time $custom-slider-transition;
	transform: translate(-50%);
  user-select: text;
	padding: 0px;
 }
 .uislider .text--input:focus {
	transition: all $dramatic-time $custom-slider-transition;
	height: 30px;
	top: -33px;
	@include theming(color, primary3);
	border-bottom: 2px solid;
	@include theming(border-bottom-color, primary3);
}

.uislider.noinput--view .text--input {
	opacity: $opacity-min; }

.uislider.noinput--view .text--input:focus {
	opacity: $opacity-max; }

.uislider.noinput--view .noUi-handle:hover .text--input {
	opacity: $opacity-max; }

.uislider.noinput--view .noUi-handle:active .text--input {
	opacity: $opacity-max; }

.uislider.slider--range .noUi-base {
	background: $gray1;
	border-radius: 4px;
	box-shadow: none; }

.uislider.slider--range .noUi-connect {
	@include theming(background-color, primary2);
	box-shadow: none; }

.uislider.slider--range .noUi-connect:hover,
.uislider.slider--range .noUi-connect:active {
	background: $gray1; }

.uislider.slider--range .noUi-base:hover,
.uislider.slider--range .noUi-base:active {
	background: $gray1;
}

[disabled].uislider .noUi-base {
	background: $gray3;
}

[disabled].uislider .noUi-connect {
	background: repeating-linear-gradient(45deg, $gray2, $gray2 2px, $gray3 2px, $gray3 8px);
}

[disabled].uislider .noUi-handle {
	pointer: not-allowed;
	background: $gray3;
	transform: scale(1) translateY(1px);
	transition: all $semi-dramatic-time $custom-slider-transition;
}
[disabled].uislider .noUi-handle:hover {
	background: $gray3;
	transform: scale(1) translateY(1px);
	cursor: not-allowed;
}
[disabled].uislider .noUi-handle::before,[disabled] .noUi-handle::after {
	display: none;
}

[disabled].uislider .text--bottom, [disabled] .text--top {
	color: $gray4;
}
[disabled].uislider .text--input {
	color: $gray4;
	pointer-events: none;
}

.uislider.slider--range[disabled] .noUi-base {
	background: $gray1;
}

.uislider.slider--range[disabled] .noUi-connect {
	background: repeating-linear-gradient(45deg, $gray2, $gray2 2px, $gray3 2px, $gray3 8px);
}

.uislider.slider--range[disabled] .noUi-connect:hover,
.uislider.slider--range[disabled] .noUi-connect:active {
	background: repeating-linear-gradient(45deg, $gray2, $gray2 2px, $gray3 2px, $gray3 8px);
}

.uislider.slider--range[disabled] .noUi-base:hover,
.uislider.slider--range[disabled] .noUi-base:active {
	background: $gray1;
}

.highcontrast .uislider.noUi-horizontal .noUi-handle {
	border: solid;
}

.highcontrast .uislider .noUi-connect {
	border: solid;
}

@media screen and (-ms-high-contrast: active) {
	.uislider.noUi-horizontal .noUi-handle {
		border: solid;
	}
	.uislider .noUi-connect {
		border: solid;
	}
}