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;
    }
}