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

// 列表组件
.c_list {
	// mixin
	.liStatu(@color) { content:""; position:absolute; left:0; top:0; bottom:0; right:0; border-left:2px solid @color !important; pointer-events:none; z-index:4;}
	.fn() {
		align-self:stretch; cursor:pointer; position:relative; width:1+2*@gap; text-align:center; vertical-align:middle; display:block; z-index:2;
		[class*="e_ico"] { position:absolute; top:50%; margin-top:-0.5em; left:50%; line-height:1; margin-left:-0.5em; color:@primary;}
		input[type="radio"],
		input[type="checkbox"] { position:absolute; top:50%; margin-top:-0.5em; left:50%; margin-left:-0.5em;}
		// .e_ico-loading { background:none;}
		// .e_ico-loading:after { font-size:165%;}
		&-float { position:absolute; top:0; left:0; width:4em;}
		&-gray [class*="e_ico"] { color:@fg-light-7;}
		& + .label { padding-left:0;}
	}
	// 基础
	background:@bg; .x_bs; overflow:hidden;
	> ul { overflow:hidden; position:relative;}
	> ul > li { background:@bg; background-size:100% 100%; display:flex; .x_bs; align-items:center; align-content:flex-start; position:relative; flex-wrap:wrap; overflow:hidden; font-size:116.67%;}
	// li 的状态
	.link:not(.checked):not(.on) {
		cursor:pointer;
		input[readonly] { cursor:pointer !important;}
	}
	> ul > li.cur:before { .liStatu(@primary);}
	> ul > li.cur {
		.ico,
		.more,
		.main,
		.label { color:@primary;}
	}
	> ul > li.checked {
		position:relative; z-index:1; cursor:default;
		&:before { content:""; position:absolute; bottom:0; right:0; left:0; top:0; border:2px solid @danger; pointer-events:none; z-index:2;}
		&:after { font-family:"ico"; content:"\e020"; position:absolute; bottom:0.05em; right:0; font-size:200%; line-height:1; color:@danger; pointer-events:none; z-index:3;}
	}
	> ul > li.on {
		.main { color:@primary;}
		cursor:default;
	}
	> ul > li.on {
		.e_green,
		.e_orange,
		.e_blue,
		.e_red { color:@warning-light-4 !important;}
		> .pic > .e_ico-pic-green { background:@bg; color:@success;}
		> .pic > .e_ico-pic-red { background:@bg; color:@danger;}
		> .pic > .e_ico-pic-orange { background:@bg; color:@warning;}
		> .pic > .e_ico-pic-blue { background:@bg; color:@primary;}
		> .pic > .e_ico-pic-black { background:@bg; color:@fg-light-1;}
	}
	// 部分
	.pic {
		position:relative; align-self:flex-start;
		&-middle { align-self:center;}
		.picSet(@value) {
			img { width:(@value);} // 4.53125em
			input[type="radio"],
			input[type="checkbox"] { position:absolute; left:0.5*@gap; top:0.5*@gap; z-index:10;}
			img.e_pic-r { width:(@value)-2*0.75*@gap; margin:0.75*@gap 0 0.75*@gap 0.75*@gap;}
			div.e_pic-r { width:(@value)-2*0.75*@gap; margin:0.75*@gap 0 0.75*@gap 0.75*@gap; padding:0.75*@gap; .x_bs;}
			[class*="e_ico"] { font-size:(@value)-2*0.75*@gap; width:1em; height:1em; line-height:1em; padding:0.75*@gap/((@value)-2*0.75*@gap) 0 0.75*@gap/((@value)-2*0.75*@gap) 0.75*@gap/((@value)-2*0.75*@gap); color:@primary;}
			.e_ico-pic-gray,
			.e_ico-pic-red,
			.e_ico-pic-orange,
			.e_ico-pic-yellow,
			.e_ico-pic-green,
			.e_ico-pic-blue,
			.e_ico-pic-navy { padding-right:0.75*@gap/((@value)-2*0.75*@gap); color:@bg;}
			.e_ico-pic-r { font-size:(@value)-(2*0.75*@gap)-(2*0.75*@gap); padding:0.75*@gap/((@value)-(2*0.75*@gap)-(2*0.75*@gap)); margin:0.75*@gap/((@value)-(2*0.75*@gap)-(2*0.75*@gap)) 0 0.75*@gap/((@value)-(2*0.75*@gap)-(2*0.75*@gap)) 0.75*@gap/((@value)-(2*0.75*@gap)-(2*0.75*@gap)); width:1em; height:1em; line-height:1em;}
			.e_ico-pic-r + .text { padding-left:(0.75*@gap/((@value)-(2*0.75*@gap)-(2*0.75*@gap)))*((@value)-(2*0.75*@gap)-(2*0.75*@gap))/0.8571; margin-top:-((0.75*@gap/((@value)-(2*0.75*@gap)-(2*0.75*@gap)))*((@value)-(2*0.75*@gap)-(2*0.75*@gap))/0.8571)+0.5*@gap;}
		}
		.picSet((0.75*@gap*2)+(1+0.5*@gap)+(0.25*@gap+1+0.5*@gap)*0.875);
		.text { display:block; text-align:center; margin-top:0.5*@gap; font-size:85.71%;}
		&.l_padding { padding-right:0 !important;}
		&-row-0 {
			.picSet((0.75*@gap*2)+(1+0.5*@gap));
		}
		&-row-2 {
			.picSet((0.75*@gap*2)+(1+0.5*@gap)+0.25*@gap+(1+0.5*@gap)*0.8751*2);
		}
		&-row-3 {
			.picSet((0.75*@gap*2)+(1+0.5*@gap)+0.25*@gap+(1+0.5*@gap)*0.8751*3);
		}
		&-row-4 {
			.picSet((0.75*@gap*2)+(1+0.5*@gap)+0.25*@gap+(1+0.5*@gap)*0.8751*4);
		}
		.e_pic-black,
		.e_pic-white,
		.e_pic-bright,
		.e_pic-danger,
		.e_pic-warning,
		.e_pic-success,
		.e_pic-navy,
		.e_pic-blue { margin-top:0.25*@gap; font-size:200%;}
	}
	.ico {
		color:@secondary; width:1+2*@gap; text-align:center; align-self:flex-start; padding:@gap 0;
		& + .main,
		& + .label { padding-left:0;}
	}
	.group {
		flex:1; display:flex; align-items:center; align-content:flex-start;
		> .content { display:flex; flex:1; align-items:center; align-content:flex-start;}
		.main { width:1em;} // 解决 chrome 下文字过长会换行的问题
	}
	.main {
		flex:1; .x_to; padding:0.75*@gap @gap; width:1px; min-height:1+0.5*@gap; line-height:1+0.5*@gap;
		.title {
			line-height:1+0.5*@gap;
			.x_to;
			.left { float:left;}
			.right { float:right; margin-left:@gap;}
			&-auto { white-space:normal;}
		}
		.content {
			color:@fg-light-5; font-size:85.71%; .x_to; line-height:1+0.5*@gap; margin-top:0.25*@gap;
			.e_progress { display:flex; width:100%;}
			.e_range { display:block; width:auto;}
			> .e_tag { margin-top:0.25*@gap;}
			&:empty { margin:0; height:0;}
		}
		.content-row-4,
		.content-row-3,
		.content-row-2 { white-space:normal; display:-webkit-box; -webkit-box-orient:vertical;}
		.content-row-1,
		.content-row-1:empty { height:(1+0.5*@gap)*1;}
		.content-row-2,
		.content-row-2:empty { -webkit-line-clamp:2; height:(1+0.5*@gap)*2;}
		.content-row-3,
		.content-row-3:empty { -webkit-line-clamp:3; height:(1+0.5*@gap)*3;}
		.content-row-4,
		.content-row-4:empty { -webkit-line-clamp:4; height:(1+0.5*@gap)*4;}
		.content-auto  { white-space:normal; height:auto;}
	}
	.side {
		color:@fg-light-5; text-align:right; min-height:1+0.5*@gap; line-height:1+0.5*@gap;
		&:last-child { padding-right:@gap;}
		input[type="date"],
		input[type="datetime"],
		input[type="month"],
		input[type="number"],
		input[type="tel"],
		input[type="time"],
		input[type="password"],
		input[type="text"] { width:5em;}
		input[type="date"],
		input[type="datetime"],
		input[type="month"],
		input[type="number"],
		input[type="tel"],
		input[type="time"],
		input[type="password"],
		input[type="text"],
		> .e_tag,
		> .e_group,
		> .e_mix,
		> .e_button,
		> button { font-size:85.71%;}
	}
	.space,
	.space-1 { width:0.5*@gap;}
	.space-2 { width:1*@gap;}
	.space-3 { width:1.5*@gap;}
	.space-4 { width:2*@gap;}
	.empty,
	.more { width:(1+2*@gap)/0.75; text-align:center; font-size:75%; line-height:1em; color:@fg-light-8-5; position:relative;}
	.more:after { font-family:"ico"; content:"\e05a";}
	.more-unfold:after { content:"\e081";}
	.more-fold:after { content:"\e037";}
	// 组合插件
	> ul > li > .fn,
	> ul > li > .group > .fn,
	> ul > li > .content > .group > .fn,
	> ul > li > .group > .content > .fn {
		.fn();
	}
	// 自动间距
	.side~.side { margin-left:@gap;}
	.side~.button { margin-left:@gap;}
	.fn + .main { padding-left:0;}
	// 状态
	.statu { .x_rotate(-45); position:absolute; left:-3em; top:1em; height:2em; line-height:2em; text-align:center; width:10em; background:@success; color:@bg;}
	.statu-off { background:@danger;}
	.statu-right { left:auto; right:-3em; .x_rotate(45);}
	.statu-blue { background:@primary;}
	.statu-orange { background:@warning;}
	.statu-navy { background:@secondary;}
	.statu-gray { background:@bg-dark-2;}
	.statu-red { background:@danger;}
	// 标识
	.error,
	.ok,
	.help {
		width:1+2*@gap; text-align:center; position:relative;
	}
	.help:after { font-family:"ico"; content:"\e040"; color:@primary;}
	.ok:after { font-family:"ico"; content:"\e05c"; color:@success;}
	.error:after { font-family:"ico"; content:"\e01b"; color:@danger;}
	// 插入组件
	.c_param {
		padding:0; background:none; white-space:normal;
	}
	.c_form { white-space:normal;}
	> ul > li > .c_list { flex:1;}
	> ul > li > .sub {
		.c_list { white-space:normal;}
	}
}



