Simple Sass Alerts

_alert.scss

  // Alert System
@mixin alert($color) {
    @extend %alert_base;
    color: lighten($color, 30%);
    // background: $color;
    background: darken($color, 4%);
    text-shadow: 0 1px 0darken($color, 25%);
    border-color: darken(adjust-hue($color, -10), 30%);
    @include transparent-gradient;
    & > .alert-cta{
        border-color: lighten($color, 30%);
        &:hover{
            // background: lighten($color, 30%);
            background: $white;
            color: darken($color, 4%);
            border-color: lighten($color, 60%);
        }
    }
}
%alert_base {
    @include box;
    // display: block;
            display: none;
    position: relative;
    z-index: 999;
    overflow: hidden;
    width: 100%;
    padding: 25px;
    color: darken($white, 5%);
    font-size: 14px;
    font-weight: bold;
    @include animate;
    @include transition(opacity 0.25s ease-in-out);
    .alert-icon, .alert-label, .alert-cta {
        display: block;
        width: 100%;
        text-align: center;
        @include box;
        @include animate;
    }
    .alert-close{
        display: block;
        position: absolute;
        top: 8px;
        left: 8px;
        line-height: 1;
        text-align: center;
        @include animate;
        @include fadeIn;
    }
    .alert-icon{
        font-size: 40px;
        font-weight: 300;
        @include flipInY;
        @include delay-custom(0.5s);
    }
    .alert-label{
        padding: 16px 0 20px 0;
        font-size: 14px;
        font-weight: 300;
        @include fadeInUp;
        @include delay-custom(0.8s);
    }
    .alert-cta{
        font-size: 14px;
        font-weight: 500;
        text-transform: uppercase;
        text-align: center;
        line-height: 40px;
        padding: 4px 6px;
        border: 1px solid transparent;
        cursor: pointer;
        @include radius(6px);
        @include fadeInUp;
        @include delay-custom(1s);
        @include transition( (color 0.25s ease-in-out),(background 0.25s ease-in-out),(border 0.25s ease-in-out) );
    }
    @media screen and (min-width: 960px) {
        .alert-icon{
            float: left;
            width: 10%;
        }
        .alert-label{
            float: left;
            width: 70%;
            font-size: 20px;
        }
        .alert-cta{
            float: right;
            width: 20%;
        }
    }
}
    .alert_success {
        @include alert($green);
    }
    .alert_info {
        @include alert($blue);
    }
    .alert_error {
        @include alert($red);
    }