@import "config.less";

@popup-height: 54 * @unit_base;
@popup-width: 45 * @unit_base;
@img-height: 37 * @unit_base;
@img-width: 37 * @unit_base;
@handle-height: 36 * @unit_base;
@handle-width: 36 * @unit_base;

label.ui-slider {
	display: block;
}

select.ui-slider-switch {
	display: none;
}

.ui-slider-bg,
.ui-slider-icon-bg {
	position: relative;
	vertical-align: middle;

	margin-left: 16 * @unit_base;
	margin-right: 16 * @unit_base;
}

.ui-slider-icon-bg {
	margin-left: 58 * @unit_base;
	margin-right: 58 * @unit_base;
}

.ui-slider-left-volume,
.ui-slider-left-bright {
	position: absolute;
	vertical-align: middle;

	top: -0.35rem;
	left: -50 * @unit_base;
	height: @img-height;
	width: @img-width;

	background: url(images/00_slider_button_brightness_01.png) no-repeat;
	.LESSbackground-size(@img-width, @img-height);
}

.ui-slider-left-volume {
	background: url(images/00_slider_button_volume_01.png) no-repeat;
	.LESSbackground-size(@img-width, @img-height);
}

.ui-slider-right-volume,
.ui-slider-right-bright {
	position: absolute;

	top: -0.35rem;
	right: -50 * @unit_base;
	height: @img-height;
	width: @img-width;

	vertical-align: middle;

	background: url(images/00_slider_button_brightness_02.png) no-repeat;
	.LESSbackground-size(@img-width, @img-height);
}

.ui-slider-right-volume {
	background: url(images/00_slider_button_volume_02.png) no-repeat;
	.LESSbackground-size(@img-width, @img-height);
}

.ui-slider-left-text {
	position: absolute;

	top: -0.35rem;
	left: -52 * @unit_base;
	height: 37 * @unit_base;
	width: 37 * @unit_base;

	text-align: center;
	color: rgb(100, 100, 100);
}

.ui-slider-right-text {
	position: absolute;

	top: -0.35rem;
	right: -52 * @unit_base;
	height: 37 * @unit_base;
	width: 37 * @unit_base;

	text-align: center;
	color: rgb(100, 100, 100);
}

div.ui-slider {
	display: inline-block;
	overflow: visible;

	height: 18 * @unit_base;
	width: 100%;

	//FIXME
	//background-image: url(images/00_progress_bg.9.png);
	background-color: rgb(236,233,229);

	.ui-btn {
		top: -0.45rem;
		margin-top: 0;
	}
	.ui-btn-inner {
		padding: 0.3rem 0 0 0;
	}
	.ui-btn-text {
		color: @color_slider_handle_text;
	}
}

a.ui-slider-handle {
	position: relative;
	z-index: 10;

	width: 36 * @unit_base;
	height: 36 * @unit_base;
	margin-left: -19 * @unit_base;

	color: @color_slider_handle_text;
	font-size: 0.95rem;

	background: url(images/00_slider_handle.png) no-repeat;
	.LESSbackground-size(@handle-width, @handle-height);
}

.ui-slider-popup {
	position: absolute !important;
	z-index: 100;

	width: @popup-width;
	height: @popup-height;
	top: -56 * @unit_base;
	padding-top: 0.1rem;

	color: @color_slider_popup_text;
	text-align: center;
	font-size: 1.5rem;

	background: url(images/00_slider_popup_bg.png) no-repeat;
	.LESSbackground-size(@popup-width, @popup-height);
}

.ui-slider-bar {
	position: relative;

	top: -36 * @unit_base;
	height: 18 * @unit_base;
	width: 0;

	//FIXME
	//background-image: url(images/00_progress_bar.9.png);
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.2, rgb(236,233,229)),
		color-stop(0.2, rgb(54,119,155)),
		color-stop(0.8, rgb(54,119,195)),
		color-stop(0.8, rgb(236,233,229))
	);
}

.ui-slider-handle-press {
	position: absolute;
	z-index: 15;

	width: 37 * @unit_base;
	height: 37 * @unit_base;

	//FIXME
	background: url(images/00_slider_handle_press.png) no-repeat;
	.LESSbackground-size(@handle-width, @handle-height);
}