%alert-style {
    background-color: palette(blue, dark);
    border-left: 5px solid;
    color: palette(gray, white);
    font-family: $font-alpha;
    font-size: .85rem;
    padding: 1rem 2rem;
    position: fixed;
    right: 1rem;
    text-transform: uppercase;
    top: 1rem;
    transition: opacity .25s ease;
    width: auto;
    z-index: z(alerts);
}

.alert-warning {
    @extend %alert-style;
    border-color: palette(alert, warning);
}

.alert-success {
    @extend %alert-style;
    border-color: palette(alert, success);
}

.alert-error {
    @extend %alert-style;
    border-color: palette(alert, error);
}

.alert-alert {
    @extend %alert-style;
    border-color: palette(blue, light);
}

.alert-alert.ng-hide, .alert-warning.ng-hide, .alert-success.ng-hide, .alert-error.ng-hide {
    display: none;
    opacity: 0;
}

.alert-alert.ng-hide-add.ng-hide-add-active, .alert-alert.ng-hide-remove.ng-hide-remove-active, .alert-warning.ng-hide-add.ng-hide-add-active, .alert-warning.ng-hide-remove.ng-hide-remove-active,
.alert-success.ng-hide-add.ng-hide-add-active, .alert-success.ng-hide-remove.ng-hide-remove-active,
.alert-error.ng-hide-add.ng-hide-add-active, .alert-error.ng-hide-remove.ng-hide-remove-active {
    display: block;
    transition: .1s ease-in;
}
