@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;

	height: 18 * @unit_base;
	margin-left: 16 * @unit_base;
	margin-right: 16 * @unit_base;

	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, @color_progress_bar1),
		color-stop(1, @color_progress_bar0)
	);
	.LESSbox-shadow(1px, 1px, 0px, white);
	.LESSborder-radius-all( 10 * @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.5rem;
	left: -50 * @unit_base;
	height: @img-height;
	width: @img-width;

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

.ui-slider-left-volume {
	background: url(images/controls/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.5rem;
	right: -50 * @unit_base;
	height: @img-height;
	width: @img-width;

	vertical-align: middle;

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

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

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

	top: -0.5rem;
	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.5rem;
	right: -52 * @unit_base;
	height: 37 * @unit_base;
	width: 37 * @unit_base;

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

div.ui-slider:not(.ui-toggle-switch) {
	position: relative;

	top: 5 * @unit_base;
	height: 7 * @unit_base;
	margin-left: 5 * @unit_base;
	margin-right: 5 * @unit_base;

	.LESSborder-radius-all( 10 * @unit_base );
	border: 1px;
	border-style: solid;
	border-color: @color_progress_boarder;
	.LESSbox-shadow(1px, -1px, 1px, @color_progress_boarder);
	background-color: @color_progress_bar0;

	.ui-btn {
		top: -0.8rem;
		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/controls/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: -60 * @unit_base;
	padding-top: 0.1rem;

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

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

.ui-slider-bar {
	position: relative;

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

	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, @color_progress_value0),
		color-stop(1, @color_progress_value1)
	);
	.LESSborder-radius-all( 10 * @unit_base );
	.LESSbox-shadow(-1px, -1px, 1px, rgb(179, 200, 226));
}

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

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

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