// 遮罩插件
.c_list {
	.cover {
		position:absolute; transform:translateY(101%); transition:transform 0.1s ease-out; top:0; left:0; right:0; bottom:0; background:@fg-op-5; color:@bg; z-index:3;
		&:before { content:""; display:inline-block; height:100%; width:1px; margin-right:-0.5em; vertical-align:middle;}
		.wrapper { display:inline-block; vertical-align:middle;}
		.title { .x_to;}
		.content { .x_to; font-size:85.71%; margin-top:0.25*@gap;}
		.fn { margin-top:@gap; font-size:85.71%;}
	}
}



// 垂直构成
.c_list {
	> ul > li > .content,
	> ul > li > .sub { display:inline-flex; width:100%; align-items:center; align-content:flex-start; position:relative; overflow:hidden;}
	> ul > li > .sub {
		font-size:85.71%;
		&:before { content:""; position:absolute; top:0; left:@gap; right:@gap; height:0; border-bottom:1px dashed @fg-light-8-5;}
	}
	> ul > li > .sub-noline {
		&:before { border:0 none;}
		> .main {
			padding-top:0;
		}
	}
	> ul > li > .op {
		display:inline-flex; width:100%; text-align:center; height:1+2*@gap; line-height:1+2*@gap; background:rgba(0,0,0,0.03); font-size:85.71%;
		ul { display:flex; width:100%;}
		li { flex:1; cursor:pointer;}
		li > label { display:block;}
		input[type="checkbox"],
		input[type="radio"] { vertical-align:top; margin-top:@gap; margin-right:0.5*@gap;}
		[class*="e_ico"] { margin-right:0.5*@gap;}
	}
	> ul > li > .content > .fn,
	> ul > li > .sub > .fn {
		.c_list .fn();
	}
}
.c_list-v.c_list-pic-s {
	.pic {
		img { width:40%; height:auto; margin-top:0.5*@gap;}
		.e_pic-ico { width:auto;}
	}
	.main {
		padding:0.86*@gap;
	}
}
.c_list-v[class*="c_list-col"] {
	> ul > li {
		display:inline-block;
		.pic { line-height:normal !important; height:auto !important;}
		.main { width:auto;}
	}
}



