/**
 * message.less
 * 消息的默认样式
 */

// 导入必要的文件
@import "../../common/import.less";

// 消息样式
.message {
	.flex();
	.flexDirection(row);
	padding: @CtrlPaddingTB @CtrlPaddingLR * 1.5;
	border-radius: @BorderRadius;
	background: @ColorWhiteBackLight;
	// 消息容器内的图标样式
	.ico:first-child {
		margin-right: @BaseSize / 2;
	}
	// 消息容器内的按钮样式
	.btn {
		height: auto;
		margin: -@CtrlPaddingTB 0;
		line-height: 2em;
		border: none;
		border-radius: 0;
		opacity: @OpacityNoImport;
		.transition(opacity .3s, background .3s);

		&:hover, &:focus {
			background: @ColorWhiteBorder;
			opacity: 1;
		}

		&:active {
			background: @ColorWhiteBackDark;
		}
	}
	// 消息的小尺寸方案
	&.sm {
		font-size: @BaseFontSize - @CtrlSizeGradient;
	}
	// 消息的大尺寸方案
	&.lg {
		font-size: @BaseFontSize + @CtrlSizeGradient;
	}

	&.info, &.warning, &.success, &.danger {
		.message-content::before {
			position: relative;
			top: -.05em;
			display: inline-block;
			font-family: 'ud2';
			line-height: 1;
			vertical-align: middle;
			margin-right: @BaseSize;
			font-size: 1.4em;
			text-shadow: 2px 2px 2px rgba(0, 0, 0, .1);
		}
	}

	&.info .message-content::before {
		content: '\ed20';
	}

	&.warning .message-content::before {
		content: '\ed21';
	}

	&.success .message-content::before {
		content: '\ed1e';
	}

	&.danger .message-content::before {
		content: '\ed1f';
	}
}
// 消息内容容器
.message-content {
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	margin-right: .5em;
}
// 消息关闭按钮
.message-close {
	display: inline-block;
	margin-left: .5em;
	color: inherit;
	cursor: pointer;

	&::before {
		display: block;
		content: '\ed26';
		font-family: 'ud2';
		font-style: normal;
		opacity: @OpacityNoImport;
		.transition(opacity .2s);
	}

	&:hover::before {
		opacity: 1;
	}
}
// 红色消息颜色样式
.message.c-red, .message.danger {
	color: @ColorWhite;
	background: @ColorRed;
}
// 橙色消息颜色样式
.message.c-orange, .message.warning {
	color: @ColorWhite;
	background: @ColorOrange;
}
// 绿色消息颜色样式
.message.c-green, .message.success {
	color: @ColorWhite;
	background: @ColorGreen;
}
// 蓝色消息颜色样式
.message.c-blue, .message.info {
	color: @ColorWhite;
	background: @ColorBlue;
}
// 黄色消息颜色样式
.message.c-yellow {
	color: @ColorWhite;
	background: @ColorYellow;
}
// 天蓝色消息颜色样式
.message.c-teal {
	color: @ColorWhite;
	background: @ColorTeal;
}
// 紫蓝色消息颜色样式
.message.c-violet {
	color: @ColorWhite;
	background: @ColorViolet;
}
// 紫色消息颜色样式
.message.c-purple {
	color: @ColorWhite;
	background: @ColorPurple;
}
// 粉色消息颜色样式
.message.c-pink {
	color: @ColorWhite;
	background: @ColorPink;
}
// 棕色消息颜色样式
.message.c-brown {
	color: @ColorWhite;
	background: @ColorBrown;
}
// 灰色消息颜色样式
.message.c-grey {
	color: @ColorWhite;
	background: @ColorGrey;
}
// 深色消息颜色样式
.message.c-dark {
	color: @ColorWhite;
	background: @ColorDark;
}