@import url('meta');
@import url('color');

@{NS}.progress {
    position: relative;
    display: block;
    @_h: @line_height * 4/15;
    height: @_h;
    font-size: @_h;
    background-color: @tiny_gray;
    border-radius: @_h/2;
    overflow: hidden;
    margin-bottom: @padding;
    &>.bar, &>._progress {
        width: 0;
        font-size: inherit;
        overflow: hidden;
        -webkit-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        text-align: center;
        line-height: 100%;
        color: @white;
        background-color: @primaryColor;
        line-height: 100%;
        vertical-align: middle;
        border-radius: 10px;
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
    }
    &.success>.bar, &._completed>._progress, &._success>._progress {
        background-color: @green;
    }
    &.error>.bar, &._failed>._progress {
        background-color: @red;
    }
    &._disabled>._progress {
        background-color: @gray;
    }
    .__progressSize(@size){
        & {
            @_h: @size * 1px;
            height: @_h;
            font-size: @_h;
            >.bar, >._progress {
                height: @_h;
            }
        }
    }
    &.warning >.bar, &._warning>._progress {
        background-color: @orange;
    }
    &._small, &.small {
       .__progressSize(1);
    }
    &._large, &.large {
       .__progressSize(8);
    }
    &.active:before {
        content: '';
        position: absolute;
        border-radius: inherit;
        top: 0;
        bottom: 0;
        width: @padding * 5;
        max-width: 25%;
        z-index: 1;
        -webkit-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        background: rgba(255,255,255, .2);
        -webkit-animation: progress_bar 3s linear infinite;
        -o-animation: progress_bar 3s linear infinite;
        animation: progress_bar 3s linear infinite;
    }
}

@-webkit-keyframes progress_bar {
    0% { left: -25%;}
    100% { left: 125%;}
}
@-o-keyframes progress_bar {
    0% { left: -25%;}
    100% { left: 125%;}
}
@keyframes progress_bar {
    0% { left: -25%;}
    100% { left: 125%;}
}