// 表单插件
.c_list {
	.label() {
		padding:0.75*@gap @gap; align-self:flex-start; min-height:1+0.5*@gap; line-height:1+0.5*@gap;
		input[type="checkbox"] { position:relative; top:0.45em; margin-top:-1em;}
	}
	.value() {
		flex:1; text-align:right; width:1px; position:relative; z-index:3;
		.text { color:@fg-light-5; .x_to; line-height:1+0.5*@gap; padding:0.75*@gap 0;}
		> .e_group,
		> .e_select,
		> .e_textarea,
		> textarea,
		> input[type="date"],
		> input[type="datetime"],
		> input[type="month"],
		> input[type="number"],
		> input[type="tel"],
		> input[type="time"],
		> input[type="password"],
		> input[type="text"] { width:100%; border:1px solid transparent; text-align:right; background:transparent;}
		.e_group {
			.e_select,
			.e_label,
			button,
			.e_button { border-bottom:0 none; border-top:0 none; margin:0;}
			input[type="date"],
			input[type="datetime"],
			input[type="month"],
			input[type="number"],
			input[type="tel"],
			input[type="time"],
			input[type="password"],
			input[type="text"] { text-align:right;}
		}
		.e_checks {
			text-align:left;
			&-line { border-left:1px solid @fg-light-8-5;}
		}
		.e_mix {
			background:transparent; border:0 none; width:100%;
			input[type="date"],
			input[type="datetime"],
			input[type="month"],
			input[type="number"],
			input[type="tel"],
			input[type="time"],
			input[type="password"],
			input[type="text"],
			[class*="e_ico"],
			button,
			.e_label,
			.e_button { border:0 none;}
			input[type="date"],
			input[type="datetime"],
			input[type="month"],
			input[type="number"],
			input[type="tel"],
			input[type="time"],
			input[type="password"],
			input[type="text"] { background:none; text-align:right;}
			.e_select { border:1px solid transparent; text-align:right; background:transparent;}
		}
		.e_segment { margin-right:((1+2*@gap)/0.8571-(1+2*@gap))/2; font-size:85.71%;}
		.e_range { width:100%; vertical-align:top;}
		.e_rangeValue { padding-right:@gap;}
		.c_list {
			text-align:left;
			&-border {
				margin:0.5*@gap 0.5*@gap 0.5*@gap 0;
			}
		}
		.e_tag { vertical-align:top;}
		&:last-child .e_switch { margin-right:@gap;}
		&:last-child .e_star { margin-right:@gap;}
		&:last-child .text { padding-right:@gap;}
		&:last-child > input { padding-right:@gap;}
		&:last-child .e_tag:last-child { margin-right:@gap;}
	}
	.required:before { .c_list .liStatu(@danger-light-5);}
	> ul > li > label { display:inline-block;}
	> ul > li > .group > .label,
	> ul > li > .group > .content > .label,
	> ul > li > .content > .label,
	> ul > li > .sub > .label,
	> ul > li > .label {
		.label();
	}
	> ul > li > .group > .value,
	> ul > li > .group > .content > .value,
	> ul > li > .content > .value,
	> ul > li > .sub > .value,
	> ul > li > .value {
		.value();
	}
	// 不建议属性
	> ul > li > input[type="radio"] { display:none;}
	&-form {
		border:1px solid @fg-light-8-5;
		> ul > li { border-bottom:1px solid @fg-light-8-5;}
		> ul > li:last-child { border-bottom:0 none;}
	}
}



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



