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

// 分页标签组件
.c_tab {
	position:relative; z-index:0; overflow:hidden; width:100%;
	> .tab {
		display:flex; background:@primary; position:relative;
		> .list { overflow:hidden; flex:1; white-space:nowrap;}
		> .fn {
			ul { float:left; margin-left:0; left:0;}
			li {
				float:left; font-size:1em; color:@fg-light-1; padding:0 @gap; cursor:pointer; text-indent:0; white-space:nowrap;
				> button { float:left; background:none; border:0 none; color:@fg; margin:0 -@gap; line-height:(1+2*@gap); height:(1+2*@gap);}
				> .e_select { float:left; margin:0 -@gap; line-height:(1+2*@gap); height:(1+2*@gap); border:0 none; background:none;}
				> .e_select:after { margin-top:-(1+2*@gap)/0.75; line-height:(1+2*@gap)/0.75; height:(1+2*@gap)/0.75;}
				[class*="e_ico"] { margin-right:0.5*@gap;}
				.e_ico-fold,
				.e_ico-unfold { color:@fg-light-7;}
				span + .e_ico-fold,
				span + .e_ico-unfold { margin:0 0 0 1/0.75*@gap; font-size:75%;}
				> label {
					float:left; padding:0 @gap; margin:0 -@gap;
					input[type="checkbox"] { vertical-align:top; margin-top:((1+2*@gap)/0.8571-1)/2; margin-right:0.5*@gap;}
				}
			}
			padding:((1+2*@gap)*1.1667-(1+2*@gap))/2;
			input,
			.e_select,
			.e_group,
			.e_mix,
			.e_space,
			> button { float:left;}
			> button { margin-left:-1px;}
			label {
				float:left; line-height:1+2*@gap; color:@bg; padding:0 @gap;
				input[type="checkbox"] { margin-top:@gap; margin-right:0.5*@gap;}
			}
		}
		ul { overflow:hidden; display:inline-block; vertical-align:top; margin-left:-100000px; position:relative; left:100000px;}
		li { float:left; color:@bg; font-size:116.67%; padding:0 @gap; cursor:pointer; height:1+2*@gap; line-height:1+2*@gap;}
		li.on { background:@primary-dark-3; cursor:default;}
	}
	> .page {
		overflow:hidden; position:relative; z-index:0;
		> .content { position:relative;}
	}
}



// 小圆点模式
.c_tab-dot {
	> .tab {
		position:absolute; bottom:0.5*@gap; left:0; z-index:1000; width:100%; text-align:center; background:none; height:0.5em;
		ul { left:0; margin:0;}
		li { float:none; text-indent:-100em; font-size:100%; vertical-align:top; overflow:hidden; display:inline-block; width:0.5em; height:0.5em; border-radius:0.25em; margin:0 0.125*@gap; background:@fg-op-3; padding:0;}
		li.on { background:@fg;}
	}
	> .prev { position:absolute; cursor:pointer; margin-top:-(1+2*@gap)/2; left:0; top:50%; z-index:2; background:@fg-op-5; color:@bg; display:none; line-height:1+2*@gap; width:1+2*@gap; text-align:center;}
	> .next { position:absolute; cursor:pointer; margin-top:-(1+2*@gap)/2; right:0; top:50%; z-index:2; background:@fg-op-5; color:@bg; display:none; line-height:1+2*@gap; width:1+2*@gap; text-align:center;}
}
.c_tab-dot-out {
	padding-bottom:0.5+@gap;
	> .tab {
		bottom:0; padding-bottom:0.5*@gap;
	}
}



// 边框
.c_tab-border {
	border:1px solid @fg-light-8-5; border-top:0 none;
}



// 大小
.c_tab-s {
	> .tab {
		li { font-size:1em; padding:0 @gap;}
		> .fn {
			font-size:85.71%;
		}
	}
}



// 全屏高度
.c_tab-fixed,
.c_tab[style*="height"],
.c_tab-full {
	> .page { position:absolute; top:(1+2*@gap)*1.1667; left:0; right:0; bottom:0;}
	> .page > .content { height:100%; overflow:auto;}
}
.c_tab-full {
	position:absolute; top:0; left:0; right:0; bottom:0;
}
.c_tab-full.c_tab[style*="height"] {
	position:relative; top:auto; left:auto; right:auto; bottom:auto;
}
.c_tab-full.c_tab-s {
	> .page { top:1+2*@gap;}
}
.c_tab-fixed.c_tab-dot,
.c_tab[style*="height"].c_tab-dot,
.c_tab-full.c_tab-dot {
	> .page { top:0;}
}
.c_tab-fixed.c_tab-dot-out,
.c_tab[style*="height"].c_tab-dot-out,
.c_tab-full.c_tab-dot-out {
	padding-bottom:0;
	> .page { bottom:0.5+@gap;}
}



