@progressbar-size : 1.25em;

.ui-progressbar when (@componentsJS-progressbar) {
    position    : relative;
    height      : @progressbar-size;
    background  : @progressbar-bg;
    text-align  : center;
    line-height : @progressbar-size;
    overflow    : hidden;
    color       : #fff;
    .box-shadow(inset 0 1px 2px rgba(0, 0, 0, .2));

    &[aria-valuenow]:before {
        content     : attr(aria-valuenow)'%';
        position    : absolute;
        left        : 0;
        top         : 0;
        bottom      : 0;
        right       : 0;
        text-shadow : 0 0 3px #555;
    }
    &[aria-valuenow="0"]::before {
        content     : attr(data-progressbar-start);
        color       : @gray-light;
        text-shadow : none;
    }
    &[aria-valuenow="100"]::before {
        content : attr(data-progressbar-finish);
    }

    .ui-progressbar-value {
        height     : 100%;
        background : @progressbar-value;
    }

    // Alternate progressbar
    // --------------------------------------------------
    &.success when (@progressbar-color-success) and (@progressbar-colors) {
        .ui-progressbar-value {
            background : @brand-success;
        }
    }
    &.warning when (@progressbar-color-warning) and (@progressbar-colors) {
        .ui-progressbar-value {
            background : @brand-warning;
        }
    }
    &.error when (@progressbar-color-error) and (@progressbar-colors) {
        .ui-progressbar-value {
            background : @brand-error;
        }
    }
    &.info when (@progressbar-color-info) and (@progressbar-colors) {
        .ui-progressbar-value {
            background : @brand-info;
        }
    }
}

[id*="-filelist"] when (@componentsJS-progressbar){
    .ui-widget{
        .ui-state-highlight, .ui-state-error{
            overflow      : hidden;
            margin-bottom : 0.2em;
            font-size     : @font-size-small;
            padding       : 0 @padding-small-vertical;
            height        : @progressbar-size;
            line-height   : @progressbar-size;

            p{
                margin      : 0;
                position    : relative;
                z-index     : 5;
                max-width   : 93%;
                color       : rgba(0, 0, 0, 0.7);
                height      : @progressbar-size - 2;
                line-height : @progressbar-size - 2;
                .inline-block;
                .text-overflow;

                & + .ui-progressbar{
                    margin : -@progressbar-size -@padding-small-vertical 0;
                }
            }

            .ui-icon{
                .icon-size(@font-size-base);
                float      : right;
                margin-top : 2px;
                color      : @brand-info;
            }

            .ui-icon-alert{
                color : @brand-error;
            }
        }
    }
}