/*
 * Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW)
 * wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html
 */

%slider-display-block {
	display: block;
}

%slider-position-absolute {
	position: absolute;
}

%slider-margin-0 {
	margin: 0;
}

%slider-padding-0 {
	padding: 0;
}

%slider-display-none {
	display: none !important;
}

%slider-width-2 {
	width: 2px;
}

%slider-width-20 {
	width: 20px;
}

%slider-width-100perc {
	width: 100%;
}

%slider-height-2 {
	height: 2px;
}

%slider-height-20 {
	height: 20px;
}

%slider-height-100perc {
	height: 100%;
}

%slider-height-auto {
	height: auto;
}

%slider-z-index-3 {
	z-index: 3;
}

%slider-right-auto {
	right: auto;
}

%slider-border-none {
	border: 0;
}

%slider-background-color-165c91 {
	background-color: #165c91;
}

%slider-top-0 {
	top: 0;
}

%slider-left-0 {
	left: 0;
}

%slider-overflow-hidden {
	overflow: hidden;
}

%slider-background-color-ddd {
	background-color: #ddd;
}

%slider-border-radius-2 {
	border-radius: 2px;
}

%slider-background-clip-padding-box {
	background-clip: padding-box;
}

%slider-outline-0 {
	outline: 0;
}

%slider-height-300 {
	height: 300px;
}

%slider-height-160 {
	height: 160px;
}

.fd-form-element-hidden {
	@extend %slider-display-none;
}

.fd-slider {
	@extend %slider-border-none;
	@extend %slider-display-block;
	@extend %slider-height-20;
	@extend %slider-width-100perc;
	cursor: pointer;
	margin: 0 0 10px;
	position: relative;
	text-align: center;
	text-decoration: none;
	user-select: none;
}

.fd-slider-wrapper {
	@extend %slider-position-absolute;
	@extend %slider-top-0;
	@extend %slider-left-0;
	@extend %slider-width-100perc;
	@extend %slider-height-100perc;
}

.fd-slider-inner {
	@extend %slider-display-none;
}

.fd-slider-bar {
	@extend %slider-display-block;
	@extend %slider-position-absolute;
	@extend %slider-height-2;
	@extend %slider-margin-0;
	@extend %slider-padding-0;
	@extend %slider-overflow-hidden;
	@extend %slider-background-color-ddd;
	@extend %slider-border-radius-2;
	@extend %slider-background-clip-padding-box;
	background-image: linear-gradient(#ececec, #ccc);
	border: 1px solid #606060;
	border: 1px solid rgba(187, 187, 187, .8);
	border-bottom: 1px solid #aaa;
	border-bottom: 1px solid rgba(170, 170, 170, .8);
	border-right: 1px solid #aaa;
	border-right: 1px solid rgba(170, 170, 170, .8);
	left: 10px;
	line-height: 4px;
	right: 10px;
	top: 8px;
	z-index: 2;
}

.fd-slider-focused {
	.fd-slider-bar {
		box-shadow: 0 0 6px rgba(10, 130, 170, .7);
		/* Not sure what to do with this
		@include experimental(animation, fd-pulse 2s infinite, -moz, -webkit, -o, not -ms, not -khtml, official);
		*/
	}
}

.fd-slider-range {
	@extend %slider-background-clip-padding-box;
	@extend %slider-background-color-165c91;
	@extend %slider-border-radius-2;
	@extend %slider-display-block;
	@extend %slider-height-2;
	@extend %slider-margin-0;
	@extend %slider-overflow-hidden;
	@extend %slider-padding-0;
	@extend %slider-position-absolute;
	@extend %slider-z-index-3;
	background-image: linear-gradient(to right, #89a5bd, #165c91);
	left: 11px;
	line-height: 2px;
	top: 9px;
}

.fd-slider-handle {
	@extend %slider-position-absolute;
	@extend %slider-display-block;
	@extend %slider-padding-0;
	@extend %slider-border-none;
	@extend %slider-margin-0;
	@extend %slider-z-index-3;
	@extend %slider-top-0;
	@extend %slider-left-0;
	@extend %slider-width-20;
	@extend %slider-height-20;
	@extend %slider-outline-0;
	background: {
		color: transparent;
		image: url("../../assets/fd-slider-sprite.png");
		position: 0 0;
	}
	cursor: W-resize;
	font-size: 10px;
	line-height: 20px;
	/* Are these needed?
	@if $experimental-support-for-mozilla {-moz-outline: 0 none;}
	@if $experimental-support-for-webkit {-webkit-touch-callout: none;}
	*/
	user-select: none;

	&:focus {
		@extend %slider-outline-0;
		@extend %slider-border-none;
		/* Is this needed?
		@if $experimental-support-for-mozilla {-moz-user-focus: normal;}
		*/
	}
}

/* Is this needed?
@if $experimental-support-for-mozilla {
	.fd-slider-handle:focus::-moz-focus-inner {
		border-color: transparent
	}
}
*/

.fd-slider-focused,
.fd-slider-hover,
.fd-slider-active {
	.fd-slider-handle {
		background-position: 0 -20px;
	}
}

.fd-slider-no-value {
	.fd-slider-handle {
		background-position: 0 -59px;
	}
}

body {
	&.fd-slider-drag-horizontal,
	&.fd-slider-drag-horizontal * {
		cursor: N-resize !important;
		cursor: W-resize !important;
		user-select: none;
	}
}

.fd-slider-disabled {
	cursor: default;
	opacity: .8;

	.fd-slider-handle {
		background-position: 0 -40px;
		cursor: default !important;
		opacity: 1;
	}

	.fd-slider-bar {
		background-color: #555;
		background-image: linear-gradient(to right, #666, #333);
		border: 1px solid #888;
		border: 1px solid rgba(136, 136, 136, .8);
		border-bottom: 1px solid #999;
		border-bottom: 1px solid rgba(153, 153, 153, .8);
		border-right: 1px solid #999;
		border-right: 1px solid rgba(153, 153, 153, .8);
		cursor: auto !important;
	}

	.fd-slider-range {
		background-color: #222;
		background-image: linear-gradient(to right, #222, #000);
		cursor: auto !important;
	}
}

@keyframes fd-pulse {
	0% {
		box-shadow: 0 0 3px rgba(100, 130, 170, .55);
	}

	20% {
		box-shadow: 0 0 4px rgba(70, 130, 170, .6);
	}

	40% {
		box-shadow: 0 0 5px rgba(40, 130, 170, .65);
	}

	60% {
		box-shadow: 0 0 6px rgba(10, 130, 170, .7);
	}

	80% {
		box-shadow: 0 0 5px rgba(40, 130, 170, .65);
	}

	100% {
		box-shadow: 0 0 4px rgba(70, 130, 170, .6);
	}
}

#fd-slider-describedby {
	background: #fff;
	border: 3px solid #a84444;
	border-radius: 8px;
	padding: 1em;
}

input {
	&[type="range"] {
		@extend %slider-width-100perc;
	}
}

#html5shim-2-out {
	font-style: italic;
	font-weight: 400;
}

#html5shim-4 {
	@extend %slider-width-20;
	height: 400px;
}

.visu {
	color: #6cc;
	font: normal 3em impact, helvetica, sans serif;
}