$notice-prefix: #{$css-prefix}notice;

.#{$notice-prefix}{
    width: 100%;
    transition: opacity .2s;
    &-content{
        background-color: $alert-back-color-default;
        padding: $alert-padding;
        box-sizing: border-box;
        -webkit-border-radius: $alert-radius;
        -moz-border-radius: $alert-radius;
        -ms-border-radius: $alert-radius;
        -o-border-radius: $alert-radius;
        border-radius: $alert-radius;
        -webkit-box-shadow: $alert-shadow;
        -ms-box-shadow: $alert-shadow;
        -o-box-shadow: $alert-shadow;
        box-shadow: $alert-shadow;
        position:relative;
        font-size:$alert-font-size;
    }
    &-normal{
        width: 100%;
        margin:0;
        display: flex;
        align-items: center;
        .#{$notice-prefix}{
            &-content{
                width: 100%;
            }
        }

    }
    &-fix{
        position: fixed;
        z-index: $zindex-alert;
        width: 100%;
        top:$alert-fix-top;
        left: 0;
        text-align:center;
        .#{$notice-prefix}{
            &-content{
                display: inline-block;
                box-shadow: $alert-shadow;
                padding-right:64px;
            }
        }
    }
    &-close{
        font-size: $alert-font-size;
        opacity: 1;
        position:absolute;
        right:16px;
        top:7px;
        display: inline-block;
        cursor: pointer;
        z-index:$zindex-alert+1;
        i{
            // position:absolute;
            // right:0;
            color: $alert-color;
        }
    }
    &-icon{
        font-size: $alert-icon-size;
        width: $alert-icon-size;
        margin:$alert-icon-margin;
    }
    &-info{
        .#{$notice-prefix}{
            &-content{
                background-color: $alert-back-color-info;
                color: $alert-color-info;
            }
            &-icon>i{
                color:$alert-color-info;
            }
        }
    }
    &-success{
        .#{$notice-prefix}{
            &-content{
                background-color: $alert-back-color-success;
                color: $alert-color-success;
            }
            &-icon>i{
                color:$alert-color-success;
            }
        }
    }
    &-warn{
        .#{$notice-prefix}{
            &-content{
                background-color: $alert-back-color-warn;
                color: $alert-color-warn;
            }
            &-icon>i{
                color:$alert-color-warn;
            }
        }
    }
    &-error{
        .#{$notice-prefix}{
            &-content{
                background-color: $alert-back-color-error;
                color: $alert-color-error;
            }
            &-icon>i{
                color:$alert-color-error;
            }
        }
    }
    &-message{
        height:40px;
    }
    &-ul-item{
        display: block;
        height:30px;
        position:absolute; 
        top:0;
    }
    &-li-item{
        display: block;
        margin:0;
        height: 30px;
        width: 100%;

        padding-left: 20px;
        line-height: 23px;
        font-size: 12px;
        color: #000;
        display: inline-block;
        white-space: nowrap;
        //animation: 10s wordsLoop linear infinite normal;
    }
}
@keyframes wordsLoop {
    0% {
            transform: translateX(200px);
            -webkit-transform: translateX(200px);
     }
    100% {
           transform: translateX(-100%);
           -webkit-transform: translateX(-100%);
     }
}
@-webkit-keyframes wordsLoop {
    0% {
         transform: translateX(200px);
         -webkit-transform: translateX(200px);
    }
    100% {
         transform: translateX(-100%);
         -webkit-transform: translateX(-100%);
    }
}