.notification, .flash-message{
    display: flex;
    border-radius: 2px;
    margin: 10px 0;
    align-items: center;
    padding: 5px;

    &:before{
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        font-size: 25px;
        margin: 0 15px;
        text-align: center;
        width: 30px;
    }

    &--error{
        color: $red;
        background: $lightred;
        border-color: $red;

        &:before{
            content: '\f071';
        }
    }

    &--warning{
        color: color('yellow', 7);
        background: $lightyellow;
        border-color: color('yellow', 7);

        &:before{
            content: '\f06a';
        }
    }

    &--success{
        color: $green;
        background: $lightgreen;
        border-color: $green;

        &:before{
            content: '\f058';
        }
    }

    &--notice{
        color: $blue;
        background: $lightblue;
        border-color: $blue;

        &:before{
            content: '\f12a';
        }
    }
}

.notification{
    border: 1px solid;

    &__text--container{
        margin: 10px 0;
    }

    &__text{
        margin: 0;
    }
}

.flash-message{
    position: relative;

    &__close{
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        cursor: pointer;
    }
}