saas-one/frontend/operation-web/ext/classic/theme-neutral/sass/var/tab/Bar.scss

/**
 * @class Ext.tab.Bar
 */

/**
 * @var {number/list}
 * The padding of the Tab Bar
 */
$tabbar-padding: dynamic(0);

/**
 * @var {number/list}
 * The padding of the Tab Bar when {@link #plain} is `true`.
 */
$tabbar-plain-padding: dynamic($tabbar-padding);

/**
 * @var {color}
 * The base color of the Tab Bar
 */
$tabbar-base-color: dynamic($base-color);

/**
 * @var {string/list}
 * The background-gradient of the Tab Bar. 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}.
 */
$tabbar-background-gradient: dynamic('tabbar');

/**
 * @var {color}
 * The border-color of the Tab Bar
 */
$tabbar-border-color: dynamic($panel-header-border-color);

/**
 * @var {number/list}
 * The border-width of the Tab Bar
 */
$tabbar-border-width: dynamic(1px 1px 0);

/**
 * @var {number}
 * The height of the Tab Bar strip
 */
$tabbar-strip-height: dynamic(3px);

/**
 * @var {color}
 * The border-color of the Tab Bar strip
 */
$tabbar-strip-border-color: dynamic($panel-header-border-color);

/**
 * @var {color}
 * The background-color of the Tab Bar strip
 */
$tabbar-strip-background-color: dynamic($tab-base-color-active);

/**
 * @var {number/list}
 * The border-width of the Tab Bar strip
 */
$tabbar-strip-border-width: dynamic(1px 0 0);

/**
 * @var {number}
 * The width of the Tab Bar scrollers
 */
$tabbar-scroller-width: dynamic(24px);

/**
 * @var {number}
 * The height of the Tab Bar scrollers
 */
$tabbar-scroller-height: dynamic(24px);

/**
 * @var {number/list}
 * The margin of "top" Tab Bar scroller buttons
 */
$tabbar-scroller-top-margin: dynamic(0);

/**
 * @var {number/list}
 * The margin of "right" Tab Bar scroller buttons
 */
$tabbar-scroller-right-margin: dynamic(0);

/**
 * @var {number/list}
 * The margin of "bottom" Tab Bar scroller buttons
 */
$tabbar-scroller-bottom-margin: dynamic(0);

/**
 * @var {number/list}
 * The margin of "left" Tab Bar scroller buttons
 */
$tabbar-scroller-left-margin: dynamic(0);

/**
 * @var {string}
 * The cursor of the Tab Bar scrollers
 */
$tabbar-scroller-cursor: dynamic(pointer);

/**
 * @var {string}
 * The cursor of disabled Tab Bar scrollers
 */
$tabbar-scroller-cursor-disabled: dynamic(default);

/**
 * @var {number}
 * The opacity of Tab Bar scrollers
 */
$tabbar-scroller-opacity: dynamic(0.5);

/**
 * @var {number}
 * The opacity of hovered Tab Bar scrollers
 */
$tabbar-scroller-opacity-over: dynamic(0.6);

/**
 * @var {number}
 * The opacity of pressed Tab Bar scrollers
 */
$tabbar-scroller-opacity-pressed: dynamic(0.7);

/**
 * @var {number}
 * The opacity of disabled Tab Bar scrollers
 */
$tabbar-scroller-opacity-disabled: dynamic(0.25);

/**
 * @var {color}
 * The color to use for Tab Bar scroller icons when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$tabbar-scroller-glyph-color: dynamic($neutral-color);

/**
 * @var {color}
 * The color to use for "plain" Tab Bar scroller icons when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$tabbar-plain-scroller-glyph-color: dynamic($tabbar-scroller-glyph-color);

/**
 * @var {number}
 * The font size for Tab Bar scroller icons when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$tabbar-scroller-glyph-font-size: dynamic(16px);

/**
 * @var {string/list}
 * Glyph for the "top" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$tabbar-scroller-top-glyph: dynamic($fa-var-chevron-up $tabbar-scroller-glyph-font-size $font-icon-font-family);

/**
 * @var {string/list}
 * Glyph for the "right" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$tabbar-scroller-right-glyph: dynamic($fa-var-chevron-right $tabbar-scroller-glyph-font-size $font-icon-font-family);

/**
 * @var {string/list}
 * Glyph for the "bottom" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$tabbar-scroller-bottom-glyph: dynamic($fa-var-chevron-down $tabbar-scroller-glyph-font-size $font-icon-font-family);

/**
 * @var {string/list}
 * Glyph for the "left" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$tabbar-scroller-left-glyph: dynamic($fa-var-chevron-left $tabbar-scroller-glyph-font-size $font-icon-font-family);

/**
 * @var {boolean}
 * `true` to use classic-style scroller buttons.  When `true` scroller buttons are given their
 * hover state by changing their background-position,  When `false` scroller buttons are
 * given their hover state by applying opacity.
 */
$tabbar-classic-scrollers: dynamic(false);

/**
 * @var {boolean}
 * true to include separate scroller icons for "plain" tabbars
 */
$tabbar-scroller-include-plain-icon: dynamic(false);

/**
 * @var {boolean}
 * if true, the tabbar will use symmetrical scroller icons.  Top and bottom tabbars
 * will share icons, and Left and right will share icons.
 */
$tabbar-scroller-symmetrical-icons: dynamic(true);

/**
 * @var {color}
 * The color to use for the {@link #cfg-overflowHandler menu overflow} "more" icon when
 * {@link Global_CSS#$enable-font-icons} is `true`.
 */
$tabbar-menu-overflow-glyph-color: dynamic($button-default-glyph-color);
 
/**
 * @var {string/list}
 * Glyph for the {@link #cfg-overflowHandler menu overflow} "more" icon when
 * {@link Global_CSS#$enable-font-icons} is `true`.
 */
$tabbar-menu-overflow-glyph: dynamic($fa-var-bars $button-small-glyph-font-size $font-icon-font-family);

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

/**
 * Creates a visual theme for a Tab Bar
 *
 * Note: When creating a tab bar UI with the extjs-tab-bar-ui mixin, 
 * you will need to create a corresponding tab-ui of the same name.  
 * This will ensure that the tabs render properly in your theme. 
 * Not creating a matching tab theme may result in unpredictable 
 * tab rendering.
 *
 * See `Ext.tab.Tab-css_mixin-extjs-tab-ui`
 * 
 * @param {string} $ui
 * The name of the UI being created. Can not included spaces or special punctuation
 * (used in CSS class names).
 *
 * @param {number} [$ui-strip-height=$tabbar-strip-height]
 * The height of the Tab Bar strip
 *
 * @param {number/list} [$ui-strip-border-width=$tabbar-strip-border-width]
 * The border-width of the Tab Bar strip
 *
 * @param {color} [$ui-strip-border-color=$tabbar-strip-border-color]
 * The border-color of the Tab Bar strip
 *
 * @param {color} [$ui-strip-background-color=$tabbar-strip-background-color]
 * The background-color of the Tab Bar strip
 *
 * @param {number/list} [$ui-border-width=$tabbar-border-width]
 * The border-width of the Tab Bar
 *
 * @param {color} [$ui-border-color=$tabbar-border-color]
 * The border-color of the Tab Bar
 *
 * @param {number/list} [$ui-padding=$tabbar-padding]
 * The padding of the Tab Bar
 *
 * @param {number/list} [$ui-plain-padding=$tabbar-plain-padding]
 * The padding of the Tab Bar when {@link #plain} is `true`
 *
 * @param {color} [$ui-background-color=$tabbar-background-color]
 * The background color of the  Tab Bar
 *
 * @param {string/list} [$ui-background-gradient=$tabbar-background-gradient]
 * The background-gradient of the Tab Bar. 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 {number} [$ui-scroller-width=$tabbar-scroller-width]
 * The width of the Tab Bar scrollers
 *
 * @param {number} [$ui-scroller-height=$tabbar-scroller-height]
 * The height of the Tab Bar scrollers
 *
 * @param {number/list} [$ui-scroller-top-margin=$tabbar-scroller-top-margin]
 * The margin of "top" scroller buttons
 *
 * @param {number/list} [$ui-scroller-right-margin=$tabbar-scroller-right-margin]
 * The margin of "right" scroller buttons
 *
 * @param {number/list} [$ui-scroller-bottom-margin=$tabbar-scroller-bottom-margin]
 * The margin of "bottom" scroller buttons
 *
 * @param {number/list} [$ui-scroller-left-margin=$tabbar-scroller-left-margin]
 * The margin of "left" scroller buttons
 *
 * @param {string} [$ui-scroller-cursor=$tabbar-scroller-cursor]
 * The cursor of the Tab Bar scrollers
 *
 * @param {string} [$ui-scroller-cursor-disabled=$tabbar-scroller-cursor-disabled]
 * The cursor of disabled Tab Bar scrollers
 *
 * @param {number} [$ui-scroller-opacity=$tabbar-scroller-opacity]
 * The opacity of Tab Bar scrollers
 *
 * @param {number} [$ui-scroller-opacity-over=$tabbar-scroller-opacity-over]
 * The opacity of hovered Tab Bar scrollers
 *
 * @param {number} [$ui-scroller-opacity-pressed=$tabbar-scroller-opacity-pressed]
 * The opacity of pressed Tab Bar scrollers
 *
 * @param {number} [$ui-scroller-opacity-disabled=$tabbar-scroller-opacity-disabled]
 * The opacity of disabled Tab Bar scrollers
 *
 * @param {color} [$ui-scroller-glyph-color=$tabbar-scroller-glyph-color]
 * The color to use for Tab Bar scroller icons when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {color} [$ui-plain-scroller-glyph-color=$tabbar-plain-scroller-glyph-color]
 * The color to use for "plain" Tab Bar scroller icons when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {string/list} [$ui-scroller-top-glyph=$tabbar-scroller-top-glyph]
 * Glyph for the "top" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {string/list} [$ui-scroller-right-glyph=$tabbar-scroller-right-glyph]
 * Glyph for the "right" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {string/list} [$ui-scroller-bottom-glyph=$tabbar-scroller-bottom-glyph]
 * Glyph for the "bottom" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {string/list} [$ui-scroller-left-glyph=$tabbar-scroller-left-glyph]
 * Glyph for the "left" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {boolean} [$ui-classic-scrollers=$tabbar-classic-scrollers]
 * `true` to use classic-style scroller buttons.  When `true` scroller buttons are given
 * their hover state by changing their background-position,  When `false` scroller buttons
 * are given their hover state by applying opacity.
 *
 * @param {color} [$ui-menu-overflow-glyph-color=$tabbar-menu-overflow-glyph-color]
 * The color to use for the {@link #overflowHandler menu overflow} "more" icon when
 * {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {string/list} [$ui-menu-overflow-glyph=$tabbar-menu-overflow-glyph]
 * Glyph for the {@link #overflowHandler menu overflow} "more" icon when
 * {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {number} [$ui-tab-height]
 * The minimum height of tabs that will be used in this tabbar UI. The tabbar body is given
 * a min-height so that it does not collapse when it does not contain any tabs, but it
 * is allowed to expand to be larger than the default tab height if it contains a tab
 * that's larger than the default height.
 *
 * @member Ext.tab.Bar
 */ 
