@import "../default-skin.less";
@import "../../global/mixin.less";

// 开关元素
.e_switch {
	vertical-align:middle; position:relative; display:inline-block; transition:color 0.5s ease-out,background 0.5s ease-out; width:2.5em; padding:0 0.25em; height:1.5em; background:@primary; border-radius:0.75em; line-height:1.5em; text-align:center;
	.e_switchOn { float:left; font-size:75%; width:50%; text-align:center; color:@bg; transition:color 0.5s ease-out;}
	.e_switchOff { overflow:hidden; font-size:75%; text-align:center; color:@bg-op-0; transition:color 0.5s ease-out;}
	&:before { content:""; position:absolute; transition:transform 0.5s ease-out; left:1.75em; top:0.25em; width:1em; height:1em; background:@bg; border-radius:55%;}
	&-off {
		background:@fg-light-7;
		.e_switchOn { color:@bg-op-0;}
		.e_switchOff { color:@bg;}
	}
	&-off:before { transform:translateX(-1.5em);}
}


// 色彩
.e_switch-green { background:@success;}
.e_switch-red { background:@danger;}
.e_switch-gray { background:@fg-light-7;}