[class^="alert-"] {
    width: 100%;
    height: 4rem;
    color: #fff;
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    box-shadow: 0 .1rem .1rem rgba(0, 0, 0, 0.5);
    z-index: 9995;
    @include display(flex);
    @include justify-content(center);
    @include align-items(center);
    @include transform(translateY(-100%));
    @include transition(translateY, .4s, ease-in-out);

    &.js-show{
        @include transform(translateY(0%));
    }

    p {
        margin: 0 1rem;
        font-size: 1.5rem;
        text-shadow: .1rem .1rem .0rem rgba(0, 0, 0, .3);

        strong {
            font-family: "Century Gothic Bold";
            text-transform: uppercase;
        }
    }

    i {
        color: rgba(0, 0, 0, .2);
        line-height: 4rem;
        font-size: 2rem;
    }

    .close {
        cursor: pointer;
        font-size: 2.2rem;
        line-height: 3.8rem;
        position: absolute;
        right: 1rem;
    }
}


.alert-warning {
    background: rgba(242, 156, 100, 0.9);

    .icon-warning {
        font-weight: bold;
    }
}

.alert-error {
    background: rgba(255, 103, 91, 0.9);

    .icon-blocked {
        font-weight: bold;
    }
}

.alert-success {
    background: rgba(163, 208, 109, 0.9);

    .icon-check {
        font-size: 24px;
        line-height: 42px;
    }
}

.alert-info {
    background: rgba(57, 121, 153, 0.9);

    .icon-notification {
        font-size: 24px;
        line-height: 42px;
    }
}