// 二级模式
.c_tab-level-2 {
	> .tab {
		background:@bg !important;
		ul { padding:0.5*@gap;}
		li { padding:0 @gap; height:1+@gap; line-height:1+@gap; color:@fg-light-1; font-size:1em; border-radius:0.25em;}
		li.on { background:@primary; color:@bg;}
		> .fn.ctrl {
			.e_button-blue { background:none; color:@primary;}
		}
	}
}
.c_tab-level-2.c_tab-border { border-top:1px solid @fg-light-8;}



// 特殊模式
.c_tab-sp {
	>.tab {
		background:none; border-bottom:1px @primary solid; height:1+2*@gap; .x_bs;
		li { background:@bg-dark-0-6; color:@fg-light-1; font-size:1em; padding:0 @gap; margin-right:1px; height:1+2*@gap; line-height:1+2*@gap;}
		li.on { color:@bg; background:@primary;}
		.fn {
			ul { font-size:116.67%; margin-top:-1px;}
			padding:0 0 0 0.5*@gap; font-size:85.71%;
			label { color:@fg;}
		}
	}
}
.c_tab-sp.c_tab-full {
	> .page { top:1+2*@gap;}
}



// 次级模式
.c_tab-sub {
	> .tab {
		background:@bg;
		&:after { content:""; position:absolute; bottom:0; width:100%; left:0; height:1px; background:@bg-dark-2;}
		li { color:@fg-light-7; position:relative; z-index:2;}
		li.on { background:@bg; color:@primary;}
		li.on:before { content:""; position:absolute; bottom:0; width:100%; height:2px; background:@primary; left:0;}
		> .fn.ctrl {
			.e_button-blue { background:none; color:@primary;}
		}
	}
}
.c_tab-sub.c_tab-border { border-top:1px solid @fg-light-8;}



// 区块模式
.c_tab-box {
	> .tab {
		background:@bg;
		li { color:@fg-light-7; position:relative;}
		li.on { background:@bg; color:@primary; font-weight:bold;}
		li.on:before { content:""; position:absolute; top:0; width:100%; height:2px; background:@primary; left:0;}
		> .fn.ctrl {
			.e_button-blue { background:none; color:@primary;}
		}
	}
}
.c_tab-box.c_tab-border { border-top:1px solid @fg-light-8;}



// 垂直布局
.c_tab-v {
	display:flex; width:100%; background:@primary;
	> .tab {
		position:relative; border:0 none; display:block;
		.list { height:100%; margin:0;}
		ul { margin:0; left:0;}
		li { float:none; position:relative;}
		li:before { display:none; content:""; height:0.5em; width:0.5em; background:@bg; .x_rotate(135); position:absolute; top:0; bottom:0; right:-0.25em; margin:auto 0;}
		li.on:before { display:block;}
		.fn { display:none;}
	}
	> .page { background:@bg; flex:1; position:relative; top:auto; background:@bg-dark-0-6;}
}
.c_tab-full.c_tab-v,
.c_tab-v[style*="height"] {
	display:flex;
	> .tab { display:block; width:auto;}
	> .page { flex:1; display:block; height:100%; position:relative; top:auto; bottom:auto; left:auto; right:auto;}
}



// 标题插件
.c_tab-title {
	> .tab {
		.title {
			flex:1; font-size:114%; line-height:0.88+2.25*@gap; color:@bg; padding-left:@gap;
			.text { float:left;}
			.tip { float:left; margin-left:1.29*@gap; color:@danger;}
		}
		.list {
			flex:none;
			ul { float:right; margin:0; left:0;}
		}
	}
}
.c_tab-title.c_tab-sp {
	> .tab {
		.title { color:@primary-dark-1; line-height:0.88+1.63*@gap;}
		li { margin-right:0; margin-left:1px;}
	}
}
.c_tab-title.c_tab-sub {
	> .tab {
		.title { color:@fg;}
		li { margin-right:0; margin-left:1px;}
	}
}



