// Messaging
// 
// Messaging is used to display alerts, notes, or other things to the user.
// 
// Styleguide 12

// Messaging
// 
// All contain a <code>.msg</code> class. Most also contain a modifier class 
// 
// Markup:
// <div class="{{modifier_class}}">
//     <div class="close"></div>
//     <div class="msg-txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lorem lectus, pellentesque in metus molestie, adipiscing tincidunt erat. Curabitur a nibh nunc. Vestibulum dignissim vulputate tortor at mattis. Vivamus ut odio nunc. Duis a aliquet ante. Suspendisse porta eu sem eu adipiscing. Ut tempus eleifend turpis vel viverra. Duis nulla lacus, ultricies sed blandit cursus, sollicitudin id felis.</div>
// </div>
// 
// .msg     			- default messaging
// .msg.msg-note		- note messaging
// .msg.msg-alert		- alert messaging
// 
// Styleguide 12.1

.msg {
	.pos(relative);	 
	width: 100%;
	min-height: 50px;
	padding: 15px;
	margin: 0 0 1em;
	 
	color: @msg-color;

	background-color: @msg-bgcolor;
	border: 1px solid @msg-bordercolor;
	.radius(2);
	> .icon {
		margin-right: 15px;
		 
		vertical-align: middle;
		 
		background-image: url(@msg-alert-icon);
		background-repeat: no-repeat;
	}
	.msg-txt {
		margin: 0 25px 0 0;
	}
	> .close {
		&:after,
		&::after { 
			.pos(absolute);
			right: 20px;
			 
			color: @msg-close-color;

			content: '✕';
		}
	}
	.msg-action {
		margin-left: 20px;
		&:after,
		&::after {
			display: inline-block;
			margin-left: 5px;

			content: '»';
		}
	}
	// loop through array and create a message block for each item in it
	@list: info, success, note, alert;
	.msg(length(@list));
}