@alert-height: 44px;

.alert {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: @alert-height;
	.regular-font();
	.font-size(@font-size-medium);
	color: @body-color;
	background: @white;
	box-shadow: 0px 2px 10px fade(@black, 3.5%);

	&.info {
		background: @info;
	}

	&.error {
		background: @error;
	}

	&.warning {
		background: @warning;
	}

	&.success {
		background: @success;
	}
}

.alert-icon {
	flex: 0 0 auto;
	align-self: flex-start;
	padding: 10px;
	color: @white;
	.square(@alert-height);

	svg {
		fill: @white;
	}
}

.alert-content {
	flex: 1;
}

.alert-message {
	.bold-font();
	.font-size(@font-size-medium);
	color: @white;
	.truncate();
	padding: 10px 0;
}

.alert-dismiss {
	flex: 0 0 auto;
	align-items: center;
	align-self: flex-start;
	padding: 0;
	.square(@alert-height);
	color: @white;
	background: transparent;
	border: none;
	
	svg {
		.square(1.6rem);

		path {
			fill: @white;
		}
	}

	&:not(:disabled):hover,
	&:not(:disabled):focus {
		color: @white;
		background: transparent;
		border: none;

		svg {

			path {
				fill: @white;
			}
		}
	}
}

.flash-message {
	position: fixed;
	top: 0;
	left: @gutter;
	right: @gutter;
	margin: 0 auto;
	max-width: 600px;

	.alert {
		position: absolute;
		white-space: nowrap;
		transition: top @transition-slow ease-in-out;
	}
}