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

// 分段器元素
.e_segment {
	display:inline-block; vertical-align:middle; overflow:hidden; height:1+2*@gap; line-height:1+2*@gap; .x_bs;
	> span { float:left; padding:0 @gap; background:@bg; z-index:2; position:relative; color:@fg-light-6; background:@bg-dark-0-1; cursor:default;}
	> input:first-child + span,
	> span:first-child { border-left:1px solid @fg-light-8;}
	> span:before { content:""; border:1px solid @fg-light-8-5; border-left:none; z-index:4; position:absolute; top:0; right:0; bottom:0; left:-1px;}
	> span.e_segmentOn { color:@primary; background:@bg;}
	> span.e_segmentOn:before { border:1px @primary solid; z-index:5;}
}



// 圆角
.e_segment-r {
	border-radius:0.25em;
	> input:first-child + span,
	> span:first-child { border-top-left-radius:0.25em; border-bottom-left-radius:0.25em;}
	> input:first-child + span:before,
	> span:first-child:before { border-top-left-radius:0.25em; border-bottom-left-radius:0.25em;}
	> span:last-of-type:before { border-top-right-radius:0.25em; border-bottom-right-radius:0.25em;}
	> span.e_segmentOn:first-child:before { border-top-left-radius:0.25em; border-bottom-left-radius:0.25em;}
	> span.e_segmentOn:last-of-type:before { border-top-right-radius:0.25em; border-bottom-right-radius:0.25em;}
}