.messages {
    margin: 0 0 1rem;
    padding: 1rem 1rem 1rem 2.7rem;
    border: 1px solid #FFF;
    border-radius: 0.375rem;
    position: relative
}

.messages::before {
    position: absolute;
    top: 0;
    left: 0.6667em;
    display: block;
    width: 1.538em;
    height: 100%;
    content: "";
    background-color: transparent;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center center;
    background-size: 100% auto;
}

.messages.messages--status {
    background-color: rgb(209, 231, 221);
    border-color: rgb(163, 207, 187);
    color: rgb(10, 50, 34);
}

.messages.messages--status::before {
    background-image: url("../../icons/check-circle.svg");
}

.messages.messages--alert {
    background-color: rgb(248, 215, 218);
    border-color: rgb(241, 174, 181);
    color: rgb(88, 21, 28);
}

.messages.messages--warning {
    background-color: rgb(255, 243, 205);
    border-color: rgb(255, 230, 156);
    color: rgb(102, 77, 3);
}