@import 'library.less';

.rangeslider {
  background: rgba(255, 255, 255, 0.15);
  display: block;
  height: 60px;
  width: 100%;
  border-radius: 100px;
}

.slider {
	&.left-hidden {
		.rangeslider:after {
			opacity: 0;
		}
	}
		
	&.right-hidden {
		.rangeslider:before {
			opacity: 0;
		}
	}
}

.rangeslider {
	position: relative;
  
	&:after {
		content: '';
		position: absolute;
		left: 5px;
		top: 5px;
		width: 50px;
		height: 50px;
		background: url(../images/svg/arty_frame.svg) no-repeat center center;
		background-size: 58%;
		border: 1px solid rgba(255, 255, 255, .3);
		.border-radius;
		.box-sizing;
		.transition;
	}
	
	&:before {
		content: '';
		position: absolute;
		right: 5px;
		top: 5px;
		width: 50px;
		height: 50px;
		background: url(../images/svg/arty_man.svg) no-repeat center center;
		background-size: 50%;
		border: 1px solid rgba(255, 255, 255, .3);
		.border-radius;
		.box-sizing;
		.transition;
	}
	
}

.rangeslider--disabled {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  opacity: 0.4;
}

.rangeslider__handle {
  cursor: pointer;
  display: inline-block;
  width: 60px;
  height: 60px;
  position: absolute;
  top: 0px;
}
.rangeslider__handle:after {
	content: '';
	position: absolute;
	left: 5px;
	top: 5px;
	width: 50px;
	height: 50px;
	background: rgba(255, 255, 255, .3) url(../images/svg/arty_drag.svg) no-repeat center;
	background-size: 50%;
	border-radius: 100px;
}


.rangeslider__handle:active {
	.rangeslider__handle:after {
 		background: rgba(255, 255, 255, .5);
 	}
}

input[type="range"]:focus + .rangeslider .rangeslider__handle {
  outline: none;
}