// 分割线
.c_list-line {
	> ul  { margin-right:-1px; margin-top:-1px; position:relative; top:1px;}
	// > ul > li { margin-top:-1px;}
	> ul > li:before { content:""; position:absolute; left:0; top:0; bottom:0; right:0; border-bottom:1px solid @fg-light-8-5; border-right:1px solid @fg-light-8-5; pointer-events:none; z-index:4;}
	.button > button { border-top:0 none; border-bottom:0 none;}
}



// 圆角
.c_list-r {
	border-radius:0.25em;
}



// 分列
[class*="c_list-col-"] {
	> ul { display:flex; flex-wrap:wrap;}
	> ul > li { flex:1;}
}
.c_list-col-1 {
	> ul > li { width:100%; min-width:100%; max-width:100%;}
}
.c_list-col-2 {
	> ul > li { width:50%; min-width:50%; max-width:50%;}
	> ul > li.merge-2 { width:100%; min-width:100%; max-width:100%;}
}
.c_list-col-3 {
	> ul > li { width:33.33%; min-width:33.33%; max-width:33.33%;}
	> ul > li.merge-2 { width:66.66%; min-width:66.66%; max-width:66.66%;}
	> ul > li.merge-3 { width:100%; min-width:100%; max-width:100%;}
}
.c_list-col-4 {
	> ul > li { width:25%; min-width:25%; max-width:25%;}
	> ul > li.merge-2 { width:50%; min-width:50%; max-width:50%;}
	> ul > li.merge-3 { width:75%; min-width:75%; max-width:75%;}
	> ul > li.merge-4 { width:100%; min-width:100%; max-width:100%;}
}



