Tab.scss Source Code | Ext JS ...

/**
 * @class Ext.tab.Tab
 */
 
/**
 * @var {color}
 * The base color of Tabs
 */
$tab-base-color: dynamic($base-color);
 
/**
 * @var {color}
 * The base color of focused Tabs
 */
$tab-base-color-focus: dynamic($tab-base-color);
 
/**
 * @var {color}
 * The base color of hovered Tabs
 */
$tab-base-color-over: dynamic($tab-base-color);
 
/**
 * @var {color}
 * The base color of the active Tabs
 */
$tab-base-color-active: dynamic($tab-base-color);
 
/**
 * @var {color}
 * The base color of focused hovered Tabs
 */
$tab-base-color-focus-over: dynamic($tab-base-color-over);
 
/**
 * @var {color}
 * The base color of the active Tab when focused
 */
$tab-base-color-focus-active: dynamic($tab-base-color-active);
 
/**
 * @var {color}
 * The base color of disabled Tabs
 */
$tab-base-color-disabled: dynamic($tab-base-color);
 
/**
 * @var {color}
 * The background-color of {@link Ext.tab.Bar#plain} Tabs
 */
$tab-plain-background-color: dynamic(null);
 
/**
 * @var {color}
 * The background-color of focused {@link Ext.tab.Bar#plain} Tabs
 */
$tab-plain-background-color-focus: dynamic($tab-plain-background-color);
 
/**
 * @var {color}
 * The background-color of hovered {@link Ext.tab.Bar#plain} Tabs
 */
$tab-plain-background-color-over: dynamic($tab-plain-background-color);
 
/**
 * @var {color}
 * The background-color of the active {@link Ext.tab.Bar#plain} Tabs
 */
$tab-plain-background-color-active: dynamic($tab-plain-background-color);
 
/**
 * @var {color}
 * The background-color of focused hovered {@link Ext.tab.Bar#plain} Tabs
 */
$tab-plain-background-color-focus-over: dynamic($tab-plain-background-color-over);
 
/**
 * @var {color}
 * The background-color of the active {@link Ext.tab.Bar#plain} Tab when focused
 */
$tab-plain-background-color-focus-active: dynamic($tab-plain-background-color-active);
 
/**
 * @var {color}
 * The background-color of disabled {@link Ext.tab.Bar#plain} Tabs
 */
$tab-plain-background-color-disabled: dynamic($tab-plain-background-color);
 
/**
 * @var {color}
 * The text color of Tabs
 */
$tab-color: dynamic($color);
 
/**
 * @var {color}
 * The text color of focused Tabs
 */
$tab-color-focus: dynamic($tab-color);
 
/**
 * @var {color}
 * The text color of hovered Tabs
 */
$tab-color-over: dynamic($tab-color);
 
/**
 * @var {color}
 * The text color of the active Tab
 */
$tab-color-active: dynamic($tab-color);
 
/**
 * @var {color}
 * The text color of focused hovered Tabs
 */
$tab-color-focus-over: dynamic($tab-color-over);
 
/**
 * @var {color}
 * The text color of the active Tab when focused
 */
$tab-color-focus-active: dynamic($tab-color-active);
 
/**
 * @var {color}
 * The text color of disabled Tabs
 */
$tab-color-disabled: dynamic($tab-color);
 
/**
 * @var {color}
 * The text color of {@link Ext.tab.Bar#plain} Tabs
 */
$tab-plain-color: dynamic(null);
 
/**
 * @var {color}
 * The text color of focused {@link Ext.tab.Bar#plain} Tabs
 */
$tab-plain-color-focus: dynamic($tab-plain-color);
 
/**
 * @var {color}
 * The text color of hovered {@link Ext.tab.Bar#plain} Tabs
 */
$tab-plain-color-over: dynamic($tab-plain-color);
 
/**
 * @var {color}
 * The text color of the active {@link Ext.tab.Bar#plain} Tab
 */
$tab-plain-color-active: dynamic($tab-plain-color);
 
/**
 * @var {color}
 * The text color of focused hovered {@link Ext.tab.Bar#plain} Tabs
 */
$tab-plain-color-focus-over: dynamic($tab-plain-color-over);
 
/**
 * @var {color}
 * The text color of the active {@link Ext.tab.Bar#plain} Tab when focused
 */
$tab-plain-color-focus-active: dynamic($tab-plain-color-active);
 
/**
 * @var {color}
 * The text color of disabled {@link Ext.tab.Bar#plain} Tabs
 */
$tab-plain-color-disabled: dynamic($tab-plain-color);
 
/**
 * @var {number}
 * The font-size of Tabs
 */
$tab-font-size: dynamic($font-size);
 
/**
 * @var {number}
 * The font-size of focused Tabs
 */
$tab-font-size-focus: dynamic($tab-font-size);
 
/**
 * @var {number}
 * The font-size of hovered Tabs
 */
$tab-font-size-over: dynamic($tab-font-size);
 
/**
 * @var {number}
 * The font-size of the active Tab
 */
$tab-font-size-active: dynamic($tab-font-size);
 
/**
 * @var {number}
 * The font-size of focused hovered Tabs
 */
$tab-font-size-focus-over: dynamic($tab-font-size-over);
 
/**
 * @var {number}
 * The font-size of the active Tab when focused
 */
$tab-font-size-focus-active: dynamic($tab-font-size-active);
 
/**
 * @var {number}
 * The font-size of disabled Tabs
 */
$tab-font-size-disabled: dynamic($tab-font-size);
 
/**
 * @var {string}
 * The font-family of Tabs
 */
$tab-font-family: dynamic($font-family);
 
/**
 * @var {string}
 * The font-family of focused Tabs
 */
$tab-font-family-focus: dynamic($tab-font-family);
 
/**
 * @var {string}
 * The font-family of hovered Tabs
 */
$tab-font-family-over: dynamic($tab-font-family);
 
/**
 * @var {string}
 * The font-family of the active Tab
 */
$tab-font-family-active: dynamic($tab-font-family);
 
/**
 * @var {string}
 * The font-family of focused hovered Tabs
 */
$tab-font-family-focus-over: dynamic($tab-font-family-over);
 
/**
 * @var {string}
 * The font-family of the active Tab when focused
 */
$tab-font-family-focus-active: dynamic($tab-font-family-active);
 
/**
 * @var {string}
 * The font-family of disabled Tabs
 */
$tab-font-family-disabled: dynamic($tab-font-family);
 
/**
 * @var {string}
 * The font-weight of Tabs
 */
$tab-font-weight: dynamic($font-weight-bold);
 
/**
 * @var {string}
 * The font-weight of focused Tabs
 */
$tab-font-weight-focus: dynamic($tab-font-weight);
 
/**
 * @var {string}
 * The font-weight of hovered Tabs
 */
$tab-font-weight-over: dynamic($tab-font-weight);
 
/**
 * @var {string}
 * The font-weight of the active Tab
 */
$tab-font-weight-active: dynamic($tab-font-weight);
 
/**
 * @var {string}
 * The font-weight of focused hovered Tabs
 */
$tab-font-weight-focus-over: dynamic($tab-font-weight-over);
 
/**
 * @var {string}
 * The font-weight of the active Tab when focused
 */
$tab-font-weight-focus-active: dynamic($tab-font-weight-active);
 
/**
 * @var {string}
 * The font-weight of disabled Tabs
 */
$tab-font-weight-disabled: dynamic($tab-font-weight);
 
/**
 * @var {string}
 * The Tab cursor
 */
$tab-cursor: dynamic(pointer);
 
/**
 * @var {string}
 * The cursor of disabled Tabs
 */
$tab-cursor-disabled: dynamic(default);
 
/**
 * @var {string/list}
 * 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}.
 */
$tab-background-gradient: dynamic('tab');
 
/**
 * @var {string/list}
 * 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}.
 */
$tab-background-gradient-focus: dynamic('tab');
 
/**
 * @var {string/list}
 * 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}.
 */
$tab-background-gradient-over: dynamic('tab-over');
 
/**
 * @var {string/list}
 * 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}.
 */
$tab-background-gradient-active: dynamic('tab-active');
 
/**
 * @var {string/list}
 * 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}.
 */
$tab-background-gradient-focus-over: dynamic($tab-background-gradient-over);
 
/**
 * @var {string/list}
 * 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}.
 */
$tab-background-gradient-focus-active: dynamic($tab-background-gradient-active);
 
/**
 * @var {string/list}
 * 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}.
 */
$tab-background-gradient-disabled: dynamic('tab-disabled');
 
/**
 * @var {list}
 * The border-radius of Tabs
 */
$tab-border-radius: dynamic(4px 4px 0 0);
 
/**
 * @var {number/list}
 * The border-width of Tabs
 */
$tab-border-width: dynamic(1px);
 
/**
 * @var {number/list}
 * The border-width of focused Tabs
 */
$tab-border-width-focus: dynamic($tab-border-width);
 
/**
 * @var {number/list}
 * The border-width of hovered Tabs
 */
$tab-border-width-over: dynamic($tab-border-width);
 
/**
 * @var {number/list}
 * The border-width of active Tabs
 */
$tab-border-width-active: dynamic($tab-border-width);
 
/**
 * @var {number/list}
 * The border-width of focused hovered Tabs
 */
$tab-border-width-focus-over: dynamic($tab-border-width-over);
 
/**
 * @var {number/list}
 * The border-width of active Tabs when focused
 */
$tab-border-width-focus-active: dynamic($tab-border-width-active);
 
/**
 * @var {number/list}
 * The border-width of disabled Tabs
 */
$tab-border-width-disabled: dynamic($tab-border-width);
 
/**
 * @var {number/list}
 * The inner border-width of Tabs
 */
$tab-inner-border-width: dynamic('none');
 
/**
 * @var {number/list}
 * The inner border-width of focused Tabs
 */
$tab-inner-border-width-focus: dynamic($tab-inner-border-width);
 
/**
 * @var {number/list}
 * The inner border-width of hovered Tabs
 */
$tab-inner-border-width-over: dynamic($tab-inner-border-width);
 
/**
 * @var {number/list}
 * The inner border-width of active Tabs
 */
$tab-inner-border-width-active: dynamic($tab-inner-border-width);
 
/**
 * @var {number/list}
 * The inner border-width of focused hovered Tabs
 */
$tab-inner-border-width-focus-over: dynamic($tab-inner-border-width-over);
 
/**
 * @var {number/list}
 * The inner border-width of active Tabs when focused
 */
$tab-inner-border-width-focus-active: dynamic($tab-inner-border-width-active);
 
/**
 * @var {number/list}
 * The inner border-width of disabled Tabs
 */
$tab-inner-border-width-disabled: dynamic($tab-inner-border-width);
 
/**
 * @var {color}
 * The inner border-color of Tabs
 */
$tab-inner-border-color: dynamic('none');
 
/**
 * @var {color}
 * The inner border-color of focused Tabs
 */
$tab-inner-border-color-focus: dynamic($tab-inner-border-color);
 
/**
 * @var {color}
 * The inner border-color of hovered Tabs
 */
$tab-inner-border-color-over: dynamic($tab-inner-border-color);
 
/**
 * @var {color}
 * The inner border-color of active Tabs
 */
$tab-inner-border-color-active: dynamic($tab-inner-border-color);
 
/**
 * @var {color}
 * The inner border-color of focused hovered Tabs
 */
$tab-inner-border-color-focus-over: dynamic($tab-inner-border-color-over);
 
/**
 * @var {color}
 * The inner border-color of active Tabs when focused
 */
$tab-inner-border-color-focus-active: dynamic($tab-inner-border-color-active);
 
/**
 * @var {color}
 * The inner border-color of disabled Tabs
 */
$tab-inner-border-color-disabled: dynamic($tab-inner-border-color);
 
/**
 * @var {boolean}
 * `true` to suppress the inner border of the tab on the side adjacent to the tab strip
 */
$tab-inner-border-collapse: dynamic(false);
 
/**
 * @var {boolean}
 * `true` to suppress the inner border of the tab on the side adjacent to the tab strip
 * when the tab is focused
 */
$tab-inner-border-collapse-focus: dynamic($tab-inner-border-collapse);
 
/**
 * @var {boolean}
 * `true` to suppress the inner border of the tab on the side adjacent to the tab strip
 * when the tab is hovered
 */
$tab-inner-border-collapse-over: dynamic($tab-inner-border-collapse);
 
/**
 * @var {boolean}
 * `true` to suppress the inner border of the tab on the side adjacent to the tab strip
 * when the tab is active
 */
$tab-inner-border-collapse-active: dynamic($tab-inner-border-collapse);
 
/**
 * @var {boolean}
 * `true` to suppress the inner border of the tab on the side adjacent to the tab strip
 * when the tab is focused and hovered
 */
$tab-inner-border-collapse-focus-over: dynamic($tab-inner-border-collapse-over);
 
/**
 * @var {boolean}
 * `true` to suppress the inner border of the tab on the side adjacent to the tab strip
 * when the tab is focused and active
 */
$tab-inner-border-collapse-focus-active: dynamic($tab-inner-border-collapse-active);
 
/**
 * @var {boolean}
 * `true` to suppress the inner border of the tab on the side adjacent to the tab strip
 * when the tab is disabled
 */
$tab-inner-border-collapse-disabled: dynamic($tab-inner-border-collapse);
 
/**
 * @var {number}
 * The outline width of focused Tabs
 */
$tab-outline-width-focus: dynamic(0);
 
/**
 * @var {string}
 * The outline-style of focused Tabs
 */
$tab-outline-style-focus: dynamic(solid);
 
/**
 * @var {color}
 * The outline color of focused Tabs
 */
$tab-outline-color-focus: dynamic($tab-color);
 
/**
 * @var {number}
 * The outline offset of focused Tabs
 */
$tab-outline-offset-focus: dynamic(-$tab-outline-width-focus);
 
/**
 * @var {number}
 * The body outline width of focused Tabs
 */
$tab-body-outline-width-focus: dynamic(0);
 
/**
 * @var {string}
 * The body outline-style of focused Tabs
 */
$tab-body-outline-style-focus: dynamic(dotted);
 
/**
 * @var {color}
 * The body outline color of focused Tabs
 */
$tab-body-outline-color-focus: dynamic($tab-color);
 
/**
 * @var {color}
 * The border-color of Tabs
 */
$tab-border-color: dynamic($base-color);
 
/**
 * @var {color}
 * The border-color of focused Tabs
 */
$tab-border-color-focus: dynamic($tab-border-color);
 
/**
 * @var {color}
 * The border-color of hovered Tabs
 */
$tab-border-color-over: dynamic($tab-border-color);
 
/**
 * @var {color}
 * The border-color of the active Tab
 */
$tab-border-color-active: dynamic($tab-border-color);
 
/**
 * @var {color}
 * The border-color of focused hovered Tabs
 */
$tab-border-color-focus-over: dynamic($tab-border-color-over);
 
/**
 * @var {color}
 * The border-color of the active Tab when focused
 */
$tab-border-color-focus-active: dynamic($tab-border-color-active);
 
/**
 * @var {color}
 * The border-color of disabled Tabs
 */
$tab-border-color-disabled: dynamic($tab-border-color);
 
/**
 * @var {color}
 * The border-color of {@link Ext.tab.Bar#plain} Tabs
 */
$tab-plain-border-color: dynamic(null);
 
/**
 * @var {color}
 * The border-color of focused {@link Ext.tab.Bar#plain} Tabs
 */
$tab-plain-border-color-focus: dynamic($tab-plain-border-color);
 
/**
 * @var {color}
 * The border-color of hovered {@link Ext.tab.Bar#plain} Tabs
 */
$tab-plain-border-color-over: dynamic($tab-plain-border-color);
 
/**
 * @var {color}
 * The border-color of the active {@link Ext.tab.Bar#plain} Tabs
 */
$tab-plain-border-color-active: dynamic($tab-plain-border-color);
 
/**
 * @var {color}
 * The border-color of focused hovered {@link Ext.tab.Bar#plain} Tabs
 */
$tab-plain-border-color-focus-over: dynamic($tab-plain-border-color-over);
 
/**
 * @var {color}
 * The border-color of the active {@link Ext.tab.Bar#plain} Tab when focused
 */
$tab-plain-border-color-focus-active: dynamic($tab-plain-border-color-active);
 
/**
 * @var {color}
 * The border-color of disabled {@link Ext.tab.Bar#plain} Tabs
 */
$tab-plain-border-color-disabled: dynamic($tab-plain-border-color);
 
/**
 * @var {number/list}
 * The padding of Tabs
 */
$tab-padding: dynamic(3px 9px);
 
/**
 * @var {number}
 * The horizontal padding to add to the left and right of the Tab's text element
 */
$tab-text-padding: dynamic(0);
 
/**
 * @var {number/list}
 * The margin of Tabs. Typically used to add horizontal space between the tabs.
 */
$tab-margin: dynamic(0 0 0 2px);
 
/**
 * @var {number}
 * The width of the Tab close icon
 */
$tab-closable-icon-width: dynamic(11px);
 
/**
 * @var {number}
 * The height of the Tab close icon
 */
$tab-closable-icon-height: dynamic(11px);
 
/**
 * @var {number}
 * The distance to offset the Tab close icon from the top of the tab
 */
$tab-closable-icon-top: dynamic(2px);
 
/**
 * @var {number}
 * The distance to offset the Tab close icon from the right of the tab
 */
$tab-closable-icon-right: dynamic(2px);
/**
 * @var {number}
 * the space in between the text and the close button
 */
$tab-closable-icon-spacing: dynamic(3px);
 
/**
 * @var {number}
 * The opacity of the Tab close icon
 */
$tab-closable-icon-opacity: dynamic(1);
 
/**
 * @var {number}
 * The opacity of the Tab close icon when hovered
 */
$tab-closable-icon-opacity-over: dynamic(1);
 
/**
 * @var {number}
 * The opacity of the Tab close icon when the Tab is disabled
 */
$tab-closable-icon-opacity-disabled: dynamic(1);
 
