/**
 * Creates a visual theme for an Ext.ProgressBar
 * @member Ext.ProgressBar
 */
@mixin extjs-progress-ui(
    $ui-label,

    $ui-border-color: $progress-border-color,
    $ui-background-color: $progress-background-color,

    $ui-bar-background-color: $progress-bar-background-color,
    $ui-bar-background-gradient: $progress-bar-background-gradient,

    $ui-color-front: $progress-text-color-front,
    $ui-color-back: $progress-text-color-back,
    $ui-height: $progress-height,
    $ui-border-width: $progress-border-width,
    $ui-border-radius: $progress-border-radius,
    $ui-text-text-align: $progress-text-text-align,
    $ui-text-font-size: $progress-text-font-size,
    $ui-text-font-weight: $progress-text-font-weight
){
    $progress-content-height: $ui-height - vertical($ui-border-width);
    .#{$prefix}progress-#{$ui-label} {
        background-color: $ui-background-color;
        border-width: $ui-border-width;
        height: $ui-height;
        @if $include-ie or $compile-all {
            .#{$prefix}strict .#{$prefix}ie7m & {
                height: $progress-content-height;
            }
        }

        @if $ui-border-radius != 0 {
            @include border-radius($ui-border-radius);
        }
        @if $ui-border-color != null {
            border-color: $ui-border-color;
        }

        .#{$prefix}progress-bar-#{$ui-label} {
            @if $ui-border-radius != 0 {
                @include border-radius($ui-border-radius);
            }
            @if $ui-bar-background-color != null {
                @include background-gradient($ui-bar-background-color, $ui-bar-background-gradient);
            }
            @if (not $supports-gradients or $compile-all) and $ui-bar-background-gradient != null {
                .#{$prefix}nlg & {
                    background: repeat-x;
                    background-image: slicer-background-image(progress-bar-#{$ui-label}, 'progress/progress-#{$ui-label}-bg');
                }
            }
        }

        .#{$prefix}progress-text {
            color: $ui-color-front;
            font-weight: $ui-text-font-weight;
            font-size: $ui-text-font-size;
            text-align: $ui-text-text-align;
            line-height: $progress-content-height;
        }

        .#{$prefix}progress-text-back {
            color: $ui-color-back;
            line-height: $progress-content-height;
        }

        @include x-slicer(progress-bar-#{$ui-label});
    }
}


@include extjs-progress-ui(
    'default'
);