// 提交
.c_list-submit {
	position:relative;
	> ul {
		// > li { height:1.14+2.38*@gap;}
		&:after { content:""; height:1+2*@gap; vertical-align:top; width:1em; display:inline-block;}
	}
	.submit {
		position:absolute; right:0; bottom:0; white-space:nowrap;
	}
}



// 垂直
.c_list-v {
	> ul > li {
		text-align:center; display:block;
		.main { width:auto;}
		> .group { display:block; position:relative; overflow:hidden;}
		> .content { display:block !important;}
		> .sub { display:block; background:@bg-dark-0-1;}
		> .sub:before { display:none;}
	}
	.pic {
		width:auto;
		[class*="e_ico"]:not([class*="e_ico-pic-"]) { padding-left:0; padding-bottom:0;}
		.e_ico-pic-r { margin-left:0; margin-bottom:0;}
		img.e_pic-r,
		img { width:100%; margin:0; box-sizing:border-box;}
		div.e_pic-r { margin:0.75*@gap 0 0 0;}
	}
	> ul > li > .content > .fn,
	> ul > li > .sub > .fn,
	> ul > li > .fn {
		width:auto; text-align:center; padding:0.5*@gap 0; line-height:1em;
		input[type="radio"],
		input[type="checkbox"],
		[class*="e_ico"] {
			position:relative;
			left:auto; top:auto; margin:0;
		}
	}
}
.c_list-v[class*="c_list-col"] {
	> ul > li {
		display:inline-block;
		.pic { line-height:normal !important; height:auto !important;}
		.main { width:auto;}
	}
}



// 自动排列
.c_list-auto {
	background:transparent;
	.main,
	.group { flex:none; max-width:100%;}
	.group > .content { flex:none;}
	.group .main { width:auto;}
	> ul { font-family:simsun; padding-right:0.5em;}
	> ul > li { display:inline-flex; width:auto; vertical-align:top; margin-right:-0.5em; max-width:100%; font-family:"microsoft yahei", simhei, verdana;}
	> ul > li .main { width:auto;}
}
.c_list-auto.c_list-v {
	.main { flex:1;}
	> ul > li { width:8.57em;}
}
.c_list-auto.c_list-border {
	display:inline-block; background:@bg; max-width:100%; .x_bs;
}



// 子项色彩
.c_list > ul > .blue { background:@primary; color:@bg;}
.c_list > ul > .red { background:@danger; color:@bg;}
.c_list > ul > .green { background:@success; color:@bg;}
.c_list > ul > .orange { background:@warning; color:@bg;}
.c_list > ul > .gray { background:@bg-dark-0-3;}
.c_list > ul > .gray-light { background:@bg-dark-0-1;}
.c_list > ul > .lightBlue { background:@primary-light-9;}



