/**
 * @class Ext.ProgressBar
 */

/**
 * @var {number}
 * The height of the ProgressBar
 */
$progress-height: dynamic(20px);

/**
 * @var {color}
 * The border-color of the ProgressBar
 */
$progress-border-color: dynamic($base-color);

/**
 * @var {string}
 * The border-style of the ProgressBar
 */
$progress-border-style: dynamic(solid);

/**
 * @var {number}
 * The border-width of the ProgressBar
 */
$progress-border-width: dynamic(1px);

/**
 * @var {number}
 * The border-radius of the ProgressBar
 */
$progress-border-radius: dynamic(0);

/**
 * @var {color}
 * The border color of a focused ProgressBar
 */
$progress-focus-border-color: dynamic($progress-border-color);

/**
 * @var {string}
 * The border style of a focused ProgressBar
 */
$progress-focus-border-style: dynamic($progress-border-style);

/**
 * @var {number}
 * The border width of a focused ProgressBar
 */
$progress-focus-border-width: dynamic($progress-border-width);

/**
 * @var {color}
 * The background-color of the ProgressBar
 */
$progress-background-color: dynamic($base-color);

/**
 * @var {color}
 * The background-color of the ProgressBar's moving element
 */
$progress-bar-background-color: dynamic($base-color);

/**
 * @var {string/list}
 * The background-gradient of the ProgressBar's moving element. Can be either the name of
 * a predefined gradient or a list of color stops. Used as the `$type` parameter for
 * {@link Global_CSS#background-gradient}.
 */
$progress-bar-background-gradient: dynamic('none');

/**
 * @var {color}
 * The color of the ProgressBar's text when in front of the ProgressBar's moving element
 */