/**
 * @var {color}
 * The color of the Tab close icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$tab-closable-icon-glyph-color: dynamic($neutral-color);
 
/**
 * @var {color}
 * The color of the focused Tab's close icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$tab-closable-icon-glyph-color-focus: dynamic($tab-closable-icon-glyph-color);
 
/**
 * @var {color}
 * The color of the hovered Tab's close icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$tab-closable-icon-glyph-color-over: dynamic($tab-closable-icon-glyph-color);
 
/**
 * @var {color}
 * The color of the active Tab's close icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$tab-closable-icon-glyph-color-active: dynamic($tab-closable-icon-glyph-color);
 
/**
 * @var {color}
 * The color of a focused and hovered Tab's close icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$tab-closable-icon-glyph-color-focus-over: dynamic($tab-closable-icon-glyph-color-over);
 
/**
 * @var {color}
 * The color of a focused and active Tab's close icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$tab-closable-icon-glyph-color-focus-active: dynamic($tab-closable-icon-glyph-color-active);
 
/**
 * @var {color}
 * The color of a disabled Tab's close icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$tab-closable-icon-glyph-color-disabled: dynamic($tab-closable-icon-glyph-color);
 
/**
 * @var {color}
 * The color of the Tab close icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$tab-plain-closable-icon-glyph-color: dynamic($tab-closable-icon-glyph-color);
 
/**
 * @var {color}
 * The color of the focused {@link Ext.tab.Bar#plain} Tab's close icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$tab-plain-closable-icon-glyph-color-focus: dynamic($tab-plain-closable-icon-glyph-color);
 
/**
 * @var {color}
 * The color of the hovered {@link Ext.tab.Bar#plain} Tab's close icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$tab-plain-closable-icon-glyph-color-over: dynamic($tab-plain-closable-icon-glyph-color);
 
/**
 * @var {color}
 * The color of the active {@link Ext.tab.Bar#plain} Tab's close icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$tab-plain-closable-icon-glyph-color-active: dynamic($tab-plain-closable-icon-glyph-color);
 
/**
 * @var {color}
 * 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`.
 */
$tab-plain-closable-icon-glyph-color-focus-over: dynamic($tab-plain-closable-icon-glyph-color-over);
 
/**
 * @var {color}
 * 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`.
 */
$tab-plain-closable-icon-glyph-color-focus-active: dynamic($tab-plain-closable-icon-glyph-color-active);
 
/**
 * @var {color}
 * The color of a disabled {@link Ext.tab.Bar#plain} Tab's close icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$tab-plain-closable-icon-glyph-color-disabled: dynamic($tab-plain-closable-icon-glyph-color);
 
/**
 * @var {string/list}
 * Glyph for the Tab close icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$tab-closable-icon-glyph: dynamic($fa-var-close 12px $font-icon-font-family);
 
/**
 * @var {boolean}
 * True to change the x background-postition of the close icon background image on hover
 * to allow for a horizontally aligned background image sprite
 */
$tab-closable-icon-include-hover-background-position: dynamic(false);
 
/**
 * @var {boolean}
 * True to change the x background-postition of the close icon background image on click
 * to allow for a horizontally aligned background image sprite
 */
$tab-closable-icon-include-pressed-background-position: dynamic(false);
 
/**
 * @var {number}
 * The width of Tab icons
 */
$tab-icon-width: dynamic(16px);
 
/**
 * @var {number}
 * The height of Tab icons
 */
$tab-icon-height: dynamic(16px);
 
/**
 * @var {number}
 * The line-height of Tabs
 */
$tab-line-height: dynamic($tab-icon-height);
 
/**
 * @var {number}
 * The space between the Tab icon and the Tab text
 */
$tab-icon-spacing: dynamic(4px);
 
/**
 * @var {number}
 * The background-position of Tab icons
 */
$tab-icon-background-position: dynamic(center center);
 
/**
 * @var {color}
 * The color of Tab glyph icons
 */
$tab-glyph-color: dynamic($tab-color);
 
/**
 * @var {color}
 * The color of a Tab glyph icon when the Tab is focused
 */
$tab-glyph-color-focus: dynamic($tab-color-focus);
 
/**
 * @var {color}
 * The color of a Tab glyph icon when the Tab is hovered
 */
$tab-glyph-color-over: dynamic($tab-color-over);
 
/**
 * @var {color}
 * The color of a Tab glyph icon when the Tab is active
 */
$tab-glyph-color-active: dynamic($tab-color-active);
 
/**
 * @var {color}
 * The color of a Tab glyph icon when the Tab is focused and hovered
 */
$tab-glyph-color-focus-over: dynamic($tab-color-focus-over);
 
/**
 * @var {color}
 * The color of a Tab glyph icon when the Tab is focused and active
 */
$tab-glyph-color-focus-active: dynamic($tab-color-focus-active);
 
/**
 * @var {color}
 * The color of a Tab glyph icon when the Tab is disabled
 */
$tab-glyph-color-disabled: dynamic($tab-color-disabled);
 
/**
 * @var {color}
 * The color of {@link Ext.tab.Bar#plain} Tab glyph icons
 */
$tab-plain-glyph-color: dynamic($tab-plain-color);
 
/**
 * @var {color}
 * The color of a {@link Ext.tab.Bar#plain} Tab glyph icon when the Tab is focused
 */
$tab-plain-glyph-color-focus: dynamic($tab-plain-color-focus);
 
/**
 * @var {color}
 * The color of a {@link Ext.tab.Bar#plain} Tab glyph icon when the Tab is hovered
 */
$tab-plain-glyph-color-over: dynamic($tab-plain-color-over);
 
/**
 * @var {color}
 * The color of a {@link Ext.tab.Bar#plain} Tab glyph icon when the Tab is active
 */
$tab-plain-glyph-color-active: dynamic($tab-plain-color-active);
 
/**
 * @var {color}
 * The color of a {@link Ext.tab.Bar#plain} Tab glyph icon when the Tab is focused and hovered
 */
$tab-plain-glyph-color-focus-over: dynamic($tab-plain-color-focus-over);
 
/**
 * @var {color}
 * The color of a {@link Ext.tab.Bar#plain} Tab glyph icon when the Tab is focused and active
 */
$tab-plain-glyph-color-focus-active: dynamic($tab-plain-color-focus-active);
 
/**
 * @var {color}
 * The color of a {@link Ext.tab.Bar#plain} Tab glyph icon when the Tab is disabled
 */
$tab-plain-glyph-color-disabled: dynamic($tab-plain-color-disabled);
 
/**
 * @var {number}
 * The opacity of a Tab glyph icon
 */
$tab-glyph-opacity: dynamic(.5);
 
/**
 * @var {number}
 * The opacity of a Tab glyph icon when the Tab is disabled
 */
$tab-glyph-opacity-disabled: dynamic(.3);
 
/**
 * @var {number}
 * Tab opacity
 */
$tab-opacity: dynamic(null);
 
/**
 * @var {number}
 * Tab opacity when focused
 */
$tab-opacity-focus: dynamic($tab-opacity);
 
/**
 * @var {number}
 * Tab opacity when hovered
 */
$tab-opacity-over: dynamic($tab-opacity);
 
/**
 * @var {number}
 * Opacity of the active tab
 */
$tab-opacity-active: dynamic($tab-opacity);
 
/**
 * @var {number}
 * Tab opacity when focused and hovered
 */
$tab-opacity-focus-over: dynamic($tab-opacity-over);
 
/**
 * @var {number}
 * Opacity of the active tab when focused
 */
$tab-opacity-focus-active: dynamic($tab-opacity-active);
 
/**
 * @var {number}
 * Tab opacity when disabled
 */
$tab-opacity-disabled: dynamic($tab-opacity);
 
/**
 * @var {number}
 * Tab background opacity
 */
$tab-background-opacity: dynamic(null);
 
/**
 * @var {number}
 * Tab background opacity when focused
 */
$tab-background-opacity-focus: dynamic($tab-background-opacity);
 
/**
 * @var {number}
 * Tab background opacity when hovered
 */
$tab-background-opacity-over: dynamic($tab-background-opacity);
 
/**
 * @var {number}
 * background opacity of the active tab
 */
$tab-background-opacity-active: dynamic($tab-background-opacity);
 
/**
 * @var {number}
 * Tab background opacity when focused and hovered
 */
$tab-background-opacity-focus-over: dynamic($tab-background-opacity-over);
 
/**
 * @var {number}
 * Background opacity of the active tab when focused
 */
$tab-background-opacity-focus-active: dynamic($tab-background-opacity-active);
 
/**
 * @var {number}
 * Tab background opacity when disabled
 */
$tab-background-opacity-disabled: dynamic($tab-background-opacity);
 
/**
 * @var {number}
 * opacity to apply to the tab's text element when the tab is disabled
 */
$tab-text-opacity-disabled: dynamic(.3);
 
/**
 * @var {number}
 * opacity to apply to the tab's icon element when the tab is disabled
 */
$tab-icon-opacity-disabled: dynamic(.5);
 
/**
 * @var {boolean}
 * True to include the "default" tab UI
 */
$include-tab-default-ui: dynamic($include-default-uis);
 
/**
 * Creates a visual theme for a Tab
 *
 * @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-background-color=$tab-base-color]
 * The background-color of Tabs
 *
 * @param {color} [$ui-background-color-focus=$tab-base-color-focus]
 * The background-color of focused Tabs
 *
 * @param {color} [$ui-background-color-over=$tab-base-color-over]
 * The background-color of hovered Tabs
 *
 * @param {color} [$ui-background-color-active=$tab-base-color-active]
 * The background-color of the active Tab
 *
 * @param {color} [$ui-background-color-focus-over=$tab-base-color-focus-over]
 * The background-color of focused hovered Tabs
 *
 * @param {color} [$ui-background-color-focus-active=$tab-base-color-focus-active]
 * The background-color of the active Tab when focused
 *
 * @param {color} [$ui-background-color-disabled=$tab-base-color-disabled]
 * The background-color of disabled Tabs
 *
 * @param {color} [$ui-plain-background-color=$tab-plain-background-color]
 * The background-color of {@link Ext.tab.Bar#plain} Tabs
 *
 * @param {color} [$ui-plain-background-color-focus=$tab-plain-background-color-focus]
 * The background-color of focused {@link Ext.tab.Bar#plain} Tabs
 *
 * @param {color} [$ui-plain-background-color-over=$tab-plain-background-color-over]
 * The background-color of hovered {@link Ext.tab.Bar#plain} Tabs
 *
 * @param {color} [$ui-plain-background-color-active=$tab-plain-background-color-active]
 * The background-color of the active {@link Ext.tab.Bar#plain} Tabs
 *
 * @param {color} [$ui-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-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-plain-background-color-disabled=$tab-plain-background-color-disabled]
 * The background-color of disabled {@link Ext.tab.Bar#plain} Tabs
 *
 * @param {list} [$ui-border-radius=$tab-border-radius]
 * The border-radius of Tabs
 *
 * @param {number/list} [$ui-border-width=$tab-border-width]
 * The border-width of Tabs
 *
 * @param {number/list} [$ui-border-width-focus=$tab-border-width-focus]
 * The border-width of focused Tabs
 *
 * @param {number/list} [$ui-border-width-over=$tab-border-width-over]
 * The border-width of hovered Tabs
 *
 * @param {number/list} [$ui-border-width-active=$tab-border-width-active]
 * The border-width of active Tabs
 *
 * @param {number/list} [$ui-border-width-focus-over=$tab-border-width-focus-over]
 * The border-width of focused hovered Tabs
 *
 * @param {number/list} [$ui-border-width-focus-active=$tab-border-width-focus-active]
 * The border-width of active Tabs when focused
 *
 * @param {number/list} [$ui-border-width-disabled=$tab-border-width-disabled]
 * The border-width of disabled Tabs
 *
 * @param {number/list} [$ui-margin=$tab-margin]
 * The border-width of Tabs
 *
 * @param {number/list} [$ui-padding=$tab-padding]
 * The padding of Tabs
 *
 * @param {number/list} [$ui-text-padding=$tab-text-padding]
 * The padding of the Tab's text element
 *
 * @param {color} [$ui-border-color=$tab-border-color]
 * The border-color of Tabs
 *
 * @param {color} [$ui-border-color-focus=$tab-border-color-focus]
 * The border-color of focused Tabs
 *
 * @param {color} [$ui-border-color-over=$tab-border-color-over]
 * The border-color of hovered Tabs
 *
 * @param {color} [$ui-border-color-active=$tab-border-color-active]
 * The border-color of the active Tab
 *
 * @param {color} [$ui-border-color-focus-over=$tab-border-color-focus-over]
 * The border-color of focused hovered Tabs
 *
 * @param {color} [$ui-border-color-focus-active=$tab-border-color-focus-active]
 * The border-color of the active Tab when focused
 *
 * @param {color} [$ui-border-color-disabled=$tab-border-color-disabled]
 * The border-color of disabled Tabs
 *
 * @param {color} [$ui-plain-border-color=$tab-plain-border-color]
 * The border-color of {@link Ext.tab.Bar#plain} Tabs
 *
 * @param {color} [$ui-plain-border-color-focus=$tab-plain-border-color-focus]
 * The border-color of focused {@link Ext.tab.Bar#plain} Tabs
 *
 * @param {color} [$ui-plain-border-color-over=$tab-plain-border-color-over]
 * The border-color of hovered {@link Ext.tab.Bar#plain} Tabs
 *
 * @param {color} [$ui-plain-border-color-active=$tab-plain-border-color-active]
 * The border-color of the active {@link Ext.tab.Bar#plain} Tabs
 *
 * @param {color} [$ui-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-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-plain-border-color-disabled=$tab-plain-border-color-disabled]
 * The border-color of disabled {@link Ext.tab.Bar#plain} Tabs
 *
 * @param {string} [$ui-cursor=$tab-cursor]
 * The Tab cursor
 *
 * @param {string} [$ui-cursor-disabled=$tab-cursor-disabled]
 * The cursor of disabled Tabs
 *
 * @param {number} [$ui-font-size=$tab-font-size]
 * The font-size of Tabs
 *
 * @param {number} [$ui-font-size-focus=$tab-font-size-focus]
 * The font-size of focused Tabs
 *
 * @param {number} [$ui-font-size-over=$tab-font-size-over]
 * The font-size of hovered Tabs
 *
 * @param {number} [$ui-font-size-active=$tab-font-size-active]
 * The font-size of the active Tab
 *
 * @param {number} [$ui-font-size-focus-over=$tab-font-size-focus-over]
 * The font-size of focused hovered Tabs
 *
 * @param {number} [$ui-font-size-focus-active=$tab-font-size-focus-active]
 * The font-size of the active Tab when focused
 *
 * @param {number} [$ui-font-size-disabled=$tab-font-size-disabled]
 * The font-size of disabled Tabs
 *
 * @param {string} [$ui-font-weight=$tab-font-weight]
 * The font-weight of Tabs
 *
 * @param {string} [$ui-font-weight-focus=$tab-font-weight-focus]
 * The font-weight of focused Tabs
 *
 * @param {string} [$ui-font-weight-over=$tab-font-weight-over]
 * The font-weight of hovered Tabs
 *
 * @param {string} [$ui-font-weight-active=$tab-font-weight-active]
 * The font-weight of the active Tab
 *
 * @param {string} [$ui-font-weight-focus-over=$tab-font-weight-focus-over]
 * The font-weight of focused hovered Tabs
 *
 * @param {string} [$ui-font-weight-focus-active=$tab-font-weight-focus-active]
 * The font-weight of the active Tab when focused
 *
 * @param {string} [$ui-font-weight-disabled=$tab-font-weight-disabled]
 * The font-weight of disabled Tabs
 *
 * @param {string} [$ui-font-family=$tab-font-family]
 * The font-family of Tabs
 *
 * @param {string} [$ui-font-family-focus=$tab-font-family-focus]
 * The font-family of focused Tabs
 *
 * @param {string} [$ui-font-family-over=$tab-font-family-over]
 * The font-family of hovered Tabs
 *
 * @param {string} [$ui-font-family-active=$tab-font-family-active]
 * The font-family of the active Tab
 *
 * @param {string} [$ui-font-family-focus-over=$tab-font-family-focus-over]
 * The font-family of focused hovered Tabs
 *
 * @param {string} [$ui-font-family-focus-active=$tab-font-family-focus-active]
 * The font-family of the active Tab when focused
 *
 * @param {string} [$ui-font-family-disabled=$tab-font-family-disabled]
 * The font-family of disabled Tabs
 *
 * @param {number} [$ui-line-height=$tab-line-height]
 * The line-height of Tabs
 *
 * @param {color} [$ui-color=$tab-color]
 * The text color of Tabs
 *
 * @param {color} [$ui-color-focus=$tab-color-focus]
 * The text color of focused Tabs
 *
 * @param {color} [$ui-color-over=$tab-color-over]
 * The text color of hovered Tabs
 *
 * @param {color} [$ui-color-active=$tab-color-active]
 * The text color of the active Tab
 *
 * @param {color} [$ui-color-focus-over=$tab-color-focus-over]
 * The text color of focused hovered Tabs
 *
 * @param {color} [$ui-color-focus-active=$tab-color-focus-active]
 * The text color of the active Tab when focused
 *
 * @param {color} [$ui-color-disabled=$tab-color-disabled]
 * The text color of disabled Tabs
 *
 * @param {color} [$ui-plain-color=$tab-plain-color]
 * The text color of {@link Ext.tab.Bar#plain} Tabs
 *
 * @param {color} [$ui-plain-color-focus=$tab-plain-color-focus]
 * The text color of focused {@link Ext.tab.Bar#plain} Tabs
 *
 * @param {color} [$ui-plain-color-over=$tab-plain-color-over]
 * The text color of hovered {@link Ext.tab.Bar#plain} Tabs
 *
 * @param {color} [$ui-plain-color-active=$tab-plain-color-active]
 * The text color of the active {@link Ext.tab.Bar#plain} Tab
 *
 * @param {color} [$ui-plain-color-focus-over=$tab-plain-color-focus-over]
 * The text color of focused hovered {@link Ext.tab.Bar#plain} Tabs
 *
 * @param {color} [$ui-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-plain-color-disabled=$tab-plain-color-disabled]
 * The text color of disabled {@link Ext.tab.Bar#plain} Tabs
 *
 * @param {string/list} [$ui-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-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-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-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-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-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-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-inner-border-width=$tab-inner-border-width]
 * The inner border-width of Tabs
 *
 * @param {number} [$ui-inner-border-width-focus=$tab-inner-border-width-focus]
 * The inner border-width of focused Tabs
 *
 * @param {number} [$ui-inner-border-width-over=$tab-inner-border-width-over]
 * The inner border-width of hovered Tabs
 *
 * @param {number} [$ui-inner-border-width-active=$tab-inner-border-width-active]
 * The inner border-width of active Tabs
 *
 * @param {number} [$ui-inner-border-width-focus-over=$tab-inner-border-width-focus-over]
 * The inner border-width of focused hovered Tabs
 *
 * @param {number} [$ui-inner-border-width-focus-active=$tab-inner-border-width-focus-active]
 * The inner border-width of active Tabs when focused
 *
 * @param {number} [$ui-inner-border-width-disabled=$tab-inner-border-width-disabled]
 * The inner border-width of disabled Tabs
 *
 * @param {color} [$ui-inner-border-color=$tab-inner-border-color]
 * The inner border-color of Tabs
 *
 * @param {color} [$ui-inner-border-color-focus=$tab-inner-border-color-focus]
 * The inner border-color of focused Tabs
 *
 * @param {color} [$ui-inner-border-color-over=$tab-inner-border-color-over]
 * The inner border-color of hovered Tabs
 *
 * @param {color} [$ui-inner-border-color-active=$tab-inner-border-color-active]
 * The inner border-color of active Tabs
 *
 * @param {color} [$ui-inner-border-color-focus-over=$tab-inner-border-color-focus-over]
 * The inner border-color of focused hovered Tabs
 *
 * @param {color} [$ui-inner-border-color-focus-active=$tab-inner-border-color-focus-active]
 * The inner border-color of active Tabs when focused
 *
 * @param {color} [$ui-inner-border-color-disabled=$tab-inner-border-color-disabled]
 * The inner border-color of disabled Tabs
 *
 * @param {boolean} [$ui-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-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-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-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-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-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-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-outline-width-focus=$tab-outline-width-focus]
 * The outline width of focused Tabs
 *
 * @param {string} [$ui-outline-style-focus=$tab-outline-style-focus]
 * The outline-style of focused Tabs
 *
 * @param {color} [$ui-outline-color-focus=$tab-outline-color-focus]
 * The outline color of focused Tabs
 *
 * @param {number} [$ui-outline-offset-focus=$tab-outline-offset-focus]
 * The outline offset of focused Tabs
 *
 * @param {number} [$ui-body-outline-width-focus=$tab-body-outline-width-focus]
 * The body outline width of focused Tabs
 *
 * @param {string} [$ui-body-outline-style-focus=$tab-body-outline-style-focus]
 * The body outline-style of focused Tabs
 *
 * @param {color} [$ui-body-outline-color-focus=$tab-body-outline-color-focus]
 * The body outline color of focused Tabs
 *
 * @param {number} [$ui-icon-width=$tab-icon-width]
 * The width of the Tab close icon
 *
 * @param {number} [$ui-icon-height=$tab-icon-height]
 * The height of the Tab close icon
 *
 * @param {number} [$ui-icon-spacing=$tab-icon-spacing]
 * the space in between the text and the close button
 *
 * @param {list} [$ui-icon-background-position=$tab-icon-background-position]
 * The background-position of Tab icons
 *
 * @param {color} [$ui-glyph-color=$tab-glyph-color]
 * The color of Tab glyph icons
 *
 * @param {color} [$ui-glyph-color-focus=$tab-glyph-color-focus]
 * The color of a Tab glyph icon when the Tab is focused
 *
 * @param {color} [$ui-glyph-color-over=$tab-glyph-color-over]
 * The color of a Tab glyph icon when the Tab is hovered
 *
 * @param {color} [$ui-glyph-color-active=$tab-glyph-color-active]
 * The color of a Tab glyph icon when the Tab is active
 *
 * @param {color} [$ui-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-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-glyph-color-disabled=$tab-glyph-color-disabled]
 * The color of a Tab glyph icon when the Tab is disabled
 *
 * @param {color} [$ui-plain-glyph-color=$tab-plain-glyph-color]
 * The color of {@link Ext.tab.Bar#plain} Tab glyph icons
 *
 * @param {color} [$ui-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-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-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-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-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-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-glyph-opacity=$tab-glyph-opacity]
 * The opacity of a Tab glyph icon
 *
 * @param {number} [$ui-glyph-opacity-disabled=$tab-glyph-opacity-disabled]
 * The opacity of a Tab glyph icon when the Tab is disabled
 *
 * @param {number} [$ui-opacity=$tab-opacity]
 * Tab opacity
 *
 * @param {number} [$ui-opacity-focus=$tab-opacity-focus]
 * Tab opacity when focused
 *
 * @param {number} [$ui-opacity-over=$tab-opacity-over]
 * Tab opacity when hovered
 *
 * @param {number} [$ui-opacity-active=$tab-opacity-active]
 * Opacity of the active tab
 *
 * @param {number} [$ui-opacity-focus-over=$tab-opacity-focus-over]
 * Tab opacity when focused and hovered
 *
 * @param {number} [$ui-opacity-focus-active=$tab-opacity-focus-active]
 * Opacity of the active tab when focused
 *
 * @param {number} [$ui-opacity-disabled=$tab-opacity-disabled]
 * opacity to apply to the tab's main element when the tab is disabled
 *
 * @param {number} [$ui-background-opacity=$tab-background-opacity]
 * Tab background opacity
 *
 * @param {number} [$ui-background-opacity-focus=$tab-background-opacity-focus]
 * Tab background opacity when focused
 *
 * @param {number} [$ui-background-opacity-over=$tab-background-opacity-over]
 * Tab background opacity when hovered
 *
 * @param {number} [$ui-background-opacity-active=$tab-background-opacity-active]
 * background opacity of the active tab
 *
 * @param {number} [$ui-background-opacity-focus-over=$tab-background-opacity-focus-over]
 * Tab background opacity when focused and hovered
 *
 * @param {number} [$ui-background-opacity-focus-active=$tab-background-opacity-focus-active]
 * Background opacity of the active tab when focused
 *
 * @param {number} [$ui-background-opacity-disabled=$tab-background-opacity-disabled]
 * Tab background opacity when disabled
 *
 * @param {number} [$ui-text-opacity-disabled=$tab-text-opacity-disabled]
 * opacity to apply to the tab's text element when the tab is disabled
 *
 * @param {number} [$ui-icon-opacity-disabled=$tab-icon-opacity-disabled]
 * opacity to apply to the tab's icon element when the tab is disabled
 *
 * @param {number} [$ui-closable-icon-width=$tab-closable-icon-width]
 * The width of the Tab close icon
 *
 * @param {number} [$ui-closable-icon-height=$tab-closable-icon-height]
 * The height of the Tab close icon
 *
 * @param {number} [$ui-closable-icon-top=$tab-closable-icon-top]
 * The distance to offset the Tab close icon from the top of the tab
 *
 * @param {number} [$ui-closable-icon-right=$tab-closable-icon-right]
 * The distance to offset the Tab close icon from the right of the tab
 *
 * @param {number} [$ui-closable-icon-spacing=$tab-closable-icon-spacing]
 * The space in between the text and the close button
 *
 * @param {color} [$ui-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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.Tab
 */ 
