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

// 卡片
.c_card {
	display:flex; padding:0.75*@gap @gap; .x_to; line-height:1+0.5*@gap; align-items:center; position:relative; /* background:@bg; */
}



// 垂直分布
.c_card {
	.title { .x_to; font-size:116.67%; color:@fg; line-height:1+0.5*@gap;}
	.content { color:@fg-light-5; margin-top:0.25*@gap; .x_to; line-height:1+0.5*@gap;}
}



// 水平分布
.c_card {
	.pic {
		margin-right:@gap; margin-left:-0.25*@gap; /* 上下左周间距一致 */ align-self:flex-start;
		img { height:2.1+2.85*@gap;} /* "title line-height" + "content line-height" + "content margin" + "padding * 2" */
		[class*="e_ico"] { width:(2.1+2.85*@gap)/(2.1+0.825*@gap); height:(2.1+2.85*@gap)/(2.1+0.825*@gap); font-size:2.1+0.825*@gap; line-height:(2.1+2.85*@gap)/(2.1+0.825*@gap); color:@primary; text-align:center; display:inline-block;} /* 2.1+0.825*@gap 即顶部对齐 title 顶部，底部对齐第一行 content 底部 */
		.e_ico-pic-gray,
		.e_ico-pic-orange,
		.e_ico-pic-green,
		.e_ico-pic-red,
		.e_ico-pic-navy,
		.e_ico-pic-yellow,
		.e_ico-pic-blue { color:@bg;}
	}
	.main { flex:1; width:1px;}
	.side {
		color:@fg-light-5; margin-left:@gap; text-align:center;
		&-line { padding-left:@gap; border-left:1px solid @fg-light-8;}
	}
	.fn {
		text-align:center; z-index:2; width:2em; line-height:1; align-self:center; position:relative; margin:-0.5*@gap -0.5*@gap -0.5*@gap 1*@gap;
		[class*="e_ico"] { cursor:default; color:@primary; display:block; width:2em; height:2em; line-height:2em; border-radius:1em;}
		[class*="e_ico"] + [class*="e_ico"],
		[class*="e_ico"] + input[type="radio"],
		[class*="e_ico"] + input[type="checkbox"] { margin-top:0.5*@gap;}
		input[type="radio"],
		input[type="checkbox"] { vertical-align:top;}
	}
	.button {
		margin:-1*@gap -1*@gap -1*@gap @gap;
		button { float:left; border-top:0 none; border-bottom:0 none; border-right:0 none;}
	}
	.more {
		margin-left:@gap;
		&:after { font-family:"ico"; content:"\e05a"; color:@fg-light-8; font-size:75%;}
	}
	.group {
		display:flex; flex:1; align-items:center; cursor:pointer; padding:@gap; margin:-@gap;
	}
	.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;}
}



// 图片
.c_card {
	.pic-close { margin:-0.75*@gap @gap -0.75*@gap -1*@gap;}
	.pic-r img { border-radius:55%;}
	.pic-row-0 {
		img { height:1+2*@gap;}
		[class*="e_ico"] { font-size:150%; width:0.67+1.33*@gap; height:0.67+1.33*@gap; line-height:0.67+1.33*@gap;}
	}
	.pic-row-2 {
		img { height:3.35*@gap + 3.1;}
		[class*="e_ico"] { font-size:3.1+1.325*@gap; width:(3.1+3.35*@gap)/(3.1+1.325*@gap); height:(3.1+3.35*@gap)/(3.1+1.325*@gap); line-height:(3.1+3.35*@gap)/(3.1+1.325*@gap);}
	}
	.pic-row-3 {
		img { height:3.85*@gap + 4.1;}
		[class*="e_ico"] { font-size:4.1+1.825*@gap; width:(4.1+3.85*@gap)/(4.1+1.825*@gap); height:(4.1+3.85*@gap)/(4.1+1.825*@gap); line-height:(4.1+3.65*@gap)/(4.1+1.825*@gap);}
	}
	.pic-row-4 {
		img { height:4.35*@gap + 5.1;}
		[class*="e_ico"] { font-size:5.1+2.325*@gap; width:(5.1+4.35*@gap)/(5.1+2.325*@gap); height:(5.1+4.35*@gap)/(5.1+2.325*@gap); line-height:(5.1+4.35*@gap)/(5.1+2.325*@gap);}
	}
	.pic-row-5 {
		img { height:4.85*@gap + 6.1;}
		[class*="e_ico"] { font-size:6.1+2.825*@gap; width:(6.1+4.85*@gap)/(6.1+2.825*@gap); height:(6.1+4.85*@gap)/(6.1+2.825*@gap); line-height:(6.1+4.85*@gap)/(6.1+2.825*@gap);}
	}
}