@mixin extjs-tab-bar-ui(
    $ui,
    
    $ui-strip-height: $tabbar-strip-height,
    $ui-strip-border-width: $tabbar-strip-border-width,
    $ui-strip-border-color: $tabbar-strip-border-color,
    $ui-strip-background-color: $tabbar-strip-background-color,

    $ui-border-width: $tabbar-border-width,
    $ui-border-color: $tabbar-border-color,
    $ui-padding: $tabbar-padding,
    $ui-plain-padding: $tabbar-plain-padding,
    $ui-background-color: $tabbar-base-color,
    $ui-background-gradient: $tabbar-background-gradient,
    $ui-scroller-width: $tabbar-scroller-width,
    $ui-scroller-height: $tabbar-scroller-height,
    $ui-scroller-top-margin: $tabbar-scroller-top-margin,
    $ui-scroller-right-margin: $tabbar-scroller-right-margin,
    $ui-scroller-bottom-margin: $tabbar-scroller-bottom-margin,
    $ui-scroller-left-margin: $tabbar-scroller-left-margin,
    $ui-scroller-cursor: $tabbar-scroller-cursor,
    $ui-scroller-cursor-disabled: $tabbar-scroller-cursor-disabled,
    $ui-scroller-opacity: $tabbar-scroller-opacity,
    $ui-scroller-opacity-over: $tabbar-scroller-opacity-over,
    $ui-scroller-opacity-pressed: $tabbar-scroller-opacity-pressed,
    $ui-scroller-opacity-disabled: $tabbar-scroller-opacity-disabled,
    $ui-scroller-glyph-color: $tabbar-scroller-glyph-color,
    $ui-plain-scroller-glyph-color: $tabbar-plain-scroller-glyph-color,
    $ui-scroller-top-glyph: $tabbar-scroller-top-glyph,
    $ui-scroller-right-glyph: $tabbar-scroller-right-glyph,
    $ui-scroller-bottom-glyph: $tabbar-scroller-bottom-glyph,
    $ui-scroller-left-glyph: $tabbar-scroller-left-glyph,
    $ui-classic-scrollers: $tabbar-classic-scrollers,
    $ui-menu-overflow-glyph-color: $tabbar-menu-overflow-glyph-color,
    $ui-menu-overflow-glyph: $tabbar-menu-overflow-glyph,
    $ui-tab-height:
        if($tabbar-strip-height > 0, top($ui-strip-border-width), vertical($tab-border-width)) +
        max($tab-icon-height, $tab-line-height) + vertical($tab-padding)
) {
    $ui-strip-plain-border-width:
        top($ui-strip-border-width)
        max(right($ui-strip-border-width), left($ui-border-width))
        bottom($ui-strip-border-width)
        max(left($ui-strip-border-width), left($ui-border-width));

    .#{$prefix}tab-bar-#{$ui} {
        background-color: $ui-background-color;
        @if $ui-border-width != 0 {
            border-style: solid;
            border-color: $ui-border-color;
        }
    }

    @if $ui-border-width != 0 {
        .#{$prefix}tab-bar-#{$ui}-top {
            border-width: $ui-border-width;
        }
    
        .#{$prefix}tab-bar-#{$ui}-bottom {
            border-width: flip-vertical($ui-border-width);
        }
    
        .#{$prefix}tab-bar-#{$ui}-left {
            border-width: rotate270($ui-border-width);
        }
    
        @if $include-rtl {
            .#{$prefix}rtl.#{$prefix}tab-bar-#{$ui}-left {
                border-width: rtl(rotate270($ui-border-width));
            }
        }
    
        .#{$prefix}tab-bar-#{$ui}-right {
            border-width: rotate90($ui-border-width);
        }
    
        @if $include-rtl {
            .#{$prefix}rtl.#{$prefix}tab-bar-#{$ui}-right {
                border-width: rtl(rotate90($ui-border-width));
            }
        }
    }
    
    .#{$prefix}tab-bar-body-#{$ui} {
        .#{$prefix}tab-bar-#{$ui}-top > & {
            padding: $ui-padding;
        }

        .#{$prefix}tab-bar-#{$ui}-bottom > & {
            padding: flip-vertical($ui-padding);
        }

        .#{$prefix}tab-bar-#{$ui}-left > & {
            padding: rotate270($ui-padding);
        }

        @if $include-rtl {
            .#{$prefix}rtl.#{$prefix}tab-bar-#{$ui}-left > & {
                padding: rtl(rotate270($ui-padding));
            }
        }

        .#{$prefix}tab-bar-#{$ui}-right > & {
            padding: rotate90($ui-padding);
        }

        @if $include-rtl {
            .#{$prefix}rtl.#{$prefix}tab-bar-#{$ui}-right > & {
                padding: rtl(rotate90($ui-padding));
            }
        } 
    }

    @if $ui-plain-padding != $ui-padding {
        .#{$prefix}tab-bar-body-#{$ui} {
            .#{$prefix}tab-bar-plain.#{$prefix}tab-bar-#{$ui}-top > & {
                padding: $ui-plain-padding;
            }

            .#{$prefix}tab-bar-plain.#{$prefix}tab-bar-#{$ui}-bottom > & {
                padding: flip-vertical($ui-plain-padding);
            }

            .#{$prefix}tab-bar-plain.#{$prefix}tab-bar-#{$ui}-left > & {
                padding: rotate270($ui-plain-padding);
            }

            @if $include-rtl {
                .#{$prefix}rtl.#{$prefix}tab-bar-plain.#{$prefix}tab-bar-#{$ui}-left > & {
                    padding: rtl(rotate270($ui-plain-padding));
                }
            }

            .#{$prefix}tab-bar-plain.#{$prefix}tab-bar-#{$ui}-right > & {
                padding: rotate90($ui-plain-padding);
            }

            @if $include-rtl {
                .#{$prefix}rtl.#{$prefix}tab-bar-plain.#{$prefix}tab-bar-#{$ui}-right > & {
                    padding: rtl(rotate90($ui-plain-padding));
                }
            }
        }
    }

    .#{$prefix}tab-bar-plain {
        &.#{$prefix}tab-bar-#{$ui}-horizontal {
            border-top-color: transparent;
            border-bottom-color: transparent;
            border-left-width: 0;
            border-right-width: 0;
        }

        &.#{$prefix}tab-bar-#{$ui}-vertical {
            border-right-color: transparent;
            border-left-color: transparent;
            border-top-width: 0;
            border-bottom-width: 0;
        }
    }

    $strip-size: max($ui-strip-height - vertical($ui-strip-border-width), 0);

    @if $ui-strip-height != 0 {
        .#{$prefix}tab-bar-body-#{$ui} {
            .#{$prefix}tab-bar-top > & {
                padding-bottom: $strip-size;
            }

            .#{$prefix}tab-bar-bottom > & {
                padding-top: $strip-size;
            }

            .#{$prefix}tab-bar-left > & {
                padding-right: $strip-size;

                @if $include-rtl {
                    &.#{$prefix}rtl {
                        padding-right: 0;
                        padding-left: $strip-size;
                    }
                }
            }

            .#{$prefix}tab-bar-right > & {
                padding-left: $strip-size;

                @if $include-rtl {
                    &.#{$prefix}rtl {
                        padding-left: 0;
                        padding-right: $strip-size;
                    }
                }
            }
        }

        .#{$prefix}tab-bar-strip-#{$ui} {
            border-style: solid;
            border-color: $ui-strip-border-color;
            background-color: $ui-strip-background-color;
        }

        .#{$prefix}tab-bar-top {
            > .#{$prefix}tab-bar-strip-#{$ui} {
                border-width: $ui-strip-border-width;
                height: $ui-strip-height;
            }
            &.#{$prefix}tab-bar-plain > .#{$prefix}tab-bar-strip-#{$ui} {
                border-width: $ui-strip-plain-border-width;
            }
        }

        .#{$prefix}tab-bar-bottom {
            > .#{$prefix}tab-bar-strip-#{$ui} {
                border-width: flip-vertical($ui-strip-border-width);
                height: $ui-strip-height;
            }
            &.#{$prefix}tab-bar-plain > .#{$prefix}tab-bar-strip-#{$ui} {
                border-width: flip-vertical($ui-strip-plain-border-width);
            }
        }

        .#{$prefix}tab-bar-left {
            > .#{$prefix}tab-bar-strip-#{$ui} {
                border-width: rotate270($ui-strip-border-width);
                width: $ui-strip-height;
                @if $include-rtl {
                    &.#{$prefix}rtl {
                        border-width: rtl(rotate270($ui-strip-border-width));
                    }
                }
            }
            &.#{$prefix}tab-bar-plain > .#{$prefix}tab-bar-strip-#{$ui} {
                border-width: rotate270($ui-strip-plain-border-width);
                @if $include-rtl {
                    &.#{$prefix}rtl {
                        border-width: rtl(rotate270($ui-strip-plain-border-width));
                    }
                }
            }
        }

        .#{$prefix}tab-bar-right {
            > .#{$prefix}tab-bar-strip-#{$ui} {
                border-width: rotate90($ui-strip-border-width);
                width: $ui-strip-height;
                @if $include-rtl {
                    &.#{$prefix}rtl {
                        border-width: rtl(rotate90($ui-strip-border-width));
                    }
                }
            }
            &.#{$prefix}tab-bar-plain > .#{$prefix}tab-bar-strip-#{$ui} {
                border-width: rotate90($ui-strip-plain-border-width);
                @if $include-rtl {
                    &.#{$prefix}rtl {
                        border-width: rtl(rotate90($ui-strip-plain-border-width));
                    }
                }
            }
        }
    }

    // tabbars need a min-height/width so that horizontal tabbars don't lose height and
    // vertical tabbars don't lose width when all tabs are closed.
    $ui-body-height: $ui-tab-height + $ui-strip-height + vertical($ui-padding) - top($ui-strip-border-width);

    .#{$prefix}tab-bar-horizontal > .#{$prefix}tab-bar-body-#{$ui} {
        min-height: $ui-body-height;

        .#{$prefix}ie8m & {
            // border-box model is busted in IE8m when min-height is used. Won't include
            // the padding
            min-height: $ui-body-height - $ui-strip-height - vertical($ui-padding) + top($ui-strip-border-width);
        }
    }

    .#{$prefix}tab-bar-vertical > .#{$prefix}tab-bar-body-#{$ui} {
        min-width: $ui-body-height;

        .#{$prefix}ie8m & {
            // border-box model is busted in IE8m when min-width is used. Won't include
            // the padding
            min-width: $ui-body-height - $ui-strip-height - vertical($ui-padding) + top($ui-strip-border-width);
        }
    }

    @if not is-null($ui-background-gradient) {
        .#{$prefix}tab-bar-#{$ui}-top {
            @include background-gradient($ui-background-color, $ui-background-gradient, top);

            @if $include-slicer-gradient {
                .#{$prefix}nlg & {
                    background: slicer-background-image(tab-bar-#{$ui}-top, 'tab-bar/tab-bar-#{$ui}-top-bg');
                }
            }
        }

        .#{$prefix}tab-bar-#{$ui}-bottom {
            @include background-gradient($ui-background-color, $ui-background-gradient, bottom);

            @if $include-slicer-gradient {
                .#{$prefix}nlg & {
                    background: slicer-background-image(tab-bar-#{$ui}-bottom, 'tab-bar/tab-bar-#{$ui}-bottom-bg') bottom 0;
                }
            }
        }

        .#{$prefix}tab-bar-#{$ui}-left {
            @include background-gradient($ui-background-color, $ui-background-gradient, left);

            @if $include-slicer-gradient {
                .#{$prefix}nlg & {
                    background: slicer-background-image(tab-bar-#{$ui}-left, 'tab-bar/tab-bar-#{$ui}-left-bg');
                }
            }
        }

        .#{$prefix}tab-bar-#{$ui}-right {
            @include background-gradient($ui-background-color, $ui-background-gradient, right);

            @if $include-slicer-gradient {
                .#{$prefix}nlg & {
                    background: slicer-background-image(tab-bar-#{$ui}-right, 'tab-bar/tab-bar-#{$ui}-right-bg') 0 right;
                }
            }
        }
    }

    @if $include-ext-layout-container-boxoverflow-scroller {
        @include extjs-box-scroller-ui(
            $ui: $ui,
            $type: 'tab-bar',
            $horizontal-width: $ui-scroller-width,
            $horizontal-height: $ui-scroller-height,
            $vertical-width: $ui-scroller-height,
            $vertical-height: $ui-scroller-width,
            $top-margin: $ui-scroller-top-margin,
            $right-margin: $ui-scroller-right-margin,
            $bottom-margin: $ui-scroller-bottom-margin,
            $left-margin: $ui-scroller-left-margin,
            $glyph-color: $ui-scroller-glyph-color,
            $top-glyph: $ui-scroller-top-glyph,
            $right-glyph: $ui-scroller-right-glyph,
            $bottom-glyph: $ui-scroller-bottom-glyph,
            $left-glyph: $ui-scroller-left-glyph,
            $container-padding: $ui-padding,
            $cursor: $ui-scroller-cursor,
            $cursor-disabled: $ui-scroller-cursor-disabled,
            $align: if($ui-classic-scrollers, stretch, middle),
            $opacity: $ui-scroller-opacity,
            $opacity-over: $ui-scroller-opacity-over,
            $opacity-pressed: $ui-scroller-opacity-pressed,
            $opacity-disabled: $ui-scroller-opacity-disabled,
            $classic: $ui-classic-scrollers,
            $include-background-images: $tabbar-scroller-symmetrical-icons
        );
    }

    @if $include-ext-layout-container-boxoverflow-menu {
        .#{$prefix}tab-bar-more-icon {
            @if $enable-font-icons and ($ui-menu-overflow-glyph != null) {
                @include font-icon($ui-menu-overflow-glyph);
                color: $ui-menu-overflow-glyph-color;
            } @else {
                background-image: theme-background-image('tab-bar/#{$ui}-more');
                @if $include-rtl {
                    &.#{$prefix}rtl {
                        background-image: theme-background-image('tab-bar/#{$ui}-more-left');
                    }
                }
            }
        }
    }

    .#{$prefix}tab-bar-plain {
        &.#{$prefix}tab-bar-#{$ui}-scroller {
            .#{$prefix}box-scroller-body-horizontal {
                margin-left: max($ui-scroller-width + horizontal($ui-scroller-left-margin) - left($ui-plain-padding), 0);
            }
        }

        &.#{$prefix}tab-bar-#{$ui}-vertical-scroller {
            .#{$prefix}box-scroller-body-vertical {
                margin-top: max($ui-scroller-width + vertical($ui-scroller-top-margin) - top($ui-plain-padding), 0);
            }
        }

        .#{$prefix}box-scroller-tab-bar-#{$ui} {
            color: $ui-plain-scroller-glyph-color;
        }
    }

    @if $ui-classic-scrollers {
        .#{$prefix}tab-bar-#{$ui}-right {
            .#{$prefix}box-scroller-top {
                background-position: right (-$ui-scroller-width);

                &.#{$prefix}box-scroller-hover {
                    background-position: right 0;
                }
            }

            .#{$prefix}box-scroller-bottom {
                background-position: right 0;

                &.#{$prefix}box-scroller-hover {
                    background-position: right (-$ui-scroller-width);
                }
            }
        }

        .#{$prefix}tab-bar-#{$ui}-bottom {
            .#{$prefix}box-scroller-left {
                background-position: -$ui-scroller-width bottom;

                &.#{$prefix}box-scroller-hover {
                    background-position: 0 bottom;
                }
            }

            .#{$prefix}box-scroller-right {
                background-position: 0 bottom;

                &.#{$prefix}box-scroller-hover {
                    background-position: -$ui-scroller-width bottom;
                }
            }
        }
    } @else {
        $ui-scroller-align-offset: floor((top($ui-padding) - bottom($ui-padding)) / 2) - floor($ui-strip-height / 2);
        $ui-scroller-half-height: -(floor($ui-scroller-height / 2));
        $ui-scroller-top-left-offset: $ui-scroller-half-height + $ui-scroller-align-offset;
        $ui-scroller-bottom-right-offset: $ui-scroller-half-height - $ui-scroller-align-offset;

        .#{$prefix}box-scroller-tab-bar-#{$ui} {
            .#{$prefix}tab-bar-#{$ui}-top & {
                margin-top: $ui-scroller-top-left-offset;
            }

            .#{$prefix}tab-bar-#{$ui}-right & {
                margin-left: $ui-scroller-bottom-right-offset;
            }

            .#{$prefix}tab-bar-#{$ui}-bottom & {
                margin-top: $ui-scroller-bottom-right-offset;
            }

            .#{$prefix}tab-bar-#{$ui}-left & {
                margin-left: $ui-scroller-top-left-offset;
            }
        }
    }

    @if (($ui-scroller-opacity != 1 or $ui-scroller-opacity-over != 1 or
        $ui-scroller-opacity-pressed != 1) and is-null($ui-background-gradient)) {

        .#{$prefix}box-scroller-tab-bar-#{$ui} {
            // EXTJSIV-8846: partially transparent png images do not display correctly
            // in winXP/IE8 when the image element has a transparent background.
            // to fix this, we give the element the same background-color as the tabbar.
            background-color: $ui-background-color;

            .#{$prefix}ie8 .#{$prefix}box-scroller-plain {
                // plain tabbars have transparent backgrounds, so we use a white bg to overcome
                // the png transparency issues. See EXTJSIV-8846
                background-color: #fff;
            }
        }
    }

    @if $tabbar-scroller-symmetrical-icons {
        @if $tabbar-scroller-include-plain-icon {
            .#{$prefix}box-scroller-plain.#{$prefix}box-scroller-tab-bar-#{$ui} {
                @if (not $enable-font-icons) or ($ui-scroller-left-glyph == null) {
                    &.#{$prefix}box-scroller-left {
                        background-image: theme-background-image('tab-bar/#{$ui}-plain-scroll-left');
                    }
                }

                @if (not $enable-font-icons) or ($ui-scroller-right-glyph == null) {
                    &.#{$prefix}box-scroller-right {
                        background-image: theme-background-image('tab-bar/#{$ui}-plain-scroll-right');
                    }
                }

                @if (not $enable-font-icons) or ($ui-scroller-top-glyph == null) {
                    &.#{$prefix}box-scroller-top {
                        background-image: theme-background-image('tab-bar/#{$ui}-plain-scroll-top');
                    }
                }

                @if (not $enable-font-icons) or ($ui-scroller-bottom-glyph == null) {
                    &.#{$prefix}box-scroller-bottom {
                        background-image: theme-background-image('tab-bar/#{$ui}-plain-scroll-bottom');
                    }
                }
            }
        }
    } @else {
        .#{$prefix}tab-bar-#{$ui}-top {
            .#{$prefix}box-scroller-left {
                background-image: theme-background-image('tab-bar/#{$ui}-scroll-left-top');
            }
            .#{$prefix}box-scroller-right {
                background-image: theme-background-image('tab-bar/#{$ui}-scroll-right-top');
            }
        }

        .#{$prefix}tab-bar-#{$ui}-bottom {
            .#{$prefix}box-scroller-left {
                background-image: theme-background-image('tab-bar/#{$ui}-scroll-left-bottom');
            }
            .#{$prefix}box-scroller-right {
                background-image: theme-background-image('tab-bar/#{$ui}-scroll-right-bottom');
            }
        }

        .#{$prefix}tab-bar-#{$ui}-left {
            .#{$prefix}box-scroller-top {
                background-image: theme-background-image('tab-bar/#{$ui}-scroll-top-left');
            }
            .#{$prefix}box-scroller-bottom {
                background-image: theme-background-image('tab-bar/#{$ui}-scroll-bottom-left');
            }
        }

        .#{$prefix}tab-bar-#{$ui}-right {
            .#{$prefix}box-scroller-top {
                background-image: theme-background-image('tab-bar/#{$ui}-scroll-top-right');
            }
            .#{$prefix}box-scroller-bottom {
                background-image: theme-background-image('tab-bar/#{$ui}-scroll-bottom-right');
            }
        }
    }
            
    $stretch: slicer-background-stretch(tab-bar-#{$ui}-top, bottom);
    $stretch: slicer-background-stretch(tab-bar-#{$ui}-bottom, top);
    $stretch: slicer-background-stretch(tab-bar-#{$ui}-left, right);
    $stretch: slicer-background-stretch(tab-bar-#{$ui}-right, left);

    @include x-slicer(tab-bar-#{$ui}-top);
    @include x-slicer(tab-bar-#{$ui}-bottom);
    @include x-slicer(tab-bar-#{$ui}-left);
    @include x-slicer(tab-bar-#{$ui}-right);
}

/**
 * Creates a visual theme for a Tab Panel
 *
 * @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-tab-background-color=$tab-base-color]
 * The background-color of Tabs
 *
 * @param {color} [$ui-tab-background-color-focus=$tab-base-color-focus]
 * The background-color of focused Tabs
 *
 * @param {color} [$ui-tab-background-color-over=$tab-base-color-over]
 * The background-color of hovered Tabs
 *
 * @param {color} [$ui-tab-background-color-active=$tab-base-color-active]
 * The background-color of the active Tab
 *
 * @param {color} [$ui-tab-background-color-focus-over=$tab-base-color-focus-over]
 * The background-color of focused hovered Tabs
 *
 * @param {color} [$ui-tab-background-color-focus-active=$tab-base-color-focus-active]
 * The background-color of the active Tab when focused
 *
 * @param {color} [$ui-tab-background-color-disabled=$tab-base-color-disabled]
 * The background-color of disabled Tabs
 *
 * @param {color} [$ui-tab-plain-background-color=$tab-plain-background-color]
 * The background-color of {@link Ext.tab.Bar#plain} Tabs
 *
 * @param {color} [$ui-tab-plain-background-color-focus=$tab-plain-background-color-focus]
 * The background-color of focused {@link Ext.tab.Bar#plain} Tabs
 *
 * @param {color} [$ui-tab-plain-background-color-over=$tab-plain-background-color-over]
 * The background-color of hovered {@link Ext.tab.Bar#plain} Tabs
 *
 * @param {color} [$ui-tab-plain-background-color-active=$tab-plain-background-color-active]
 * The background-color of the active {@link Ext.tab.Bar#plain} Tabs
 *
 * @param {color} [$ui-tab-plain-background-color-focus-over=$tab-plain-background-color-focus-over]
 * The background-color of focused hovered {@link Ext.tab.Bar#plain} Tabs
 *
 * @param {color} [$ui-tab-plain-background-color-focus-active=$tab-plain-background-color-focus-active]
 * The background-color of the active {@link Ext.tab.Bar#plain} Tab when focused
 *
 * @param {color} [$ui-tab-plain-background-color-disabled=$tab-plain-background-color-disabled]
 * The background-color of disabled {@link Ext.tab.Bar#plain} Tabs
 *
 * @param {list} [$ui-tab-border-radius=$tab-border-radius]
 * The border-radius of Tabs
 *
 * @param {number} [$ui-tab-border-width=$tab-border-width]
 * The border-width of Tabs
 *
 * @param {number/list} [$ui-tab-border-width-focus=$tab-border-width-focus]
 * The border-width of focused Tabs
 *
 * @param {number/list} [$ui-tab-border-width-over=$tab-border-width-over]
 * The border-width of hovered Tabs
 *
 * @param {number/list} [$ui-tab-border-width-active=$tab-border-width-active]
 * The border-width of active Tabs
 *
 * @param {number/list} [$ui-tab-border-width-disabled=$tab-border-width-disabled]
 * The border-width of disabled Tabs
 *
 * @param {number/list} [$ui-tab-margin=$tab-margin]
 * The border-width of Tabs
 *
 * @param {number/list} [$ui-tab-padding=$tab-padding]
 * The padding of Tabs
 *
 * @param {number/list} [$ui-tab-text-padding=$tab-text-padding]
 * The padding of the Tab's text element
 *
 * @param {color} [$ui-tab-border-color=$tab-border-color]
 * The border-color of Tabs
 *
 * @param {color} [$ui-tab-border-color-focus=$tab-border-color-focus]
 * The border-color of focused Tabs
 *
 * @param {color} [$ui-tab-border-color-over=$tab-border-color-over]
 * The border-color of hovered Tabs
 *
 * @param {color} [$ui-tab-border-color-active=$tab-border-color-active]
 * The border-color of the active Tab
 *
 * @param {color} [$ui-tab-border-color-focus-over=$tab-border-color-focus-over]
 * The border-color of focused hovered Tabs
 *
 * @param {color} [$ui-tab-border-color-focus-active=$tab-border-color-focus-active]
 * The border-color of the active Tab when focused
 *
 * @param {color} [$ui-tab-border-color-disabled=$tab-border-color-disabled]
 * The border-color of disabled Tabs
 *
 * @param {color} [$ui-tab-plain-border-color=$tab-plain-border-color]
 * The border-color of {@link Ext.tab.Bar#plain} Tabs
 *
 * @param {color} [$ui-tab-plain-border-color-focus=$tab-plain-border-color-focus]
 * The border-color of focused {@link Ext.tab.Bar#plain} Tabs
 *
 * @param {color} [$ui-tab-plain-border-color-over=$tab-plain-border-color-over]
 * The border-color of hovered {@link Ext.tab.Bar#plain} Tabs
 *
 * @param {color} [$ui-tab-plain-border-color-active=$tab-plain-border-color-active]
 * The border-color of the active {@link Ext.tab.Bar#plain} Tabs
 *
 * @param {color} [$ui-tab-plain-border-color-focus-over=$tab-plain-border-color-focus-over]
 * The border-color of focused hovered {@link Ext.tab.Bar#plain} Tabs
 *
 * @param {color} [$ui-tab-plain-border-color-focus-active=$tab-plain-border-color-focus-active]
 * The border-color of the active {@link Ext.tab.Bar#plain} Tab when focused
 *
 * @param {color} [$ui-tab-plain-border-color-disabled=$tab-plain-border-color-disabled]
 * The border-color of disabled {@link Ext.tab.Bar#plain} Tabs
 *
 * @param {string} [$ui-tab-cursor=$tab-cursor]
 * The Tab cursor
 *
 * @param {string} [$ui-tab-cursor-disabled=$tab-cursor-disabled]
 * The cursor of disabled Tabs
 *
 * @param {number} [$ui-tab-font-size=$tab-font-size]
 * The font-size of Tabs
 *
 * @param {number} [$ui-tab-font-size-focus=$tab-font-size-focus]
 * The font-size of focused Tabs
 *
 * @param {number} [$ui-tab-font-size-over=$tab-font-size-over]
 * The font-size of hovered Tabs
 *
 * @param {number} [$ui-tab-font-size-active=$tab-font-size-active]
 * The font-size of the active Tab
 *
 * @param {number} [$ui-tab-font-size-focus-over=$tab-font-size-focus-over]
 * The font-size of focused hovered Tabs
 *
 * @param {number} [$ui-tab-font-size-focus-active=$tab-font-size-focus-active]
 * The font-size of the active Tab when focused
 *
 * @param {number} [$ui-tab-font-size-disabled=$tab-font-size-disabled]
 * The font-size of disabled Tabs
 *
 * @param {string} [$ui-tab-font-weight=$tab-font-weight]
 * The font-weight of Tabs
 *
 * @param {string} [$ui-tab-font-weight-focus=$tab-font-weight-focus]
 * The font-weight of focused Tabs
 *
 * @param {string} [$ui-tab-font-weight-over=$tab-font-weight-over]
 * The font-weight of hovered Tabs
 *
 * @param {string} [$ui-tab-font-weight-active=$tab-font-weight-active]
 * The font-weight of the active Tab
 *
 * @param {string} [$ui-tab-font-weight-focus-over=$tab-font-weight-focus-over]
 * The font-weight of focused hovered Tabs
 *
 * @param {string} [$ui-tab-font-weight-focus-active=$tab-font-weight-focus-active]
 * The font-weight of the active Tab when focused
 *
 * @param {string} [$ui-tab-font-weight-disabled=$tab-font-weight-disabled]
 * The font-weight of disabled Tabs
 *
 * @param {string} [$ui-tab-font-family=$tab-font-family]
 * The font-family of Tabs
 *
 * @param {string} [$ui-tab-font-family-focus=$tab-font-family-focus]
 * The font-family of focused Tabs
 *
 * @param {string} [$ui-tab-font-family-over=$tab-font-family-over]
 * The font-family of hovered Tabs
 *
 * @param {string} [$ui-tab-font-family-active=$tab-font-family-active]
 * The font-family of the active Tab
 *
 * @param {string} [$ui-tab-font-family-focus-over=$tab-font-family-focus-over]
 * The font-family of focused hovered Tabs
 *
 * @param {string} [$ui-tab-font-family-focus-active=$tab-font-family-focus-active]
 * The font-family of the active Tab when focused
 *
 * @param {string} [$ui-tab-font-family-disabled=$tab-font-family-disabled]
 * The font-family of disabled Tabs
 *
 * @param {number} [$ui-tab-line-height=$tab-line-height]
 * The line-height of Tabs
 *
 * @param {color} [$ui-tab-color=$tab-color]
 * The text color of Tabs
 *
 * @param {color} [$ui-tab-color-focus=$tab-color-focus]
 * The text color of focused Tabs
 *
 * @param {color} [$ui-tab-color-over=$tab-color-over]
 * The text color of hovered Tabs
 *
 * @param {color} [$ui-tab-color-active=$tab-color-active]
 * The text color of the active Tab
 *
 * @param {color} [$ui-tab-color-focus-over=$tab-color-focus-over]
 * The text color of focused hovered Tabs
 *
 * @param {color} [$ui-tab-color-focus-active=$tab-color-focus-active]
 * The text color of the active Tab when focused
 *
 * @param {color} [$ui-tab-color-disabled=$tab-color-disabled]
 * The text color of disabled Tabs
 *
 * @param {color} [$ui-tab-plain-color=$tab-plain-color]
 * The text color of {@link Ext.tab.Bar#plain} Tabs
 *
 * @param {color} [$ui-tab-plain-color-focus=$tab-plain-color-focus]
 * The text color of focused {@link Ext.tab.Bar#plain} Tabs
 *
 * @param {color} [$ui-tab-plain-color-over=$tab-plain-color-over]
 * The text color of hovered {@link Ext.tab.Bar#plain} Tabs
 *
 * @param {color} [$ui-tab-plain-color-active=$tab-plain-color-active]
 * The text color of the active {@link Ext.tab.Bar#plain} Tab
 *
 * @param {color} [$ui-tab-plain-color-focus-over=$tab-plain-color-focus-over]
 * The text color of focused hovered {@link Ext.tab.Bar#plain} Tabs
 *
 * @param {color} [$ui-tab-plain-color-focus-active=$tab-plain-color-focus-active]
 * The text color of the active {@link Ext.tab.Bar#plain} Tab when focused
 *
 * @param {color} [$ui-tab-plain-color-disabled=$tab-plain-color-disabled]
 * The text color of disabled {@link Ext.tab.Bar#plain} Tabs
 *
 * @param {string/list} [$ui-tab-background-gradient=$tab-background-gradient]
 * The background-gradient for Tabs. 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 {string/list} [$ui-tab-background-gradient-focus=$tab-background-gradient-focus]
 * The background-gradient for focused Tabs. 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 {string/list} [$ui-tab-background-gradient-over=$tab-background-gradient-over]
 * The background-gradient for hovered Tabs. 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 {string/list} [$ui-tab-background-gradient-active=$tab-background-gradient-active]
 * The background-gradient for the active Tab. 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 {string/list} [$ui-tab-background-gradient-focus-over=$tab-background-gradient-focus-over]
 * The background-gradient for focused hovered Tabs. 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 {string/list} [$ui-tab-background-gradient-focus-active=$tab-background-gradient-focus-active]
 * The background-gradient for the active Tab when focused. 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 {string/list} [$ui-tab-background-gradient-disabled=$tab-background-gradient-disabled]
 * The background-gradient for disabled Tabs. 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 {number} [$ui-tab-inner-border-width=$tab-inner-border-width]
 * The inner border-width of Tabs
 *
 * @param {number} [$ui-tab-inner-border-width-focus=$tab-inner-border-width-focus]
 * The inner border-width of focused Tabs
 *
 * @param {number} [$ui-tab-inner-border-width-over=$tab-inner-border-width-over]
 * The inner border-width of hovered Tabs
 *
 * @param {number} [$ui-tab-inner-border-width-active=$tab-inner-border-width-active]
 * The inner border-width of active Tabs
 *
 * @param {number} [$ui-tab-inner-border-width-focus-over=$tab-inner-border-width-focus-over]
 * The inner border-width of focused hovered Tabs
 *
 * @param {number} [$ui-tab-inner-border-width-focus-active=$tab-inner-border-width-focus-active]
 * The inner border-width of active Tabs when focused
 *
 * @param {number} [$ui-tab-inner-border-width-disabled=$tab-inner-border-width-disabled]
 * The inner border-width of disabled Tabs
 *
 * @param {color} [$ui-tab-inner-border-color=$tab-inner-border-color]
 * The inner border-color of Tabs
 *
 * @param {color} [$ui-tab-inner-border-color-focus=$tab-inner-border-color-focus]
 * The inner border-color of focused Tabs
 *
 * @param {color} [$ui-tab-inner-border-color-over=$tab-inner-border-color-over]
 * The inner border-color of hovered Tabs
 *
 * @param {color} [$ui-tab-inner-border-color-active=$tab-inner-border-color-active]
 * The inner border-color of active Tabs
 *
 * @param {color} [$ui-tab-inner-border-color-focus-over=$tab-inner-border-color-focus-over]
 * The inner border-color of focused hovered Tabs
 *
 * @param {color} [$ui-tab-inner-border-color-focus-active=$tab-inner-border-color-focus-active]
 * The inner border-color of active Tabs when focused
 *
 * @param {color} [$ui-tab-inner-border-color-disabled=$tab-inner-border-color-disabled]
 * The inner border-color of disabled Tabs
 *
 * @param {boolean} [$ui-tab-inner-border-collapse=$tab-inner-border-collapse]
 * `true` to suppress the inner border of the tab on the side adjacent to the tab strip
 *
 * @param {boolean} [$ui-tab-inner-border-collapse-focus=$tab-inner-border-collapse-focus]
 * `true` to suppress the inner border of the tab on the side adjacent to the tab strip
 * when the tab is focused
 *
 * @param {boolean} [$ui-tab-inner-border-collapse-over=$tab-inner-border-collapse-over]
 * `true` to suppress the inner border of the tab on the side adjacent to the tab strip
 * when the tab is hovered
 *
 * @param {boolean} [$ui-tab-inner-border-collapse-active=$tab-inner-border-collapse-active]
 * `true` to suppress the inner border of the tab on the side adjacent to the tab strip
 * when the tab is active
 *
 * @param {boolean} [$ui-tab-inner-border-collapse-focus-over=$tab-inner-border-collapse-focus-over]
 * `true` to suppress the inner border of the tab on the side adjacent to the tab strip
 * when the tab is focused and hovered
 *
 * @param {boolean} [$ui-tab-inner-border-collapse-focus-active=$tab-inner-border-collapse-focus-active]
 * `true` to suppress the inner border of the tab on the side adjacent to the tab strip
 * when the tab is focused and active
 *
 * @param {boolean} [$ui-tab-inner-border-collapse-disabled=$tab-inner-border-collapse-disabled]
 * `true` to suppress the inner border of the tab on the side adjacent to the tab strip
 * when the tab is disabled
 *
 * @param {number} [$ui-tab-outline-width-focus=$tab-outline-width-focus]
 * The outline width of focused Tabs
 *
 * @param {string} [$ui-tab-outline-style-focus=$tab-outline-style-focus]
 * The outline-style of focused Tabs
 *
 * @param {color} [$ui-tab-outline-color-focus=$tab-outline-color-focus]
 * The outline color of focused Tabs
 *
 * @param {number} [$ui-tab-outline-offset-focus=$tab-outline-offset-focus]
 * The outline offset of focused Tabs
 *
 * @param {number} [$ui-tab-body-outline-width-focus=$tab-body-outline-width-focus]
 * The body outline width of focused Tabs
 *
 * @param {string} [$ui-tab-body-outline-style-focus=$tab-body-outline-style-focus]
 * The body outline-style of focused Tabs
 *
 * @param {color} [$ui-tab-body-outline-color-focus=$tab-body-outline-color-focus]
 * The body outline color of focused Tabs
 *
 * @param {number} [$ui-tab-icon-width=$tab-icon-width]
 * The width of the Tab close icon
 *
 * @param {number} [$ui-tab-icon-height=$tab-icon-height]
 * The height of the Tab close icon
 *
 * @param {number} [$ui-tab-icon-spacing=$tab-icon-spacing]
 * the space in between the text and the close button
 *
 * @param {list} [$ui-tab-icon-background-position=$tab-icon-background-position]
 * The background-position of Tab icons
 *
 * @param {color} [$ui-tab-glyph-color=$tab-glyph-color]
 * The color of Tab glyph icons
 *
 * @param {color} [$ui-tab-glyph-color-focus=$tab-glyph-color-focus]
 * The color of a Tab glyph icon when the Tab is focused
 *
 * @param {color} [$ui-tab-glyph-color-over=$tab-glyph-color-over]
 * The color of a Tab glyph icon when the Tab is hovered
 *
 * @param {color} [$ui-tab-glyph-color-active=$tab-glyph-color-active]
 * The color of a Tab glyph icon when the Tab is active
 *
 * @param {color} [$ui-tab-glyph-color-focus-over=$tab-glyph-color-focus-over]
 * The color of a Tab glyph icon when the Tab is focused and hovered
 *
 * @param {color} [$ui-tab-glyph-color-focus-active=$tab-glyph-color-focus-active]
 * The color of a Tab glyph icon when the Tab is focused and active
 *
 * @param {color} [$ui-tab-glyph-color-disabled=$tab-glyph-color-disabled]
 * The color of a Tab glyph icon when the Tab is disabled
 *
 * @param {color} [$ui-tab-plain-glyph-color=$tab-plain-glyph-color]
 * The color of {@link Ext.tab.Bar#plain} Tab glyph icons
 *
 * @param {color} [$ui-tab-plain-glyph-color-focus=$tab-plain-glyph-color-focus]
 * The color of a {@link Ext.tab.Bar#plain} Tab glyph icon when the Tab is focused
 *
 * @param {color} [$ui-tab-plain-glyph-color-over=$tab-plain-glyph-color-over]
 * The color of a {@link Ext.tab.Bar#plain} Tab glyph icon when the Tab is hovered
 *
 * @param {color} [$ui-tab-plain-glyph-color-active=$tab-plain-glyph-color-active]
 * The color of a {@link Ext.tab.Bar#plain} Tab glyph icon when the Tab is active
 *
 * @param {color} [$ui-tab-plain-glyph-color-focus-over=$tab-plain-glyph-color-focus-over]
 * The color of a {@link Ext.tab.Bar#plain} Tab glyph icon when the Tab is focused and hovered
 *
 * @param {color} [$ui-tab-plain-glyph-color-focus-active=$tab-plain-glyph-color-focus-active]
 * The color of a {@link Ext.tab.Bar#plain} Tab glyph icon when the Tab is focused and active
 *
 * @param {color} [$ui-tab-plain-glyph-color-disabled=$tab-plain-glyph-color-disabled]
 * The color of a {@link Ext.tab.Bar#plain} Tab glyph icon when the Tab is disabled
 *
 * @param {number} [$ui-tab-glyph-opacity=$tab-glyph-opacity]
 * The opacity of a Tab glyph icon
 *
 * @param {number} [$ui-tab-glyph-opacity-disabled=$tab-glyph-opacity-disabled]
 * The opacity of a Tab glyph icon when the Tab is disabled
 *
 * @param {number} [$ui-tab-opacity=$tab-opacity]
 * Tab opacity
 *
 * @param {number} [$ui-tab-opacity-focus=$tab-opacity-focus]
 * Tab opacity when focused
 *
 * @param {number} [$ui-tab-opacity-over=$tab-opacity-over]
 * Tab opacity when hovered
 *
 * @param {number} [$ui-tab-opacity-active=$tab-opacity-active]
 * Opacity of the active tab
 *
 * @param {number} [$ui-tab-opacity-focus-over=$tab-opacity-focus-over]
 * Tab opacity when focused and hovered
 *
 * @param {number} [$ui-tab-opacity-focus-active=$tab-opacity-focus-active]
 * Opacity of the active tab when focused
 *
 * @param {number} [$ui-tab-opacity-disabled=$tab-opacity-disabled]
 * opacity to apply to the tab's main element when the tab is disabled
 *
 * @param {number} [$ui-tab-background-opacity=$tab-background-opacity]
 * Tab background opacity
 *
 * @param {number} [$ui-tab-background-opacity-focus=$tab-background-opacity-focus]
 * Tab background opacity when focused
 *
 * @param {number} [$ui-tab-background-opacity-over=$tab-background-opacity-over]
 * Tab background opacity when hovered
 *
 * @param {number} [$ui-tab-background-opacity-active=$tab-background-opacity-active]
 * background opacity of the active tab
 *
 * @param {number} [$ui-tab-background-opacity-focus-over=$tab-background-opacity-focus-over]
 * Tab background opacity when focused and hovered
 *
 * @param {number} [$ui-tab-background-opacity-focus-active=$tab-background-opacity-focus-active]
 * Background opacity of the active tab when focused
 *
 * @param {number} [$ui-tab-background-opacity-disabled=$tab-background-opacity-disabled]
 * Tab background opacity when disabled
 *
 * @param {number} [$ui-tab-text-opacity-disabled=$tab-text-opacity-disabled]
 * opacity to apply to the tab's text element when the tab is disabled
 *
 * @param {number} [$ui-tab-icon-opacity-disabled=$tab-icon-opacity-disabled]
 * opacity to apply to the tab's icon element when the tab is disabled
 *
 * @param {number} [$ui-strip-height=$tabbar-strip-height]
 * The height of the Tab Bar strip
 *
 * @param {number/list} [$ui-strip-border-width=$tabbar-strip-border-width]
 * The border-width of the Tab Bar strip
 *
 * @param {color} [$ui-strip-border-color=$tabbar-strip-border-color]
 * The border-color of the Tab Bar strip
 *
 * @param {color} [$ui-strip-background-color=$tabbar-strip-background-color]
 * The background-color of the Tab Bar strip
 *
 * @param {number/list} [$ui-bar-border-width=$tabbar-border-width]
 * The border-width of the Tab Bar
 *
 * @param {color} [$ui-bar-border-color=$tabbar-border-color]
 * The border-color of the Tab Bar
 *
 * @param {number/list} [$ui-bar-padding=$tabbar-padding]
 * The padding of the Tab Bar
 *
 * @param {number/list} [$ui-bar-plain-padding=$tabbar-plain-padding]
 * The padding of the Tab Bar when {@link #plain} is `true`
 *
 * @param {color} [$ui-bar-background-color=$tabbar-background-color]
 * The background color of the  Tab Bar
 *
 * @param {string/list} [$ui-bar-background-gradient=$tabbar-background-gradient]
 * The background-gradient of the Tab Bar. 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 {number} [$ui-bar-scroller-width=$tabbar-scroller-width]
 * The width of the Tab Bar scrollers
 *
 * @param {string} [$ui-bar-scroller-cursor=$tabbar-scroller-cursor]
 * The cursor of the Tab Bar scrollers
 *
 * @param {string} [$ui-bar-scroller-cursor-disabled=$tabbar-scroller-cursor-disabled]
 * The cursor of disabled Tab Bar scrollers
 *
 * @param {number} [$ui-bar-scroller-opacity=$tabbar-scroller-opacity]
 * The opacity of Tab Bar scrollers
 *
 * @param {number} [$ui-bar-scroller-opacity-over=$tabbar-scroller-opacity-over]
 * The opacity of hovered Tab Bar scrollers
 *
 * @param {number} [$ui-bar-scroller-opacity-pressed=$tabbar-scroller-opacity-pressed]
 * The opacity of pressed Tab Bar scrollers
 *
 * @param {number} [$ui-bar-scroller-opacity-disabled=$tabbar-scroller-opacity-disabled]
 * The opacity of disabled Tab Bar scrollers
 *
 * @param {color} [$ui-bar-scroller-glyph-color=$tabbar-scroller-glyph-color]
 * The color to use for Tab Bar scroller icons when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {color} [$ui-bar-plain-scroller-glyph-color=$tabbar-plain-scroller-glyph-color]
 * The color to use for "plain" Tab Bar scroller icons when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {string/list} [$ui-bar-scroller-top-glyph=$tabbar-scroller-top-glyph]
 * Glyph for the "top" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {string/list} [$ui-bar-scroller-right-glyph=$tabbar-scroller-right-glyph]
 * Glyph for the "right" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {string/list} [$ui-bar-scroller-bottom-glyph=$tabbar-scroller-bottom-glyph]
 * Glyph for the "bottom" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {string/list} [$ui-bar-scroller-left-glyph=$tabbar-scroller-left-glyph]
 * Glyph for the "left" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {number} [$ui-tab-closable-icon-width=$tab-closable-icon-width]
 * The width of the Tab close icon
 *
 * @param {number} [$ui-tab-closable-icon-height=$tab-closable-icon-height]
 * The height of the Tab close icon
 *
 * @param {number} [$ui-tab-closable-icon-top=$tab-closable-icon-top]
 * The distance to offset the Tab close icon from the top of the tab
 *
 * @param {number} [$ui-tab-closable-icon-right=$tab-closable-icon-right]
 * The distance to offset the Tab close icon from the right of the tab
 *
 * @param {number} [$ui-tab-closable-icon-spacing=$tab-closable-icon-spacing]
 * the space in between the text and the close button
 *
 * @param {color} [$ui-tab-closable-icon-glyph-color=$tab-closable-icon-glyph-color]
 * The color of the Tab close icon when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {color} [$ui-tab-closable-icon-glyph-color-focus=$tab-closable-icon-glyph-color-focus]
 * The color of the focused Tab's close icon when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {color} [$ui-tab-closable-icon-glyph-color-over=$tab-closable-icon-glyph-color-over]
 * The color of the hovered Tab's close icon when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {color} [$ui-tab-closable-icon-glyph-color-active=$tab-closable-icon-glyph-color-active]
 * The color of the active Tab's close icon when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {color} [$ui-tab-closable-icon-glyph-color-focus-over=$tab-closable-icon-glyph-color-focus-over]
 * The color of a focused and hovered Tab's close icon when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {color} [$ui-tab-closable-icon-glyph-color-focus-active=$tab-closable-icon-glyph-color-focus-active]
 * The color of a focused and active Tab's close icon when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {color} [$ui-tab-closable-icon-glyph-color-disabled=$tab-closable-icon-glyph-color-disabled]
 * The color of a disabled Tab's close icon when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {color} [$ui-tab-plain-closable-icon-glyph-color=$tab-plain-closable-icon-glyph-color]
 * The color of the Tab close icon when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {color} [$ui-tab-plain-closable-icon-glyph-color-focus=$tab-plain-closable-icon-glyph-color-focus]
 * The color of the focused {@link Ext.tab.Bar#plain} Tab's close icon when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {color} [$ui-tab-plain-closable-icon-glyph-color-over=$tab-plain-closable-icon-glyph-color-over]
 * The color of the hovered {@link Ext.tab.Bar#plain} Tab's close icon when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {color} [$ui-tab-plain-closable-icon-glyph-color-active=$tab-plain-closable-icon-glyph-color-active]
 * The color of the active {@link Ext.tab.Bar#plain} Tab's close icon when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {color} [$ui-tab-plain-closable-icon-glyph-color-focus-over=$tab-plain-closable-icon-glyph-color-focus-over]
 * The color of a focused and hovered {@link Ext.tab.Bar#plain} Tab's close icon when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {color} [$ui-tab-plain-closable-icon-glyph-color-focus-active=$tab-plain-closable-icon-glyph-color-focus-active]
 * The color of a focused and active {@link Ext.tab.Bar#plain} Tab's close icon when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {color} [$ui-tab-plain-closable-icon-glyph-color-disabled=$tab-plain-closable-icon-glyph-color-disabled]
 * The color of a disabled {@link Ext.tab.Bar#plain} Tab's close icon when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {string/list} [$ui-tab-closable-icon-glyph=$tab-closable-icon-glyph]
 * Glyph for the Tab close icon when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @member Ext.tab.Panel
 */ 
@mixin extjs-tab-panel-ui(
    $ui,
    
    $ui-tab-background-color: null,
    $ui-tab-background-color-focus: null,
    $ui-tab-background-color-over: null,
    $ui-tab-background-color-active: null,
    $ui-tab-background-color-focus-over: null,
    $ui-tab-background-color-focus-active: null,
    $ui-tab-background-color-disabled: null,

    $ui-tab-plain-background-color: null,
    $ui-tab-plain-background-color-focus: null,
    $ui-tab-plain-background-color-over: null,
    $ui-tab-plain-background-color-active: null,
    $ui-tab-plain-background-color-focus-over: null,
    $ui-tab-plain-background-color-focus-active: null,
    $ui-tab-plain-background-color-disabled: null,

    $ui-tab-border-radius: $tab-border-radius,
    $ui-tab-border-width: $tab-border-width,
    $ui-tab-border-width-focus: $tab-border-width-focus,
    $ui-tab-border-width-over: $tab-border-width-over,
    $ui-tab-border-width-active: $tab-border-width-active,
    $ui-tab-border-width-disabled: $tab-border-width-disabled,
    $ui-tab-margin: $tab-margin,
    $ui-tab-padding: $tab-padding,
    $ui-tab-text-padding: $tab-text-padding,

    $ui-tab-border-color: null,
    $ui-tab-border-color-focus: null,
    $ui-tab-border-color-over: null,
    $ui-tab-border-color-active: null,
    $ui-tab-border-color-focus-over: null,
    $ui-tab-border-color-focus-active: null,
    $ui-tab-border-color-disabled: null,

    $ui-tab-plain-border-color: null,
    $ui-tab-plain-border-color-focus: null,
    $ui-tab-plain-border-color-over: null,
    $ui-tab-plain-border-color-active: null,
    $ui-tab-plain-border-color-focus-over: null,
    $ui-tab-plain-border-color-focus-active: null,
    $ui-tab-plain-border-color-disabled: null,

    $ui-tab-cursor: $tab-cursor,
    $ui-tab-cursor-disabled: $tab-cursor-disabled,

    $ui-tab-font-size: null,
    $ui-tab-font-size-focus: null,
    $ui-tab-font-size-over: null,
    $ui-tab-font-size-active: null,
    $ui-tab-font-size-focus-over: null,
    $ui-tab-font-size-focus-active: null,
    $ui-tab-font-size-disabled: null,

    $ui-tab-font-weight: null,
    $ui-tab-font-weight-focus: null,
    $ui-tab-font-weight-over: null,
    $ui-tab-font-weight-active: null,
    $ui-tab-font-weight-focus-over: null,
    $ui-tab-font-weight-focus-active: null,
    $ui-tab-font-weight-disabled: null,

    $ui-tab-font-family: null,
    $ui-tab-font-family-focus: null,
    $ui-tab-font-family-over: null,
    $ui-tab-font-family-active: null,
    $ui-tab-font-family-focus-over: null,
    $ui-tab-font-family-focus-active: null,
    $ui-tab-font-family-disabled: null,

    $ui-tab-line-height: $tab-line-height,

    $ui-tab-color: null,
    $ui-tab-color-focus: null,
    $ui-tab-color-over: null,
    $ui-tab-color-active: null,
    $ui-tab-color-focus-over: null,
    $ui-tab-color-focus-active: null,
    $ui-tab-color-disabled: null,

    $ui-tab-plain-color: null,
    $ui-tab-plain-color-focus: null,
    $ui-tab-plain-color-over: null,
    $ui-tab-plain-color-active: null,
    $ui-tab-plain-color-focus-over: null,
    $ui-tab-plain-color-focus-active: null,
    $ui-tab-plain-color-disabled: null,

    $ui-tab-background-gradient: null,
    $ui-tab-background-gradient-focus: null,
    $ui-tab-background-gradient-over: null,
    $ui-tab-background-gradient-active: null,
    $ui-tab-background-gradient-focus-over: null,
    $ui-tab-background-gradient-focus-active: null,
    $ui-tab-background-gradient-disabled: null,

    $ui-tab-inner-border-width: null,
    $ui-tab-inner-border-width-focus: null,
    $ui-tab-inner-border-width-over: null,
    $ui-tab-inner-border-width-active: null,
    $ui-tab-inner-border-width-focus-over: null,
    $ui-tab-inner-border-width-focus-active: null,
    $ui-tab-inner-border-width-disabled: null,

    $ui-tab-inner-border-color: null,
    $ui-tab-inner-border-color-focus: null,
    $ui-tab-inner-border-color-over: null,
    $ui-tab-inner-border-color-active: null,
    $ui-tab-inner-border-color-focus-over: null,
    $ui-tab-inner-border-color-focus-active: null,
    $ui-tab-inner-border-color-disabled: null,

    $ui-tab-inner-border-collapse: null,
    $ui-tab-inner-border-collapse-focus: null,
    $ui-tab-inner-border-collapse-over: null,
    $ui-tab-inner-border-collapse-active: null,
    $ui-tab-inner-border-collapse-focus-over: null,
    $ui-tab-inner-border-collapse-focus-active: null,
    $ui-tab-inner-border-collapse-disabled: null,

    $ui-tab-outline-width-focus: $tab-outline-width-focus,
    $ui-tab-outline-style-focus: $tab-outline-style-focus,
    $ui-tab-outline-color-focus: $tab-outline-color-focus,
    $ui-tab-outline-offset-focus: $tab-outline-offset-focus,

    $ui-tab-body-outline-width-focus: $tab-body-outline-width-focus,
    $ui-tab-body-outline-style-focus: $tab-body-outline-style-focus,
    $ui-tab-body-outline-color-focus: $tab-body-outline-color-focus,

    $ui-tab-icon-width: $tab-icon-width,
    $ui-tab-icon-height: $tab-icon-height,
    $ui-tab-icon-spacing: $tab-icon-spacing,
    $ui-tab-icon-background-position: $tab-icon-background-position,

    $ui-tab-glyph-color: null,
    $ui-tab-glyph-color-focus: null,
    $ui-tab-glyph-color-over: null,
    $ui-tab-glyph-color-active: null,
    $ui-tab-glyph-color-focus-over: null,
    $ui-tab-glyph-color-focus-active: null,
    $ui-tab-glyph-color-disabled: null,

    $ui-tab-plain-glyph-color: null,
    $ui-tab-plain-glyph-color-focus: null,
    $ui-tab-plain-glyph-color-over: null,
    $ui-tab-plain-glyph-color-active: null,
    $ui-tab-plain-glyph-color-focus-over: null,
    $ui-tab-plain-glyph-color-focus-active: null,
    $ui-tab-plain-glyph-color-disabled: null,

    $ui-tab-glyph-opacity: $tab-glyph-opacity,
    $ui-tab-glyph-opacity-disabled: $tab-glyph-opacity-disabled,

    $ui-tab-opacity: $tab-opacity,
    $ui-tab-opacity-focus: $tab-opacity-focus,
    $ui-tab-opacity-over: $tab-opacity-over,
    $ui-tab-opacity-active: $tab-opacity-active,
    $ui-tab-opacity-focus-over: $tab-opacity-focus-over,
    $ui-tab-opacity-focus-active: $tab-opacity-focus-active,
    $ui-tab-opacity-disabled: $tab-opacity-disabled,

    $ui-tab-background-opacity: $tab-background-opacity,
    $ui-tab-background-opacity-focus: $tab-background-opacity-focus,
    $ui-tab-background-opacity-over: $tab-background-opacity-over,
    $ui-tab-background-opacity-active: $tab-background-opacity-active,
    $ui-tab-background-opacity-focus-over: $tab-background-opacity-focus-over,
    $ui-tab-background-opacity-focus-active: $tab-background-opacity-focus-active,
    $ui-tab-background-opacity-disabled: $tab-background-opacity-disabled,

    $ui-tab-text-opacity-disabled: $tab-text-opacity-disabled,
    $ui-tab-icon-opacity-disabled: $tab-icon-opacity-disabled,

    $ui-strip-height: $tabbar-strip-height,
    $ui-strip-border-width: $tabbar-strip-border-width,
    $ui-strip-border-color: $tabbar-strip-border-color,
    $ui-strip-background-color: $tabbar-strip-background-color,

    $ui-bar-border-width: $tabbar-border-width,
    $ui-bar-border-color: $tabbar-border-color,
    $ui-bar-padding: $tabbar-padding,
    $ui-bar-plain-padding: $tabbar-plain-padding,
    $ui-bar-background-color: $tabbar-base-color,
    $ui-bar-background-gradient: $tabbar-background-gradient,
    $ui-bar-scroller-width: $tabbar-scroller-width,

    $ui-bar-scroller-cursor: $tabbar-scroller-cursor,
    $ui-bar-scroller-cursor-disabled: $tabbar-scroller-cursor-disabled,
    $ui-bar-scroller-opacity: $tabbar-scroller-opacity,
    $ui-bar-scroller-opacity-over: $tabbar-scroller-opacity-over,
    $ui-bar-scroller-opacity-pressed: $tabbar-scroller-opacity-pressed,
    $ui-bar-scroller-opacity-disabled: $tabbar-scroller-opacity-disabled,

    $ui-bar-scroller-glyph-color: $tabbar-scroller-glyph-color,
    $ui-bar-plain-scroller-glyph-color: $tabbar-plain-scroller-glyph-color,
    $ui-bar-scroller-top-glyph: $tabbar-scroller-top-glyph,
    $ui-bar-scroller-right-glyph: $tabbar-scroller-right-glyph,
    $ui-bar-scroller-bottom-glyph: $tabbar-scroller-bottom-glyph,
    $ui-bar-scroller-left-glyph: $tabbar-scroller-left-glyph,

    $ui-tab-closable-icon-width: $tab-closable-icon-width,
    $ui-tab-closable-icon-height: $tab-closable-icon-height,
    $ui-tab-closable-icon-top: $tab-closable-icon-top,
    $ui-tab-closable-icon-right: $tab-closable-icon-right,
    $ui-tab-closable-icon-spacing: $tab-closable-icon-spacing,

    $ui-tab-closable-icon-glyph-color: null,
    $ui-tab-closable-icon-glyph-color-focus: null,
    $ui-tab-closable-icon-glyph-color-over: null,
    $ui-tab-closable-icon-glyph-color-active: null,
    $ui-tab-closable-icon-glyph-color-focus-over: null,
    $ui-tab-closable-icon-glyph-color-focus-active: null,
    $ui-tab-closable-icon-glyph-color-disabled: null,

    $ui-tab-plain-closable-icon-glyph-color: $tab-plain-closable-icon-glyph-color,
    $ui-tab-plain-closable-icon-glyph-color-focus: $tab-plain-closable-icon-glyph-color-focus,
    $ui-tab-plain-closable-icon-glyph-color-over: $tab-plain-closable-icon-glyph-color-over,
    $ui-tab-plain-closable-icon-glyph-color-active: $tab-plain-closable-icon-glyph-color-active,
    $ui-tab-plain-closable-icon-glyph-color-focus-over: $tab-plain-closable-icon-glyph-color-focus-over,
    $ui-tab-plain-closable-icon-glyph-color-focus-active: $tab-plain-closable-icon-glyph-color-focus-active,
    $ui-tab-plain-closable-icon-glyph-color-disabled: $tab-plain-closable-icon-glyph-color-disabled,

    $ui-tab-closable-icon-glyph: $tab-closable-icon-glyph
) {
    @if $include-tab-default-ui or $ui != 'default' {
        @include extjs-tab-ui(
            $ui: $ui,
            
            $ui-background-color: $ui-tab-background-color,
            $ui-background-color-focus: $ui-tab-background-color-focus,
            $ui-background-color-over: $ui-tab-background-color-over,
            $ui-background-color-active: $ui-tab-background-color-active,
            $ui-background-color-focus-over: $ui-tab-background-color-focus-over,
            $ui-background-color-focus-active: $ui-tab-background-color-focus-active,
            $ui-background-color-disabled: $ui-tab-background-color-disabled,

            $ui-plain-background-color: $ui-tab-plain-background-color,
            $ui-plain-background-color-focus: $ui-tab-plain-background-color-focus,
            $ui-plain-background-color-over: $ui-tab-plain-background-color-over,
            $ui-plain-background-color-active: $ui-tab-plain-background-color-active,
            $ui-plain-background-color-focus-over: $ui-tab-plain-background-color-focus-over,
            $ui-plain-background-color-focus-active: $ui-tab-plain-background-color-focus-active,
            $ui-plain-background-color-disabled: $ui-tab-plain-background-color-disabled,

            $ui-border-radius: $ui-tab-border-radius,
            $ui-border-width: $ui-tab-border-width,
            $ui-margin: $ui-tab-margin,
            $ui-padding: $ui-tab-padding,
            $ui-text-padding: $ui-tab-text-padding,

            $ui-border-color: $ui-tab-border-color,
            $ui-border-color-focus: $ui-tab-border-color-focus,
            $ui-border-color-over: $ui-tab-border-color-over,
            $ui-border-color-active: $ui-tab-border-color-active,
            $ui-border-color-focus-over: $ui-tab-border-color-focus-over,
            $ui-border-color-focus-active: $ui-tab-border-color-focus-active,
            $ui-border-color-disabled: $ui-tab-border-color-disabled,

            $ui-plain-border-color: $ui-tab-plain-border-color,
            $ui-plain-border-color-focus: $ui-tab-plain-border-color-focus,
            $ui-plain-border-color-over: $ui-tab-plain-border-color-over,
            $ui-plain-border-color-active: $ui-tab-plain-border-color-active,
            $ui-plain-border-color-focus-over: $ui-tab-plain-border-color-focus-over,
            $ui-plain-border-color-focus-active: $ui-tab-plain-border-color-focus-active,
            $ui-plain-border-color-disabled: $ui-tab-plain-border-color-disabled,

            $ui-cursor: $ui-tab-cursor,
            $ui-cursor-disabled: $ui-tab-cursor-disabled,

            $ui-font-size: $ui-tab-font-size,
            $ui-font-size-focus: $ui-tab-font-size-focus,
            $ui-font-size-over: $ui-tab-font-size-over,
            $ui-font-size-active: $ui-tab-font-size-active,
            $ui-font-size-focus-over: $ui-tab-font-size-focus-over,
            $ui-font-size-focus-active: $ui-tab-font-size-focus-active,
            $ui-font-size-disabled: $ui-tab-font-size-disabled,

            $ui-font-weight: $ui-tab-font-weight,
            $ui-font-weight-focus: $ui-tab-font-weight-focus,
            $ui-font-weight-over: $ui-tab-font-weight-over,
            $ui-font-weight-active: $ui-tab-font-weight-active,
            $ui-font-weight-focus-over: $ui-tab-font-weight-focus-over,
            $ui-font-weight-focus-active: $ui-tab-font-weight-focus-active,
            $ui-font-weight-disabled: $ui-tab-font-weight-disabled,

            $ui-font-family: $ui-tab-font-family,
            $ui-font-family-focus: $ui-tab-font-family-focus,
            $ui-font-family-over: $ui-tab-font-family-over,
            $ui-font-family-active: $ui-tab-font-family-active,
            $ui-font-family-focus-over: $ui-tab-font-family-focus-over,
            $ui-font-family-focus-active: $ui-tab-font-family-focus-active,
            $ui-font-family-disabled: $ui-tab-font-family-disabled,

            $ui-line-height: $ui-tab-line-height,

            $ui-color: $ui-tab-color,
            $ui-color-focus: $ui-tab-color-focus,
            $ui-color-over: $ui-tab-color-over,
            $ui-color-active: $ui-tab-color-active,
            $ui-color-focus-over: $ui-tab-color-focus-over,
            $ui-color-focus-active: $ui-tab-color-focus-active,
            $ui-color-disabled: $ui-tab-color-disabled,

            $ui-plain-color: $ui-tab-plain-color,
            $ui-plain-color-focus: $ui-tab-plain-color-focus,
            $ui-plain-color-over: $ui-tab-plain-color-over,
            $ui-plain-color-active: $ui-tab-plain-color-active,
            $ui-plain-color-focus-over: $ui-tab-plain-color-focus-over,
            $ui-plain-color-focus-active: $ui-tab-plain-color-focus-active,
            $ui-plain-color-disabled: $ui-tab-plain-color-disabled,

            $ui-background-gradient: $ui-tab-background-gradient,
            $ui-background-gradient-focus: $ui-tab-background-gradient-focus,
            $ui-background-gradient-over: $ui-tab-background-gradient-over,
            $ui-background-gradient-active: $ui-tab-background-gradient-active,
            $ui-background-gradient-focus-over: $ui-tab-background-gradient-focus-over,
            $ui-background-gradient-focus-active: $ui-tab-background-gradient-focus-active,
            $ui-background-gradient-disabled: $ui-tab-background-gradient-disabled,

            $ui-inner-border-width: $ui-tab-inner-border-width,
            $ui-inner-border-width-focus: $ui-tab-inner-border-width-focus,
            $ui-inner-border-width-over: $ui-tab-inner-border-width-over,
            $ui-inner-border-width-active: $ui-tab-inner-border-width-active,
            $ui-inner-border-width-focus-over: $ui-tab-inner-border-width-focus-over,
            $ui-inner-border-width-focus-active: $ui-tab-inner-border-width-focus-active,
            $ui-inner-border-width-disabled: $ui-tab-inner-border-width-disabled,

            $ui-inner-border-color: $ui-tab-inner-border-color,
            $ui-inner-border-color-focus: $ui-tab-inner-border-color-focus,
            $ui-inner-border-color-over: $ui-tab-inner-border-color-over,
            $ui-inner-border-color-active: $ui-tab-inner-border-color-active,
            $ui-inner-border-color-focus-over: $ui-tab-inner-border-color-focus-over,
            $ui-inner-border-color-focus-active: $ui-tab-inner-border-color-focus-active,
            $ui-inner-border-color-disabled: $ui-tab-inner-border-color-disabled,

            $ui-inner-border-collapse: $ui-tab-inner-border-collapse,
            $ui-inner-border-collapse-focus: $ui-tab-inner-border-collapse-focus,
            $ui-inner-border-collapse-over: $ui-tab-inner-border-collapse-over,
            $ui-inner-border-collapse-active: $ui-tab-inner-border-collapse-active,
            $ui-inner-border-collapse-focus-over: $ui-tab-inner-border-collapse-focus-over,
            $ui-inner-border-collapse-focus-active: $ui-tab-inner-border-collapse-focus-active,
            $ui-inner-border-collapse-disabled: $ui-tab-inner-border-collapse-disabled,

            $ui-outline-width-focus: $ui-tab-outline-width-focus,
            $ui-outline-style-focus: $ui-tab-outline-style-focus,
            $ui-outline-color-focus: $ui-tab-outline-color-focus,
            $ui-outline-offset-focus: $ui-tab-outline-offset-focus,

            $ui-body-outline-width-focus: $ui-tab-body-outline-width-focus,
            $ui-body-outline-style-focus: $ui-tab-body-outline-style-focus,
            $ui-body-outline-color-focus: $ui-tab-body-outline-color-focus,

            $ui-icon-width: $ui-tab-icon-width,
            $ui-icon-height: $ui-tab-icon-height,
            $ui-icon-spacing: $ui-tab-icon-spacing,
            $ui-icon-background-position: $ui-tab-icon-background-position,

            $ui-glyph-color: $ui-tab-glyph-color,
            $ui-glyph-color-focus: $ui-tab-glyph-color-focus,
            $ui-glyph-color-over: $ui-tab-glyph-color-over,
            $ui-glyph-color-active: $ui-tab-glyph-color-active,
            $ui-glyph-color-focus-over: $ui-tab-glyph-color-focus-over,
            $ui-glyph-color-focus-active: $ui-tab-glyph-color-focus-active,
            $ui-glyph-color-disabled: $ui-tab-glyph-color-disabled,

            $ui-plain-glyph-color: $ui-tab-plain-glyph-color,
            $ui-plain-glyph-color-focus: $ui-tab-plain-glyph-color-focus,
            $ui-plain-glyph-color-over: $ui-tab-plain-glyph-color-over,
            $ui-plain-glyph-color-active: $ui-tab-plain-glyph-color-active,
            $ui-plain-glyph-color-focus-over: $ui-tab-plain-glyph-color-focus-over,
            $ui-plain-glyph-color-focus-active: $ui-tab-plain-glyph-color-focus-active,
            $ui-plain-glyph-color-disabled: $ui-tab-plain-glyph-color-disabled,

            $ui-glyph-opacity: $ui-tab-glyph-opacity,
            $ui-glyph-opacity-disabled: $ui-tab-glyph-opacity-disabled,

            $ui-opacity: $ui-tab-opacity,
            $ui-opacity-focus: $ui-tab-opacity-focus,
            $ui-opacity-over: $ui-tab-opacity-over,
            $ui-opacity-active: $ui-tab-opacity-active,
            $ui-opacity-focus-over: $ui-tab-opacity-focus-over,
            $ui-opacity-focus-active: $ui-tab-opacity-focus-active,
            $ui-opacity-disabled: $ui-tab-opacity-disabled,

            $ui-background-opacity: $ui-tab-background-opacity,
            $ui-background-opacity-focus: $ui-tab-background-opacity-focus,
            $ui-background-opacity-over: $ui-tab-background-opacity-over,
            $ui-background-opacity-active: $ui-tab-background-opacity-active,
            $ui-background-opacity-focus-over: $ui-tab-background-opacity-focus-over,
            $ui-background-opacity-focus-active: $ui-tab-background-opacity-focus-active,
            $ui-background-opacity-disabled: $ui-tab-background-opacity-disabled,

            $ui-text-opacity-disabled: $ui-tab-text-opacity-disabled,
            $ui-icon-opacity-disabled: $ui-tab-icon-opacity-disabled,

            $ui-closable-icon-width: $ui-tab-closable-icon-width,
            $ui-closable-icon-height: $ui-tab-closable-icon-height,
            $ui-closable-icon-top: $ui-tab-closable-icon-top,
            $ui-closable-icon-right: $ui-tab-closable-icon-right,
            $ui-closable-icon-spacing: $ui-tab-closable-icon-spacing,

            $ui-closable-icon-glyph-color: $ui-tab-closable-icon-glyph-color,
            $ui-closable-icon-glyph-color-focus: $ui-tab-closable-icon-glyph-color-focus,
            $ui-closable-icon-glyph-color-over: $ui-tab-closable-icon-glyph-color-over,
            $ui-closable-icon-glyph-color-active: $ui-tab-closable-icon-glyph-color-active,
            $ui-closable-icon-glyph-color-focus-over: $ui-tab-closable-icon-glyph-color-focus-over,
            $ui-closable-icon-glyph-color-focus-active: $ui-tab-closable-icon-glyph-color-focus-active,
            $ui-closable-icon-glyph-color-disabled: $ui-tab-closable-icon-glyph-color-disabled,

            $ui-plain-closable-icon-glyph-color: $ui-tab-plain-closable-icon-glyph-color,
            $ui-plain-closable-icon-glyph-color-focus: $ui-tab-plain-closable-icon-glyph-color-focus,
            $ui-plain-closable-icon-glyph-color-over: $ui-tab-plain-closable-icon-glyph-color-over,
            $ui-plain-closable-icon-glyph-color-active: $ui-tab-plain-closable-icon-glyph-color-active,
            $ui-plain-closable-icon-glyph-color-focus-over: $ui-tab-plain-closable-icon-glyph-color-focus-over,
            $ui-plain-closable-icon-glyph-color-focus-active: $ui-tab-plain-closable-icon-glyph-color-focus-active,
            $ui-plain-closable-icon-glyph-color-disabled: $ui-tab-plain-closable-icon-glyph-color-disabled,

            $ui-closable-icon-glyph: $ui-tab-closable-icon-glyph
        );
    }

    // When the tab border/background is the same color as the background color of the
    // tabbar (crisp) darker corners show up when the tab is rotated vertically in IE8.
    // Removing the background-image on the corners of the framing prevents this.
    @if $include-slicer-border-radius and
            ($ui-bar-background-color == $ui-tab-border-color) and
            ($ui-tab-border-color == $ui-tab-background-color) {
        .#{$prefix}tab-default-tl,
        .#{$prefix}tab-default-tc,
        .#{$prefix}tab-default-tr,
        .#{$prefix}tab-default-bl,
        .#{$prefix}tab-default-bc,
        .#{$prefix}tab-default-br {
            background-image: none;
        }
    }

    @if $include-tabbar-default-ui or $ui != 'default' {
        @include extjs-tab-bar-ui(
            $ui: $ui,

            $ui-strip-height: $ui-strip-height,
            $ui-strip-border-width: $ui-strip-border-width,
            $ui-strip-border-color: $ui-strip-border-color,
            $ui-strip-background-color: $ui-strip-background-color,

            $ui-border-width: $ui-bar-border-width,
            $ui-border-color: $ui-bar-border-color,
            $ui-padding: $ui-bar-padding,
            $ui-plain-padding: $ui-bar-plain-padding,
            $ui-background-color: $ui-bar-background-color,
            $ui-background-gradient: $ui-bar-background-gradient,
            $ui-scroller-width: $ui-bar-scroller-width,

            $ui-scroller-cursor: $ui-bar-scroller-cursor,
            $ui-scroller-cursor-disabled: $ui-bar-scroller-cursor-disabled,
            $ui-scroller-opacity: $ui-bar-scroller-opacity,
            $ui-scroller-opacity-over: $ui-bar-scroller-opacity-over,
            $ui-scroller-opacity-pressed: $ui-bar-scroller-opacity-pressed,
            $ui-scroller-opacity-disabled: $ui-bar-scroller-opacity-disabled,

            $ui-scroller-glyph-color: $ui-bar-scroller-glyph-color,
            $ui-plain-scroller-glyph-color: $ui-bar-plain-scroller-glyph-color,
            $ui-scroller-top-glyph: $ui-bar-scroller-top-glyph,
            $ui-scroller-right-glyph: $ui-bar-scroller-right-glyph,
            $ui-scroller-bottom-glyph: $ui-bar-scroller-bottom-glyph,
            $ui-scroller-left-glyph: $ui-bar-scroller-left-glyph,

            $ui-tab-height:
                if($ui-strip-height > 0, top($ui-strip-border-width), vertical($ui-tab-border-width)) +
                max($ui-tab-icon-height, $ui-tab-line-height) + vertical($ui-tab-padding)
        );
    }
}