@mixin extjs-tab-ui(
    $ui,
    
    $ui-background-color: null,
    $ui-background-color-focus: null,
    $ui-background-color-over: null,
    $ui-background-color-active: null,
    $ui-background-color-focus-over: null,
    $ui-background-color-focus-active: null,
    $ui-background-color-disabled: null,
 
    $ui-plain-background-color: null,
    $ui-plain-background-color-focus: null,
    $ui-plain-background-color-over: null,
    $ui-plain-background-color-active: null,
    $ui-plain-background-color-focus-over: null,
    $ui-plain-background-color-focus-active: null,
    $ui-plain-background-color-disabled: null,
 
    $ui-border-radius: $tab-border-radius,
    $ui-border-width: $tab-border-width,
    $ui-border-width-focus: $tab-border-width-focus,
    $ui-border-width-over: $tab-border-width-over,
    $ui-border-width-active: $tab-border-width-active,
    $ui-border-width-focus-over: $tab-border-width-focus-over,
    $ui-border-width-focus-active: $tab-border-width-focus-active,
    $ui-border-width-disabled: $tab-border-width-disabled,
    $ui-margin: $tab-margin,
    $ui-padding: $tab-padding,
    $ui-text-padding: $tab-text-padding,
 
    $ui-border-color: null,
    $ui-border-color-focus: null,
    $ui-border-color-over: null,
    $ui-border-color-active: null,
    $ui-border-color-focus-over: null,
    $ui-border-color-focus-active: null,
    $ui-border-color-disabled: null,
 
    $ui-plain-border-color: null,
    $ui-plain-border-color-focus: null,
    $ui-plain-border-color-over: null,
    $ui-plain-border-color-active: null,
    $ui-plain-border-color-focus-over: null,
    $ui-plain-border-color-focus-active: null,
    $ui-plain-border-color-disabled: null,
 
    $ui-cursor: $tab-cursor,
    $ui-cursor-disabled: $tab-cursor-disabled,
 
    $ui-font-size: null,
    $ui-font-size-focus: null,
    $ui-font-size-over: null,
    $ui-font-size-active: null,
    $ui-font-size-focus-over: null,
    $ui-font-size-focus-active: null,
    $ui-font-size-disabled: null,
 
    $ui-font-weight: null,
    $ui-font-weight-focus: null,
    $ui-font-weight-over: null,
    $ui-font-weight-active: null,
    $ui-font-weight-focus-over: null,
    $ui-font-weight-focus-active: null,
    $ui-font-weight-disabled: null,
 
    $ui-font-family: null,
    $ui-font-family-focus: null,
    $ui-font-family-over: null,
    $ui-font-family-active: null,
    $ui-font-family-focus-over: null,
    $ui-font-family-focus-active: null,
    $ui-font-family-disabled: null,
 
    $ui-line-height: $tab-line-height,
 
    $ui-color: null,
    $ui-color-focus: null,
    $ui-color-over: null,
    $ui-color-active: null,
    $ui-color-focus-over: null,
    $ui-color-focus-active: null,
    $ui-color-disabled: null,
 
    $ui-plain-color: null,
    $ui-plain-color-focus: null,
    $ui-plain-color-over: null,
    $ui-plain-color-active: null,
    $ui-plain-color-focus-over: null,
    $ui-plain-color-focus-active: null,
    $ui-plain-color-disabled: null,
 
    $ui-background-gradient: null,
    $ui-background-gradient-focus: null,
    $ui-background-gradient-over: null,
    $ui-background-gradient-active: null,
    $ui-background-gradient-focus-over: null,
    $ui-background-gradient-focus-active: null,
    $ui-background-gradient-disabled: null,
 
    $ui-inner-border-width: null,
    $ui-inner-border-width-focus: null,
    $ui-inner-border-width-over: null,
    $ui-inner-border-width-active: null,
    $ui-inner-border-width-focus-over: null,
    $ui-inner-border-width-focus-active: null,
    $ui-inner-border-width-disabled: null,
 
    $ui-inner-border-color: null,
    $ui-inner-border-color-focus: null,
    $ui-inner-border-color-over: null,
    $ui-inner-border-color-active: null,
    $ui-inner-border-color-focus-over: null,
    $ui-inner-border-color-focus-active: null,
    $ui-inner-border-color-disabled: null,
 
    $ui-inner-border-collapse: null,
    $ui-inner-border-collapse-focus: null,
    $ui-inner-border-collapse-over: null,
    $ui-inner-border-collapse-active: null,
    $ui-inner-border-collapse-focus-over: null,
    $ui-inner-border-collapse-focus-active: null,
    $ui-inner-border-collapse-disabled: null,
 
    $ui-outline-width-focus: $tab-outline-width-focus,
    $ui-outline-style-focus: $tab-outline-style-focus,
    $ui-outline-color-focus: $tab-outline-color-focus,
    $ui-outline-offset-focus: $tab-outline-offset-focus,
 
    $ui-body-outline-width-focus: $tab-body-outline-width-focus,
    $ui-body-outline-style-focus: $tab-body-outline-style-focus,
    $ui-body-outline-color-focus: $tab-body-outline-color-focus,
 
    $ui-icon-width: $tab-icon-width,
    $ui-icon-height: $tab-icon-height,
    $ui-icon-spacing: $tab-icon-spacing,
    $ui-icon-background-position: $tab-icon-background-position,
 
    $ui-glyph-color: null,
    $ui-glyph-color-focus: null,
    $ui-glyph-color-over: null,
    $ui-glyph-color-active: null,
    $ui-glyph-color-focus-over: null,
    $ui-glyph-color-focus-active: null,
    $ui-glyph-color-disabled: null,
 
    $ui-plain-glyph-color: null,
    $ui-plain-glyph-color-focus: null,
    $ui-plain-glyph-color-over: null,
    $ui-plain-glyph-color-active: null,
    $ui-plain-glyph-color-focus-over: null,
    $ui-plain-glyph-color-focus-active: null,
    $ui-plain-glyph-color-disabled: null,
 
    $ui-glyph-opacity: $tab-glyph-opacity,
    $ui-glyph-opacity-disabled: $tab-glyph-opacity-disabled,
 
    $ui-opacity: $tab-opacity,
    $ui-opacity-focus: $tab-opacity-focus,
    $ui-opacity-over: $tab-opacity-over,
    $ui-opacity-active: $tab-opacity-active,
    $ui-opacity-focus-over: $tab-opacity-focus-over,
    $ui-opacity-focus-active: $tab-opacity-focus-active,
    $ui-opacity-disabled: $tab-opacity-disabled,
 
    $ui-background-opacity: $tab-background-opacity,
    $ui-background-opacity-focus: $tab-background-opacity-focus,
    $ui-background-opacity-over: $tab-background-opacity-over,
    $ui-background-opacity-active: $tab-background-opacity-active,
    $ui-background-opacity-focus-over: $tab-background-opacity-focus-over,
    $ui-background-opacity-focus-active: $tab-background-opacity-focus-active,
    $ui-background-opacity-disabled: $tab-background-opacity-disabled,
 
    $ui-text-opacity-disabled: $tab-text-opacity-disabled,
    $ui-icon-opacity-disabled: $tab-icon-opacity-disabled,
 
    $ui-closable-icon-width: $tab-closable-icon-width,
    $ui-closable-icon-height: $tab-closable-icon-height,
    $ui-closable-icon-top: $tab-closable-icon-top,
    $ui-closable-icon-right: $tab-closable-icon-right,
    $ui-closable-icon-spacing: $tab-closable-icon-spacing,
 
    $ui-closable-icon-glyph-color: null,
    $ui-closable-icon-glyph-color-focus: null,
    $ui-closable-icon-glyph-color-over: null,
    $ui-closable-icon-glyph-color-active: null,
    $ui-closable-icon-glyph-color-focus-over: null,
    $ui-closable-icon-glyph-color-focus-active: null,
    $ui-closable-icon-glyph-color-disabled: null,
 
    $ui-plain-closable-icon-glyph-color: $tab-plain-closable-icon-glyph-color,
    $ui-plain-closable-icon-glyph-color-focus: $tab-plain-closable-icon-glyph-color-focus,
    $ui-plain-closable-icon-glyph-color-over: $tab-plain-closable-icon-glyph-color-over,
    $ui-plain-closable-icon-glyph-color-active: $tab-plain-closable-icon-glyph-color-active,
    $ui-plain-closable-icon-glyph-color-focus-over: $tab-plain-closable-icon-glyph-color-focus-over,
    $ui-plain-closable-icon-glyph-color-focus-active: $tab-plain-closable-icon-glyph-color-focus-active,
    $ui-plain-closable-icon-glyph-color-disabled: $tab-plain-closable-icon-glyph-color-disabled,
 
    $ui-closable-icon-glyph: $tab-closable-icon-glyph
) {
 
    @if $ui-background-color == null {
        $ui-background-color: $tab-base-color;
 
        @if $ui-background-color-focus == null {
            $ui-background-color-focus: $tab-base-color-focus;
        }
 
        @if $ui-background-color-disabled == null {
            $ui-background-color-disabled: $tab-base-color-disabled;
        }
    } @else {
        @if $ui-background-color-focus == null {
            $ui-background-color-focus: $ui-background-color;
        }
 
        @if $ui-background-color-disabled == null {
            $ui-background-color-disabled: $ui-background-color;
        }
    }
 
    @if $ui-background-color-over == null {
        $ui-background-color-over: $tab-base-color-over;
 
        @if $ui-background-color-focus-over == null {
            $ui-background-color-focus-over: $tab-base-color-focus-over;
        }
    } @else {
        @if $ui-background-color-focus-over == null {
            $ui-background-color-focus-over: $ui-background-color-over;
        }
    }
 
    @if $ui-background-color-active == null {
        $ui-background-color-active: $tab-base-color-active;
 
        @if $ui-background-color-focus-active == null {
            $ui-background-color-focus-active: $tab-base-color-focus-active;
        }
    } @else {
        @if $ui-background-color-focus-active == null {
            $ui-background-color-focus-active: $ui-background-color-active;
        }
    }
 
    @if $ui-plain-background-color == null {
        $ui-plain-background-color: if($ui == 'default', $tab-plain-background-color, $ui-background-color);
 
        @if $ui-plain-background-color-focus == null {
            $ui-plain-background-color-focus: $tab-plain-background-color-focus;
        }
 
        @if $ui-plain-background-color-disabled == null {
            $ui-plain-background-color-disabled: $tab-plain-background-color-disabled;
        }
    } @else {
        @if $ui-plain-background-color-focus == null {
            $ui-plain-background-color-focus: $ui-plain-background-color;
        }
 
        @if $ui-plain-background-color-disabled == null {
            $ui-plain-background-color-disabled: $ui-plain-background-color;
        }
    }
 
    @if $ui-plain-background-color-over == null {
        $ui-plain-background-color-over: $tab-plain-background-color-over;
 
        @if $ui-plain-background-color-focus-over == null {
            $ui-plain-background-color-focus-over: $tab-plain-background-color-focus-over;
        }
    } @else {
        @if $ui-plain-background-color-focus-over == null {
            $ui-plain-background-color-focus-over: $ui-plain-background-color-over;
        }
    }
 
    @if $ui-plain-background-color-active == null {
        $ui-plain-background-color-active: $tab-plain-background-color-active;
 
        @if $ui-plain-background-color-focus-active == null {
            $ui-plain-background-color-focus-active: $tab-plain-background-color-focus-active;
        }
    } @else {
        @if $ui-plain-background-color-focus-active == null {
            $ui-plain-background-color-focus-active: $ui-plain-background-color-active;
        }
    }
 
    @if $ui-border-color == null {
        $ui-border-color: $tab-border-color;
 
        @if $ui-border-color-focus == null {
            $ui-border-color-focus: $tab-border-color-focus;
        }
 
        @if $ui-border-color-disabled == null {
            $ui-border-color-disabled: $tab-border-color-disabled;
        }
    } @else {
        @if $ui-border-color-focus == null {
            $ui-border-color-focus: $ui-border-color;
        }
 
        @if $ui-border-color-disabled == null {
            $ui-border-color-disabled: $ui-border-color;
        }
    }
 
    @if $ui-border-color-over == null {
        $ui-border-color-over: $tab-border-color-over;
 
        @if $ui-border-color-focus-over == null {
            $ui-border-color-focus-over: $tab-border-color-focus-over;
        }
    } @else {
        @if $ui-border-color-focus-over == null {
            $ui-border-color-focus-over: $ui-border-color-over;
        }
    }
 
    @if $ui-border-color-active == null {
        $ui-border-color-active: $tab-border-color-active;
 
        @if $ui-border-color-focus-active == null {
            $ui-border-color-focus-active: $tab-border-color-focus-active;
        }
    } @else {
        @if $ui-border-color-focus-active == null {
            $ui-border-color-focus-active: $ui-border-color-active;
        }
    }
 
    @if $ui-plain-border-color == null {
        $ui-plain-border-color: if($ui == 'default', $tab-plain-border-color, $ui-border-color);
 
        @if $ui-plain-border-color-focus == null {
            $ui-plain-border-color-focus: $tab-plain-border-color-focus;
        }
 
        @if $ui-plain-border-color-disabled == null {
            $ui-plain-border-color-disabled: $tab-plain-border-color-disabled;
        }
    } @else {
        @if $ui-plain-border-color-focus == null {
            $ui-plain-border-color-focus: $ui-plain-border-color;
        }
 
        @if $ui-plain-border-color-disabled == null {
            $ui-plain-border-color-disabled: $ui-plain-border-color;
        }
    }
 
    @if $ui-plain-border-color-over == null {
        $ui-plain-border-color-over: $tab-plain-border-color-over;
 
        @if $ui-plain-border-color-focus-over == null {
            $ui-plain-border-color-focus-over: $tab-plain-border-color-focus-over;
        }
    } @else {
        @if $ui-plain-border-color-focus-over == null {
            $ui-plain-border-color-focus-over: $ui-plain-border-color-over;
        }
    }
 
    @if $ui-plain-border-color-active == null {
        $ui-plain-border-color-active: $tab-plain-border-color-active;
 
        @if $ui-plain-border-color-focus-active == null {
            $ui-plain-border-color-focus-active: $tab-plain-border-color-focus-active;
        }
    } @else {
        @if $ui-plain-border-color-focus-active == null {
            $ui-plain-border-color-focus-active: $ui-plain-border-color-active;
        }
    }
 
    @if $ui-font-size == null {
        $ui-font-size: $tab-font-size;
 
        @if $ui-font-size-focus == null {
            $ui-font-size-focus: $tab-font-size-focus;
        }
 
        @if $ui-font-size-over == null {
            $ui-font-size-over: $tab-font-size-over;
        }
 
        @if $ui-font-size-active == null {
            $ui-font-size-active: $tab-font-size-active;
        }
 
        @if $ui-font-size-focus-over == null {
            $ui-font-size-focus-over: $tab-font-size-focus-over;
        }
 
        @if $ui-font-size-focus-active == null {
            $ui-font-size-focus-active: $tab-font-size-focus-active;
        }
 
        @if $ui-font-size-disabled == null {
            $ui-font-size-disabled: $tab-font-size-disabled;
        }
    } @else {
        @if $ui-font-size-focus == null {
            $ui-font-size-focus: $ui-font-size;
        }
 
        @if $ui-font-size-over == null {
            $ui-font-size-over: $ui-font-size;
        }
 
        @if $ui-font-size-active == null {
            $ui-font-size-active: $ui-font-size;
        }
 
        @if $ui-font-size-focus-over == null {
            $ui-font-size-focus-over: $ui-font-size-focus;
        }
 
        @if $ui-font-size-focus-active == null {
            $ui-font-size-focus-active: $ui-font-size-focus;
        }
 
        @if $ui-font-size-disabled == null {
            $ui-font-size-disabled: $ui-font-size;
        }
    }
 
    @if $ui-font-weight == null {
        $ui-font-weight: $tab-font-weight;
 
        @if $ui-font-weight-focus == null {
            $ui-font-weight-focus: $tab-font-weight-focus;
        }
 
        @if $ui-font-weight-over == null {
            $ui-font-weight-over: $tab-font-weight-over;
        }
 
        @if $ui-font-weight-active == null {
            $ui-font-weight-active: $tab-font-weight-active;
        }
 
        @if $ui-font-weight-focus-over == null {
            $ui-font-weight-focus-over: $tab-font-weight-focus-over;
        }
 
        @if $ui-font-weight-focus-active == null {
            $ui-font-weight-focus-active: $tab-font-weight-focus-active;
        }
 
        @if $ui-font-weight-disabled == null {
            $ui-font-weight-disabled: $tab-font-weight-disabled;
        }
    } @else {
        @if $ui-font-weight-focus == null {
            $ui-font-weight-focus: $ui-font-weight;
        }
 
        @if $ui-font-weight-over == null {
            $ui-font-weight-over: $ui-font-weight;
        }
 
        @if $ui-font-weight-active == null {
            $ui-font-weight-active: $ui-font-weight;
        }
 
        @if $ui-font-weight-focus-over == null {
            $ui-font-weight-focus-over: $ui-font-weight-focus;
        }
 
        @if $ui-font-weight-focus-active == null {
            $ui-font-weight-focus-active: $ui-font-weight-focus;
        }
 
        @if $ui-font-weight-disabled == null {
            $ui-font-weight-disabled: $ui-font-weight;
        }
    }
 
    @if $ui-font-family == null {
        $ui-font-family: $tab-font-family;
 
        @if $ui-font-family-focus == null {
            $ui-font-family-focus: $tab-font-family-focus;
        }
 
        @if $ui-font-family-over == null {
            $ui-font-family-over: $tab-font-family-over;
        }
 
        @if $ui-font-family-active == null {
            $ui-font-family-active: $tab-font-family-active;
        }
 
        @if $ui-font-family-focus-over == null {
            $ui-font-family-focus-over: $tab-font-family-focus-over;
        }
 
        @if $ui-font-family-focus-active == null {
            $ui-font-family-focus-active: $tab-font-family-focus-active;
        }
 
        @if $ui-font-family-disabled == null {
            $ui-font-family-disabled: $tab-font-family-disabled;
        }
    } @else {
        @if $ui-font-family-focus == null {
            $ui-font-family-focus: $ui-font-family;
        }
 
        @if $ui-font-family-over == null {
            $ui-font-family-over: $ui-font-family;
        }
 
        @if $ui-font-family-active == null {
            $ui-font-family-active: $ui-font-family;
        }
 
        @if $ui-font-family-focus-over == null {
            $ui-font-family-focus-over: $ui-font-family-focus;
        }
 
        @if $ui-font-family-focus-active == null {
            $ui-font-family-focus-active: $ui-font-family-focus;
        }
 
        @if $ui-font-family-disabled == null {
            $ui-font-family-disabled: $ui-font-family;
        }
    }
 
    @if $ui-color == null {
        $ui-color: $tab-color;
 
        @if $ui-color-focus == null {
            $ui-color-focus: $tab-color-focus;
        }
 
        @if $ui-color-disabled == null {
            $ui-color-disabled: $tab-color-disabled;
        }
    } @else {
        @if $ui-color-focus == null {
            $ui-color-focus: $ui-color;
        }
 
        @if $ui-color-disabled == null {
            $ui-color-disabled: $ui-color;
        }
    }
 
    @if $ui-color-over == null {
        $ui-color-over: $tab-color-over;
 
        @if $ui-color-focus-over == null {
            $ui-color-focus-over: $tab-color-focus-over;
        }
    } @else {
        @if $ui-color-focus-over == null {
            $ui-color-focus-over: $ui-color-over;
        }
    }
 
    @if $ui-color-active == null {
        $ui-color-active: $tab-color-active;
 
        @if $ui-color-focus-active == null {
            $ui-color-focus-active: $tab-color-focus-active;
        }
    } @else {
        @if $ui-color-focus-active == null {
            $ui-color-focus-active: $ui-color-active;
        }
    }
 
    @if $ui-plain-color == null {
        $ui-plain-color: if($ui == 'default', $tab-plain-color, $ui-color);
 
        @if $ui-plain-color-focus == null {
            $ui-plain-color-focus: $tab-plain-color-focus;
        }
 
        @if $ui-plain-color-disabled == null {
            $ui-plain-color-disabled: $tab-plain-color-disabled;
        }
    } @else {
        @if $ui-plain-color-focus == null {
            $ui-plain-color-focus: $ui-plain-color;
        }
 
        @if $ui-plain-color-disabled == null {
            $ui-plain-color-disabled: $ui-plain-color;
        }
    }
 
    @if $ui-plain-color-over == null {
        $ui-plain-color-over: $tab-plain-color-over;
 
        @if $ui-plain-color-focus-over == null {
            $ui-plain-color-focus-over: $tab-plain-color-focus-over;
        }
    } @else {
        @if $ui-plain-color-focus-over == null {
            $ui-plain-color-focus-over: $ui-plain-color-over;
        }
    }
 
    @if $ui-plain-color-active == null {
        $ui-plain-color-active: $tab-plain-color-active;
 
        @if $ui-plain-color-focus-active == null {
            $ui-plain-color-focus-active: $tab-plain-color-focus-active;
        }
    } @else {
        @if $ui-plain-color-focus-active == null {
            $ui-plain-color-focus-active: $ui-plain-color-active;
        }
    }
 
    @if $ui-background-gradient == null {
        $ui-background-gradient: $tab-background-gradient;
 
        @if $ui-background-gradient-focus == null {
            $ui-background-gradient-focus: $tab-background-gradient-focus;
        }
 
        @if $ui-background-gradient-disabled == null {
            $ui-background-gradient-disabled: $tab-background-gradient-disabled;
        }
    } @else {
        @if $ui-background-gradient-focus == null {
            $ui-background-gradient-focus: $ui-background-gradient;
        }
 
        @if $ui-background-gradient-disabled == null {
            $ui-background-gradient-disabled: $ui-background-gradient;
        }
    }
 
    @if $ui-background-gradient-over == null {
        $ui-background-gradient-over: $tab-background-gradient-over;
 
        @if $ui-background-gradient-focus-over == null {
            $ui-background-gradient-focus-over: $tab-background-gradient-focus-over;
        }
    } @else {
        @if $ui-background-gradient-focus-over == null {
            $ui-background-gradient-focus-over: $ui-background-gradient-over;
        }
    }
 
    @if $ui-background-gradient-active == null {
        $ui-background-gradient-active: $tab-background-gradient-active;
 
        @if $ui-background-gradient-focus-active == null {
            $ui-background-gradient-focus-active: $tab-background-gradient-focus-active;
        }
    } @else {
        @if $ui-background-gradient-focus-active == null {
            $ui-background-gradient-focus-active: $ui-background-gradient-active;
        }
    }
 
    @if $ui-inner-border-width == null {
        $ui-inner-border-width: $tab-inner-border-width;
 
        @if $ui-inner-border-width-focus == null {
            $ui-inner-border-width-focus: $tab-inner-border-width-focus;
        }
 
        @if $ui-inner-border-width-over == null {
            $ui-inner-border-width-over: $tab-inner-border-width-over;
        }
 
        @if $ui-inner-border-width-active == null {
            $ui-inner-border-width-active: $tab-inner-border-width-active;
        }
 
        @if $ui-inner-border-width-focus-over == null {
            $ui-inner-border-width-focus-over: $tab-inner-border-width-focus-over;
        }
 
        @if $ui-inner-border-width-focus-active == null {
            $ui-inner-border-width-focus-active: $tab-inner-border-width-focus-active;
        }
 
        @if $ui-inner-border-width-disabled == null {
            $ui-inner-border-width-disabled: $tab-inner-border-width-disabled;
        }
    } @else {
        @if $ui-inner-border-width-focus == null {
            $ui-inner-border-width-focus: $ui-inner-border-width;
        }
 
        @if $ui-inner-border-width-over == null {
            $ui-inner-border-width-over: $ui-inner-border-width;
        }
 
        @if $ui-inner-border-width-active == null {
            $ui-inner-border-width-active: $ui-inner-border-width;
        }
 
        @if $ui-inner-border-width-focus-over == null {
            $ui-inner-border-width-focus-over: $ui-inner-border-width-focus;
        }
 
        @if $ui-inner-border-width-focus-active == null {
            $ui-inner-border-width-focus-active: $ui-inner-border-width-focus;
        }
 
        @if $ui-inner-border-width-disabled == null {
            $ui-inner-border-width-disabled: $ui-inner-border-width;
        }
    }
 
    @if $ui-inner-border-color == null {
        $ui-inner-border-color: tab-inner-border-color($ui-background-color, $ui-border-color);
 
        @if $ui-inner-border-color-focus == null {
            $ui-inner-border-color-focus: $tab-inner-border-color-focus;
        }
 
        @if $ui-inner-border-color-over == null {
            $ui-inner-border-color-over: $tab-inner-border-color-over;
        }
 
        @if $ui-inner-border-color-active == null {
            $ui-inner-border-color-active: $tab-inner-border-color-active;
        }
 
        @if $ui-inner-border-color-focus-over == null {
            $ui-inner-border-color-focus-over: $tab-inner-border-color-focus-over;
        }
 
        @if $ui-inner-border-color-focus-active == null {
            $ui-inner-border-color-focus-active: $tab-inner-border-color-focus-active;
        }
 
        @if $ui-inner-border-color-disabled == null {
            $ui-inner-border-color-disabled: $tab-inner-border-color-disabled;
        }
    } @else {
        @if $ui-inner-border-color-focus == null {
            $ui-inner-border-color-focus: tab-inner-border-color-focus($ui-background-color-focus, $ui-border-color-focus);
        }
 
        @if $ui-inner-border-color-over == null {
            $ui-inner-border-color-over: tab-inner-border-color-over($ui-background-color-over, $ui-border-color-over);
        }
 
        @if $ui-inner-border-color-active == null {
            $ui-inner-border-color-active: tab-inner-border-color-active($ui-background-color-active, $ui-border-color-active);
        }
 
        @if $ui-inner-border-color-focus-over == null {
            $ui-inner-border-color-focus-over: tab-inner-border-color-focus-over($ui-background-color-focus-over, $ui-border-color-focus-over);
        }
 
        @if $ui-inner-border-color-focus-active == null {
            $ui-inner-border-color-focus-active: tab-inner-border-color-focus-active($ui-background-color-focus-active, $ui-border-color-focus-active);
        }
 
        @if $ui-inner-border-color-disabled == null {
            $ui-inner-border-color-disabled: tab-inner-border-color-disabled($ui-background-color-disabled, $ui-border-color-disabled);
        }
    }
 
    @if $ui-inner-border-collapse == null {
        $ui-inner-border-collapse: $tab-inner-border-collapse;
 
        @if $ui-inner-border-collapse-focus == null {
            $ui-inner-border-collapse-focus: $tab-inner-border-collapse-focus;
        }
 
        @if $ui-inner-border-collapse-over == null {
            $ui-inner-border-collapse-over: $tab-inner-border-collapse-over;
        }
 
        @if $ui-inner-border-collapse-active == null {
            $ui-inner-border-collapse-active: $tab-inner-border-collapse-active;
        }
 
        @if $ui-inner-border-collapse-focus-over == null {
            $ui-inner-border-collapse-focus-over: $tab-inner-border-collapse-focus-over;
        }
 
        @if $ui-inner-border-collapse-focus-active == null {
            $ui-inner-border-collapse-focus-active: $tab-inner-border-collapse-focus-active;
        }
 
        @if $ui-inner-border-collapse-disabled == null {
            $ui-inner-border-collapse-disabled: $tab-inner-border-collapse-disabled;
        }
    } @else {
        @if $ui-inner-border-collapse-focus == null {
            $ui-inner-border-collapse-focus: $ui-inner-border-collapse;
        }
 
        @if $ui-inner-border-collapse-over == null {
            $ui-inner-border-collapse-over: $ui-inner-border-collapse;
        }
 
        @if $ui-inner-border-collapse-active == null {
            $ui-inner-border-collapse-active: $ui-inner-border-collapse;
        }
 
        @if $ui-inner-border-collapse-focus-over == null {
            $ui-inner-border-collapse-focus-over: $ui-inner-border-collapse-focus;
        }
 
        @if $ui-inner-border-collapse-focus-active == null {
            $ui-inner-border-collapse-focus-active: $ui-inner-border-collapse-focus;
        }
 
        @if $ui-inner-border-collapse-disabled == null {
            $ui-inner-border-collapse-disabled: $ui-inner-border-collapse;
        }
    }
 
    @if $ui-glyph-color == null {
        $ui-glyph-color: $tab-glyph-color;
 
        @if $ui-glyph-color-focus == null {
            $ui-glyph-color-focus: $tab-glyph-color-focus;
        }
 
        @if $ui-glyph-color-disabled == null {
            $ui-glyph-color-disabled: $tab-glyph-color-disabled;
        }
    } @else {
        @if $ui-glyph-color-focus == null {
            $ui-glyph-color-focus: $ui-glyph-color;
        }
 
        @if $ui-glyph-color-disabled == null {
            $ui-glyph-color-disabled: $ui-glyph-color;
        }
    }
 
    @if $ui-glyph-color-over == null {
        $ui-glyph-color-over: $tab-glyph-color-over;
 
        @if $ui-glyph-color-focus-over == null {
            $ui-glyph-color-focus-over: $tab-glyph-color-focus-over;
        }
    } @else {
        @if $ui-glyph-color-focus-over == null {
            $ui-glyph-color-focus-over: $ui-glyph-color-over;
        }
    }
 
    @if $ui-glyph-color-active == null {
        $ui-glyph-color-active: $tab-glyph-color-active;
 
        @if $ui-glyph-color-focus-active == null {
            $ui-glyph-color-focus-active: $tab-glyph-color-focus-active;
        }
    } @else {
        @if $ui-glyph-color-focus-active == null {
            $ui-glyph-color-focus-active: $ui-glyph-color-active;
        }
    }
 
    @if $ui-plain-glyph-color == null {
        $ui-plain-glyph-color: $tab-plain-glyph-color;
 
        @if $ui-plain-glyph-color-focus == null {
            $ui-plain-glyph-color-focus: $tab-plain-glyph-color-focus;
        }
 
        @if $ui-plain-glyph-color-disabled == null {
            $ui-plain-glyph-color-disabled: $tab-plain-glyph-color-disabled;
        }
    } @else {
        @if $ui-plain-glyph-color-focus == null {
            $ui-plain-glyph-color-focus: $ui-plain-glyph-color;
        }
 
        @if $ui-plain-glyph-color-disabled == null {
            $ui-plain-glyph-color-disabled: $ui-plain-glyph-color;
        }
    }
 
    @if $ui-plain-glyph-color-over == null {
        $ui-plain-glyph-color-over: $tab-plain-glyph-color-over;
 
        @if $ui-plain-glyph-color-focus-over == null {
            $ui-plain-glyph-color-focus-over: $tab-plain-glyph-color-focus-over;
        }
    } @else {
        @if $ui-plain-glyph-color-focus-over == null {
            $ui-plain-glyph-color-focus-over: $ui-plain-glyph-color-over;
        }
    }
 
    @if $ui-plain-glyph-color-active == null {
        $ui-plain-glyph-color-active: $tab-plain-glyph-color-active;
 
        @if $ui-plain-glyph-color-focus-active == null {
            $ui-plain-glyph-color-focus-active: $tab-plain-glyph-color-focus-active;
        }
    } @else {
        @if $ui-plain-glyph-color-focus-active == null {
            $ui-plain-glyph-color-focus-active: $ui-plain-glyph-color-active;
        }
    }
 
    @if $ui-closable-icon-glyph-color == null {
        $ui-closable-icon-glyph-color: $tab-closable-icon-glyph-color;
 
        @if $ui-closable-icon-glyph-color-focus == null {
            $ui-closable-icon-glyph-color-focus: $tab-closable-icon-glyph-color-focus;
        }
 
        @if $ui-closable-icon-glyph-color-disabled == null {
            $ui-closable-icon-glyph-color-disabled: $tab-closable-icon-glyph-color-disabled;
        }
    } @else {
        @if $ui-closable-icon-glyph-color-focus == null {
            $ui-closable-icon-glyph-color-focus: $ui-closable-icon-glyph-color;
        }
 
        @if $ui-closable-icon-glyph-color-disabled == null {
            $ui-closable-icon-glyph-color-disabled: $ui-closable-icon-glyph-color;
        }
    }
 
    @if $ui-closable-icon-glyph-color-over == null {
        $ui-closable-icon-glyph-color-over: $tab-closable-icon-glyph-color-over;
 
        @if $ui-closable-icon-glyph-color-focus-over == null {
            $ui-closable-icon-glyph-color-focus-over: $tab-closable-icon-glyph-color-focus-over;
        }
    } @else {
        @if $ui-closable-icon-glyph-color-focus-over == null {
            $ui-closable-icon-glyph-color-focus-over: $ui-closable-icon-glyph-color-over;
        }
    }
 
    @if $ui-closable-icon-glyph-color-active == null {
        $ui-closable-icon-glyph-color-active: $tab-closable-icon-glyph-color-active;
 
        @if $ui-closable-icon-glyph-color-focus-active == null {
            $ui-closable-icon-glyph-color-focus-active: $tab-closable-icon-glyph-color-focus-active;
        }
    } @else {
        @if $ui-closable-icon-glyph-color-focus-active == null {
            $ui-closable-icon-glyph-color-focus-active: $ui-closable-icon-glyph-color-active;
        }
    }
 
    @if $ui-plain-closable-icon-glyph-color == null {
        $ui-plain-closable-icon-glyph-color: $tab-plain-closable-icon-glyph-color;
 
        @if $ui-plain-closable-icon-glyph-color-focus == null {
            $ui-plain-closable-icon-glyph-color-focus: $tab-plain-closable-icon-glyph-color-focus;
        }
 
        @if $ui-plain-closable-icon-glyph-color-disabled == null {
            $ui-plain-closable-icon-glyph-color-disabled: $tab-plain-closable-icon-glyph-color-disabled;
        }
    } @else {
        @if $ui-plain-closable-icon-glyph-color-focus == null {
            $ui-plain-closable-icon-glyph-color-focus: $ui-plain-closable-icon-glyph-color;
        }
 
        @if $ui-plain-closable-icon-glyph-color-disabled == null {
            $ui-plain-closable-icon-glyph-color-disabled: $ui-plain-closable-icon-glyph-color;
        }
    }
 
    @if $ui-plain-closable-icon-glyph-color-over == null {
        $ui-plain-closable-icon-glyph-color-over: $tab-plain-closable-icon-glyph-color-over;
 
        @if $ui-plain-closable-icon-glyph-color-focus-over == null {
            $ui-plain-closable-icon-glyph-color-focus-over: $tab-plain-closable-icon-glyph-color-focus-over;
        }
    } @else {
        @if $ui-plain-closable-icon-glyph-color-focus-over == null {
            $ui-plain-closable-icon-glyph-color-focus-over: $ui-plain-closable-icon-glyph-color-over;
        }
    }
 
    @if $ui-plain-closable-icon-glyph-color-active == null {
        $ui-plain-closable-icon-glyph-color-active: $tab-plain-closable-icon-glyph-color-active;
 
        @if $ui-plain-closable-icon-glyph-color-focus-active == null {
            $ui-plain-closable-icon-glyph-color-focus-active: $tab-plain-closable-icon-glyph-color-focus-active;
        }
    } @else {
        @if $ui-plain-closable-icon-glyph-color-focus-active == null {
            $ui-plain-closable-icon-glyph-color-focus-active: $ui-plain-closable-icon-glyph-color-active;
        }
    }
 
    $inner-border-max: max(
        max(top($ui-inner-border-width) right($ui-inner-border-width) bottom($ui-inner-border-width) left($ui-inner-border-width))
        max(top($ui-inner-border-width-focus) right($ui-inner-border-width-focus) bottom($ui-inner-border-width-focus) left($ui-inner-border-width-focus))
        max(top($ui-inner-border-width-over) right($ui-inner-border-width-over) bottom($ui-inner-border-width-over) left($ui-inner-border-width-over))
        max(top($ui-inner-border-width-active) right($ui-inner-border-width-active) bottom($ui-inner-border-width-active) left($ui-inner-border-width-active))
        max(top($ui-inner-border-width-disabled) right($ui-inner-border-width-disabled) bottom($ui-inner-border-width-disabled) left($ui-inner-border-width-disabled))
    );
 
    $frame-size: frame-size($ui-border-width, $inner-border-max, $ui-border-radius);
 
    @include x-frame(
        $cls: 'tab',
        $ui: $ui + '-top',
        $border-radius: $ui-border-radius,
        $border-width: $ui-border-width,
        $background-color: $ui-background-color,
        $background-gradient: $ui-background-gradient,
        $background-direction: top,
        $padding: $ui-padding,
        $inner-border-width: $ui-inner-border-width,
        $table: true
    );
 
    @include x-frame(
        $cls: 'tab',
        $ui: $ui + '-bottom',
        $border-radius: rotate180($ui-border-radius),
        $border-width: rotate180($ui-border-width),
        $background-color: $ui-background-color,
        $background-gradient: $ui-background-gradient,
        $background-direction: bottom,
        $padding: rotate180($ui-padding),
        $inner-border-width: $ui-inner-border-width,
        $table: true
    );
 
    @include x-frame(
        $cls: 'tab',
        $ui: $ui + '-left',
        $border-radius: rotate270($ui-border-radius),
        $border-width: rotate270($ui-border-width),
        $background-color: $ui-background-color,
        $background-gradient: $ui-background-gradient,
        $background-direction: top,
        $padding: $ui-padding,
        $inner-border-width: $ui-inner-border-width,
        $table: true
    );
 
    @include x-frame(
        $cls: 'tab',
        $ui: $ui + '-right',
        $border-radius: rotate90($ui-border-radius),
        $border-width: rotate90($ui-border-width),
        $background-color: $ui-background-color,
        $background-gradient: $ui-background-gradient,
        $background-direction: top,
        $padding: $ui-padding,
        $inner-border-width: $ui-inner-border-width,
        $table: true
    );
 
    @if $include-ie {
        @mixin ie-tab-rotate($rotate) {
            -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotate})";
        }
 
        @mixin ie-tab-alpharotate($alpha, $rotate) {
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$alpha * 100}),progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotate})";
        }
    }
 
    .#{$prefix}tab-#{$ui} {
        border-color: $ui-border-color;
        @if not is-null($ui-cursor) {
            cursor: $ui-cursor;
        }
        @if not is-null($ui-inner-border-width) and not is-null($ui-inner-border-color) and $ui-inner-border-width != 0 {
            @include inner-border($ui-inner-border-width, $ui-inner-border-color);
        }
        @if ($ui-opacity != null) and ($ui-opacity != 1) {
            @include opacity($ui-opacity);
 
            @if $include-ie {
                &.#{$prefix}tab-rotate-left {
                    .#{$prefix}ie8 & {
                        @include ie-tab-alpharotate($ui-opacity, 3);
                    }
                }
 
                &.#{$prefix}tab-rotate-right {
                    .#{$prefix}ie8 & {
                        @include ie-tab-alpharotate($ui-opacity, 1);
                    }
                }
            }
        }
        @if ($ui-background-opacity != null) and ($ui-background-opacity != 1) {
            @include background-opacity($ui-background-color, $ui-background-opacity);
 
            @if $include-ie {
                // Background opacity uses a filter in IE8, which overrides the rotation filter
                // Unfortunately rotation and opacity cannot coexist, or the tab background
                // turns black, so we will just have to do without background opacity in IE8
                &.#{$prefix}tab-rotate-left {
                    .#{$prefix}ie8 & {
                        @include ie-tab-rotate(3);
                    }
                }
 
                &.#{$prefix}tab-rotate-right {
                    .#{$prefix}ie8 & {
                        @include ie-tab-rotate(1);
                    }
                }
            }
        }
 
        @if $ui-plain-background-color != $ui-background-color {
            .#{$prefix}tab-bar-plain & {
                background-color: $ui-plain-background-color;
            }
        }
 
        @if $ui-plain-border-color != $ui-border-color {
            .#{$prefix}tab-bar-plain & {
                border-color: $ui-plain-border-color;
            }
        }
    }
 
    .#{$prefix}tab-#{$ui}-top {
        margin: $ui-margin;
 
        @if $include-rtl {
            &.#{$prefix}rtl {
                margin: rtl($ui-margin);
            }
        }
 
        &.#{$prefix}tab-rotate-left {
            margin: rtl($ui-margin);
 
            @if $include-rtl {
                &.#{$prefix}rtl {
                    margin: $ui-margin;
                }
            }
        }
 
        @if not is-null($ui-inner-border-width) and not is-null($ui-inner-border-color) and $ui-inner-border-width != 0 {
            @include inner-border(
                if(
                    $ui-inner-border-collapse,
                    top($ui-inner-border-width) right($ui-inner-border-width) 0 left($ui-inner-border-width),
                    $ui-inner-border-width
                ),
                $ui-inner-border-color
            );
        }
 
        @if not is-null($ui-inner-border-width-focus) and not is-null($ui-inner-border-color-focus) {
            &.#{$prefix}tab-focus {
                .#{$prefix}keyboard-mode & {
                    @include inner-border(
                        if(
                            $ui-inner-border-collapse-focus,
                            top($ui-inner-border-width-focus) right($ui-inner-border-width-focus) 0 left($ui-inner-border-width-focus),
                            $ui-inner-border-width-focus
                        ),
                        $ui-inner-border-color-focus
                    );
                }
            }
        }
 
        @if not is-null($ui-inner-border-width-over) and not is-null($ui-inner-border-color-over) {
            &.#{$prefix}tab-over {
                @include inner-border(
                    if(
                        $ui-inner-border-collapse-over,
                        top($ui-inner-border-width-over) right($ui-inner-border-width-over) 0 left($ui-inner-border-width-over),
                        $ui-inner-border-width-over
                    ),
                    $ui-inner-border-color-over
                );
            }
        }
 
        @if not is-null($ui-inner-border-width-focus-over) and not is-null($ui-inner-border-color-focus-over) and
                ($ui-inner-border-width-focus-over != $ui-inner-border-width-over or
                $ui-inner-border-color-focus-over != $ui-inner-border-color-over or
                $ui-inner-border-collapse-focus-over != $ui-inner-border-collapse-over) {
            &.#{$prefix}tab-focus.#{$prefix}tab-over {
                .#{$prefix}keyboard-mode & {
                    @include inner-border(
                        if(
                            $ui-inner-border-collapse-focus-over,
                            top($ui-inner-border-width-focus-over) right($ui-inner-border-width-focus-over) 0 left($ui-inner-border-width-focus-over),
                            $ui-inner-border-width-focus-over
                        ),
                        $ui-inner-border-color-focus-over
                    );
                }
            }
        }
 
        @if not is-null($ui-inner-border-width-active) and not is-null($ui-inner-border-color-active) {
            &.#{$prefix}tab.#{$prefix}tab-active {
                @include inner-border(
                    if(
                        $ui-inner-border-collapse-active,
                        top($ui-inner-border-width-active) right($ui-inner-border-width-active) 0 left($ui-inner-border-width-active),
                        $ui-inner-border-width-active
                    ),
                    $ui-inner-border-color-active
                );
            }
        }
 
        @if not is-null($ui-inner-border-width-focus-active) and not is-null($ui-inner-border-color-focus-active) and
                ($ui-inner-border-width-focus-active != $ui-inner-border-width-active or
                $ui-inner-border-color-focus-active != $ui-inner-border-color-active or
                $ui-inner-border-collapse-focus-active != $ui-inner-border-collapse-active) {
            &.#{$prefix}tab-focus.#{$prefix}tab-active {
                .#{$prefix}keyboard-mode & {
                    @include inner-border(
                        if(
                            $ui-inner-border-collapse-focus-active,
                            top($ui-inner-border-width-focus-active) right($ui-inner-border-width-focus-active) 0 left($ui-inner-border-width-focus-active),
                            $ui-inner-border-width-focus-active
                        ),
                        $ui-inner-border-color-focus-active
                    );
                }
            }
        }
 
        @if not is-null($ui-inner-border-width-disabled) and not is-null($ui-inner-border-color-disabled) {
            &.#{$prefix}tab.#{$prefix}tab-disabled {
                @include inner-border(
                    if(
                        $ui-inner-border-collapse-disabled,
                        top($ui-inner-border-width-disabled) right($ui-inner-border-width-disabled) 0 left($ui-inner-border-width-disabled),
                        $ui-inner-border-width-disabled
                    ),
                    $ui-inner-border-color-disabled
                );
            }
        }
    }
 
    .#{$prefix}tab-#{$ui}-right {
        margin: rotate90($ui-margin);
 
        @if $include-rtl {
            &.#{$prefix}rtl {
                margin: rtl(rotate90($ui-margin));
            }
        }
 
        &.#{$prefix}tab-rotate-right {
            margin: flip-vertical(rotate90($ui-margin));
 
            @if $include-rtl {
                &.#{$prefix}rtl {
                    margin: rtl(flip-vertical(rotate90($ui-margin)));
                }
            }
        }
 
        @if not is-null($ui-inner-border-width) and not is-null($ui-inner-border-color) and $ui-inner-border-width != 0 {
            @include inner-border(
                if(
                    $ui-inner-border-collapse,
                    top($ui-inner-border-width) right($ui-inner-border-width) bottom($ui-inner-border-width) 0,
                    $ui-inner-border-width
                ),
                $ui-inner-border-color
            );
        }
 
        @if not is-null($ui-inner-border-width-focus) and not is-null($ui-inner-border-color-focus) {
            &.#{$prefix}tab-focus {
                .#{$prefix}keyboard-mode & {
                    @include inner-border(
                        if(
                            $ui-inner-border-collapse-focus,
                            top($ui-inner-border-width-focus) right($ui-inner-border-width-focus) bottom($ui-inner-border-width-focus) 0,
                            $ui-inner-border-width-focus
                        ),
                        $ui-inner-border-color-focus
                    );
                }
            }
        }
 
        @if not is-null($ui-inner-border-width-over) and not is-null($ui-inner-border-color-over) {
            &.#{$prefix}tab-over {
                @include inner-border(
                    if(
                        $ui-inner-border-collapse-over,
                        top($ui-inner-border-width-over) right($ui-inner-border-width-over) bottom($ui-inner-border-width-over) 0,
                        $ui-inner-border-width-over
                    ),
                    $ui-inner-border-color-over
                );
            }
        }
 
        @if not is-null($ui-inner-border-width-focus-over) and not is-null($ui-inner-border-color-focus-over) and
                ($ui-inner-border-width-focus-over != $ui-inner-border-width-over or
                $ui-inner-border-color-focus-over != $ui-inner-border-color-over or
                $ui-inner-border-collapse-focus-over != $ui-inner-border-collapse-over) {
            &.#{$prefix}tab-focus.#{$prefix}tab-over {
                .#{$prefix}keyboard-mode & {
                    @include inner-border(
                        if(
                            $ui-inner-border-collapse-focus-over,
                            top($ui-inner-border-width-focus-over) right($ui-inner-border-width-focus-over) bottom($ui-inner-border-width-focus-over) 0,
                            $ui-inner-border-width-focus-over
                        ),
                        $ui-inner-border-color-focus-over
                    );
                }
            }
        }
 
        @if not is-null($ui-inner-border-width-active) and not is-null($ui-inner-border-color-active) {
            &.#{$prefix}tab.#{$prefix}tab-active {
                @include inner-border(
                    if(
                        $ui-inner-border-collapse-active,
                        top($ui-inner-border-width-active) right($ui-inner-border-width-active) bottom($ui-inner-border-width-active) 0,
                        $ui-inner-border-width-active
                    ),
                    $ui-inner-border-color-active
                );
            }
        }
 
        @if not is-null($ui-inner-border-width-focus-active) and not is-null($ui-inner-border-color-focus-active) and
                ($ui-inner-border-width-focus-active != $ui-inner-border-width-active or
                $ui-inner-border-color-focus-active != $ui-inner-border-color-active or
                $ui-inner-border-collapse-focus-active != $ui-inner-border-collapse-active) {
            &.#{$prefix}tab-focus.#{$prefix}tab-active {
                .#{$prefix}keyboard-mode & {
                    @include inner-border(
                        if(
                            $ui-inner-border-collapse-focus-active,
                            top($ui-inner-border-width-focus-active) right($ui-inner-border-width-focus-active) bottom($ui-inner-border-width-focus-active) 0,
                            $ui-inner-border-width-focus-active
                        ),
                        $ui-inner-border-color-focus-active
                    );
                }
            }
        }
 
        @if not is-null($ui-inner-border-width-disabled) and not is-null($ui-inner-border-color-disabled) {
            &.#{$prefix}tab.#{$prefix}tab-disabled {
                @include inner-border(
                    if(
                        $ui-inner-border-collapse-disabled,
                        top($ui-inner-border-width-disabled) right($ui-inner-border-width-disabled) bottom($ui-inner-border-width-disabled) 0,
                        $ui-inner-border-width-disabled
                    ),
                    $ui-inner-border-color-disabled
                );
            }
        }
    }
 
    .#{$prefix}tab-#{$ui}-bottom {
        margin: flip-vertical($ui-margin);
 
        @if $include-rtl {
            &.#{$prefix}rtl {
                margin: rtl(flip-vertical($ui-margin));
            }
        }
 
        &.#{$prefix}tab-rotate-left {
            margin: rotate180($ui-margin);
 
            @if $include-rtl {
                &.#{$prefix}rtl {
                    margin: rtl(rotate180($ui-margin));
                }
            }
        }
 
        @if not is-null($ui-inner-border-width) and not is-null($ui-inner-border-color) and $ui-inner-border-width != 0 {
            @include inner-border(
                if(
                    $ui-inner-border-collapse,
                    0 right($ui-inner-border-width) top($ui-inner-border-width) left($ui-inner-border-width),
                    $ui-inner-border-width
                ),
                $ui-inner-border-color
            );
        }
 
        @if not is-null($ui-inner-border-width-focus) and not is-null($ui-inner-border-color-focus) {
            &.#{$prefix}tab-focus {
                .#{$prefix}keyboard-mode & {
                    @include inner-border(
                        if(
                            $ui-inner-border-collapse-focus,
                            0 right($ui-inner-border-width-focus) top($ui-inner-border-width-focus) left($ui-inner-border-width-focus),
                            $ui-inner-border-width-focus
                        ),
                        $ui-inner-border-color-focus
                    );
                }
            }
        }
 
        @if not is-null($ui-inner-border-width-over) and not is-null($ui-inner-border-color-over) {
            &.#{$prefix}tab-over {
                @include inner-border(
                    if(
                        $ui-inner-border-collapse-over,
                        0 right($ui-inner-border-width-over) top($ui-inner-border-width-over) left($ui-inner-border-width-over),
                        $ui-inner-border-width-over
                    ),
                    $ui-inner-border-color-over
                );
            }
        }
 
        @if not is-null($ui-inner-border-width-focus-over) and not is-null($ui-inner-border-color-focus-over) and
                ($ui-inner-border-width-focus-over != $ui-inner-border-width-over or
                $ui-inner-border-color-focus-over != $ui-inner-border-color-over or
                $ui-inner-border-collapse-focus-over != $ui-inner-border-collapse-over) {
            &.#{$prefix}tab-focus.#{$prefix}tab-over {
                .#{$prefix}keyboard-mode & {
                    @include inner-border(
                        if(
                            $ui-inner-border-collapse-focus-over,
                            0 right($ui-inner-border-width-focus-over) top($ui-inner-border-width-focus-over) left($ui-inner-border-width-focus-over),
                            $ui-inner-border-width-focus-over
                        ),
                        $ui-inner-border-color-focus-over
                    );
                }
            }
        }
 
        @if not is-null($ui-inner-border-width-active) and not is-null($ui-inner-border-color-active) {
            &.#{$prefix}tab.#{$prefix}tab-active {
                @include inner-border(
                    if(
                        $ui-inner-border-collapse-active,
                        0 right($ui-inner-border-width-active) top($ui-inner-border-width-active) left($ui-inner-border-width-active),
                        $ui-inner-border-width-active
                    ),
                    $ui-inner-border-color-active
                );
            }
        }
 
        @if not is-null($ui-inner-border-width-focus-active) and not is-null($ui-inner-border-color-focus-active) and
                ($ui-inner-border-width-focus-active != $ui-inner-border-width-active or
                $ui-inner-border-color-focus-active != $ui-inner-border-color-active or
                $ui-inner-border-collapse-focus-active != $ui-inner-border-collapse-active) {
            &.#{$prefix}tab-focus.#{$prefix}tab-active {
                .#{$prefix}keyboard-mode & {
                    @include inner-border(
                        if(
                            $ui-inner-border-collapse-focus-active,
                            0 right($ui-inner-border-width-focus-active) top($ui-inner-border-width-focus-active) left($ui-inner-border-width-focus-active),
                            $ui-inner-border-width-focus-active
                        ),
                        $ui-inner-border-color-focus-active
                    );
                }
            }
        }
 
        @if not is-null($ui-inner-border-width-disabled) and not is-null($ui-inner-border-color-disabled) {
            &.#{$prefix}tab.#{$prefix}tab-disabled {
                @include inner-border(
                    if(
                        $ui-inner-border-collapse-disabled,
                        0 right($ui-inner-border-width-disabled) top($ui-inner-border-width-disabled) left($ui-inner-border-width-disabled),
                        $ui-inner-border-width-disabled
                    ),
                    $ui-inner-border-color-disabled
                );
            }
        }
    }
 
    .#{$prefix}tab-#{$ui}-left {
        margin: rtl(rotate90($ui-margin));
 
        @if $include-rtl {
            &.#{$prefix}rtl {
                margin: rotate90($ui-margin);
            }
        }
 
        &.#{$prefix}tab-rotate-right {
            margin: rotate270($ui-margin);
 
            @if $include-rtl {
                &.#{$prefix}rtl {
                    margin: rtl(rotate270($ui-margin));
                }
            }
        }
 
        @if not is-null($ui-inner-border-width) and not is-null($ui-inner-border-color) and $ui-inner-border-width != 0 {
            @include inner-border(
                if(
                    $ui-inner-border-collapse,
                    top($ui-inner-border-width) 0 bottom($ui-inner-border-width) left($ui-inner-border-width),
                    $ui-inner-border-width
                ),
                $ui-inner-border-color
            );
        }
 
        @if not is-null($ui-inner-border-width-focus) and not is-null($ui-inner-border-color-focus) {
            &.#{$prefix}tab-focus {
                .#{$prefix}keyboard-mode & {
                    @include inner-border(
                        if(
                            $ui-inner-border-collapse-focus,
                            top($ui-inner-border-width-focus) 0 bottom($ui-inner-border-width-focus) left($ui-inner-border-width-focus),
                            $ui-inner-border-width-focus
                        ),
                        $ui-inner-border-color-focus
                    );
                }
            }
        }
 
        @if not is-null($ui-inner-border-width-over) and not is-null($ui-inner-border-color-over) {
            &.#{$prefix}tab-over {
                @include inner-border(
                    if(
                        $ui-inner-border-collapse-over,
                        top($ui-inner-border-width-over) 0 bottom($ui-inner-border-width-over) left($ui-inner-border-width-over),
                        $ui-inner-border-width-over
                    ),
                    $ui-inner-border-color-over
                );
            }
        }
 
        @if not is-null($ui-inner-border-width-focus-over) and not is-null($ui-inner-border-color-focus-over) and
                ($ui-inner-border-width-focus-over != $ui-inner-border-width-over or
                $ui-inner-border-color-focus-over != $ui-inner-border-color-over or
                $ui-inner-border-collapse-focus-over != $ui-inner-border-collapse-over) {
            &.#{$prefix}tab-focus.#{$prefix}tab-over {
                .#{$prefix}keyboard-mode & {
                    @include inner-border(
                        if(
                            $ui-inner-border-collapse-focus-over,
                            top($ui-inner-border-width-focus-over) 0 bottom($ui-inner-border-width-focus-over) left($ui-inner-border-width-focus-over),
                            $ui-inner-border-width-focus-over
                        ),
                        $ui-inner-border-color-focus-over
                    );
                }
            }
        }
 
        @if not is-null($ui-inner-border-width-active) and not is-null($ui-inner-border-color-active) {
            &.#{$prefix}tab.#{$prefix}tab-active {
                @include inner-border(
                    if(
                        $ui-inner-border-collapse-active,
                        top($ui-inner-border-width-active) 0 bottom($ui-inner-border-width-active) left($ui-inner-border-width-active),
                        $ui-inner-border-width-active
                    ),
                    $ui-inner-border-color-active
                );
            }
        }
 
        @if not is-null($ui-inner-border-width-focus-active) and not is-null($ui-inner-border-color-focus-active) and
                ($ui-inner-border-width-focus-active != $ui-inner-border-width-active or
                $ui-inner-border-color-focus-active != $ui-inner-border-color-active or
                $ui-inner-border-collapse-focus-active != $ui-inner-border-collapse-active) {
            &.#{$prefix}tab-focus.#{$prefix}tab-active {
                .#{$prefix}keyboard-mode & {
                    @include inner-border(
                        if(
                            $ui-inner-border-collapse-focus-active,
                            top($ui-inner-border-width-focus-active) 0 bottom($ui-inner-border-width-focus-active) left($ui-inner-border-width-focus-active),
                            $ui-inner-border-width-focus-active
                        ),
                        $ui-inner-border-color-focus-active
                    );
                }
            }
        }
 
        @if not is-null($ui-inner-border-width-disabled) and not is-null($ui-inner-border-color-disabled) {
            &.#{$prefix}tab.#{$prefix}tab-disabled {
                @include inner-border(
                    if(
                        $ui-inner-border-collapse-disabled,
                        top($ui-inner-border-width-disabled) 0 bottom($ui-inner-border-width-disabled) left($ui-inner-border-width-disabled),
                        $ui-inner-border-width-disabled
                    ),
                    $ui-inner-border-color-disabled
                );
            }
        }
    }
 
    .#{$prefix}tab-button-#{$ui} {
        // this is a table cell, so height here is essentially min-height
        height: max($ui-icon-height, $ui-line-height);
    }
 
    .#{$prefix}tab-inner-#{$ui} {
        font: $ui-font-weight #{$ui-font-size}/#{$ui-line-height} $ui-font-family;
        color: $ui-color;
        @if $ui-text-padding != 0 {
            padding: 0 $ui-text-padding;
        }
 
        @if ($ui-plain-color != null) and ($ui-plain-color != $ui-color) {
            .#{$prefix}tab-bar-plain & {
                color: $ui-plain-color;
            }
        }
 
        // inner el requires max-width in order for ellipsis to work.
        max-width: 100%;
 
        .#{$prefix}tab-icon-right > &,
        .#{$prefix}tab-icon-left > & {
            // since calc is only supported in IE9+ ellipsis will not work in IE8 when
            // there is a left or right icon present
            max-width: calc(100% - #{$ui-icon-width});
        }
    }
 
    .#{$prefix}tab-icon-el-#{$ui} {
        .#{$prefix}tab-icon-left > &,
        .#{$prefix}tab-icon-right > & {
            width: $ui-icon-width;
        }
 
        .#{$prefix}tab-icon-top > &,
        .#{$prefix}tab-icon-bottom > & {
            min-width: $ui-icon-width;
        }
 
        min-height: $ui-icon-height;
        background-position: $ui-icon-background-position;
        font-size: $ui-icon-height;
        line-height: $ui-icon-height;
        color: $ui-glyph-color;
        @if $ui-plain-glyph-color != null {
            .#{$prefix}tab-bar-plain & {
                color: $ui-plain-glyph-color;
            }
        }
 
        &.#{$prefix}tab-glyph {
            @if $ui-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-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.
            @if $include-ie and $ui-background-color != transparent {
                .#{$prefix}ie8 & {
                    color: mix($ui-glyph-color, $ui-background-color, $ui-glyph-opacity * 100);
                }
            }
        }
 
        // when the tab contains both icon and text, add $icon-spacing to the icon
        .#{$prefix}tab-text.#{$prefix}tab-icon-left > & {
            margin-right: max($ui-icon-spacing - $ui-text-padding, 0);
 
            @if $include-rtl {
                &.#{$prefix}rtl {
                    margin-right: 0;
                    margin-left: max($ui-icon-spacing - $ui-text-padding, 0);
                }
            }
        }
 
        .#{$prefix}tab-text.#{$prefix}tab-icon-right > & {
            margin-left: max($ui-icon-spacing - $ui-text-padding, 0);
 
            @if $include-rtl {
                &.#{$prefix}rtl {
                    margin-left: 0;
                    margin-right: max($ui-icon-spacing - $ui-text-padding, 0);
                }
            }
        }
 
        .#{$prefix}tab-text.#{$prefix}tab-icon-top > & {
            margin-bottom: $ui-icon-spacing;
        }
 
        .#{$prefix}tab-text.#{$prefix}tab-icon-bottom > & {
            margin-top: $ui-icon-spacing;
        }
    }
 
    .#{$prefix}tab-focus.#{$prefix}tab-#{$ui} {
        .#{$prefix}keyboard-mode & {
            border-color: $ui-border-color-focus;
 
            @if ($ui-opacity-focus != null) {
                @include opacity($ui-opacity-focus);
            }
 
            @if ($ui-background-opacity-focus != null) {
                @include background-opacity($ui-background-color-focus, $ui-background-opacity-focus);
            } @else {
                background-color: $ui-background-color-focus;
            }
 
            @if $ui-outline-width-focus != 0 {
                @include css-outline(
                    $ui-outline-width-focus,
                    $ui-outline-style-focus,
                    $ui-outline-color-focus,
                    $ui-outline-offset-focus
                )
            }
 
            @if not is-null($ui-body-outline-width-focus) and $ui-body-outline-width-focus != 0 {
                .#{$prefix}tab-button:before {
                    // use pseudo element for displaying focus outline instead of putting it on
                    // the tab-wrap element so that it does not overlap the close icon
                    position: absolute;
                    content: ' ';
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    pointer-events: none;
 
                    $outline-color: if(not is-null($ui-body-outline-color-focus), $ui-body-outline-color-focus, $color);
                    $outline-style: if(not is-null($ui-body-outline-style-focus), $ui-body-outline-style-focus, dotted);
                    outline: $ui-body-outline-width-focus $outline-style $outline-color;
                }
 
                &.#{$prefix}tab-closable {
                    .#{$prefix}tab-button:before {
                        // make sure the focus border does not overlap the close icon
                        right: $ui-closable-icon-width + $ui-closable-icon-spacing;
                    }
                }
            }
 
            .#{$prefix}tab-inner-#{$ui} {
                @if $ui-color-focus != $ui-color {
                    color: $ui-color-focus;
                }
 
                @if $ui-font-weight-focus != $ui-font-weight {
                    font-weight: $ui-font-weight-focus;
                }
                @if $ui-font-size-focus != $ui-font-size {
                    font-size: $ui-font-size-focus;
                }
                @if $ui-font-family-focus != $ui-font-family {
                    font-family: $ui-font-family-focus;
                }
            }
 
            .#{$prefix}tab-icon-el {
                @if $ui-glyph-color-focus != $ui-glyph-color {
                    color: $ui-glyph-color-focus;
                }
            }
        }
 
        .#{$prefix}tab-bar-plain & {
            .#{$prefix}keyboard-mode & {
                @if $ui-plain-background-color-focus != $ui-background-color-focus {
                    background-color: $ui-plain-background-color-focus;
                }
 
                @if $ui-plain-border-color-focus != $ui-border-color-focus {
                    border-color: $ui-plain-border-color-focus;
                }
 
                .#{$prefix}tab-inner-#{$ui} {
                    @if ($ui-plain-color-focus != null) and ($ui-plain-color-focus != $ui-color-focus) {
                        color: $ui-plain-color-focus;
                    }
                }
 
                .#{$prefix}tab-icon-el {
                    @if ($ui-plain-glyph-color-focus != null) and ($ui-plain-glyph-color-focus != $ui-glyph-color-focus) {
                        color: $ui-plain-glyph-color-focus;
                    }
                }
            }
        }
 
        @if $include-ie {
            .#{$prefix}keyboard-mode.#{$prefix}ie8 & {
                @if ($ui-opacity-focus != null) {
                    &.#{$prefix}tab-rotate-left {
                        @include ie-tab-alpharotate($ui-opacity-focus, 3);
                    }
 
                    &.#{$prefix}tab-rotate-right {
                        @include ie-tab-alpharotate($ui-opacity-focus, 1);
                    }
                }
 
                @if ($ui-background-opacity-focus != null) {
                    // Background opacity uses a filter in IE8, which overrides the rotation filter
                    // Unfortunately rotation and opacity cannot coexist, or the tab background
                    // turns black, so we will just have to do without background opacity in IE8
                    &.#{$prefix}tab-rotate-left {
                        @include ie-tab-rotate(3);
                    }
 
                    &.#{$prefix}tab-rotate-right {
                        @include ie-tab-rotate(1);
                    }
                }
 
                .#{$prefix}tab-icon-el {
                    @if $ui-glyph-color-focus != $ui-glyph-color {
                        // 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.
                        @if $ui-background-color != transparent {
                            color: mix($ui-glyph-color-focus, $ui-background-color-focus, $ui-glyph-opacity * 100);
                        }
                    }
                }
            }
        }
    }
 
    .#{$prefix}tab-over {
        &.#{$prefix}tab-#{$ui} {
            border-color: $ui-border-color-over;
 
            @if ($ui-opacity-over != null) {
                @include opacity($ui-opacity-over);
 
                @if $include-ie {
                    &.#{$prefix}tab-rotate-left {
                        .#{$prefix}ie8 & {
                            @include ie-tab-alpharotate($ui-opacity-over, 3);
                        }
                    }
 
                    &.#{$prefix}tab-rotate-right {
                        .#{$prefix}ie8 & {
                            @include ie-tab-alpharotate($ui-opacity-over, 1);
                        }
                    }
                }
            }
 
            @if ($ui-background-opacity-over != null) {
                @include background-opacity($ui-background-color-over, $ui-background-opacity-over);
 
                @if $include-ie {
                    // Background opacity uses a filter in IE8, which overrides the rotation filter
                    // Unfortunately rotation and opacity cannot coexist, or the tab background
                    // turns black, so we will just have to do without background opacity in IE8
                    &.#{$prefix}tab-rotate-left {
                        .#{$prefix}ie8 & {
                            @include ie-tab-rotate(3);
                        }
                    }
 
                    &.#{$prefix}tab-rotate-right {
                        .#{$prefix}ie8 & {
                            @include ie-tab-rotate(1);
                        }
                    }
                }
            } @else {
                background-color: $ui-background-color-over;
            }
 
            @if $ui-plain-background-color-over != $ui-background-color-over {
                .#{$prefix}tab-bar-plain & {
                    background-color: $ui-plain-background-color-over;
                }
            }
 
            @if $ui-plain-border-color-over != $ui-border-color-over {
                .#{$prefix}tab-bar-plain & {
                    border-color: $ui-plain-border-color-over;
                }
            }
 
            .#{$prefix}tab-inner-#{$ui} {
                @if $ui-color-over != $ui-color {
                    color: $ui-color-over;
                }
                @if ($ui-plain-color-over != null) and ($ui-plain-color-over != $ui-color-over) {
                    .#{$prefix}tab-bar-plain & {
                        color: $ui-plain-color-over;
                    }
                }
                @if $ui-font-weight-over != $ui-font-weight {
                    font-weight: $ui-font-weight-over;
                }
                @if $ui-font-size-over != $ui-font-size {
                    font-size: $ui-font-size-over;
                }
                @if $ui-font-family-over != $ui-font-family {
                    font-family: $ui-font-family-over;
                }
            }
 
            .#{$prefix}tab-icon-el {
                @if $ui-glyph-color-over != $ui-glyph-color {
                    color: $ui-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.
                    @if $ui-background-color-over != transparent {
                        .#{$prefix}ie8m & {
                            color: mix($ui-glyph-color-over, $ui-background-color-over, $ui-glyph-opacity * 100);
                        }
                    }
                }
 
                @if ($ui-plain-glyph-color-over != null) and ($ui-plain-glyph-color-over != $ui-glyph-color-over) {
                    .#{$prefix}tab-bar-plain & {
                        color: $ui-plain-glyph-color-over;
                    }
                }
            }
        }
 
        @if not is-null($ui-background-gradient-over) {
            &.#{$prefix}tab-#{$ui}-top,
            &.#{$prefix}tab-#{$ui}-left,
            &.#{$prefix}tab-#{$ui}-right {
                @include background-gradient($ui-background-color-over, $ui-background-gradient-over, top);
            }
            &.#{$prefix}tab-#{$ui}-bottom {
                @include background-gradient($ui-background-color-over, $ui-background-gradient-over, bottom);
            }
        }
    }
 
    .#{$prefix}tab-focus.#{$prefix}tab-over {
        &.#{$prefix}tab-#{$ui} {
            .#{$prefix}keyboard-mode & {
                border-color: $ui-border-color-focus-over;
 
                @if ($ui-opacity-focus-over != null) {
                    @include opacity($ui-opacity-focus-over);
                }
 
                @if ($ui-background-opacity-focus-over != null) {
                    @include background-opacity($ui-background-color-focus-over, $ui-background-opacity-focus-over);
                } @else {
                    background-color: $ui-background-color-focus-over;
                }
 
                .#{$prefix}tab-inner-#{$ui} {
                    @if $ui-color-focus-over != $ui-color-over {
                        color: $ui-color-focus-over;
                    }
                    @if $ui-font-weight-focus-over != $ui-font-weight-over {
                        font-weight: $ui-font-weight-focus-over;
                    }
                    @if $ui-font-size-focus-over != $ui-font-size-over {
                        font-size: $ui-font-size-focus-over;
                    }
                    @if $ui-font-family-focus-over != $ui-font-family-over {
                        font-family: $ui-font-family-focus-over;
                    }
                }
 
                .#{$prefix}tab-icon-el {
                    @if $ui-glyph-color-focus-over != $ui-glyph-color-over {
                        color: $ui-glyph-color-focus-over;
                    }
                }
            }
 
            .#{$prefix}tab-bar-plain & {
                .#{$prefix}keyboard-mode & {
                    @if $ui-plain-background-color-focus-over != $ui-background-color-focus-over {
                        background-color: $ui-plain-background-color-focus-over;
                    }
 
                    @if $ui-plain-border-color-focus-over != $ui-border-color-focus-over {
                        border-color: $ui-plain-border-color-focus-over;
                    }
 
                    .#{$prefix}tab-inner-#{$ui} {
                        @if ($ui-plain-color-focus-over != null) and ($ui-plain-color-focus-over != $ui-color-focus-over) {
                            color: $ui-plain-color-focus-over;
                        }
                    }
 
                    .#{$prefix}tab-icon-el {
                        @if ($ui-plain-glyph-color-focus-over != null) and ($ui-plain-glyph-color-focus-over != $ui-glyph-color-focus-over) {
                            color: $ui-plain-glyph-color-focus-over;
                        }
                    }
                }
            }
 
            @if $include-ie {
                .#{$prefix}keyboard-mode.#{$prefix}ie8 & {
                    @if ($ui-opacity-focus-over != null) {
                        &.#{$prefix}tab-rotate-left {
                            @include ie-tab-alpharotate($ui-opacity-focus-over, 3);
                        }
 
                        &.#{$prefix}tab-rotate-right {
                            @include ie-tab-alpharotate($ui-opacity-focus-over, 1);
                        }
                    }
 
                    @if ($ui-background-opacity-focus-over != null) {
                        // Background opacity uses a filter in IE8, which overrides the rotation filter
                        // Unfortunately rotation and opacity cannot coexist, or the tab background
                        // turns black, so we will just have to do without background opacity in IE8
                        &.#{$prefix}tab-rotate-left {
                            @include ie-tab-rotate(3);
                        }
 
                        &.#{$prefix}tab-rotate-right {
                            @include ie-tab-rotate(1);
                        }
                    }
 
                    .#{$prefix}tab-icon-el {
                        @if $ui-glyph-color-focus-over != $ui-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.
                            @if $ui-background-color-focus-over != transparent {
                                color: mix($ui-glyph-color-focus-over, $ui-background-color-focus-over, $ui-glyph-opacity * 100);
                            }
                        }
                    }
                }
            }
        }
 
        .#{$prefix}keyboard-mode & {
            @if not is-null($ui-background-gradient-focus-over) and
                    ($ui-background-gradient-focus-over != $ui-background-gradient-over or
                    $ui-background-color-focus-over != $ui-background-color-over) {
                &.#{$prefix}tab-#{$ui}-top,
                &.#{$prefix}tab-#{$ui}-left,
                &.#{$prefix}tab-#{$ui}-right {
                    @include background-gradient($ui-background-color-focus-over, $ui-background-gradient-focus-over, top);
                }
                &.#{$prefix}tab-#{$ui}-bottom {
                    @include background-gradient($ui-background-color-focus-over, $ui-background-gradient-focus-over, bottom);
                }
            }
        }
    }
 
    // add x-tab class to increase specificity over .x-tab-focus.x-tab-over
    .#{$prefix}tab.#{$prefix}tab-active {
        &.#{$prefix}tab-#{$ui} {
            border-color: $ui-border-color-active;
 
            @if ($ui-opacity-active != null) {
                @include opacity($ui-opacity-active);
 
                @if $include-ie {
                    &.#{$prefix}tab-rotate-left {
                        .#{$prefix}ie8 & {
                            @include ie-tab-alpharotate($ui-opacity-active, 3);
                        }
                    }
 
                    &.#{$prefix}tab-rotate-right {
                        .#{$prefix}ie8 & {
                            @include ie-tab-alpharotate($ui-opacity-active, 1);
                        }
                    }
                }
            }
 
            @if ($ui-background-opacity-active != null) {
                @include background-opacity($ui-background-color-active, $ui-background-opacity-active);
 
                @if $include-ie {
                    // Background opacity uses a filter in IE8, which overrides the rotation filter
                    // Unfortunately rotation and opacity cannot coexist, or the tab background
                    // turns black, so we will just have to do without background opacity in IE8
                    &.#{$prefix}tab-rotate-left {
                        .#{$prefix}ie8 & {
                            @include ie-tab-rotate(3);
                        }
                    }
 
                    &.#{$prefix}tab-rotate-right {
                        .#{$prefix}ie8 & {
                            @include ie-tab-rotate(1);
                        }
                    }
                }
            } @else {
                background-color: $ui-background-color-active;
            }
 
            @if $ui-plain-background-color-active != $ui-background-color-active {
                .#{$prefix}tab-bar-plain & {
                    background-color: $ui-plain-background-color-active;
                }
            }
 
            @if $ui-plain-border-color-active != $ui-border-color-active {
                .#{$prefix}tab-bar-plain & {
                    border-color: $ui-plain-border-color-active;
                }
            }
 
            .#{$prefix}tab-inner-#{$ui} {
                @if $ui-color-active != $ui-color {
                    color: $ui-color-active;
                }
                @if ($ui-plain-color-active != null) and ($ui-plain-color-active != $ui-color-active) {
                    .#{$prefix}tab-bar-plain & {
                        color: $ui-plain-color-active;
                    }
                }
                @if $ui-font-weight-active != $ui-font-weight {
                    font-weight: $ui-font-weight-active;
                }
                @if $ui-font-size-active != $ui-font-size {
                    font-size: $ui-font-size-active;
                }
                @if $ui-font-family-active != $ui-font-family {
                    font-family: $ui-font-family-active;
                }
            }
 
            .#{$prefix}tab-icon-el {
                color: $ui-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.
                @if $ui-background-color-active != transparent {
                    .#{$prefix}ie8 & {
                        color: mix($ui-glyph-color-active, $ui-background-color-active, $ui-glyph-opacity * 100);
                    }
                }
 
                @if ($ui-plain-glyph-color-active != null) and ($ui-plain-glyph-color-active != $ui-glyph-color-active) {
                    .#{$prefix}tab-bar-plain & {
                        color: $ui-plain-glyph-color-active;
                    }
                }
            }
        }
 
        @if not is-null($ui-background-gradient-active) {
            &.#{$prefix}tab-#{$ui}-top,
            &.#{$prefix}tab-#{$ui}-left,
            &.#{$prefix}tab-#{$ui}-right {
                @include background-gradient($ui-background-color-active, $ui-background-gradient-active, top);
            }
 
            &.#{$prefix}tab-#{$ui}-bottom {
                @include background-gradient($ui-background-color-active, $ui-background-gradient-active, bottom);
            }
        }
    }
 
    .#{$prefix}tab-focus.#{$prefix}tab-active {
        &.#{$prefix}tab-#{$ui} {
            .#{$prefix}keyboard-mode & {
                border-color: $ui-border-color-focus-active;
 
                @if ($ui-opacity-focus-active != null) {
                    @include opacity($ui-opacity-focus-active);
                }
 
                @if ($ui-background-opacity-focus-active != null) {
                    @include background-opacity($ui-background-color-focus-active, $ui-background-opacity-focus-active);
                } @else {
                    background-color: $ui-background-color-focus-active;
                }
 
                .#{$prefix}tab-inner-#{$ui} {
                    @if $ui-color-focus-active != $ui-color-active {
                        color: $ui-color-focus-active;
                    }
                    @if $ui-font-weight-focus-active != $ui-font-weight-active {
                        font-weight: $ui-font-weight-focus-active;
                    }
                    @if $ui-font-size-focus-active != $ui-font-size-active {
                        font-size: $ui-font-size-focus-active;
                    }
                    @if $ui-font-family-focus-active != $ui-font-family-active {
                        font-family: $ui-font-family-focus-active;
                    }
                }
 
                .#{$prefix}tab-icon-el {
                    @if $ui-glyph-color-focus-active != $ui-glyph-color-active {
                        color: $ui-glyph-color-focus-active;
                    }
                }
            }
 
            .#{$prefix}tab-bar-plain & {
                .#{$prefix}keyboard-mode & {
                    @if $ui-plain-background-color-focus-active != $ui-background-color-focus-active {
                        background-color: $ui-plain-background-color-focus-active;
                    }
 
                    @if $ui-plain-border-color-focus-active != $ui-border-color-focus-active {
                        border-color: $ui-plain-border-color-focus-active;
                    }
 
                    .#{$prefix}tab-inner-#{$ui} {
                        @if ($ui-plain-color-focus-active != null) and ($ui-plain-color-focus-active != $ui-color-focus-active) {
                            color: $ui-plain-color-focus-active;
                        }
                    }
 
                    .#{$prefix}tab-icon-el {
                        @if ($ui-plain-glyph-color-focus-active != null) and ($ui-plain-glyph-color-focus-active != $ui-glyph-color-focus-active) {
                            color: $ui-plain-glyph-color-focus-active;
                        }
                    }
                }
            }
 
            @if $include-ie {
                .#{$prefix}keyboard-mode.#{$prefix}ie8 & {
                    @if ($ui-opacity-focus-active != null) {
                        &.#{$prefix}tab-rotate-left {
                            @include ie-tab-alpharotate($ui-opacity-focus-active, 3);
                        }
 
                        &.#{$prefix}tab-rotate-right {
                            @include ie-tab-alpharotate($ui-opacity-focus-active, 1);
                        }
                    }
 
                    @if ($ui-background-opacity-focus-active != null) {
                        // Background opacity uses a filter in IE8, which overrides the rotation filter
                        // Unfortunately rotation and opacity cannot coexist, or the tab background
                        // turns black, so we will just have to do without background opacity in IE8
                        &.#{$prefix}tab-rotate-left {
                            @include ie-tab-rotate(3);
                        }
 
                        &.#{$prefix}tab-rotate-right {
                            @include ie-tab-rotate(1);
                        }
                    }
 
                    .#{$prefix}tab-icon-el {
                        @if $ui-glyph-color-focus-active != $ui-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.
                            @if $ui-background-color-active != transparent {
                                color: mix($ui-glyph-color-focus-active, $ui-background-color-focus-active, $ui-glyph-opacity * 100);
                            }
                        }
                    }
                }
            }
        }
 
        .#{$prefix}keyboard-mode & {
            @if not is-null($ui-background-gradient-focus-active) and
                    ($ui-background-gradient-focus-active != $ui-background-gradient-active or
                    $ui-background-color-focus-active != $ui-background-color-active) {
                &.#{$prefix}tab-#{$ui}-top,
                &.#{$prefix}tab-#{$ui}-left,
                &.#{$prefix}tab-#{$ui}-right {
                    @include background-gradient($ui-background-color-focus-active, $ui-background-gradient-focus-active, top);
                }
 
                &.#{$prefix}tab-#{$ui}-bottom {
                    @include background-gradient($ui-background-color-focus-active, $ui-background-gradient-focus-active, bottom);
                }
            }
        }
    }
 
    // add x-tab class to increase specificity over .x-tab.x-tab-active/.x-focus.x-active
    .#{$prefix}tab.#{$prefix}tab-disabled {
        &.#{$prefix}tab-#{$ui} {
            border-color: $ui-border-color-disabled;
 
            @if $ui-opacity-disabled != null {
                @include opacity($ui-opacity-disabled);
 
                @if $include-ie {
                    &.#{$prefix}tab-rotate-left {
                        .#{$prefix}ie8 & {
                            @include ie-tab-alpharotate($ui-opacity-disabled, 3);
                        }
                    }
 
                    &.#{$prefix}tab-rotate-right {
                        .#{$prefix}ie8 & {
                            @include ie-tab-alpharotate($ui-opacity-disabled, 1);
                        }
                    }
                }
            }
 
            @if $ui-background-opacity-disabled != null {
                @include background-opacity($ui-background-color-disabled, $ui-background-opacity-disabled);
 
                @if $include-ie {
                    // Background opacity uses a filter in IE8, which overrides the rotation filter
                    // Unfortunately rotation and opacity cannot coexist, or the tab background
                    // turns black, so we will just have to do without background opacity in IE8
                    &.#{$prefix}tab-rotate-left {
                        .#{$prefix}ie8 & {
                            @include ie-tab-rotate(3);
                        }
                    }
 
                    &.#{$prefix}tab-rotate-right {
                        .#{$prefix}ie8 & {
                            @include ie-tab-rotate(1);
                        }
                    }
                }
            } @else {
                background-color: $ui-background-color-disabled;
            }
 
            @if $ui-plain-background-color-disabled != $ui-background-color-disabled {
                .#{$prefix}tab-bar-plain & {
                    background-color: $ui-plain-background-color-disabled;
                }
            }
 
            @if $ui-plain-border-color-disabled != $ui-border-color-disabled {
                .#{$prefix}tab-bar-plain & {
                    border-color: $ui-plain-border-color-disabled;
                }
            }
 
            @if not is-null($ui-cursor-disabled) {
                cursor: $ui-cursor-disabled;
            }
 
            .#{$prefix}tab-inner-#{$ui} {
                @if $ui-color-disabled != $ui-color {
                    color: $ui-color-disabled;
                }
                @if ($ui-plain-color-disabled != null) and ($ui-plain-color-disabled != $ui-color-disabled) {
                    .#{$prefix}tab-bar-plain & {
                        color: $ui-plain-color-disabled;
                    }
                }
                @if $ui-font-weight-disabled != $ui-font-weight {
                    font-weight: $ui-font-weight-disabled;
                }
                @if $ui-font-size-disabled != $ui-font-size {
                    font-size: $ui-font-size-disabled;
                }
                @if $ui-font-family-disabled != $ui-font-family {
                    font-family: $ui-font-family-disabled;
                }
                @if $ui-text-opacity-disabled != 1 {
                    @include opacity($ui-text-opacity-disabled);
                }
            }
 
            @if $ui-icon-opacity-disabled != 1 {
                .#{$prefix}tab-icon-el-#{$ui} {
                    @include opacity($ui-icon-opacity-disabled);
                }
            }
 
            .#{$prefix}tab-icon-el {
                color: $ui-glyph-color-disabled;
                @if $ui-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-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.
                @if $ui-background-color != transparent {
                    .#{$prefix}ie8 & {
                        color: mix($ui-glyph-color-disabled, $ui-background-color-disabled, $ui-glyph-opacity-disabled * 100);
                    }
                }
 
                @if ($ui-plain-glyph-color-disabled != null) and ($ui-plain-glyph-color-disabled != $ui-glyph-color-disabled) {
                    .#{$prefix}tab-bar-plain & {
                        color: $ui-plain-glyph-color-disabled;
                    }
                }
            }
        }
        @if not is-null($ui-background-gradient-disabled) {
            &.#{$prefix}tab-#{$ui}-top,
            &.#{$prefix}tab-#{$ui}-left,
            &.#{$prefix}tab-#{$ui}-right {
                @include background-gradient($ui-background-color-disabled, $ui-background-gradient-disabled, top);
            }
 
            &.#{$prefix}tab-#{$ui}-bottom {
                @include background-gradient($ui-background-color-disabled, $ui-background-gradient-disabled, bottom);
            }
        }
    }
 
    @if $include-slicer-border-radius {
        .#{$prefix}nbr .#{$prefix}tab-#{$ui} {
            background-image: none;
        }
 
        $states:
            (over '.#{$prefix}tab-over' 'tab-over')
            (focus '.#{$prefix}tab-focus' 'tab-focus')
            (focus-over '.#{$prefix}tab-focus.#{$prefix}tab-over' 'tab-focus.#{$prefix}tab-over')
            (active '.#{$prefix}tab.#{$prefix}tab-active' 'tab-active')
            (focus-active '.#{$prefix}tab-focus.#{$prefix}tab-active' 'tab-focus.#{$prefix}tab-active')
            (disabled '.#{$prefix}tab.#{$prefix}tab-disabled' 'tab-disabled');
 
        @each $side in top right bottom left {
            @each $item in $states {
                $state: nth($item, 1);
                $cls: nth($item, 2);
                $id-prefix: nth($item, 3);
 
                #{$cls} {
                    .#{$prefix}tab-#{$ui}-#{$side}-tl,
                    .#{$prefix}tab-#{$ui}-#{$side}-bl,
                    .#{$prefix}tab-#{$ui}-#{$side}-tr,
                    .#{$prefix}tab-#{$ui}-#{$side}-br,
                    .#{$prefix}tab-#{$ui}-#{$side}-tc,
                    .#{$prefix}tab-#{$ui}-#{$side}-bc {
                        background-image: slicer-corner-sprite('#{$id-prefix}.#{$prefix}tab-#{$ui}-#{$side}', 'tab/tab-#{$ui}-#{$side}-#{$state}-corners');
                    }
 
                    .#{$prefix}tab-#{$ui}-#{$side}-ml,
                    .#{$prefix}tab-#{$ui}-#{$side}-mr {
                        background-image: slicer-sides-sprite('#{$id-prefix}.#{$prefix}tab-#{$ui}-#{$side}', 'tab/tab-#{$ui}-#{$side}-#{$state}-sides');
                    }
 
                    .#{$prefix}tab-#{$ui}-#{$side}-mc {
                        background-repeat: repeat-x;
                        background-image: slicer-frame-background-image('#{$id-prefix}.#{$prefix}tab-#{$ui}-#{$side}', 'tab/tab-#{$ui}-#{$side}-#{$state}-fbg');
                    }
                }
 
                $frame: slicer-frame('#{$id-prefix}.#{$prefix}tab-#{$ui}-#{$side}', $frame-size);
            }
        }
 
        .#{$prefix}tab-#{$ui}-tl,
        .#{$prefix}tab-#{$ui}-bl,
        .#{$prefix}tab-#{$ui}-tr,
        .#{$prefix}tab-#{$ui}-br {
            // hack to make IE8 render partially transparent pixels in corners of rotated tabs:
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)";
        }
    }
 
    .#{$prefix}tab-#{$ui} {
        .#{$prefix}tab-close-btn {
            top: $ui-closable-icon-top;
            right: $ui-closable-icon-right;
            width: $ui-closable-icon-width;
            height: $ui-closable-icon-height;
            @if $enable-font-icons and ($ui-closable-icon-glyph != null) {
                @include font-icon($ui-closable-icon-glyph);
                color: $ui-closable-icon-glyph-color;
 
                @if $ui-plain-closable-icon-glyph-color != $ui-closable-icon-glyph-color {
                    .#{$prefix}tab-bar-plain & {
                        color: $ui-plain-closable-icon-glyph-color;
                    }
                }
            } @else {
                background: theme-background-image('tab/tab-#{$ui}-close') 0 0;
            }
            @if $tab-closable-icon-opacity != 1 {
                @include opacity($tab-closable-icon-opacity);
            }
        }
 
        .#{$prefix}tab-close-btn-over {
            @if  $tab-closable-icon-opacity-over != $tab-closable-icon-opacity {
                @include opacity($tab-closable-icon-opacity-over);
            }
            @if $tab-closable-icon-include-hover-background-position {
                background-position: (-$tab-closable-icon-width) 0;
            }
        }
 
        @if $tab-closable-icon-include-pressed-background-position {
            .#{$prefix}tab-close-btn-pressed {
                background-position: (-$ui-closable-icon-width * 2) 0;
            }
        }
 
        &.#{$prefix}tab-focus  {
            @if $enable-font-icons and ($ui-closable-icon-glyph != null) {
                .#{$prefix}tab-close-btn {
                    .#{$prefix}keyboard-mode & {
                        color: $ui-closable-icon-glyph-color-focus;
                    }
 
                    @if $ui-plain-closable-icon-glyph-color-focus != $ui-closable-icon-glyph-color-focus {
                        .#{$prefix}tab-bar-plain & {
                            .#{$prefix}keyboard-mode & {
                                color: $ui-plain-closable-icon-glyph-color-focus;
                            }
                        }
                    }
                }
            }
        }
 
        &.#{$prefix}tab-over {
            @if $enable-font-icons and ($ui-closable-icon-glyph != null) {
                .#{$prefix}tab-close-btn {
                    color: $ui-closable-icon-glyph-color-over;
 
                    @if $ui-plain-closable-icon-glyph-color-over != $ui-closable-icon-glyph-color-over {
                        .#{$prefix}tab-bar-plain & {
                            color: $ui-plain-closable-icon-glyph-color-over;
                        }
                    }
                }
            }
        }
 
        &.#{$prefix}tab-focus.#{$prefix}tab-over {
            @if $enable-font-icons and ($ui-closable-icon-glyph != null) {
                .#{$prefix}tab-close-btn {
                    .#{$prefix}keyboard-mode & {
                        color: $ui-closable-icon-glyph-color-focus-over;
                    }
 
                    @if $ui-plain-closable-icon-glyph-color-focus-over != $ui-closable-icon-glyph-color-focus-over {
                        .#{$prefix}tab-bar-plain & {
                            .#{$prefix}keyboard-mode & {
                                color: $ui-plain-closable-icon-glyph-color-focus-over;
                            }
                        }
                    }
                }
            }
        }
 
        &.#{$prefix}tab-active {
            @if $enable-font-icons and ($ui-closable-icon-glyph != null) {
                .#{$prefix}tab-close-btn {
                    color: $ui-closable-icon-glyph-color-active;
 
                    @if $ui-plain-closable-icon-glyph-color-active != $ui-closable-icon-glyph-color-active {
                        .#{$prefix}tab-bar-plain & {
                            color: $ui-plain-closable-icon-glyph-color-active;
                        }
                    }
                }
            } @else {
                .#{$prefix}tab-close-btn {
                    background-position: 0 (-$tab-closable-icon-height);
                }
 
                @if $tab-closable-icon-include-hover-background-position {
                    .#{$prefix}tab-close-btn-over {
                        background-position: (-$tab-closable-icon-width) (-$tab-closable-icon-height);
                    }
                }
 
                @if $tab-closable-icon-include-pressed-background-position {
                    .#{$prefix}tab-close-btn-pressed {
                        background-position: (-$ui-closable-icon-width * 2) (-$ui-closable-icon-height);
                    }
                }
            }
        }
 
        &.#{$prefix}tab-focus.#{$prefix}tab-active {
            @if $enable-font-icons and ($ui-closable-icon-glyph != null) {
                .#{$prefix}tab-close-btn {
                    .#{$prefix}keyboard-mode & {
                        color: $ui-closable-icon-glyph-color-focus-active;
                    }
 
                    @if $ui-plain-closable-icon-glyph-color-focus-active != $ui-closable-icon-glyph-color-focus-active {
                        .#{$prefix}tab-bar-plain & {
                            .#{$prefix}keyboard-mode & {
                                color: $ui-plain-closable-icon-glyph-color-focus-active;
                            }
                        }
                    }
                }
            }
        }
        
        &.#{$prefix}tab-disabled {
            .#{$prefix}tab-close-btn {
                @if $enable-font-icons and ($ui-closable-icon-glyph != null) {
                    color: $ui-closable-icon-glyph-color-disabled;
 
                    @if $ui-plain-closable-icon-glyph-color-disabled != $ui-closable-icon-glyph-color-disabled {
                        .#{$prefix}tab-bar-plain & {
                            color: $ui-plain-closable-icon-glyph-color-disabled;
                        }
                    }
                }
                @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 $tab-closable-icon-include-hover-background-position {
                    background-position: 0 0;
                }
            }
        }
    }
 
    @if $include-rtl {
        .#{$prefix}rtl.#{$prefix}tab-#{$ui} .#{$prefix}tab-close-btn {
            right: auto;
            left: $ui-closable-icon-right;
        }
    }
 
    .#{$prefix}tab-closable.#{$prefix}tab-#{$ui} .#{$prefix}tab-button {
        padding-right: $ui-closable-icon-width + $ui-closable-icon-spacing;
    }
 
    @if $include-rtl {
        .#{$prefix}rtl.#{$prefix}tab-closable.#{$prefix}tab-#{$ui} .#{$prefix}tab-button {
            padding-right: 0px;
            padding-left: $ui-closable-icon-width + $ui-closable-icon-spacing;
        }
    }
 
    $stretch: slicer-background-stretch(tab-#{$ui}-top, bottom);
    $stretch: slicer-background-stretch(tab-#{$ui}-right, left);
    $stretch: slicer-background-stretch(tab-#{$ui}-bottom, top);
    $stretch: slicer-background-stretch(tab-#{$ui}-left, right);
    $stretch: slicer-background-stretch('tab-focus.#{$prefix}tab-#{$ui}-top', bottom);
    $stretch: slicer-background-stretch('tab-focus.#{$prefix}tab-#{$ui}-right', left);
    $stretch: slicer-background-stretch('tab-focus.#{$prefix}tab-#{$ui}-bottom', top);
    $stretch: slicer-background-stretch('tab-focus.#{$prefix}tab-#{$ui}-left', right);
    $stretch: slicer-background-stretch('tab-over.#{$prefix}tab-#{$ui}-top', bottom);
    $stretch: slicer-background-stretch('tab-over.#{$prefix}tab-#{$ui}-right', left);
    $stretch: slicer-background-stretch('tab-over.#{$prefix}tab-#{$ui}-bottom', top);
    $stretch: slicer-background-stretch('tab-over.#{$prefix}tab-#{$ui}-left', right);
    $stretch: slicer-background-stretch('tab-active.#{$prefix}tab-#{$ui}-top', bottom);
    $stretch: slicer-background-stretch('tab-active.#{$prefix}tab-#{$ui}-right', left);
    $stretch: slicer-background-stretch('tab-active.#{$prefix}tab-#{$ui}-bottom', top);
    $stretch: slicer-background-stretch('tab-active.#{$prefix}tab-#{$ui}-left', right);
    $stretch: slicer-background-stretch('tab-focus.#{$prefix}tab-over.#{$prefix}tab-#{$ui}-top', bottom);
    $stretch: slicer-background-stretch('tab-focus.#{$prefix}tab-over.#{$prefix}tab-#{$ui}-right', left);
    $stretch: slicer-background-stretch('tab-focus.#{$prefix}tab-over.#{$prefix}tab-#{$ui}-bottom', top);
    $stretch: slicer-background-stretch('tab-focus.#{$prefix}tab-over.#{$prefix}tab-#{$ui}-left', right);
    $stretch: slicer-background-stretch('tab-focus.#{$prefix}tab-active.#{$prefix}tab-#{$ui}-top', bottom);
    $stretch: slicer-background-stretch('tab-focus.#{$prefix}tab-active.#{$prefix}tab-#{$ui}-right', left);
    $stretch: slicer-background-stretch('tab-focus.#{$prefix}tab-active.#{$prefix}tab-#{$ui}-bottom', top);
    $stretch: slicer-background-stretch('tab-focus.#{$prefix}tab-active.#{$prefix}tab-#{$ui}-left', right);
    $stretch: slicer-background-stretch('tab-disabled.#{$prefix}tab-#{$ui}-top', bottom);
    $stretch: slicer-background-stretch('tab-disabled.#{$prefix}tab-#{$ui}-right', left);
    $stretch: slicer-background-stretch('tab-disabled.#{$prefix}tab-#{$ui}-bottom', top);
    $stretch: slicer-background-stretch('tab-disabled.#{$prefix}tab-#{$ui}-left', right);
    @include x-slicer('tab-focus.#{$prefix}tab-#{$ui}-top');
    @include x-slicer('tab-focus.#{$prefix}tab-#{$ui}-right');
    @include x-slicer('tab-focus.#{$prefix}tab-#{$ui}-bottom');
    @include x-slicer('tab-focus.#{$prefix}tab-#{$ui}-left');
    @include x-slicer('tab-over.#{$prefix}tab-#{$ui}-top');
    @include x-slicer('tab-over.#{$prefix}tab-#{$ui}-right');
    @include x-slicer('tab-over.#{$prefix}tab-#{$ui}-bottom');
    @include x-slicer('tab-over.#{$prefix}tab-#{$ui}-left');
    @include x-slicer('tab-active.#{$prefix}tab-#{$ui}-top');
    @include x-slicer('tab-active.#{$prefix}tab-#{$ui}-right');
    @include x-slicer('tab-active.#{$prefix}tab-#{$ui}-bottom');
    @include x-slicer('tab-active.#{$prefix}tab-#{$ui}-left');
    @include x-slicer('tab-focus.#{$prefix}tab-over.#{$prefix}tab-#{$ui}-top');
    @include x-slicer('tab-focus.#{$prefix}tab-over.#{$prefix}tab-#{$ui}-right');
    @include x-slicer('tab-focus.#{$prefix}tab-over.#{$prefix}tab-#{$ui}-bottom');
    @include x-slicer('tab-focus.#{$prefix}tab-over.#{$prefix}tab-#{$ui}-left');
    @include x-slicer('tab-focus.#{$prefix}tab-active.#{$prefix}tab-#{$ui}-top');
    @include x-slicer('tab-focus.#{$prefix}tab-active.#{$prefix}tab-#{$ui}-right');
    @include x-slicer('tab-focus.#{$prefix}tab-active.#{$prefix}tab-#{$ui}-bottom');
    @include x-slicer('tab-focus.#{$prefix}tab-active.#{$prefix}tab-#{$ui}-left');
    @include x-slicer('tab-disabled.#{$prefix}tab-#{$ui}-top');
    @include x-slicer('tab-disabled.#{$prefix}tab-#{$ui}-right');
    @include x-slicer('tab-disabled.#{$prefix}tab-#{$ui}-bottom');
    @include x-slicer('tab-disabled.#{$prefix}tab-#{$ui}-left');
}