    /**
     * Creates the base structure of an Ext.ProgressBar
     * @member Ext.ProgressBar
     */
    @mixin extjs-progress {
        .#{$prefix}progress {
            position: relative;
            border-width: $progress-border-width;
            border-style: solid;
            @include border-radius($progress-border-radius);

            overflow: hidden;

            height: $progress-height;
        }

        .#{$prefix}progress-bar {
            height: $progress-height - ($progress-border-width * 2);

            overflow: hidden;
            position: absolute;

            width: 0;

            @include border-radius($progress-border-radius);
            border-right: 1px solid;
            border-top: 1px solid;
        }

        .#{$prefix}progress-text {
            overflow: hidden;

            position: absolute;

            padding: 0 5px;

            height: $progress-height - ($progress-border-width * 2);

            font-weight: $progress-text-font-weight;
            font-size: $progress-text-font-size;
            line-height: 16px;
            text-align: $progress-text-text-align;
        }

        .#{$prefix}progress-text-back {
            padding-top: 1px;
        }

        @if $include-ie or $compile-all {
            .#{$prefix}strict .#{$prefix}ie7m .#{$prefix}progress  {
                height: $progress-height - ($progress-border-width * 2);
            }
        }

        @include extjs-progress-ui(
            'default',

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

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

            $ui-color-front: $progress-text-color-front,
            $ui-color-back: $progress-text-color-back
        )
    }

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

        $ui-base-color: null,

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

        $ui-bar-background-color: null,
        $ui-bar-background-gradient: glossy,

        $ui-color-front: null,
        $ui-color-back: null
    ){
        @if $ui-base-color != null {
            @if $ui-border-color == null {         $ui-border-color: $ui-base-color; }
            @if $ui-bar-background-color == null { $ui-bar-background-color: $ui-base-color; }
            @if $ui-color-front == null {          $ui-color-front: lighten($ui-base-color, 60); }
            @if $ui-color-back == null {           $ui-color-back: darken($ui-base-color, 60); }
        }

        .#{$prefix}progress-#{$ui-label} {
            @if $ui-border-color != null { border-color: $ui-border-color; }

            .#{$prefix}progress-bar {
                @if $ui-border-color != null { border-right-color: $ui-border-color; }
                @if $ui-border-color != null { border-top-color: lighten($ui-border-color, 25); }

                @if $ui-bar-background-color != null { @include background-gradient($ui-bar-background-color, $ui-bar-background-gradient); }
            }

            .#{$prefix}progress-text {
                @if $ui-color-front != null { color: $ui-color-front; }
            }

            .#{$prefix}progress-text-back {
                @if $ui-color-back != null { color: $ui-color-back; }
            }
        }

        @if $ui-background-color != null {
            @if not $supports-gradients or $compile-all {
                .#{$prefix}nlg {
                    .#{$prefix}progress-#{$ui-label} {
                        .#{$prefix}progress-bar {
                            background: repeat-x;
                            background-image: theme-background-image($theme-name, 'progress/progress-#{$ui-label}-bg.gif');
                        }
                    }
                }
            }
        }
    }