// 色彩
.c_list-red,
.c_list-green,
.c_list-orange,
.c_list-blue {
	background:none;
	> ul > li { color:@bg;}
}
.c_list > ul > .red,
.c_list > ul > .green,
.c_list > ul > .orange,
.c_list > ul > .blue,
.c_list-red,
.c_list-green,
.c_list-orange,
.c_list-blue {
	.ico {
		color:@bg;
	}
	.pic {
		.e_ico-pic { color:@bg;}
	}
	.main {
		.content { color:@bg;}
	}
	.side { color:@bg;}
}
.c_list-blue {
	> ul > li { background:@primary;}
	> ul > li.on {
		background:@primary-dark-3;
		.main > .title { color:@bg;}
	}
}
.c_list-red {
	> ul > li {
		background:@danger;
		.main > .title { color:@bg;}
	}
}
.c_list-green {
	> ul > li {
		background:@success;
		.main > .title { color:@bg;}
	}
}
.c_list-orange {
	> ul > li {
		background:@warning;
		.main > .title { color:@bg;}
	}
}
.c_list-gray {
	background:@bg-dark-0-3;
	> ul > li {
		background:@bg-dark-0-3;
	}
}
.c_list-gray-light {
	background:@bg-dark-0-1;
	> ul > li {
		background:@bg-dark-0-1;
	}
}
.c_list-blue.c_list-space {
	> ul > li { background:linear-gradient(90deg,rgba(0,0,0,0) 0, rgba(0,0,0,0) 0.5*@gap, @primary 0.5*@gap, @primary 100%);}
}
.c_list-red.c_list-space {
	> ul > li { background:linear-gradient(90deg,rgba(0,0,0,0) 0, rgba(0,0,0,0) 0.5*@gap, @danger 0.5*@gap, @danger 100%);}
}
.c_list-orange.c_list-space {
	> ul > li { background:linear-gradient(90deg,rgba(0,0,0,0) 0, rgba(0,0,0,0) 0.5*@gap, @warning 0.5*@gap, @warning 100%);}
}
.c_list-green.c_list-space {
	> ul > li { background:linear-gradient(90deg,rgba(0,0,0,0) 0, rgba(0,0,0,0) 0.5*@gap, @success 0.5*@gap, @success 100%);}
}
.c_list-gray.c_list-space {
	> ul > li { background:linear-gradient(90deg,rgba(0,0,0,0) 0, rgba(0,0,0,0) 0.5*@gap, @bg-dark-0-3 0.5*@gap, @bg-dark-0-3 100%);}
}
.c_list-gray-light.c_list-space {
	> ul > li { background:linear-gradient(90deg,rgba(0,0,0,0) 0, rgba(0,0,0,0) 0.5*@gap, @bg-dark-0-1 0.5*@gap, @bg-dark-0-1 100%);}
}



// 子项间距
.c_list-space {
	background:transparent; overflow:hidden;
	> ul { margin-left:-0.5*@gap*1.1667; margin-top:-0.5*@gap*1.1667 !important; overflow:visible;}
	> ul > li { padding-left:0.5*@gap; background:linear-gradient(90deg,rgba(0,0,0,0) 0, rgba(0,0,0,0) 0.5*@gap, @bg 0.5*@gap, @bg 100%); margin-top:0.5*@gap;}
	> ul > .blue { background:linear-gradient(90deg,rgba(0,0,0,0) 0, rgba(0,0,0,0) 0.5*@gap, @primary 0.5*@gap, @primary 100%);}
	> ul > .red { background:linear-gradient(90deg,rgba(0,0,0,0) 0, rgba(0,0,0,0) 0.5*@gap, @danger 0.5*@gap, @danger 100%);}
	> ul > .orange { background:linear-gradient(90deg,rgba(0,0,0,0) 0, rgba(0,0,0,0) 0.5*@gap, @warning 0.5*@gap, @warning 100%);}
	> ul > .green { background:linear-gradient(90deg,rgba(0,0,0,0) 0, rgba(0,0,0,0) 0.5*@gap, @success 0.5*@gap, @success 100%);}
	> ul > .gray { background:linear-gradient(90deg,rgba(0,0,0,0) 0, rgba(0,0,0,0) 0.5*@gap, @bg-dark-0-3 0.5*@gap, @bg-dark-0-3 100%);}
	.cover { left:0.5*@gap;}
	.statu:not(.statu-right) { left:-2.86em;}
}
.c_list-space {
	> ul { top:0; margin-right:0;}
	> ul > li.cur:before { left:0.5*@gap; border-left:2px solid @success;}
	> ul > li.required:before { left:0.5*@gap; border-left:2px solid @danger;}
	> ul > li.checked:before { left:0.5*@gap; border:2px solid @danger;}
}
.c_list-space.c_list-line {
	> ul > li:not(.checked):before { left:0.5*@gap; border:1px solid @fg-light-8-5;}
}
.c_list-line.c_list-r.c_list-space {
	border-radius:0;
	> ul > li { border-radius:0.25em;}
	> ul > li:before { border-radius:0.25em;}
}
.c_list-line.c_list-space.c_list-border { border:0 none; background:none;}



// 大小
.c_list-xs { font-size:75%;}
.c_list-s  { font-size:85.71%;}
.c_list-m  { font-size:100%;}
.c_list-l  { font-size:116.67%;}



// 特殊场景问题修复
// 解决在 auto 宽度下 main 部分无宽度的问题
[style*="width"][style*="auto"] .c_list .main { flex:auto;}
// 边界线不显示问题
.c_list-fixLine > ul > li { overflow:visible;}