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

// 参数组件
.c_param {
	padding:0.75*@gap @gap; background:@bg;
	li { overflow:hidden; line-height:1+0.5*@gap; padding:0.25*@gap 0;}
	.label { text-align:right; width:5.2em; color:@fg-light-5; float:left; letter-spacing:0; white-space:nowrap;}
	.value {
		color:@fg-light-1; overflow:hidden; display:block;
		.e_progress { margin-top:((1+0.5*@gap)/0.75-1em/0.75)/0.75/2; width:100%;}
		.e_progress-s { margin-top:((1+0.5*@gap)/0.75-1em/0.75)/0.75/0.8571/2;}
		.e_progress-xs { margin-top:((1+0.5*@gap)/0.75-1em/0.75)/0.75/0.75/2;}
	}
	.content ~ .content { margin-top:0.75*@gap; padding-top:0.75*@gap; border-top:1px dashed @fg-light-8;}
}



// 垂直布局模式
.c_param-v {
	overflow:hidden; display:flex; padding:0; background:@bg; width:100%; .x_bs;
	li { float:left; padding:0.75*@gap*1.1667 @gap*1.1667; position:relative;}
	li:after { content:""; height:auto; width:1px; position:absolute; top:@gap; bottom:@gap; left:0; display:inline-block; background:@fg-light-8;}
	li:first-child:after { display:none;}
	li.link { cursor:pointer;}
	.label { float:none; color:@fg-light-1; display:block; text-align:left; width:auto; line-height:1+0.5*@gap;}
	.value {
		color:@fg-light-1; display:block; line-height:1+0.5*@gap; min-height:1+0.5*@gap; font-size:116.67%;
		.e_star { vertical-align:top;}
	}
	.label + .value { margin-top:0.25*@gap/1.1667;}
	.value + .label { margin-top:0.25*@gap;}
	.content { flex:1; vertical-align:middle; width:100%;}
	.side { white-space:nowrap; align-self:center; width:12em; text-align:right; padding-right:@gap;}
}



// 边框
.c_param-border { border:1px solid @fg-light-8-5;}



// 标签文字长度
.c_param-label-auto .label { width:auto;}
.c_param-label-2 .label { width:3.1em;}
.c_param-label-3 .label { width:4.2em;}
.c_param-label-4 .label { width:5.2em;}
.c_param-label-5 .label { width:6.2em;}
.c_param-label-6 .label { width:7.3em;}
.c_param-label-7 .label { width:8.3em;}
.c_param-label-8 .label { width:9.3em;}
.c_param-label-9 .label { width:10.4em;}
.c_param-label-10 .label { width:11.4em;}
.c_param-label-11 .label { width:12.4em;}
.c_param-label-12 .label { width:13.5em;}
.c_param-label-13 .label { width:14.5em;}
.c_param-label-14 .label { width:15.5em;}
.c_param-label-15 .label { width:16.6em;}
.c_param-label-16 .label { width:17.6em;}
.c_param-label-17 .label { width:18.6em;}
.c_param-label-18 .label { width:19.7em;}
.c_param-label-19 .label { width:20.7em;}
.c_param-label-20 .label { width:21.7em;}
.c_param-label-21 .label { width:22.8em;}
.c_param-label-22 .label { width:23.8em;}
.c_param-label-23 .label { width:24.8em;}



// 无内边距
.c_param-nopadding {
	padding:0;
}



// 均分
.c_param-avg {
	ul { display:flex; flex:1;}
	li { flex:1; float:none; text-align:center;}
	li .label { text-align:center;}
}



// 分列
.c_param-col-2 {
	overflow:hidden;
	ul { font-family:simsun;}
	li { display:inline-block; vertical-align:top; width:50%; margin-right:-0.5em; font-family:"microsoft yahei", simhei, verdana; padding-right:1em; .x_bs;}
	li.merge-2 { width:100%;}
}
.c_param-col-3 {
	overflow:hidden;
	ul { font-family:simsun;}
	li { display:inline-block; vertical-align:top; width:33.33%; margin-right:-0.5em; font-family:"microsoft yahei", simhei, verdana; padding-right:1em; .x_bs;}
	li.merge-2 { width:66.66%;}
	li.merge-3 { width:100%;}
}
.c_param-col-4 {
	overflow:hidden;
	ul { font-family:simsun;}
	li { display:inline-block; vertical-align:top; width:25%; margin-right:-0.5em; font-family:"microsoft yahei", simhei, verdana; padding-right:1em; .x_bs;}
	li.merge-2 { width:50%;}
	li.merge-3 { width:75%;}
	li.merge-4 { width:100%;}
}
.c_param-col-5 {
	overflow:hidden;
	ul { font-family:simsun;}
	li { display:inline-block; vertical-align:top; width:20%; margin-right:-0.5em; font-family:"microsoft yahei", simhei, verdana; padding-right:1em; .x_bs;}
}
.c_param-col-6 {
	overflow:hidden;
	ul { font-family:simsun;}
	li { display:inline-block; vertical-align:top; width:16.6%; margin-right:-0.5em; font-family:"microsoft yahei", simhei, verdana; padding-right:1em; .x_bs;}
}



// 不自动换行
.c_param-nowrap {
	.value {.x_to;}
}



// 色彩
.c_param-blue {
	background:@primary;
	.label,
	.value{color:@bg;}
	li:after{ background:rgba(255,255,255,0.5);}
	.pic{
		>ul li { color:rgba(255,255,255,0.5);}
		>ul li.on { color:rgba(255,255,255,1);}
	}
}
.c_param-gray { background:@bg-dark-0-6;}