// 滑动
.c_tab-slide {
	padding-bottom:4.13em;
	> .tab {
		background:@bg; padding:0.5em; position:absolute; z-index:200; left:0; top:100%; margin-top:-4.13em; width:100%;
		> .fn {
			button { background:none; color:@fg-light-8;}
		}
		li {
			padding:0; font-size:100%; height:3.13em; margin-right:0.5em; line-height:normal;
			img { width:3.13em; height:3.13em;}
		}
		li.on { background:none !important; position:relative;}
		li.on:before { content:""; position:absolute; left:0; top:0; bottom:0; right:0; border:0.1em solid @danger;}
	}
}
[class*="c_tab-slide-"] {
	> .page > .content { float:left; width:30%;}
}
.c_tab-slide-20 {
	> .page { width:2020%;}
	> .page > .content { width:5%;}
}
.c_tab-slide-19 {
	> .page { width:1920%;}
	> .page > .content { width:5.26%;}
}
.c_tab-slide-18 {
	> .page { width:1820%;}
	> .page > .content { width:5.55%;}
}
.c_tab-slide-17 {
	> .page { width:1720%;}
	> .page > .content { width:5.88%;}
}
.c_tab-slide-16 {
	> .page { width:1620%;}
	> .page > .content { width:6.25%;}
}
.c_tab-slide-15 {
	> .page { width:1520%;}
	> .page > .content { width:6.66%;}
}
.c_tab-slide-14 {
	> .page { width:1420%;}
	> .page > .content { width:7.14%;}
}
.c_tab-slide-13 {
	> .page { width:1320%;}
	> .page > .content { width:7.69%;}
}
.c_tab-slide-12 {
	> .page { width:1220%;}
	> .page > .content { width:8.33%;}
}
.c_tab-slide-11 {
	> .page { width:1120%;}
	> .page > .content { width:9.09%;}
}
.c_tab-slide-10 {
	> .page { width:1020%;}
	> .page > .content { width:10%;}
}
.c_tab-slide-9 {
	> .page { width:902%;}
	> .page > .content { width:11.11%;}
}
.c_tab-slide-8 {
	> .page { width:802%;}
	> .page > .content { width:12.5%;}
}
.c_tab-slide-7 {
	> .page { width:702%;}
	> .page > .content { width:14.28%;}
}
.c_tab-slide-6 {
	> .page { width:602%;}
	> .page > .content { width:16.66%;}
}
.c_tab-slide-5 {
	> .page { width:502%;}
	> .page > .content { width:20%;}
}
.c_tab-slide-4 {
	> .page { width:402%;}
	> .page > .content { width:25%;}
}
.c_tab-slide-3 {
	> .page { width:302%;}
	> .page > .content { width:33.33%;}
}
.c_tab-slide-2 {
	> .page { width:202%;}
	> .page > .content { width:50%;}
}



// 导航模式
.c_tab-nav {
	>.tab {
		background:@bg;
		li {
			line-height:normal; height:1+2*@gap; color:@fg-light-5; line-height:1; position:relative; cursor:pointer; text-align:center; box-sizing:border-box;
			.ico {
				margin-top:((1+2*@gap)-1-(1+0.5)*0.6667)/2;
				.e_ico { display:inline-block; vertical-align:top; color:@bg; height:1.5em; width:1.5em; line-height:1.5em; text-align:center; background:@fg-light-5; .x_round; font-size:66.67%;}
			}
			.text { display:block; white-space:nowrap; font-size:66.67%; margin-top:0.5em;}
			.num { position:absolute; left:50%; font-size:66.67%; top:0; background:@danger; color:@bg; margin-left:1em; width:1.5em; height:1.5em; line-height:1.5em; .x_round; text-align:center;}
			.ico-single { font-size:150%; line-height:(1+2*@gap)/1.5; margin:0; vertical-align:top;}
		}
		li.on,
		li.on:hover {
			background:@bg; color:@primary;
			.ico {
				.e_ico { background:@primary;}
			}
		}
	}
}
.c_tab-nav.c_tab-full {
	> .tab { position:absolute; bottom:0; width:100%; border-top:1px solid @fg-light-8; z-index:2;}
	> .page {
		top:0; bottom:(1+2*@gap)*1.1667;
	}
}



//渐变
.c_tab-gd {
	> .tab { background:linear-gradient(to right, @primary, @primary);}
}
.c_tab-gd-blue {
	> .tab { background:linear-gradient(to right, @primary-light-3, @primary);}
}
.c_tab-gd.c_tab-sp {
	> .tab {
		background:none;
		li.on { background:linear-gradient(to right, @primary, @primary); color:@bg;}
	}
}
.c_tab-gd.c_tab-box {
	> .tab {
		background:@bg;
		li.on:before { background:linear-gradient(to right, @primary, @primary);}
	}
}



// 均分
.c_tab-avg {
	> .tab {
		width:auto;
		ul { display:flex; margin:0; left:0; width:auto;}
		li { flex:1; float:none; text-align:center; padding:0;}
	}
}