.message {
	display: flex;
	flex-wrap: wrap;
	margin: @margin-small 0;
	padding: @padding-xsmall;
	width: 100%;
	.regular-font();
	.font-size(@font-size-small);
	color: @grey;
	background: @white;
	border: 1px solid @light-grey;

	&:first-child {
		margin-top: 0;
	}

	&:last-child {
		margin-bottom: 0;
	}

	&.info {
		color: @info;
		border: 1px solid @info;
	}

	&.error {
		color: @error;
		border: 1px solid @error;
	}

	&.warning {
		color: @warning;
		border: 1px solid @warning;
	}

	&.success {
		color: @success;
		border: 1px solid @success;
	}
}

.message-icon {
	padding: 10px;
	color: @grey;
	.square(1.8rem);

	svg {
		fill: currentColor;
	}
}

.message-content {
	flex: 1;
}