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

.e_mix {
	display:inline-flex; width:16em; .x_bs; border-left:1px solid @fg-light-8-5; border-right:1px solid @fg-light-8-5; vertical-align:middle; position:relative; background:@bg-dark-0-1;
	.e_select:first-child,
	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"] { flex:1; display:block; background:none;}
	.e_mixLine { height:1+2*@gap; width:1px; background:@fg-light-8-5;}
	> input,
	> .e_label,
	> .e_select,
	> button { border-left:0 none; border-right:0 none;}
	> .e_label { color:@fg-light-5;}
	input:first-child,
	.e_label:first-child,
	.e_select:first-child,
	button:first-child { margin-left:0;}
	.e_label:first-child { background:none; border-right:0 none;}
	.e_label:first-child + input { border-left:0 none;}
	> [class*="e_ico"] {
		cursor:pointer; width:1+2*@gap; color:@primary; overflow:hidden; text-align:center; position:relative; height:1+2*@gap; line-height:1+2*@gap; border-top:1px solid @fg-light-8-5; border-bottom:1px solid @fg-light-8-5; .x_bs; display:inline-block; vertical-align:top;
		&:after { display:inline-block; vertical-align:top;}
		object { width:1+2*@gap; height:1+2*@gap; margin-bottom:-1+2*@gap; display:block; position:relative; z-index:2;}
	}
	> .e_ico-loading {
		&:after { background-color:transparent; margin-top:@gap;}
	}
	> [class*="e_ico"]:not(:first-child) {
		border-left:0 none;
	}
	.e_label input[type="checkbox"],
	.e_label input[type="radio"] {
		margin-right:0.5*@gap;
	}
	.e_label input[type="checkbox"]:only-child,
	.e_label input[type="radio"]:only-child {
		margin-right:0;
	}
	> .e_mixLine { width:1px; height:1+2*@gap; background:@fg-light-8-5;}
}



// 嵌套
.e_mix > .e_mix { flex:1; width:1px;}



// 纯文本
.e_mix > .e_mixText { line-height:1+2*@gap; height:1+2*@gap; flex:1; padding:0 @gap; color:@fg-light-6; border-top:1px solid @fg-light-8-5; border-bottom:1px solid @fg-light-8-5; .x_bs;}
.e_mix > [class*="e_ico"] + .e_mixText { padding-left:0;}



// 大小
.e_mix-s { font-size:86%;}
.e_mix-l { font-size:117%;}



// 圆角
.e_mix-r {
	border-radius:0.25em;
	[class^="e_ico"]:first-child,
	button:first-child,
	input:first-child,
	.e_label:first-child,
	.e_select:first-child {
		border-top-left-radius:0.25em; border-bottom-left-radius:0.25em;
	}
	[class^="e_ico"]:last-child,
	button:last-child,
	input:last-child,
	.e_label:last-child,
	.e_select:last-child {
		border-top-right-radius:0.25em; border-bottom-right-radius:0.25em;
	}
}



// select 前置
.e_mix-prefix {
	.e_select { flex:1; display:block;}
	.e_select:first-child { flex:none;}
}




// 全屏宽度
.e_mix-full {
	width:100%; .x_bs;
}



// 均分
.e_mix-avg {
	button,
	input,
	.e_select { flex:1; display:block;}
	button { padding:0;}
}



// IP 地址
.e_mix-ip {
	border:1px solid @fg-light-8-5;
	input[type="text"]{ border:none;}
	span { align-self:flex-end; margin-left:-0.86em; z-index:99;}
	span:before { content:"."; display:block; height:1.5em; line-height:1.5em;}
}



// 进度条
.e_mixProgress { position:absolute; bottom:0; left:0; width:100%; z-index:3;}
.e_mixBar { display:block; height:2px; background:@success; border-top:1px solid rgba(255,255,255,0.5);}



// 特殊查询
.e_mix-search {
	border:0.1em solid @primary; height:1+2*@gap; line-height:1-0.1*2+2*@gap; .x_bs; border-radius:(1+2*@gap)/2; background:@bg; align-items:center;
	.e_select:first-child { flex:none; background:none; border:0 none; height:1-0.1*2+2*@gap; line-height:1-0.1*2+2*@gap; border-top-left-radius:(1-0.1*2+2*@gap)/2; border-bottom-left-radius:(1-0.1*2+2*@gap)/2; color:@primary;}
	.e_select:after { color:@primary; margin-top:-(1-0.1*2+2*@gap)/0.75;}
	input[type="text"] { border:0 none; height:(1-0.1*2+2*@gap); border:0 none; background:none;}
	input[type="text"]:first-child { border-top-left-radius:(1-0.1*2+2*@gap)/2; border-bottom-left-radius:(1-0.1*2+2*@gap)/2; padding-left:1em;}
	button { padding:0; background:@primary; color:@bg; border:0 none; border-radius:55%; width:1-0.1*4+2*@gap; height:1-0.1*4+2*@gap; line-height:1-0.1*4+2*@gap; text-align:center; margin-left:0; margin-right:0.1em;}
}