@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;
		}
	}
}
.ui-slider-switch:not(.ui-toggle-switch) {
	width : 92 * @unit_base;
}

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

	height : 32 * @unit_base;
	border-radius : 15 * @unit_base;

	.ui-slider-inneroffset {
		position : relative;
		margin : -1px 16 * @unit_base;
		z-index : 1;
	}

	a.ui-slider-handle {
		position : absolute;
		background : rgba(255, 255, 255, 1);
		top : 50%;
		margin : 1px 0 0 -15 * @unit_base;
		border-radius : 15 * @unit_base;
		border : 2px solid gray;

		width : 28 * @unit_base;
		height : 28 * @unit_base;
	}

	a.ui-slider-handle-snapping {
		-webkit-transition : left 70ms linear;
	}

	span {
		position : absolute;
		overflow : hidden;
		text-align : center;
		height :  32 * @unit_base;
		font-weight : bold;
		font-size : 16 * @unit_base;
		border-radius : 15 * @unit_base;
		white-space : nowrap;
		line-height : 2;

		&.ui-slider-label-a {
			left : 0px;
			color : white;
			z-index : 1;
			text-indent : -1.5em;
		}
		&.ui-slider-label-b {
			right : 0px;
			color : black;
			z-index : 0;
			text-indent : 1.5em;
		}
	}
}