@import "config.less";


div.ui-slider.ui-toggle-switch {
	width: 66 * @unit_base;
	height: 35 * @unit_base;
	background-color : transparent;

	.ui-slider-label {
		position: absolute;
		width: 66 * @unit_base;
		height: 35 * @unit_base;
		background-size: cover;
		-ms-background-size: cover;
		-webkit-background-size: cover;
		-o-background-size: cover;
		-moz-background-size: cover;

		&.ui-slider-label-a {
			background: url(images/00_button_on.png) no-repeat;
		}

		&.ui-slider-label-b {
			background: url(images/00_button_off.png) no-repeat;
		}
	}

	.ui-slider-inneroffset {
		a {
			background : none;
		}
	}
}

div.ui-slider.ui-slider-switch:not(.ui-toggle-switch) {
	position : relative;
	width : 5.5em;
	height : 32 * @unit_base;

	a.ui-slider-handle {
		position : absolute;
		background : rgba(255, 255, 255, 1);
		top : -34 * @unit_base;
		margin-top : 30 * @unit_base;
		border-radius : 15 * @unit_base;
		border : 2px solid gray;
	}
	span {
		position : absolute;
		overflow : hidden;
		text-align : center;
		height :  32 * @unit_base;
		font-weight : bold;
		border-radius : 10 * @unit_base;
		&.ui-slider-label-a {
			left : 0px;
			color : white;
		}
		&.ui-slider-label-b {
			right : 0px;
			color : black;
		}
	}
}