@import "config.less";

.ui-toggleswitch {
	height: 80 * @unit_base;
	width: 60 * @unit_base;
	overflow: hidden;
	font-weight: bold;
	.ui-toggleswitch-mover {
		position: relative;
		font-size: 20 * @unit_base;
		display: block;

		.ui-toggleswitch-off {
			border-radius: 5 * @unit_base;
			color: @color_text_sub;
			.LESStoggleswitch_off_style;
			height: 80 * @unit_base;
			.ui-toggleswitch-img{
				width: 100%;
				position: absolute;
				padding-top: 7 * @unit_base;
				.ui-toggleswitch-sign{
					position: absolute;
					width: 4px;
					height: 12px;
					left: 50%;
					margin-left:-2px;
					background: url(images/00_switch_button_off.png) no-repeat;
					background-size: cover;
					-webkit-background-size: cover;
					-o-background-size: cover;
					-moz-background-size: cover;
				}
			}
		}

		.ui-toggleswitch-on {
			display: none;
			border-radius: 5 * @unit_base;
			.LESStoggleswitch_on_style;
			height: 80 * @unit_base;
			color: white;
			.ui-toggleswitch-img{
				width: 100%;
				position: absolute;
				padding-top: 6 * @unit_base;
				text-align: center;
				.ui-toggleswitch-sign{
					position: absolute;
					width: 15px;
					height: 15px;
					left: 50%;
					margin-left:-7px;
					background: url(images/00_switch_button_on.png) no-repeat;
					background-size: cover;
					-webkit-background-size: cover;
					-o-background-size: cover;
					-moz-background-size: cover;
				}
			}
		}

		.ui-toggleswitch-reed {
			position: absolute;
			border-radius: 5 * @unit_base;
			width: 57 * @unit_base;
			.LESStoggleswitch_reed_style;
			top: 40 * @unit_base;
			height: 39 * @unit_base;
			left: 1px;
		}

		.ui-toggleswitch-text {
			width: 100%;
			position: absolute;
			padding-top: 10 * @unit_base;
			text-align: center;
			text-overflow: ellipsis;
		}
	}
}

.ui-toggleswitch-state-checked {
	.ui-toggleswitch-mover {
		.ui-toggleswitch-reed {
			top: 1px;
		}

		.ui-toggleswitch-text {
			top: 40 * @unit_base;
		}
		.ui-toggleswitch-img{
			top: 40 * @unit_base;
		}
		.ui-toggleswitch-on {
			display: block;
		}

		.ui-toggleswitch-off {
			display: none;
		}
	}
}