/**
 * Creates a visual theme for a Tab Panel
 * @member Ext.tab.Panel
*/ 
@mixin extjs-tab-panel-ui(
    $ui,
    
    $ui-tab-background-color: $tab-base-color,
    $ui-tab-background-color-over: $tab-base-color-over,
    $ui-tab-background-color-active: $tab-base-color-active,
    $ui-tab-background-color-disabled: $tab-base-color-disabled,
    $ui-tab-border-radius: $tab-border-radius,
    $ui-tab-border-width: $tab-border-width,
    $ui-tab-margin: $tab-margin,
    $ui-tab-padding: $tab-padding,
    $ui-tab-text-padding: $tab-text-padding,
    $ui-tab-border-color: $tab-border-color,
    $ui-tab-border-color-over: $tab-border-color-over,
    $ui-tab-border-color-active: $tab-border-color-active,
    $ui-tab-border-color-disabled: $tab-border-color-disabled,
    $ui-tab-cursor: $tab-cursor,
    $ui-tab-cursor-disabled: $tab-cursor-disabled,
    $ui-tab-font-size: $tab-font-size,
    $ui-tab-font-size-over: $tab-font-size-over,
    $ui-tab-font-size-active: $tab-font-size-active,
    $ui-tab-font-size-disabled: $tab-font-size-disabled,
    $ui-tab-font-weight: $tab-font-weight,
    $ui-tab-font-weight-over: $tab-font-weight-over,
    $ui-tab-font-weight-active: $tab-font-weight-active,
    $ui-tab-font-weight-disabled: $tab-font-weight-disabled,
    $ui-tab-font-family: $tab-font-family,
    $ui-tab-font-family-over: $tab-font-family-over,
    $ui-tab-font-family-active: $tab-font-family-active,
    $ui-tab-font-family-disabled: $tab-font-family-disabled,
    $ui-tab-line-height: $tab-line-height,
    $ui-tab-color: $tab-color,
    $ui-tab-color-over: $tab-color-over,
    $ui-tab-color-active: $tab-color-active,
    $ui-tab-color-disabled: $tab-color-disabled,
    $ui-tab-background-gradient: $tab-background-gradient,
    $ui-tab-background-gradient-over: $tab-background-gradient-over,
    $ui-tab-background-gradient-active: $tab-background-gradient-active,
    $ui-tab-background-gradient-disabled: $tab-background-gradient-disabled,

    $ui-tab-inner-border-width: $tab-inner-border-width,
    $ui-tab-inner-border-color: $tab-inner-border-color,

    $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: $tab-glyph-color,
    $ui-tab-glyph-color-over: $tab-glyph-color-over,
    $ui-tab-glyph-color-active: $tab-glyph-color-active,
    $ui-tab-glyph-color-disabled: $tab-glyph-color-disabled,
    $ui-tab-glyph-opacity: $tab-glyph-opacity,
    $ui-tab-glyph-opacity-disabled: $tab-glyph-opacity-disabled,

    $ui-tab-opacity-disabled: $tab-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-plain-border-width: $tabbar-strip-plain-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-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-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
) {
    @include x-frame(
        $cls: 'tab',
        $ui: $ui + '-top',
        $border-radius: $ui-tab-border-radius,
        $border-width: $ui-tab-border-width,
        $background-color: $ui-tab-background-color,
        $background-gradient: $ui-tab-background-gradient,
        $background-direction: top,
        $padding: $ui-tab-padding,
        $table: true
    );

    @include x-frame(
        $cls: 'tab',
        $ui: $ui + '-bottom',
        $border-radius: rotate180($ui-tab-border-radius),
        $border-width: rotate180($ui-tab-border-width),
        $background-color: $ui-tab-background-color,
        $background-gradient: $ui-tab-background-gradient,
        $background-direction: bottom,
        $padding: $ui-tab-padding,
        $table: true
    );

    @include x-frame(
        $cls: 'tab',
        $ui: $ui + '-left',
        $border-radius: $ui-tab-border-radius,
        $border-width: $ui-tab-border-width,
        $background-color: $ui-tab-background-color,
        $background-gradient: $ui-tab-background-gradient,
        $background-direction: top,
        $padding: $ui-tab-padding,
        $table: true,
        $img-ui: $ui + '-top'
    );

    @include x-frame(
        $cls: 'tab',
        $ui: $ui + '-right',
        $border-radius: $ui-tab-border-radius,
        $border-width: $ui-tab-border-width,
        $background-color: $ui-tab-background-color,
        $background-gradient: $ui-tab-background-gradient,
        $background-direction: top,
        $padding: $ui-tab-padding,
        $table: true,
        $img-ui: $ui + '-top'
    );

    .#{$prefix}tab-#{$ui} {
        border-color: $ui-tab-border-color;
        margin: $ui-tab-margin;
        @if $ui-tab-cursor != null { cursor: $ui-tab-cursor; }

        .#{$prefix}tab-inner {
            font-size: $ui-tab-font-size;
            font-weight: $ui-tab-font-weight;
            font-family: $ui-tab-font-family;
            color: $ui-tab-color;
            line-height: $ui-tab-line-height;
            @if $ui-tab-text-padding != 0 {
                padding: $ui-tab-text-padding;
            }
        }
        .#{$prefix}tab-icon-el {
            width: $ui-tab-icon-width;
            height: $ui-tab-icon-height;
            line-height: $ui-tab-icon-height;
            background-position: $ui-tab-icon-background-position;
        }

        .#{$prefix}tab-glyph {
            font-size: $ui-tab-icon-height;
            color: $ui-tab-glyph-color;
            @if $ui-tab-glyph-opacity != 1 {
                // do not use the opacity mixin because we do not want IE's filter version of
                // opacity to be included.  We emulate the opacity setting in IE8m by mixing
                // the icon color into the background color. (see below)
                opacity: $ui-tab-glyph-opacity;
            }
            // In IE8 and below when a glyph contains partially transparent pixels, we 
            // can't apply an opacity filter to the glyph element, because IE8m will render
            //  the partially transparent pixels of the glyph as black. To work around this,
            // we emulate the approximate color that the glyph would have if it had opacity
            // applied by mixing the glyph color with the tab's background-color.
            .#{$prefix}ie8m & {
                color: mix($ui-tab-glyph-color, $ui-tab-background-color, $ui-tab-glyph-opacity * 100);
            }
        }

        @if $include-ie {
            // EXTJSIV-8765: vertical tabs get shifted to the left when focused.  To work
            // around this, we move the left padding to the tab-button el.
            .#{$prefix}strict .#{$prefix}ie9 .#{$prefix}tab-bar-vertical & {
                padding-left: 0;

                .#{$prefix}tab-button {
                    padding-left: left($ui-tab-padding);
                }

                .#{$prefix}tab-icon-el {
                    left: left($ui-tab-padding);
                }
            }
        }
    }

    .#{$prefix}tab-#{$ui}-icon {
        .#{$prefix}tab-inner {
            // even though there is no text we set a width and padding as buttons shrink-wrap around this element
            width: $ui-tab-icon-width;
        }
    }

    @if $include-rtl {
        .#{$prefix}rtl.#{$prefix}tab-#{$ui} {
            margin: rtl($ui-tab-margin);            
        }
    }

    @if $include-rtl {
        .#{$prefix}rtl.#{$prefix}tab-#{$ui} {
            margin: rtl($ui-tab-margin);
        }
    }

    .#{$prefix}tab-#{$ui}-left {
        margin: rtl($ui-tab-margin);
    }

    @if $include-rtl {
        .#{$prefix}rtl.#{$prefix}tab-#{$ui}-left {
            margin: $ui-tab-margin;
        }
    }

    .#{$prefix}tab-#{$ui}-top,
    .#{$prefix}tab-#{$ui}-left,
    .#{$prefix}tab-#{$ui}-right {
        border-bottom: top($ui-strip-border-width) solid $ui-strip-border-color;

        @if $ui-tab-background-gradient != null {
            @include background-gradient($ui-tab-background-color, $ui-tab-background-gradient, top);
        
            @if not $supports-gradients or $compile-all {
                .#{$prefix}nlg & {
                    background-image: slicer-background-image(tab-#{$ui}-top, 'tab/tab-#{$ui}-top-bg');
                }
            }
        }

        @if $ui-tab-inner-border-width != 0 {
            @include inner-border(
                $width: $ui-tab-inner-border-width,
                $color: $ui-tab-inner-border-color
            );
        }
    }

    .#{$prefix}tab-#{$ui}-bottom {
        border-top: top($ui-strip-border-width) solid $ui-strip-border-color;

        @if $ui-tab-background-gradient != null {
            @include background-gradient($ui-tab-background-color, $ui-tab-background-gradient, bottom);
        
            @if not $supports-gradients or $compile-all {
                .#{$prefix}nlg & {
                    background-image: slicer-background-image(tab-#{$ui}-bottom, 'tab/tab-#{$ui}-bottom-bg');
                }
            }
        }

        @if $ui-tab-inner-border-width != 0 {
            @include inner-border(
                $width: flip-vertical($ui-tab-inner-border-width),
                $color: $ui-tab-inner-border-color
            );
        }
    }

    .#{$prefix}tab-#{$ui}-left {
        @include rotate-element($angle: 270);

        @if $tab-left-rotate-direction == 'right' {
            .#{$prefix}tab-wrap {
                @include rotate-element($angle: 180);
            }
        }
    }

    @if $include-rtl {
        .#{$prefix}rtl.#{$prefix}tab-#{$ui}-left {
            @include rotate-element($angle: 90);
        }
    }

    .#{$prefix}tab-#{$ui}-right {
        @include rotate-element($angle: 90);

        @if $tab-right-rotate-direction == 'left' {
            .#{$prefix}tab-wrap {
                @include rotate-element($angle: 180);
            }
        }
    }

    @if $include-rtl {
        .#{$prefix}rtl.#{$prefix}tab-#{$ui}-right {
            @include rotate-element($angle: 270);
        }
    }

    .#{$prefix}tab-#{$ui}-icon-text-left {
        .#{$prefix}tab-inner {
            padding-left: $ui-tab-icon-width + $ui-tab-icon-spacing + left($ui-tab-text-padding);
        }
    }

    @if $include-rtl {
        .#{$prefix}rtl.#{$prefix}tab-#{$ui}-icon-text-left {
            .#{$prefix}tab-inner {
                padding-left: 0;
                padding-right: $ui-tab-icon-width + $ui-tab-icon-spacing + left($ui-tab-text-padding);
            }
        }
    }

    .#{$prefix}tab-#{$ui}-over {
        @if $ui-tab-border-color-over != $ui-tab-border-color {
            border-color: $ui-tab-border-color-over;
        }

        @if $ui-tab-background-color-over != $ui-tab-background-color {
            background-color: $ui-tab-background-color-over;
        }

        .#{$prefix}tab-inner {
            @if $ui-tab-color-over != $ui-tab-color {
                color: $ui-tab-color-over;
            }
            @if $ui-tab-font-weight-over != $ui-tab-font-weight {
                font-weight: $ui-tab-font-weight-over;
            }
            @if $ui-tab-font-size-over != $ui-tab-font-size {
                font-size: $ui-tab-font-size-over;
            }
            @if $ui-tab-font-family-over != $ui-tab-font-family {
                font-family: $ui-tab-font-family-over;
            }
        }

        .#{$prefix}tab-glyph {
            color: $ui-tab-glyph-color-over;
            // In IE8 and below when a glyph contains partially transparent pixels, we 
            // can't apply an opacity filter to the glyph element, because IE8m will render
            //  the partially transparent pixels of the glyph as black. To work around this,
            // we emulate the approximate color that the glyph would have if it had opacity
            // applied by mixing the glyph color with the tab's background-color.
            .#{$prefix}ie8m & {
                color: mix($ui-tab-glyph-color-over, $ui-tab-background-color-over, $ui-tab-glyph-opacity * 100);
            }
        }
    }

    @if $ui-tab-background-gradient-over != null {
        .#{$prefix}tab-#{$ui}-top-over,
        .#{$prefix}tab-#{$ui}-left-over,
        .#{$prefix}tab-#{$ui}-right-over {
            @include background-gradient($ui-tab-background-color-over, $ui-tab-background-gradient-over, top);
        
            @if not $supports-gradients or $compile-all {
                .#{$prefix}nlg & {
                    background-image: slicer-background-image(tab-#{$ui}-top-over, 'tab/tab-#{$ui}-top-over-bg');
                }
            }
        }
        .#{$prefix}tab-#{$ui}-bottom-over {
            @include background-gradient($ui-tab-background-color-over, $ui-tab-background-gradient-over, bottom);

            @if not $supports-gradients or $compile-all {
                .#{$prefix}nlg & {
                    background-image: slicer-background-image(tab-#{$ui}-bottom-over, 'tab/tab-#{$ui}-bottom-over-bg');
                }
            }
        }
    }

    .#{$prefix}tab-#{$ui}-active {
        @if $ui-tab-border-color-active != $ui-tab-border-color {
            border-color: $ui-tab-border-color-active;
        }
        background-color: $ui-tab-background-color-active;

        .#{$prefix}tab-inner {
            @if $ui-tab-color-active != $ui-tab-color {
                color: $ui-tab-color-active;
            }
            @if $ui-tab-font-weight-active != $ui-tab-font-weight {
                font-weight: $ui-tab-font-weight-active;
            }
            @if $ui-tab-font-size-active != $ui-tab-font-size {
                font-size: $ui-tab-font-size-active;
            }
            @if $ui-tab-font-family-active != $ui-tab-font-family {
                font-family: $ui-tab-font-family-active;
            }
        }

        .#{$prefix}tab-glyph {
            color: $ui-tab-glyph-color-active;
            // In IE8 and below when a glyph contains partially transparent pixels, we 
            // can't apply an opacity filter to the glyph element, because IE8m will render
            //  the partially transparent pixels of the glyph as black. To work around this,
            // we emulate the approximate color that the glyph would have if it had opacity
            // applied by mixing the glyph color with the tab's background-color.
            .#{$prefix}ie8m & {
                color: mix($ui-tab-glyph-color-active, $ui-tab-background-color-active, $ui-tab-glyph-opacity * 100);
            }
        }
    }

    .#{$prefix}tab-#{$ui}-top-active,
    .#{$prefix}tab-#{$ui}-left-active,
    .#{$prefix}tab-#{$ui}-right-active {
        border-bottom-color: $ui-strip-background-color;
        @if $ui-tab-background-gradient-active != null {
            @include background-gradient($ui-tab-background-color-active, $ui-tab-background-gradient-active, top);

            @if not $supports-gradients or $compile-all {
                .#{$prefix}nlg & {
                    background-image: slicer-background-image(tab-#{$ui}-top-active, 'tab/tab-#{$ui}-top-active-bg');
                }
            }
        }
    }

    .#{$prefix}tab-#{$ui}-bottom-active {
        border-top-color: $ui-strip-background-color;
        @if $ui-tab-background-gradient-active != null {
            @include background-gradient($ui-tab-background-color-active, $ui-tab-background-gradient-active, bottom);

            @if not $supports-gradients or $compile-all {
                .#{$prefix}nlg & {
                    background-image: slicer-background-image(tab-#{$ui}-bottom-active, 'tab/tab-#{$ui}-bottom-active-bg');
                }
            }
        }
    }

    .#{$prefix}tab-#{$ui}-disabled {
        @if $ui-tab-border-color-disabled != $ui-tab-border-color {
            border-color: $ui-tab-border-color-disabled;
        }

        @if $ui-tab-opacity-disabled != 1 {
            @include opacity($ui-tab-opacity-disabled);
        }

        @if $ui-tab-cursor-disabled != null {
            cursor: $ui-tab-cursor-disabled;
        }

        .#{$prefix}tab-inner {
            @if $ui-tab-color-disabled != $ui-tab-color {
                color: $ui-tab-color-disabled;
            }
            @if $ui-tab-font-weight-disabled != $ui-tab-font-weight {
                font-weight: $ui-tab-font-weight-disabled;
            }
            @if $ui-tab-font-size-disabled != $ui-tab-font-size {
                font-size: $ui-tab-font-size-disabled;
            }
            @if $ui-tab-font-family-disabled != $ui-tab-font-family {
                font-family: $ui-tab-font-family-disabled;
            }
            @if $ui-tab-text-opacity-disabled != 1 {
                @include opacity($ui-tab-text-opacity-disabled);
            }
        }
        
        @if $ui-tab-icon-opacity-disabled != 1 {
            .#{$prefix}tab-icon-el {
                @include opacity($ui-tab-icon-opacity-disabled);
            }
        }

        .#{$prefix}tab-glyph {
            color: $ui-tab-glyph-color-disabled;
            @if $ui-tab-glyph-opacity-disabled != 1 {
                // do not use the opacity mixin because we do not want IE's filter version of
                // opacity to be included.  We emulate the opacity setting in IE8m by mixing
                // the icon color into the background color. (see below)
                opacity: $ui-tab-glyph-opacity-disabled;
            }
            filter: none; // override opacity from tab-icon-el
            // In IE8 and below when a glyph contains partially transparent pixels, we 
            // can't apply an opacity filter to the glyph element, because IE8m will render
            //  the partially transparent pixels of the glyph as black. To work around this,
            // we emulate the approximate color that the glyph would have if it had opacity
            // applied by mixing the glyph color with the tab's background-color.
            .#{$prefix}ie8m & {
                color: mix($ui-tab-glyph-color-disabled, $ui-tab-background-color-disabled, $ui-tab-glyph-opacity-disabled * 100);
            }
        }
    }

    @if $ui-tab-background-gradient-disabled != null {
        .#{$prefix}tab-#{$ui}-top-disabled,
        .#{$prefix}tab-#{$ui}-left-disabled,
        .#{$prefix}tab-#{$ui}-right-disabled {
            @include background-gradient($ui-tab-background-color-disabled, $ui-tab-background-gradient-disabled, top);

            @if not $supports-gradients or $compile-all {
                .#{$prefix}nlg & {
                    background-image: slicer-background-image(tab-#{$ui}-top-disabled, 'tab/tab-#{$ui}-top-disabled-bg');
                }
            }
        }
        .#{$prefix}tab-#{$ui}-bottom-disabled {
            @include background-gradient($ui-tab-background-color-disabled, $ui-tab-background-gradient-disabled, bottom);

            @if not $supports-gradients or $compile-all {
                .#{$prefix}nlg & {
                    background-image: slicer-background-image(tab-#{$ui}-bottom-disabled, 'tab/tab-#{$ui}-bottom-disabled-bg');
                }
            }
        }
    }

    @if not $supports-border-radius or $compile-all {
        .#{$prefix}tab-#{$ui}-top-over,
        .#{$prefix}tab-#{$ui}-left-over,
        .#{$prefix}tab-#{$ui}-right-over {
            .#{$prefix}frame-tl,
            .#{$prefix}frame-bl,
            .#{$prefix}frame-tr,
            .#{$prefix}frame-br,
            .#{$prefix}frame-tc,
            .#{$prefix}frame-bc {
                background-image: slicer-corner-sprite(tab-#{$ui}-top-over, 'tab/tab-#{$ui}-top-over-corners');
            }
            .#{$prefix}frame-ml,
            .#{$prefix}frame-mr {
                background-image: slicer-sides-sprite(tab-#{$ui}-top-over, 'tab/tab-#{$ui}-top-over-sides');
            }
            .#{$prefix}frame-mc {
                background-color: $ui-tab-background-color-over;
                @if $ui-tab-background-gradient-over != null {
                    background-repeat: repeat-x;
                    background-image: slicer-frame-background-image(tab-#{$ui}-top-over, 'tab/tab-#{$ui}-top-over-fbg');
                }
            }
        }

        .#{$prefix}tab-#{$ui}-bottom-over {
            .#{$prefix}frame-tl,
            .#{$prefix}frame-bl,
            .#{$prefix}frame-tr,
            .#{$prefix}frame-br,
            .#{$prefix}frame-tc,
            .#{$prefix}frame-bc {
                background-image: slicer-corner-sprite(tab-#{$ui}-bottom-over, 'tab/tab-#{$ui}-bottom-over-corners');
            }
            .#{$prefix}frame-ml,
            .#{$prefix}frame-mr {
                background-image: slicer-sides-sprite(tab-#{$ui}-bottom-over, 'tab/tab-#{$ui}-bottom-over-sides');
            }
            .#{$prefix}frame-mc {
                background-color: $ui-tab-background-color-over;
                @if $ui-tab-background-gradient-over != null {
                    background-repeat: repeat-x;
                    background-image: slicer-frame-background-image(tab-#{$ui}-bottom-over, 'tab/tab-#{$ui}-bottom-over-fbg');
                }
            }
        }

        .#{$prefix}tab-#{$ui}-top-active,
        .#{$prefix}tab-#{$ui}-left-active,
        .#{$prefix}tab-#{$ui}-right-active {
            .#{$prefix}frame-tl,
            .#{$prefix}frame-bl,
            .#{$prefix}frame-tr,
            .#{$prefix}frame-br,
            .#{$prefix}frame-tc,
            .#{$prefix}frame-bc {
                background-image: slicer-corner-sprite(tab-#{$ui}-top-active, 'tab/tab-#{$ui}-top-active-corners');
            }
            .#{$prefix}frame-ml,
            .#{$prefix}frame-mr {
                background-image: slicer-sides-sprite(tab-#{$ui}-top-active, 'tab/tab-#{$ui}-top-active-sides');
            }
            .#{$prefix}frame-mc {
                background-color: $ui-tab-background-color-active;
                @if $ui-tab-background-gradient-active != null {
                    background-repeat: repeat-x;
                    background-image: slicer-frame-background-image(tab-#{$ui}-top-active, 'tab/tab-#{$ui}-top-active-fbg');
                }
            }
        }

        .#{$prefix}tab-#{$ui}-bottom-active {
            .#{$prefix}frame-tl,
            .#{$prefix}frame-bl,
            .#{$prefix}frame-tr,
            .#{$prefix}frame-br,
            .#{$prefix}frame-tc,
            .#{$prefix}frame-bc {
                background-image: slicer-corner-sprite(tab-#{$ui}-bottom-active, 'tab/tab-#{$ui}-bottom-active-corners');
            }
            .#{$prefix}frame-ml,
            .#{$prefix}frame-mr {
                background-image: slicer-sides-sprite(tab-#{$ui}-bottom-active, 'tab/tab-#{$ui}-bottom-active-sides');
            }
            .#{$prefix}frame-mc {
                background-color: $ui-tab-background-color-active;
                @if $ui-tab-background-gradient-active != null {
                    background-repeat: repeat-x;
                    background-image: slicer-frame-background-image(tab-#{$ui}-bottom-active, 'tab/tab-#{$ui}-bottom-active-fbg');
                }
            }
        }

        .#{$prefix}tab-#{$ui}-top-disabled,
        .#{$prefix}tab-#{$ui}-left-disabled,
        .#{$prefix}tab-#{$ui}-right-disabled {
            .#{$prefix}frame-tl,
            .#{$prefix}frame-bl,
            .#{$prefix}frame-tr,
            .#{$prefix}frame-br,
            .#{$prefix}frame-tc,
            .#{$prefix}frame-bc {
                background-image: slicer-corner-sprite(tab-#{$ui}-top-disabled, 'tab/tab-#{$ui}-top-disabled-corners');
            }
            .#{$prefix}frame-ml,
            .#{$prefix}frame-mr {
                background-image: slicer-sides-sprite(tab-#{$ui}-top-disabled, 'tab/tab-#{$ui}-top-disabled-sides');
            }
            .#{$prefix}frame-mc {
                background-color: $ui-tab-background-color-disabled;
                @if $ui-tab-background-gradient-disabled != null {
                    background-repeat: repeat-x;
                    background-image: slicer-frame-background-image(tab-#{$ui}-top-disabled, 'tab/tab-#{$ui}-top-disabled-fbg');
                }
            }
        }

        .#{$prefix}tab-#{$ui}-bottom-disabled {
            .#{$prefix}frame-tl,
            .#{$prefix}frame-bl,
            .#{$prefix}frame-tr,
            .#{$prefix}frame-br,
            .#{$prefix}frame-tc,
            .#{$prefix}frame-bc {
                background-image: slicer-corner-sprite(tab-#{$ui}-bottom-disabled, 'tab/tab-#{$ui}-bottom-disabled-corners');
            }
            .#{$prefix}frame-ml,
            .#{$prefix}frame-mr {
                background-image: slicer-sides-sprite(tab-#{$ui}-bottom-disabled, 'tab/tab-#{$ui}-bottom-disabled-sides');
            }
            .#{$prefix}frame-mc {
                background-color: $ui-tab-background-color-disabled;
                @if $ui-tab-background-gradient-disabled != null {
                    background-repeat: repeat-x;
                    background-image: slicer-frame-background-image(tab-#{$ui}-bottom-disabled, 'tab/tab-#{$ui}-bottom-disabled-fbg');
                }
            }
        }

        $nbr-tab-border-bottom-width: top($ui-strip-border-width);
        @if $nbr-tab-border-bottom-width != 0 { 
            .#{$prefix}nbr {
                // frame.scss sets border:0 !important on the tab element in nbr mode.  We
                // need an override  with !important to add the bottom-border back since
                // tabs are special and need the bottom-border to hide the tab-strip's
                // border when the tab is active.
                // This needs to be wrapped in an x-nbr rule to be more specific than
                // the rule that removes the border in x-frame
                .#{$prefix}tab-#{$ui}-top, 
                .#{$prefix}tab-#{$ui}-left, 
                .#{$prefix}tab-#{$ui}-right { 
                    border-bottom-width: $nbr-tab-border-bottom-width !important;
                }
                .#{$prefix}tab-#{$ui}-bottom {
                    border-top-width: $nbr-tab-border-bottom-width !important;
                }
            }
        }
    }

    // Tab Bar
    .#{$prefix}tab-bar-#{$ui} {
        @if $ui-bar-border-width != 0 {
            border-style: solid;
            border-color: $ui-bar-border-color;
        }
    }
    .#{$prefix}tab-bar-#{$ui}-top {
        padding: $ui-bar-padding;
        @if $ui-bar-border-width != 0 {
            border-width: $ui-bar-border-width;
        }
    }

    .#{$prefix}tab-bar-#{$ui}-bottom {
        padding: flip-vertical($ui-bar-padding);
        @if $ui-bar-border-width != 0 {
            border-width: flip-vertical($ui-bar-border-width);
        }
    }

    .#{$prefix}tab-bar-#{$ui}-left {
        padding: rotate270($ui-bar-padding);
        @if $ui-bar-border-width != 0 {
            border-width: rotate270($ui-bar-border-width);
        }
    }

    .#{$prefix}tab-bar-#{$ui}-right {
        padding: rotate90($ui-bar-padding);
        @if $ui-bar-border-width != 0 {
            border-width: rotate90($ui-bar-border-width);
        }
    }

    // tabbar needs a fixed height so that the tabbar doesn't lose height when all tabs are closed...
    // this works because shrinkWrapping with no children measures the body element
    $tabbar-body-height: $ui-tab-line-height + vertical($ui-tab-text-padding) + 
        vertical($ui-tab-padding) + vertical($ui-tab-border-width) + $ui-strip-height;
    .#{$prefix}tab-bar-body-#{$ui}-horizontal {
        height: $tabbar-body-height;

        @if $include-ie {
            .#{$prefix}strict .#{$prefix}ie6 &,
            .#{$prefix}strict .#{$prefix}ie7 & {
                height: $tabbar-body-height - $tabbar-strip-height + vertical($ui-strip-border-width);
            }
        }
    }

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

        @if $include-ie {
            .#{$prefix}strict .#{$prefix}ie6 &,
            .#{$prefix}strict .#{$prefix}ie7 & {
                width: $tabbar-body-height - $tabbar-strip-height + vertical($ui-strip-border-width);
            }
        }
    }

    .#{$prefix}tab-bar-body-#{$ui}-top {
        padding-bottom: max($ui-strip-height - vertical($ui-strip-border-width), 0);
    }

    .#{$prefix}tab-bar-body-#{$ui}-bottom {
        padding-top: max($ui-strip-height - vertical($ui-strip-border-width), 0);
    }

    .#{$prefix}tab-bar-body-#{$ui}-left {
        padding-right: max($ui-strip-height - vertical($ui-strip-border-width), 0);
    }

    .#{$prefix}tab-bar-body-#{$ui}-right {
        padding-left: max($ui-strip-height - vertical($ui-strip-border-width), 0);
    }

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

    @if $include-ie {
        .#{$prefix}tab-bar-strip-#{$ui}-horizontal {
            .#{$prefix}strict .#{$prefix}ie6 &,
            .#{$prefix}strict .#{$prefix}ie7 & {
                height: $ui-strip-height - vertical($ui-strip-border-width);
            }
        }
    }

    @if $include-ie {
        .#{$prefix}tab-bar-strip-#{$ui}-vertical {
            .#{$prefix}strict .#{$prefix}ie6 &,
            .#{$prefix}strict .#{$prefix}ie7 & {
                width: $ui-strip-height - vertical($ui-strip-border-width);
            }
        }
    }

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

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

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

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

    .#{$prefix}tab-bar-#{$ui} {
        background-color: $ui-bar-background-color;
    }

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

            @if not $supports-gradients or $compile-all {
                .#{$prefix}nlg & {
                    background-image: slicer-background-image(tab-bar-#{$ui}-top, 'tab-bar/tab-bar-#{$ui}-top-bg');
                }
            }
        }

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

            @if not $supports-gradients or $compile-all {
                .#{$prefix}nlg & {
                    background-image: slicer-background-image(tab-bar-#{$ui}-bottom, 'tab-bar/tab-bar-#{$ui}-bottom-bg');
                }
            }
        }

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

            @if not $supports-gradients or $compile-all {
                .#{$prefix}nlg & {
                    background-image: slicer-background-image(tab-bar-#{$ui}-left, 'tab-bar/tab-bar-#{$ui}-left-bg');
                }
            }
        }

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

            @if not $supports-gradients or $compile-all {
                .#{$prefix}nlg & {
                    background-image: slicer-background-image(tab-bar-#{$ui}-right, 'tab-bar/tab-bar-#{$ui}-right-bg');
                }
            }
        }
    }

    .#{$prefix}tab-#{$ui} {
        .#{$prefix}tab-close-btn {
            width: $ui-tab-closable-icon-width;
            height: $ui-tab-closable-icon-height;
            background-image: theme-background-image('tab/tab-#{$ui}-close');
            @if $tab-closable-icon-opacity != 1 {
                @include opacity($tab-closable-icon-opacity);
            }
        }

        // include the element name since :hover causes performance issues in IE7 and 8 otherwise
        a.#{$prefix}tab-close-btn:hover {
            @if  $tab-closable-icon-opacity-over != $tab-closable-icon-opacity {
                @include opacity($tab-closable-icon-opacity-over);
            }
            @if $tabbar-closable-icon-include-hover-background-position {
                background-position: (-$tab-closable-icon-width) 0;
            }
        }
    }

    .#{$prefix}tab-#{$ui} .#{$prefix}tab-close-btn {
        top: $ui-tab-closable-icon-top;
        right: $ui-tab-closable-icon-right;
    }

    @if $include-rtl {
        .#{$prefix}rtl.#{$prefix}tab-#{$ui} .#{$prefix}tab-close-btn {
            right: auto;
            left: $ui-tab-closable-icon-right;
        }
    }

    @if $tab-left-rotate-direction == 'right' {
        .#{$prefix}tab-#{$ui}-left .#{$prefix}tab-close-btn {
            top: auto;
            right: auto;
            bottom: $ui-tab-closable-icon-top;
            left: $ui-tab-closable-icon-right;
        }

        @if $include-rtl {
            .#{$prefix}rtl.#{$prefix}tab-#{$ui}-left .#{$prefix}tab-close-btn {
                left: auto;
                right: $ui-tab-closable-icon-right;
            }
        }
    }

    @if $tab-right-rotate-direction == 'left' {
        .#{$prefix}tab-#{$ui}-right .#{$prefix}tab-close-btn {
            top: auto;
            right: auto;
            bottom: $ui-tab-closable-icon-top;
            left: $ui-tab-closable-icon-right;
        }

        @if $include-rtl {
            .#{$prefix}rtl.#{$prefix}tab-#{$ui}-right .#{$prefix}tab-close-btn {
                left: auto;
                right: $ui-tab-closable-icon-right;
            }
        }
    }

    //Include the tab-bar ancestor cls to raise the specificity to equal the :hover 
    .#{$prefix}tab-bar .#{$prefix}tab-#{$ui}-disabled a.#{$prefix}tab-close-btn {
        @if $tab-closable-icon-opacity-disabled != $tab-closable-icon-opacity or $tab-closable-icon-opacity-disabled != $tab-closable-icon-opacity-over {
            @include opacity($tab-closable-icon-opacity-disabled);
        }
        @if $tabbar-closable-icon-include-hover-background-position {
            background-position: 0 0;
        }
    }

    @if $tabbar-closable-icon-include-pressed-background-position {
        //Include the tab-bar ancestor cls to raise the specificity to equal the :hover 
        .#{$prefix}tab-bar .#{$prefix}tab-#{$ui}-pressed a.#{$prefix}tab-close-btn {
            background-position: (-$ui-tab-closable-icon-width * 2) 0;
        }
    }

    .#{$prefix}tab-#{$ui}-closable .#{$prefix}tab-wrap {
        padding-right: $ui-tab-closable-icon-width + $ui-tab-closable-icon-spacing;
    }

    @if $include-rtl {
        .#{$prefix}rtl.#{$prefix}tab-#{$ui}-closable .#{$prefix}tab-wrap {
            padding-right: 0px;
            padding-left: $ui-tab-closable-icon-width + $ui-tab-closable-icon-spacing;
        }
    }

    @if $include-ie {
        .#{$prefix}ie9m {
            @if $tab-left-rotate-direction == 'right' {
                .#{$prefix}tab-#{$ui}-closable-left .#{$prefix}tab-icon-el {
                    left: auto;
                    right: 0;
                }

                @if $include-rtl {
                    .#{$prefix}rtl.#{$prefix}tab-#{$ui}-closable-left .#{$prefix}tab-icon-el {
                        right: auto;
                        left: 0;
                    }
                }
            }

            @if $tab-right-rotate-direction == 'left' {
                .#{$prefix}tab-#{$ui}-closable-right .#{$prefix}tab-icon-el {
                    left: auto;
                    right: 0;
                }

                @if $include-rtl {
                    .#{$prefix}rtl.#{$prefix}tab-#{$ui}-closable-right .#{$prefix}tab-icon-el {
                        right: auto;
                        left: 0;
                    }
                }
            }
        }
    }

    $needs-transparency-fix: (($ui-bar-scroller-opacity != 1 or $ui-bar-scroller-opacity-over != 1 or
        $ui-bar-scroller-opacity-pressed != 1) and $ui-bar-background-gradient == null);
    .#{$prefix}tab-bar-#{$ui} {
        .#{$prefix}box-scroller {
            cursor: $ui-bar-scroller-cursor;
            @if $ui-bar-scroller-opacity != 1 {
                @include opacity($ui-bar-scroller-opacity);
            }
            @if $needs-transparency-fix {
                // EXTJSIV-8846: partially transparent png images do not display correctly
                // in winXP/IE8m 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-bar-background-color;
            }
        }

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

        @if $ui-bar-scroller-opacity-over != 1 {
            .#{$prefix}box-scroller-hover {
                @include opacity($ui-bar-scroller-opacity-over);
            }
        }

        @if $ui-bar-scroller-opacity-pressed != 1 {
            .#{$prefix}box-scroller-pressed {
                @include opacity($ui-bar-scroller-opacity-pressed);
            }
        }

        $scroller-width: $ui-bar-scroller-width;
        $scroller-height: $ui-tab-line-height + vertical($ui-tab-text-padding) +
            vertical($ui-tab-padding) + vertical($ui-tab-border-width);

        .#{$prefix}tabbar-scroll-left,
        .#{$prefix}tabbar-scroll-right {
            height: $scroller-height;
            width: $scroller-width;
        }

        .#{$prefix}tabbar-scroll-top,
        .#{$prefix}tabbar-scroll-bottom {
            width: $scroller-height;
            height: $scroller-width;
        }
        
    }

    .#{$prefix}box-scroller {
        .#{$prefix}tab-bar-#{$ui}-bottom & {
            margin-top: top($tabbar-strip-border-width);
        }

        .#{$prefix}tab-bar-#{$ui}-right & {
            margin-left: top($tabbar-strip-border-width);
        }
        
        @if $include-rtl {
            .#{$prefix}rtl.#{$prefix}tab-bar-#{$ui}-right & {
                margin-left: 0;
            }
            .#{$prefix}rtl.#{$prefix}tab-bar-#{$ui}-left & {
                margin-right: top($tabbar-strip-border-width);
            }
        }
    }

    @if $tabbar-scroller-symmetrical-icons {
        .#{$prefix}tab-bar-#{$ui} {
            .#{$prefix}tabbar-scroll-left {
                background-image: theme-background-image('tab-bar/#{$ui}-scroll-left');
            }

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

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

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

        @if $include-rtl {
            .#{$prefix}rtl.#{$prefix}tab-bar-#{$ui} {
                .#{$prefix}tabbar-scroll-left {
                    background-image: theme-background-image('tab-bar/#{$ui}-scroll-right');
                }
                .#{$prefix}tabbar-scroll-right {
                    background-image: theme-background-image('tab-bar/#{$ui}-scroll-left');
                }
            }
        }

        @if $tabbar-scroller-include-plain-icon {
            .#{$prefix}tab-bar-#{$ui} .#{$prefix}box-scroller-plain {
                .#{$prefix}tabbar-scroll-left {
                    background-image: theme-background-image('tab-bar/#{$ui}-plain-scroll-left');
                }

                .#{$prefix}tabbar-scroll-right {
                    background-image: theme-background-image('tab-bar/#{$ui}-plain-scroll-right');
                }

                .#{$prefix}tabbar-scroll-top {
                    background-image: theme-background-image('tab-bar/#{$ui}-plain-scroll-top');
                }

                .#{$prefix}tabbar-scroll-bottom {
                    background-image: theme-background-image('tab-bar/#{$ui}-plain-scroll-bottom');
                }
            }

            @if $include-rtl {
                .#{$prefix}rtl.#{$prefix}tab-bar-#{$ui} .#{$prefix}box-scroller-plain {
                    .#{$prefix}tabbar-scroll-left {
                        background-image: theme-background-image('tab-bar/#{$ui}-plain-scroll-right');
                    }

                    .#{$prefix}tabbar-scroll-right {
                        background-image: theme-background-image('tab-bar/#{$ui}-plain-scroll-left');
                    }
                }
            }
        }
    } @else {
        .#{$prefix}tab-bar-#{$ui}-top {
            .#{$prefix}tabbar-scroll-left {
                background-image: theme-background-image('tab-bar/#{$ui}-scroll-left-top');
            }
            .#{$prefix}tabbar-scroll-right {
                background-image: theme-background-image('tab-bar/#{$ui}-scroll-right-top');
            }
        }

        @if $include-rtl {
            .#{$prefix}rtl.#{$prefix}tab-bar-#{$ui}-top {
                .#{$prefix}tabbar-scroll-left {
                    background-image: theme-background-image('tab-bar/#{$ui}-scroll-right-top');
                }
                .#{$prefix}tabbar-scroll-right {
                    background-image: theme-background-image('tab-bar/#{$ui}-scroll-left-top');
                }
            }
        }

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

        @if $include-rtl {
            .#{$prefix}rtl.#{$prefix}tab-bar-#{$ui}-bottom {
                .#{$prefix}tabbar-scroll-left {
                    background-image: theme-background-image('tab-bar/#{$ui}-scroll-right-bottom');
                }
                .#{$prefix}tabbar-scroll-right {
                    background-image: theme-background-image('tab-bar/#{$ui}-scroll-left-bottom');
                }
            }
        }

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

        .#{$prefix}tab-bar-#{$ui}-right {
            .#{$prefix}tabbar-scroll-top {
                background-image: theme-background-image('tab-bar/#{$ui}-scroll-top-right');
            }
            .#{$prefix}tabbar-scroll-bottom {
                background-image: theme-background-image('tab-bar/#{$ui}-scroll-bottom-right');
            }
        }
    }
            
    .#{$prefix}tab-bar-#{$ui} {
        @if $tabbar-scroller-include-hover-background-position {
            .#{$prefix}tabbar-scroll-left-hover,
            .#{$prefix}tabbar-scroll-right-hover {
                background-position: -$ui-bar-scroller-width 0;
            }

            .#{$prefix}tabbar-scroll-top-hover,
            .#{$prefix}tabbar-scroll-bottom-hover {
                background-position: 0 (-$ui-bar-scroller-width);
            }
        }

        .#{$prefix}box-scroller-disabled {
            @if $ui-bar-scroller-opacity-disabled != 1 {
                @include opacity($ui-bar-scroller-opacity-disabled);
            }
            @if $ui-bar-scroller-cursor-disabled != null {
                cursor: $ui-bar-scroller-cursor-disabled;
            }
        }
    }

    @include x-slicer(tab-#{$ui}-top-over);
    @include x-slicer(tab-#{$ui}-bottom-over);
    @include x-slicer(tab-#{$ui}-top-active);
    @include x-slicer(tab-#{$ui}-bottom-active);
    @include x-slicer(tab-#{$ui}-top-disabled);
    @include x-slicer(tab-#{$ui}-bottom-disabled);
    @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);
}

@include extjs-tab-panel-ui(
    $ui: 'default'
);

.#{$prefix}tab-bar-plain {
    border-width: $tabbar-plain-border-width;
    padding: $tabbar-plain-padding;
}