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

// 对话组件
.c_chat {
	.x_clear;
	.pic { 
		float:left;
		img { width:4.5em; height:4.5em;}
	}
	.box { 
		overflow:hidden; padding-bottom:1px; // fix overflow border
		.wrapper {
			display:inline-block; border:1px @fg-light-9 solid; border-radius:0.25em; padding:0.75*@gap @gap; position:relative; margin-left:@gap; background:@bg-dark-0-2; line-height:1+0.5*@gap; min-height:1.5*@gap;
			&:after { content:""; width:0.5em; height:0.5em; display:inline-block; background:@bg-dark-0-2; position:absolute; left:-0.25em; top:(1+2*@gap)/2-0.25*1.44; /* 整体高度/2-本身高度/2=本身居中于整体的高度位置 */ .x_rotate(135); border-right:1px @fg-light-9 solid; border-bottom:1px @fg-light-9 solid;}
			.e_ico-talk:after { .x_rotate(180); display:inline-block;}
		}
	}
}



// 右侧效果
.c_chat-right {
	.pic { float:right; width:5em;}
	.box {
		.wrapper {
			margin:0 @gap 0 0; float:right;
			&:after { left:auto; right:-0.25em; border:none; border-left:1px @fg-light-9 solid; border-top:1px @fg-light-9 solid;}
			.e_ico-talk:after { .x_rotate(0); display:inline-block;}
		}
	}
}



// 色彩
.c_chat-green {
	.box { 
		.wrapper { 
			background:@success; border:1px @success-dark-1 solid; color:#fff;
			&:after { background:@success; border-right:1px @success-dark-1 solid; border-bottom:1px @success-dark-1 solid;}
		}
	}
}



// 右侧色彩
.c_chat-right.c_chat-green {
	.box { 
		.wrapper { 
			&:after { border:none; border-left:1px @success-dark-1 solid; border-top:1px @success-dark-1 solid;}
		}
	}
}