lostplaces-frontend/components/01_Atoms/message/_message.scss

.LP-Message{
	display: flex;
	flex-direction: row;
	justify-content: center; 
	align-items: stretch; 
	background-color: $-almost-white;
	font-family: $-primary-sans-serif-font;
	border-radius: 3px;
	font-weight: bold;
	box-shadow: 0 0 2px $-grey;
	overflow: hidden;

	&--error{
		.LP-Message__Icon{
			background-color: invert(#fd6861);
			background-image: url('icons/error.png');
		}
	}

	&--warning{
		.LP-Message__Icon{
			background-color:invert(#ffb818);
			background-image: url('icons/error.png');
		}
	}


	&--info{
		.LP-Message__Icon{
			background-color: invert(lightblue);
			background-image: url('icons/information.svg');
		}
	}

	&--success{
		.LP-Message__Icon{
			background-color: invert(#96c800);
			background-image: url('icons/success.svg');
		}
	}

	&--debug{
		.LP-Message__Icon{
			background-color: invert(#fb95d0);
			background-image: url('icons/debug.png');
		}
	}

	.LP-Message__Icon{
		background-size: 40px 40px;
		background-repeat: no-repeat;
		background-position: center; 
		height: 100%;
		min-height: 50px;
		width: 50px;
		filter: invert(1);
		flex-shrink: 0;
		flex-grow: 0;
	}

	.LP-Message__Text{
		padding: 0 15px;
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 8px;
	}
}