// 行数设置
.c_card {
	.title-row-2,
	.title-row-3,
	.title-row-4,
	.title-row-5 { -webkit-line-clamp:1; height:1+0.5*@gap; overflow:hidden; text-overflow:ellipsis; -webkit-box-orient:vertical; display:-webkit-box; white-space:normal;}
	.title-row-2 { -webkit-line-clamp:2; height:2+@gap;}
	.title-row-3 { -webkit-line-clamp:3; height:3+1.5*@gap;}
	.title-row-4 { -webkit-line-clamp:4; height:4+2*@gap;}
	.title-row-5 { -webkit-line-clamp:5; height:5+2.5*@gap;}
	.content-row-2,
	.content-row-3,
	.content-row-4,
	.content-row-5 { -webkit-line-clamp:1; height:1+0.5*@gap; overflow:hidden; text-overflow:ellipsis; -webkit-box-orient:vertical; display:-webkit-box; white-space:normal;}
	.content-row-2 { -webkit-line-clamp:2; height:2+@gap;}
	.content-row-3 { -webkit-line-clamp:3; height:3+1.5*@gap;}
	.content-row-4 { -webkit-line-clamp:4; height:4+2*@gap;}
	.content-row-5 { -webkit-line-clamp:5; height:5+2.5*@gap;}
	.content-auto { height:auto; overflow:visible; white-space:normal;}
}



// 鼠标悬停效果
.s_pc .c_card {
	.fn {
		[class*="e_ico"]:hover { background:@primary; color:@bg;}
	}
	.group:hover {
		background:@fg-op-1;
	}
}



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



// 已选
.c_card-checked {
	position:relative; z-index:1; cursor:default;
	&:before { content:""; position:absolute; bottom:0; right:0; left:0; top:0; border:0.14em solid @danger; pointer-events:none; z-index:4;}
	&:after { font-family:"ico"; content:"\e020"; position:absolute; bottom:0; right:0; font-size:243%; line-height:1; color:@danger; pointer-events:none; z-index:5;}
}



// 垂直
.c_card-v {
	display:block; padding:1*@gap;
	.title { margin-top:0.68*@gap;}
	.pic {
		text-align:center; margin:0;
		[class*="e_ico"] { width:1em; text-align:center; height:1em; line-height:1em;}
		img { height:auto; width:100%;}
		&-close {
			margin:-1*@gap -1*@gap 0 -1*@gap;
		}
	}
	.main { width:auto;}
	.side {
		margin:@gap 0 0 0; text-align:right;
		.title { margin-top:0;}
		&-line { border-left:0 none; padding-left:0;}
	}
	.more { display:none;}
	.group { display:block;}
	.fn { position:absolute; top:1.5*@gap; right:1.5*@gap; width:auto; line-height:2em; min-width:2em; padding:0.5*@gap; background:@bg-op-8; text-align:center;}
	.fn [class*="e_ico"] { display:inline-block;}
	.fn [class*="e_ico"] + [class*="e_ico"] { margin:0; margin-left:0.5*@gap;}
	.fn input[type="radio"],
	.fn input[type="checkbox"] { margin:0.5*@gap;}
	.fn + .fn { top:2+2.5*@gap;}
}



// 反色
.c_card-ob {
	color:@bg;
	.pic [class*="e_ico"],
	.fn [class*="e_ico"],
	.title { color:@bg;}
	.more:after,
	.side,
	.content { color:@bg-op-8;}
}
.c_card-ob.c_card-v {
	.fn { background:@fg-op-3;}
}



// 翻面（touch only）
.c_card-rotate {
	-moz-transform:perspective(600px); 
	-webkit-transform:perspective(600px); // IE不支持
	position:relative; transform-style:preserve-3d; transition:transform 1s;
	.effect { position:absolute; top:0; left:0; background:#fff; backface-visibility:hidden;}
	.first { transform:rotateY(0deg);}
	.second { transform:rotateY(180deg);} 
}
.c_card-rotated { 
	transform:rotateY(180deg);
}
.c_card-more {
	position:relative; overflow:hidden;
	.effect {
		.effect-touch {
			position:absolute; bottom:0; background:#fff; z-index:3; height:0%; transition:0.5s; overflow:hidden;
		}
	}
	.effect:hover {
		.effect-touch {
			height:80%; transition:0.5s;
			.op { bottom:0; position:absolute; width:100%;}
		}
	}
}