/* 仿IOS单选样式 */
.mui-switch {
	margin: 0 10px 0 10px;
	width:37px;
	height:23px;
	position:relative;
	border:1px solid #dfdfdf;
	background-color:#fdfdfd;
	box-shadow:#dfdfdf 0 0 0 0 inset;
	border-radius:20px;
	border-top-left-radius:20px;
	border-top-right-radius:20px;
	border-bottom-left-radius:20px;
	border-bottom-right-radius:20px;
	background-clip:content-box;
	display:inline-block;
	-webkit-appearance:none;
	user-select:none;
	outline:none;
	vertical-align: middle;
}
.mui-switch:before {
	content:'';
	width:21px;
	height:21px;
	position:absolute;
	top:0px;
	left:1px;
	border-radius:20px;
	border-top-left-radius:20px;
	border-top-right-radius:20px;
	border-bottom-left-radius:20px;
	border-bottom-right-radius:20px;
	background-color:#fff;
	box-shadow:0 1px 3px rgba(0,0,0,0.4);
}
.mui-switch:checked {
	border-color:#64bd63;
	box-shadow:#64bd63 0 0 0 16px inset;
	background-color:#64bd63;
}
.mui-switch:checked:before {
	left:14px;
}
.mui-switch.mui-switch-animbg {
	transition:background-color ease 0.4s;
}
.mui-switch.mui-switch-animbg:before {
	transition:left 0.3s;
}
.mui-switch.mui-switch-animbg:checked {
	box-shadow:#dfdfdf 0 0 0 0 inset;
	background-color:#64bd63;
	transition:border-color 0.4s,background-color ease 0.4s;
}
.mui-switch.mui-switch-animbg:checked:before {
	transition:left 0.3s;
}
.mui-switch.mui-switch-anim {
	transition:border cubic-bezier(0,0,0,1) 0.4s,box-shadow cubic-bezier(0,0,0,1) 0.4s;
}
.mui-switch.mui-switch-anim:before {
	transition:left 0.3s;
}
.mui-switch.mui-switch-anim:checked {
	box-shadow:#64bd63 0 0 0 16px inset;
	background-color:#64bd63;
	transition:border ease 0.4s,box-shadow ease 0.4s,background-color ease 1.2s;
}
.mui-switch.mui-switch-anim:checked:before {
	transition:left 0.3s;
}
@mixin borderRadius($radius:20px) {
	border-radius:$radius;
	border-top-left-radius:$radius;
	border-top-right-radius:$radius;
	border-bottom-left-radius:$radius;
	border-bottom-right-radius:$radius;
}
$duration:.4s;
$checkedColor:#64bd63;
.mui-switch {
	width:52px;
	height:31px;
	position:relative;
	border:1px solid #dfdfdf;
	background-color:#fdfdfd;
	box-shadow:#dfdfdf 0 0 0 0 inset;
	@include borderRadius();
	background-clip:content-box;
	display:inline-block;
	-webkit-appearance:none;
	user-select:none;
	outline:none;
	&:before {
		content:'';
		width:29px;
		height:29px;
		position:absolute;
		top:0px;
		left:0;
		@include borderRadius();
		background-color:#fff;
		box-shadow:0 1px 3px rgba(0,0,0,0.4);
	}
	&:checked {
		border-color:$checkedColor;
		box-shadow:$checkedColor 0 0 0 16px inset;
		background-color:$checkedColor;
		&:before {
			left:21px;
		}
	}
	&.mui-switch-animbg {
		transition:background-color ease $duration;
		&:before {
			transition:left 0.3s;
		}
		&:checked {
			box-shadow:#dfdfdf 0 0 0 0 inset;
			background-color:$checkedColor;
			transition:border-color $duration,background-color ease $duration;
			&:before {
				transition:left 0.3s;
			}
		}
	}
	&.mui-switch-anim {
		transition:border cubic-bezier(0,0,0,1) $duration,box-shadow cubic-bezier(0,0,0,1) $duration;
		&:before {
			transition:left 0.3s;
		}
		&:checked {
			box-shadow:$checkedColor 0 0 0 16px inset;
			background-color:$checkedColor;
			transition:border ease $duration,box-shadow ease $duration,background-color ease $duration*3;
			&:before {
				transition:left 0.3s;
			}
		}
	}
}