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

// 消息提示框组件
.c_msg {
	position:relative; .x_bs; overflow:hidden; text-align:center;
	> .wrapper { overflow:hidden; background:@bg; padding:2*@gap; position:relative;}
	.close { line-height:1+1.5*@gap; position:absolute; top:0; right:0em; width:1+1.5*@gap; height:1+1.5*@gap; color:@fg-light-8; cursor:default;}
	.close:after { font-family:"ico"; content:"\e01b";}
	.emote { display:inline-block;}
	.emote:before { content:""; display:inline-block; width:6em; height:7em; background-image:url(../../img/emote/08.png); background-repeat:no-repeat; background-size:100% 100%;}
	&-warn    .emote:before { background-image:url(../../img/emote/03.png);}
	&-error   .emote:before { background-image:url(../../img/emote/09.png);}
	&-success .emote:before { background-image:url(../../img/emote/01.png);}
	&-help    .emote:before { background-image:url(../../img/emote/04.png);}
	&-sweat   .emote:before { background-image:url(../../img/emote/02.png);}
	&-angry   .emote:before { background-image:url(../../img/emote/05.png);}
	&-however .emote:before { background-image:url(../../img/emote/06.png);}
	&-embrsd  .emote:before { background-image:url(../../img/emote/07.png);}
	&-loading .emote:before { background-image:url(../../img/emote/loading.gif);}
	.info { margin-top:@gap;}
	.info > .text {
		.title { font-size:1.5em; line-height:1+0.25*@gap;}
		.content {
			margin-top:0.5*@gap; color:@fg-light-5; line-height:1+0.5*@gap; word-wrap:break-word; word-break:break-all;
			.e_progress { margin-top:0.5*@gap;}
			.c_param { text-align:left;}
		}
		.title+.content { margin-top:@gap;}
	}
	.info > .fn {
		margin-top:1.5*@gap;
		button { margin:0 0.5*@gap;}
	}
	.detail {
		margin-top:1.5*@gap; text-align:left;
		line-height:1+0.5*@gap; word-wrap:break-word; word-break:break-all; max-height:10*@gap; background:@bg-dark-0-2; border:0 none; border:1px solid @fg-light-8-5; overflow:auto; padding:@gap 1.5*@gap; color:@fg-light-1;
		.c_param {
			background:none; padding:0;
		}
	}
}



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



// 水平布局
.c_msg-h {
	background:@bg; white-space:nowrap;
	> .wrapper { display:inline-table; max-width:90%; white-space:normal;}
	.emote { margin-right:2.14em; display:table-cell; vertical-align:top; text-align:right;}
	.info { text-align:left; margin-top:0; display:table-cell; vertical-align:middle; padding-left:2*@gap;}
	.info > .fn {
		button { margin:0 0.71*@gap 0 0;}
	}
}



// 全屏高度
.c_msg-full {
	.x_full; background:@bg; z-index:1100;
	&:before { content:""; display:inline-block; height:100%; width:1px; vertical-align:middle; margin-right:-1px;}
	> .wrapper { display:inline-block; vertical-align:middle; background:none; max-width:80%;}
}
.c_msg-full.c_msg-h {
	> .wrapper { display:inline-table;}
	.info { flex:auto;}
}



// 弹出模式
.c_msg-popup {
	.x_full; background:@fg-op-3; z-index:1100;
	&:before { display:inline-block; content:""; height:100%; width:1em; vertical-align:middle; margin-right:-1em; max-width:90%; box-sizing:border-box;}
	.close { border-top-right-radius:0.5em;}
	> .wrapper { display:inline-block; padding:1+1.86*@gap; vertical-align:middle; border-radius:0.5em; max-width:90%; min-width:50%; box-sizing:border-box;}
}
.c_msg-popup.c_msg-h {
	> .wrapper { display:inline-table;}
}