@import "variables.less";
@import "../common/Slider.less";

.mblSlider {
	> div:before {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: @win-app-bar-color;
	}

	.mblSliderProgressBar {
		background-color: @win-accent-color;
	}

	& .mblSliderTouchBox {
		left: 0px;
		top: -4px;
		padding: 4px 0px;
	}
}

.mblSlider[disabled] {
	> div:before {
		opacity: 0.5;
	}

	.mblSliderProgressBar {
		background-color: @win-disabled-color;
	}
}

.mblSliderV {
	> div {
		min-height: 100px;
	};
	.mblSlider-size(@mbl-slider-height, 100%);

	& .mblSliderHandle {
		.mblSliderHandle-markup("V");
	}
}

.mblSliderH {
	min-width: 100px;
	.mblSlider-size(100%, @mbl-slider-height);

	& .mblSliderHandle {
		.mblSliderHandle-markup("H");
	}
}