$progress-text-front-color: dynamic(#fff);

/**
 * @var {color}
 * The color of the ProgressBar's text when the ProgressBar's 'moving element is not under it
 */
$progress-text-back-color: dynamic(#000);

/**
 * @var {string}
 * The text-align of the ProgressBar's text
 */
$progress-text-text-align: dynamic(center);

/**
 * @var {number}
 * The font-size of the ProgressBar's text
 */
$progress-text-font-size: dynamic($font-size);

/**
 * @var {string}
 * The font-weight of the ProgressBar's text
 */
$progress-text-font-weight: dynamic($font-weight-bold);

/**
 * @var {string}
 * The font-family of the ProgressBar's text
 */
$progress-text-font-family: dynamic($font-family);

/**
 * @var {boolean}
 * True to include the "default" ProgressBar UI
 */
$include-progress-default-ui: dynamic($include-default-uis);

/**
 * Creates a visual theme for an Ext.ProgressBar
 *
 * @param {string} $ui
 * The name of the UI being created. Can not included spaces or special punctuation
 * (used in CSS class names).
 *
 * @param {color} [$ui-border-color=$progress-border-color]
 * The border-color of the ProgressBar
 *
 * @param {color} [$ui-background-color=$progress-background-color]
 * The background-color of the ProgressBar
 *
 * @param {color} [$ui-bar-background-color=$progress-bar-background-color]
 * The background-color of the ProgressBar's moving element
 *
 * @param {string/list} [$ui-bar-background-gradient=$progress-bar-background-gradient]
 * The background-gradient of the ProgressBar's moving element. Can be either the name of
 * a predefined gradient or a list of color stops. Used as the `$type` parameter for
 * {@link Global_CSS#background-gradient}.
 *
 * @param {color} [$ui-color-front=$progress-text-front-color]
 * The color of the ProgressBar's text when in front of the ProgressBar's moving element
 *
 * @param {color} [$ui-color-back=$progress-text-back-color]
 * The color of the ProgressBar's text when the ProgressBar's 'moving element is not under it
 *
 * @param {number} [$ui-height=$progress-height]
 * The height of the ProgressBar
 *
 * @param {string} [$ui-border-style=$progress-border-style]
 * The border-style of the ProgressBar
 *
 * @param {number} [$ui-border-width=$progress-border-width]
 * The border-width of the ProgressBar
 *
 * @param {number} [$ui-border-radius=$progress-border-radius]
 * The border-radius of the ProgressBar
 *
 * @param {color} [$ui-focus-border-color]
 * The border color of a focused ProgressBar
 *
 * @param {color} [$ui-focus-border-style]
 * The border style of a focused ProgressBar
 *
 * @param {color} [$ui-focus-border-width]
 * The border width of a focused ProgressBar
 *
 * @param {string} [$ui-text-text-align=$progress-text-text-align]
 * The text-align of the ProgressBar's text
 *
 * @param {number} [$ui-text-font-size=$progress-text-font-size]
 * The font-size of the ProgressBar's text
 *
 * @param {string} [$ui-text-font-weight=$progress-text-font-weight]
 * The font-weight of the ProgressBar's text
 *
 * @param {string} [$ui-text-font-family=$progress-text-font-family]
 * The font-family of the ProgressBar's text
 *
 * @param {string} [$ui-label=null]
 * The ui label.  **Deprecated**, please use $ui instead
 *
 * @member Ext.ProgressBar
 */
@mixin extjs-progress-ui(
    $ui: null,

    $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-front-color,
    $ui-color-back: $progress-text-back-color,
    $ui-height: $progress-height,
    $ui-border-style: $progress-border-style,
    $ui-border-width: $progress-border-width,
    $ui-border-radius: $progress-border-radius,
    $ui-focus-border-color: $progress-focus-border-color,
    $ui-focus-border-style: $progress-focus-border-style,
    $ui-focus-border-width: $progress-focus-border-width,
    
    $ui-text-text-align: $progress-text-text-align,
    $ui-text-font-size: $progress-text-font-size,
    $ui-text-font-weight: $progress-text-font-weight,
    $ui-text-font-family: $progress-text-font-family,

    // deprecated - use $ui instead
    $ui-label: null
){
    @if $ui == null {
        @if $ui-label != null {
            @warn '$ui-label is deprecated.  Use $ui instead';
            $ui: $ui-label;
        } @else {
            // No @error "$ui is required";
            // See https://gist.github.com/MoOx/1671259
            @warn "#{error("$ui is required")}";
        }
    }

    $progress-content-height: $ui-height - vertical($ui-border-width);
    .#{$prefix}progress-#{$ui} {
        background-color: $ui-background-color;
        border-width: $ui-border-width;
        height: $ui-height;

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

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

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

        .#{$prefix}progress-text-back {
            color: $ui-color-back;
            line-height: $progress-content-height;
        }
        
        &.#{$prefix}progress-focus {
            .#{$prefix}keyboard-mode & {
                @include css-outline(
                    $width: $ui-focus-border-width,
                    $style: $ui-focus-border-style,
                    $color: $ui-focus-border-color,
                    $offset: -$ui-focus-border-width,
                    $pseudo: true
                );
            }
        }
    }
    
    $stretch: slicer-background-stretch(progress-bar-#{$ui}, bottom);
    @include x-slicer(progress-bar-#{$ui});

    @if $include-ext-view-table {
        // here we need to add three selectors, one for the progress classic component (xtype: 'pogressbar')
        // and one for each progressbarwidget alias (xtype: ['progress', 'progressbarwidget']).
        .#{$prefix}progressbar-#{$ui}-cell,
        .#{$prefix}progress-#{$ui}-cell,
        .#{$prefix}progressbarwidget-#{$ui}-cell {
            > .#{$prefix}grid-cell-inner {
                padding-top:    max(ceil(($grid-row-height - $ui-height) / 2), 0);
                padding-bottom: max(floor(($grid-row-height - $ui-height) / 2), 0);
                .#{$prefix}progress-#{$ui} {
                    height: min($progress-height, $grid-row-height - 2);
                }
            }
        }
    }
}