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

// 头部组件
.c_header {
	background:@primary; color:@bg; line-height:(1+2*@gap)*1.1667; height:(1+2*@gap)*1.1667; overflow:hidden;
	> .back {
		float:left; font-size:116.67%; cursor:pointer; padding-right:@gap; padding-left:1+2*@gap; height:1+2*@gap; position:relative;
		&:after { position:absolute; height:1+2*@gap; width:1+2*@gap; text-align:center; left:0; top:0; font-family:"ico"; content:"\e009";}
	}
	> .text {
		float:left; font-size:116.67%; padding:0 @gap;
		&-right { float:right;}
	}
	.pt {
		float:right; font-size:116.67%;
		height:1+2*@gap; width:1+2*@gap; 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;}
		> .text { display:block; white-space:nowrap; font-size:66.67%; margin-top:0.5em;}
		> .e_tag { position:absolute; top:0.25*@gap; right:0.25*@gap; font-size:66.67%;}
	}
	.logo {
		float:left;
		img { height:1+2*@gap;}
		> [class*="e_ico"] { font-size:150%; width:(1+2*@gap)/1.5;}
	}
	.logo + .text { padding-left:0;}
	.fn { float:right;}
	.right,
	.left,
	.center,
	.auto,
	.fn {
		> [class*="e_ico"] {
			font-size:116.67%; float:left; width:1+2*@gap; height:1+2*@gap; line-height:1+2*@gap; text-align:center; cursor:pointer; position:relative;
			> .e_tag { position:absolute; top:0.25*@gap; right:0.25*@gap; font-size:66.67%;}
		}
		> .e_mix {
			float:left; margin-top:(1+2*@gap)*0.1667/2; margin-right:(1+2*@gap)*0.1667/2;
			[class*="e_ico"] { border:0 none;}
			> input[type="date"],
			> input[type="datetime"],
			> input[type="datetime-local"],
			> input[type="email"],
			> input[type="month"],
			> input[type="week"],
			> input[type="number"],
			> input[type="tel"],
			> input[type="time"],
			> input[type="url"],
			> input[type="text"],
			> input[type="password"] { border:0 none;}
		}
		> .e_mix:not(.e_mix-search) {
			 border:0 none;
		}
		> .e_group {
			border:0 none; float:left; margin-top:(1+2*@gap)*0.1667/2; margin-right:(1+2*@gap)*0.1667/2;
			input[type="date"],
			input[type="datetime"],
			input[type="datetime-local"],
			input[type="email"],
			input[type="month"],
			input[type="week"],
			input[type="number"],
			input[type="tel"],
			input[type="time"],
			input[type="url"],
			input[type="text"],
			input[type="password"],
			.e_select,
			.e_label { margin-top:0; border:0 none; vertical-align:top;}
		}
		> .e_select {
			float:left; border:0 none; background:none; color:@bg; font-size:116.67%;
			&:after { color:@bg-op-5;}
		}
		> .e_segment { float:left; margin-top:(1+2*@gap)*0.1667/0.8571/2; margin-right:(1+2*@gap)*0.1667/0.8571/2;}
		> .e_switch { float:left; margin-top:((1+2*@gap)/0.8571-1.5)/2; margin-right:((1+2*@gap)/0.8571-1.5)/2; background:@primary-dark-2;}
		> .e_flash { float:left; position:relative; overflow:hidden;}
		> .e_flash object { position:absolute; left:0; top:0;}
		> .e_flash button,
		> button,
		> .e_button { float:left; border:0 none; font-size:116.67%;}
		> input[type="date"],
		> input[type="datetime"],
		> input[type="datetime-local"],
		> input[type="email"],
		> input[type="month"],
		> input[type="week"],
		> input[type="number"],
		> input[type="tel"],
		> input[type="time"],
		> input[type="url"],
		> input[type="text"],
		> input[type="password"] { float:left; border:0 none; margin-top:(1+2*@gap)*0.1667/2; margin-right:(1+2*@gap)*0.1667/2;}
		label { float:left; padding:0 @gap; height:1+2*@gap; font-size:116.67%;}
		label input[type="radio"],
		label input[type="checkbox"] { vertical-align:top; margin-top:@gap; margin-right:0.5*@gap;}
		> .text { padding:0 @gap;}
		// > img { cursor:pointer; height:3.5em; padding:1em; box-sizing:border-box; float:left;}
	}
	.left {
		float:left; position:relative; z-index:1;
		> div { float:left;}
	}
	.right {
		float:right; position:relative; z-index:1;
		> div { float:left;}
	}
	.auto { overflow:hidden; text-align:center;}
	> .center {
		position:absolute; left:0; right:0; text-align:center; z-index:0;
	}
}



// 导航模式
.c_header-nav {
	background:@bg; font-size:100%; height:2.5+2*@gap; border-bottom:1px solid @fg-light-8-5; box-sizing:border-box;
	.logo {
		padding:@gap;
		img { height:2.5em;}
		.text { line-height:1.6667; font-size:150%;}
	}
	.tab {
		float:left; margin-top:((2.5+2*@gap)-(1+@gap))/2; margin-left:@gap;
		li { float:left; padding:0 @gap; cursor:pointer; height:1+@gap; line-height:1+@gap; border-radius:0.25em; color:@fg;}
		li.on { background:@primary-dark-1; cursor:default; color:@bg;}
	}
	.fn {
		> [class*="e_ico"] { color:@fg-light-8; font-size:150%; height:(2.5+2*@gap)/1.5; width:(2.5+2*@gap)/1.5; line-height:(2.5+2*@gap)/1.5;}
		> .e_select {
			float:left; background:none; font-size:100%; border:0 none; margin-top:((2.5+2*@gap)-(1+2*@gap))/2; margin-left:@gap; margin-right:0; color:@fg;
			&:after { color:@fg-op-5;}
		}
		> .e_group,
		> .e_mix:not(.e_mix-search) { border:1px solid @fg-light-8-5; margin-top:((2.5+2*@gap)-(1+2*@gap))/2; margin-left:@gap; margin-right:0;}
		> .e_mix:not(.e_mix-search) { position:relative; top:-1px;}
		> button {
			font-size:100%; height:2.5+2*@gap; line-height:2.5+2*@gap; padding:0 @gap; background:none; margin-left:@gap; margin-right:0;
			img { border-radius:55%; vertical-align:middle; margin-right:0.5*@gap; margin-left:0; height:2.5em;}
		}
		// > button:hover {
		// 	background:@fg-light-9-5;
		// }
		.line {
			float:left; width:1px; background:@fg-light-8-5; height:2.5+1.8*@gap;
		}
	}
}




// 色彩
.c_header-white {
	background:@bg; color:@primary;
	.right,
	.left,
	.center,
	.auto,
	.fn {
		.e_select {
			color:@primary;
			&:after { color:@primary-op-5;}
		}
		> .e_mix:not(.e_mix-search),
		> .e_group,
		> input[type="date"],
		> input[type="datetime"],
		> input[type="datetime-local"],
		> input[type="email"],
		> input[type="month"],
		> input[type="week"],
		> input[type="number"],
		> input[type="tel"],
		> input[type="time"],
		> input[type="url"],
		> input[type="text"],
		> input[type="password"] { border:1px solid @fg-light-8-5;}
	}
}
.c_header-orange { background:@warning;}
.c_header-nobg,
.c_header-transparent { background-color:transparent;}