@import (reference) "global";

@headerDisplay: inline-block;
@verticalMargin: 1em;
@verticalPadding: 1em;
@horizontalPadding: 1.5em;
@padding: 0.5em 1em;
@background: #F8F8F9;
@lineHeightOffset: ((@lineHeight - 1em) / 2);

@borderRadius: @defaultBorderRadius;
@borderWidth: 1px;
@borderShadow: 0px 0px 0px @borderWidth @strongBorderColor inset;
@shadowShadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
@boxShadow: @borderShadow, @shadowShadow;
@messageParagraphMargin: 0.25em;
@headerParagraphDistance: 0.25em;
@transition: opacity @defaultDuration @defaultEasing,
color @defaultDuration @defaultEasing,
background @defaultDuration @defaultEasing,
box-shadow @defaultDuration @defaultEasing;

@listOpacity: 0.85;
@listStylePosition: inside;
@listMargin: 0.5em;
@listItemIndent: 1em;
@listItemMargin: 0.3em;

@infoBoxShadow: 0px 0px 0px @borderWidth @infoBorderColor inset, @shadowShadow;
@warnBoxShadow: 0px 0px 0px @borderWidth @warningBorderColor inset, @shadowShadow;
@errorBoxShadow: 0px 0px 0px @borderWidth @errorBorderColor inset, @shadowShadow;
@successBoxShadow: 0px 0px 0px @borderWidth @successBorderColor inset, @shadowShadow;

message, messages {
	position: relative;
	min-height: 1em;
	padding: @padding;
	line-height: @lineHeight;
	//color: @textColor;
	transition: @transition;
	border-radius: @borderRadius;
	//box-shadow: @boxShadow;
	box-sizing: border-box;
	color: @warningTextColor;
	background-color: @warningBackgroundColor;
	box-shadow: @warnBoxShadow;

	.header {
		display: @headerDisplay;
		font-family: @headerFont;
		font-weight: @headerFontWeight;
		margin: 0.5em;
	}
	p {
		opacity: 1;
		margin: @messageParagraphMargin 0em;
		&:first-child {
			margin-top: 0.5em;
		}
		&:last-child {
			margin-bottom: 0.5em;
		}
	}

	.header + p {
		margin-top: 0;
	}

	> .icon {
		margin-right: 1em;
	}

	> .close.icon {
		cursor: pointer;
		position: absolute;
		margin: 0em;
		top: 0.5em;
		right: 0.5em;;
		opacity: 0.7;
	}
	> .close.icon:hover {
		opacity: 1;
	}

	> :first-child {
		margin-top: 0em;
	}
	> :last-child {
		margin-bottom: 0em;
	}
}

messages {
	margin: @verticalMargin 0;
}

message, messages {
	.list:not(.ui) {
		text-align: left;
		padding: 0em;
		margin: @listMargin 0em 0em;
	}
	.list:not(.ui):first-child, .list:not(.ui):last-child {
		margin-bottom: 0em;
	}
	.list:not(.ui) li {
		position: relative;
		list-style-type: none;
		margin: 0em 0em @listItemMargin @listItemIndent;
		padding: 0em;
	}

	&.info {
		color: @infoTextColor;
		background-color: @infoBackgroundColor;
		box-shadow: @infoBoxShadow;
		&:before {
			content: "\f05a";
			font-family: "Icons";
		}
	}

	&.warn {
		color: @warningTextColor;
		background-color: @warningBackgroundColor;
		box-shadow: @warnBoxShadow;
		&:before {
			content: "\f06a";
			font-family: "Icons";
		}
	}

	&.error {
		color: @errorTextColor;
		background-color: @errorBackgroundColor;
		box-shadow: @errorBoxShadow;
		&:before {
			content: "\f071";
			font-family: "Icons";
		}
	}

	&.success {
		color: @successTextColor;
		background-color: @successBackgroundColor;
		box-shadow: @successBoxShadow;
		&:before {
			content: "\f05a";
			font-family: "Icons";
		}
	}
}

messages {
	width: 100%;
}

.form message,
.form messages {
	display: none;
}

.form message.info,
.form messages.info {
	display: block;
}

.form message.warn,
.form messages.warn {
	display: block;
}

.form message.error,
.form messages.error {
	display: block;
}

.ui.form {
	.field > message {
		padding-left: 1em;
		&:before {
			position: inherit;
			left: auto;
			top: auto;
		}
	}
}

