$snackbar-message-center-error-color: #DE3226;
$snackbar-message-center-success-color: #2AC955;
$snackbar-message-center-warning-color: #FFAE00;

[data-focus="snackbar"] {
    &[data-message-type="error"] {
        background-color: $snackbar-message-center-error-color;
    }
    &[data-message-type="success"] {
        background-color: $snackbar-message-center-success-color;
    }
    &[data-message-type="warning"] {
        background-color: $snackbar-message-center-warning-color;
    }
    .mdl-snackbar__close {
        i {
            color: FFF;
            font-size: 12px;
        }
        cursor:pointer;
        background: transparent;
        float: right;
        border:none;
        text-transform: uppercase;
        padding: 14px 14px;
        line-height: 1;
        letter-spacing: 0;
        outline: none;
        text-align: center;
        -webkit-align-self: center;
        -ms-flex-item-align: center;
        align-self: center;
    }
    z-index: 1002;
}

@-webkit-keyframes slideUp {
    from {
        -webkit-transform: translate(-50%, 100%);
        transform: translate(-50%, 100%);
        visibility: visible;
    }

    to {
        -webkit-transform: translate(-50%, 0%);
        transform: translate(-50%, 0%);
    }
}

@keyframes slideUp {
    from {
        -webkit-transform: translate(-50%, 100%);
        transform: translate(-50%, 100%);
        visibility: visible;
    }

    to {
        -webkit-transform: translate(-50%, 0%);
        transform: translate(-50%, 0%);
    }
}

.slideUp {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-name: slideUp;
    animation-name: slideUp;
}