@import "var";

.@{prefixName}-slider{
	.flex(@align-items: center);
	width: 100%;
	&__feature{
		height: @slider-progress-height;
		background-color: @slider-progress-background-color;
	}
	&__progress{
		flex-grow: 1;
		position: relative;
		.flex(@align-items: center);
		&--stick{
			width: 100%;
		}
		&__button{
			position: absolute;
			top: 0;
			background-color: @slider-progress-button-background-color;
			border-radius: 50%;
			box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
		}
		&--active{
			position: absolute;
			left: 0;
			height: @slider-progress-height;
			background-color: @slider-progress-active-background-color;
		}
	}
	&__value{
		.flex-no-stretch();
		margin-left: 10px;
		font-size: 14px;
		color: @slider-value-text-color;
	}
}