/**
 * @class Ext.tab.Tab
 */

/**
 * @var {color}
 * Tab background-color
 */
$tab-background-color: dynamic(mix(#fff, $base-highlight-color, 10%));

/**
 * @var {color}
 * Tab background-color when hovered
 */
$tab-hovered-background-color: dynamic(mix(#fff, $base-highlight-color, 20%));

/**
 * @var {color}
 * Tab background-color when pressed
 */
$tab-pressed-background-color: dynamic($tab-hovered-background-color);

/**
 * @var {color}
 * Tab background-color when active
 */
$tab-active-background-color: dynamic($base-light-color);

/**
 * @var {color}
 * Tab background-color when focused
 */
$tab-focused-background-color: dynamic(null);

/**
 * @var {color}
 * Tab background-color when active and focused
 */
$tab-active-focused-background-color: dynamic(null);

/**
 * @var {color}
 * Tab background-color when disabled
 */
$tab-disabled-background-color: dynamic(null);

/**
 * @var {list}
 * Tab box-shadow
 */
$tab-box-shadow: dynamic(null);

/**
 * @var {list}
 * Tab box-shadow when hovered
 */
$tab-hovered-box-shadow: dynamic(null);

/**
 * @var {list}
 * Tab box-shadow when pressed
 */
$tab-pressed-box-shadow: dynamic(null);

/**
 * @var {list}
 * Tab box-shadow when active
 */
$tab-active-box-shadow: dynamic(null);

/**
 * @var {list}
 * Tab box-shadow when focused
 */
$tab-focused-box-shadow: dynamic(null);

/**
 * @var {list}
 * Tab box-shadow when active and focused
 */
$tab-active-focused-box-shadow: dynamic(null);

/**
 * @var {list}
 * Tab box-shadow when disabled
 */
$tab-disabled-box-shadow: dynamic(null);

/**
 * @var {string/list}
 * Tab background-gradient.  Can be either the name of a gradient defined by
 * {@link Global_CSS#background-gradient} or a list of color stops.
 */
$tab-background-gradient: dynamic(none);

/**
 * @var {string/list}
 * Tab background-gradient when hovered.  Can be either the name of a gradient
 * defined by {@link Global_CSS#background-gradient} or a list of color stops.
 */
$tab-hovered-background-gradient: dynamic(none);

/**
 * @var {string/list}
 * Tab background-gradient when pressed.  Can be either the name of a gradient
 * defined by {@link Global_CSS#background-gradient} or a list of color stops.
 */
$tab-pressed-background-gradient: dynamic(none);

/**
 * @var {string/list}
 * Tab background-gradient when active.  Can be either the name of a gradient
 * defined by {@link Global_CSS#background-gradient} or a list of color stops.
 */
$tab-active-background-gradient: dynamic(none);

/**
 * @var {string/list}
 * Tab background-gradient when focused.  Can be either the name of a gradient
 * defined by {@link Global_CSS#background-gradient} or a list of color stops.
 */
$tab-focused-background-gradient: dynamic(none);

/**
 * @var {string/list}
 * Tab background-gradient when active and focused.  Can be either the name of a gradient
 * defined by {@link Global_CSS#background-gradient} or a list of color stops.
 */
$tab-active-focused-background-gradient: dynamic(none);

/**
 * @var {string/list}
 * Tab background-gradient when disabled.  Can be either the name of a gradient
 * defined by {@link Global_CSS#background-gradient} or a list of color stops.
 */
$tab-disabled-background-gradient: dynamic(none);

/**
 * @var {color}
 * Tab text color
 */
$tab-color: dynamic($light-color);

/**
 * @var {color}
 * Tab text color when hovered
 */
$tab-hovered-color: dynamic($tab-color);

/**
 * @var {color}
 * Tab text color when pressed
 */
$tab-pressed-color: dynamic($tab-color);

/**
 * @var {color}
 * Tab text color when active
 */
$tab-active-color: dynamic($base-color);

/**
 * @var {color}
 * Tab text color when focused
 */
$tab-focused-color: dynamic($tab-color);

/**
 * @var {color}
 * Tab text color when active and focused
 */
$tab-active-focused-color: dynamic($tab-active-color);

/**
 * @var {color}
 * Tab color when disabled
 */
$tab-disabled-color: dynamic($tab-color);

/**
 * @var {color/list}
 * Tab border-color
 */
$tab-border-color: dynamic(null);

/**
 * @var {color/list}
 * Tab border-color when hovered
 */
$tab-hovered-border-color: dynamic(null);

/**
 * @var {color/list}
 * Tab border-color when pressed
 */
$tab-pressed-border-color: dynamic(null);

/**
 * @var {color/list}
 * Tab border-color when active
 */
$tab-active-border-color: dynamic(null);

/**
 * @var {color/list}
 * Tab border-color when focused
 */
$tab-focused-border-color: dynamic(null);

/**
 * @var {color/list}
 * Tab border-color when active and focused
 */
$tab-active-focused-border-color: dynamic(null);

/**
 * @var {color/list}
 * Tab border-color when disabled
 */
$tab-disabled-border-color: dynamic(null);

/**
 * @var {color}
 * Tab focus outline color
 */
$tab-focused-outline-color: dynamic(mix($tab-background-color, $tab-color, 20%));

/**
 * @var {color}
 * Tab focus outline color when active
 */
$tab-active-focused-outline-color: dynamic(mix($tab-active-background-color, $tab-active-color, 20%));

/**
 * @var {string}
 * Tab focus outline style
 */
$tab-focused-outline-style: dynamic(solid);

/**
 * @var {number}
 * Tab focus outline width
 */
$tab-focused-outline-width: dynamic(1px);

/**
 * @var {number}
 * Tab focus outline offset
 */
$tab-focused-outline-offset: dynamic(-2px);

/**
 * @var {number/list}
 * Tab border-width
 */
$tab-border-width: dynamic(0);

/**
 * @var {string/list}
 * Tab border-style
 */
$tab-border-style: dynamic(null);

/**
 * @var {number}
 * Tab border-radius
 */
$tab-border-radius: dynamic(3px 3px 0 0);

/**
 * @var {number}
 * Tab border-radius in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$tab-border-radius-big: dynamic($tab-border-radius);

/**
 * @var {string/number}
 * Tab font-weight
 */
$tab-font-weight: dynamic($font-weight-bold);

/**
 * @var {number}
 * Tab font-size
 */
$tab-font-size: dynamic($font-size);

/**
 * @var {number}
 * Tab font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$tab-font-size-big: dynamic($font-size-big);

/**
 * @var {number}
 * Tab font-size when {@link #iconAlign} is `'top'` or `'bottom'`
 */
$tab-stacked-font-size: dynamic(null);

/**
 * @var {number}
 * Tab font-size in the {@link Global_CSS#$enable-big big} sizing scheme when {@link #iconAlign} is `'top'` or `'bottom'`
 */
$tab-stacked-font-size-big: dynamic(null);

/**
 * @var {number}
 * Tab line-height
 */
$tab-line-height: dynamic(16px);

/**
 * @var {number}
 * Tab line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$tab-line-height-big: dynamic(20px);

/**
 * @var {string}
 * Tab font-family
 */
$tab-font-family: dynamic($font-family);

/**
 * @var {string}
 * Tab text-transform
 */
$tab-text-transform: dynamic(null);

/**
 * @var {string}
 * Tab text-transform in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$tab-text-transform-big: dynamic(null);

/**
 * @var {number/list}
 * Tab padding
 */
$tab-padding: dynamic(8px 12px 7px);

/**
 * @var {number/list}
 * Tab padding in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$tab-padding-big: dynamic(10px 10px 9px);

/**
 * @var {number/list}
 * Tab padding when an icon is present without text
 */
$tab-icon-only-padding: dynamic($tab-padding);

/**
 * @var {number/list}
 * Tab padding when an icon is present without text in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$tab-icon-only-padding-big: dynamic($tab-padding-big);

/**
 * @var {color}
 * Tab icon color.
 */
$tab-icon-color: dynamic($tab-color);

/**
 * @var {color}
 * Tab icon color when hovered.
 */
$tab-hovered-icon-color: dynamic($tab-hovered-color);

/**
 * @var {color}
 * Tab icon color when pressed.
 */
$tab-pressed-icon-color: dynamic($tab-pressed-color);

/**
 * @var {color}
 * Tab icon color when active
 */
$tab-active-icon-color: dynamic($tab-active-color);

/**
 * @var {color}
 * Tab icon color when focused
 */
$tab-focused-icon-color: dynamic($tab-focused-color);

/**
 * @var {color}
 * Tab icon color when active and focused
 */
$tab-active-focused-icon-color: dynamic($tab-active-icon-color);

/**
 * @var {color}
 * Tab icon color when disabled
 */
$tab-disabled-icon-color: dynamic($tab-disabled-color);

/**
 * @var {number}
 * Tab icon size
 */
$tab-icon-size: dynamic($tab-line-height);

/**
 * @var {number}
 * Tab icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$tab-icon-size-big: dynamic($tab-line-height-big);

/**
 * @var {number}
 * Tab icon font-size
 */
$tab-icon-font-size: dynamic(null);

/**
 * @var {number}
 * Tab icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$tab-icon-font-size-big: dynamic(null);

/**
 * @var {number}
 * The space between the tab icon and text when the icon is horizontally aligned
 */
$tab-icon-horizontal-spacing: dynamic(5px);

/**
 * @var {number}
 * The space between the tab icon and text when the icon is horizontally aligned
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$tab-icon-horizontal-spacing-big: dynamic(8px);

/**
 * @var {number}
 * The space between the tab icon and text when the icon is vertically aligned
 */
$tab-icon-vertical-spacing: dynamic(2px);

/**
 * @var {number}
 * The space between the tab icon and text when the icon is vertically aligned
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$tab-icon-vertical-spacing-big: dynamic(3px);

/**
 * @var {number}
 * Tab opacity when disabled
 */
$tab-disabled-opacity: dynamic(.5);

/**
 * @var {string}
 * Tab arrow icon
 */
$tab-arrow-icon: dynamic(null);

/**
 * @var {color}
 * Tab arrow icon color
 */
$tab-arrow-icon-color: dynamic($tab-color);

/**
 * @var {color}
 * Tab arrow icon color when hovered
 */
$tab-hovered-arrow-icon-color: dynamic($tab-hovered-icon-color);

/**
 * @var {color}
 * Tab arrow icon color when pressed
 */
$tab-pressed-arrow-icon-color: dynamic($tab-pressed-icon-color);

/**
 * @var {color}
 * Tab arrow icon color when active
 */
$tab-active-arrow-icon-color: dynamic($tab-active-icon-color);

/**
 * @var {color}
 * Tab arrow icon color when focused
 */
$tab-focused-arrow-icon-color: dynamic($tab-focused-icon-color);

/**
 * @var {color}
 * Tab arrow icon color when active and focused
 */
$tab-active-focused-arrow-icon-color: dynamic($tab-active-arrow-icon-color);

/**
 * @var {color}
 * Tab arrow icon color when disabled
 */
$tab-disabled-arrow-icon-color: dynamic($tab-disabled-icon-color);

/**
 * @var {number}
 * Tab arrow icon size
 */
$tab-arrow-icon-size: dynamic($tab-line-height);

/**
 * @var {number}
 * Tab arrow icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$tab-arrow-icon-size-big: dynamic($tab-line-height-big);

/**
 * @var {number}
 * Tab arrow icon font-size
 */
$tab-arrow-icon-font-size: dynamic(null);

/**
 * @var {number}
 * Tab arrow icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$tab-arrow-icon-font-size-big: dynamic(null);

/**
 * @var {number}
 * The space between the tab arrow and text when {@link #arrowAlign} is `'right'`
 */
$tab-arrow-horizontal-spacing: dynamic(5px);

/**
 * @var {number}
 * The space between the tab arrow and text when {@link #arrowAlign} is `'right'`
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$tab-arrow-horizontal-spacing-big: dynamic(8px);

/**
 * @var {number}
 * The space between the tab arrow and text when {@link #arrowAlign} is `'bottom'`
 */
$tab-arrow-vertical-spacing: dynamic(null);

/**
 * @var {number}
 * The space between the tab arrow and text when {@link #arrowAlign} is `'bottom'`
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$tab-arrow-vertical-spacing-big: dynamic(null);

/**
 * @var {color}
 * The background-color of the tab's {@link #badgeText badge}
 */
$tab-badge-background-color: dynamic(darken($alert-color, 10%));

/**
 * @var {string/list}
 * The background-gradient of the tab's {@link #badgeText badge} Can be either the name
 * of a gradient defined by {@link Global_CSS#background-gradient} or a list of color stops.
 */
$tab-badge-background-gradient: dynamic($base-background-gradient);

/**
 * @var {color}
 * The text color of the tab's {@link #badgeText badge}
 */
$tab-badge-color: dynamic(color-by-background($tab-badge-background-color));

/**
 * @var {color}
 * The border-color of the tab's {@link #badgeText badge}
 */
$tab-badge-border-color: dynamic(darken($tab-badge-background-color, 10%));

/**
 * @var {number/list}
 * The border-radius of the tab's {@link #badgeText badge}
 */
$tab-badge-border-radius: dynamic(3px);

/**
 * @var {number}
 * The min-width of the tab's {@link #badgeText badge}
 */
$tab-badge-min-width: dynamic($button-badge-min-width);

/**
 * @var {number}
 * The max-width of the tab's {@link #badgeText badge}
 */
$tab-badge-max-width: dynamic(95%);

/**
 * @var {string/number}
 * The font-weight of the tab's {@link #badgeText badge}
 */
$tab-badge-font-weight: dynamic(null);

/**
 * @var {number}
 * The font-size of the tab's {@link #badgeText badge}
 */
$tab-badge-font-size: dynamic($button-badge-font-size);

/**
 * @var {number}
 * The font-size of the tab's {@link #badgeText badge} in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$tab-badge-font-size-big: dynamic($button-badge-font-size-big);

/**
 * @var {string}
 * The font-family of the tab's {@link #badgeText badge}
 */
$tab-badge-font-family: dynamic($tab-font-family);

/**
 * @var {number}
 * The line-height of the tab's {@link #badgeText badge}
 */
$tab-badge-line-height: dynamic($button-badge-line-height);

/**
 * @var {number}
 * The line-height of the tab's {@link #badgeText badge} in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$tab-badge-line-height-big: dynamic($button-badge-line-height-big);

/**
 * @var {number}
 * Offset of the {@link #badgeText badge} from the top of the tab
 */
$tab-badge-top: dynamic(0);

/**
 * @var {number}
 * Offset of the {@link #badgeText badge} from the right of the tab
 */
$tab-badge-right: dynamic(0);

/**
 * @var {number}
 * Offset of the {@link #badgeText badge} from the bottom of the tab
 */
$tab-badge-bottom: dynamic(null);

/**
 * @var {number}
 * Offset of the {@link #badgeText badge} from the left of the tab
 */
$tab-badge-left: dynamic(null);

/**
 * @var {number}
 * The padding of the tab's {@link #badgeText badge}
 */
$tab-badge-padding: dynamic(1px 4px);

/**
 * @var {number}
 * The padding of the tab's {@link #badgeText badge} in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$tab-badge-padding-big: dynamic($tab-badge-padding);

/**
 * @var {color}
 * The background-color of the tab's "active indicator"
 */
$tab-active-indicator-background-color: dynamic(null);

/**
 * @var {number}
 * The height of the tab's "active indicator"
 */
$tab-active-indicator-height: dynamic(null);

/**
 * @var {string}
 * Tab close icon
 */
$tab-close-icon: dynamic($fa-var-times);

/**
 * @var {color}
 * Tab close icon color
 */
$tab-close-icon-color: dynamic(null);

/**
 * @var {color}
 * Tab close icon color when the close icon is hovered
 */
$tab-close-icon-hovered-color: dynamic(null);

/**
 * @var {color}
 * Tab close icon color when the close icon is pressed
 */
$tab-close-icon-pressed-color: dynamic(null);

/**
 * @var {color}
 * Tab close icon color when the tab is active
 */
$tab-active-close-icon-color: dynamic(null);

/**
 * @var {color}
 * Tab close icon color when the tab is active and the close icon is hovered
 */
$tab-active-close-icon-hovered-color: dynamic(null);

/**
 * @var {color}
 * Tab close icon color when the tab is active and the close icon is pressed
 */
$tab-active-close-icon-pressed-color: dynamic(null);

/**
 * @var {color}
 * Tab close icon background-color
 */
$tab-close-icon-background-color: dynamic(null);

/**
 * @var {color}
 * Tab close icon background-color when the close icon is hovered
 */
$tab-close-icon-hovered-background-color: dynamic(rgba(0, 0, 0, 0.1));

/**
 * @var {color}
 * Tab close icon background-color when the close icon is pressed
 */
$tab-close-icon-pressed-background-color: dynamic(rgba(0, 0, 0, 0.2));

/**
 * @var {color}
 * Tab close icon background-color when the tab is active
 */
$tab-active-close-icon-background-color: dynamic(null);

/**
 * @var {color}
 * Tab close icon background-color when the tab is active and the close icon is hovered
 */
$tab-active-close-icon-hovered-background-color: dynamic(null);

/**
 * @var {color}
 * Tab close icon background-color when the tab is active and the close icon is pressed
 */
$tab-active-close-icon-pressed-background-color: dynamic(null);

/**
 * @var {number/list}
 * Tab close icon border-radius
 */
$tab-close-icon-border-radius: dynamic(3px);

/**
 * @var {number/list}
 * Tab close icon border-radius in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$tab-close-icon-border-radius-big: dynamic(null);

/**
 * @var {number}
 * Tab close icon size
 */
$tab-close-icon-size: dynamic(12px);

/**
 * @var {number}
 * Tab close icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$tab-close-icon-size-big: dynamic(18px);

/**
 * @var {number}
 * Tab close icon font-size
 */
$tab-close-icon-font-size: dynamic(null);

/**
 * @var {number}
 * Tab close icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$tab-close-icon-font-size-big: dynamic(null);

/**
 * @var {number/list}
 * Tab close icon margin.
 * Used to position the close icon relative to the top right corner of the tab.
 */
$tab-close-icon-margin: dynamic(3px);

/**
 * @var {number/list}
 * Tab close icon margin in the {@link Global_CSS#$enable-big big} sizing scheme.
 * Used to position the close icon relative to the top right corner of the tab.
 */
$tab-close-icon-margin-big: dynamic(null);

/**
 * @var {number}
 * Additional spacing to add to the side of the tab that contains the close icon when closable
 */
$tab-close-icon-spacing: dynamic(10px);

/**
 * @var {number}
 * Additional spacing to add to the side of the tab that contains the close icon when closable
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$tab-close-icon-spacing-big: dynamic(20px);

/**
 * @var {number}
 * Additional margin right for left rotated tabbarPosition
 */
$tab-rotate-left-margin-right: dynamic(4px);

/**
 * @var {number}
 * Additional width for active indicator element for rotated tabbarPosition
 */
$tab-position-active-indicator-el-width: dynamic(4px);

/**
 * @var {number}
 * Additional padding for inner element of tab buttons for rotated tabbarPosition
 */
$tab-rotate-text-inner-el-padding: dynamic(8px 16px);

/**
 * @var {number}
 * Min width for button text element for rotated tabbarPosition
 */
$tab-rotate-text-el-min-width: dynamic(16px);

/**
 * 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 {String} [$xtype=tab] (protected) The {@link Ext.Class#xtype} to use
 * in CSS selectors.  For use by UI mixins of derived classes.
 *
 * @param {color} $background-color
 * Tab background-color
 *
 * @param {color} $hovered-background-color
 * Tab background-color when hovered
 *
 * @param {color} $pressed-background-color
 * Tab background-color when pressed
 *
 * @param {color} $active-background-color
 * Tab background-color when active
 *
 * @param {color} $focused-background-color
 * Tab background-color when focused
 *
 * @param {color} $active-focused-background-color
 * Tab background-color when active and focused
 *
 * @param {color} $disabled-background-color
 * Tab background-color when disabled
 *
 * @param {list} $box-shadow
 * Tab box-shadow
 *
 * @param {list} $hovered-box-shadow
 * Tab box-shadow when hovered
 *
 * @param {list} $pressed-box-shadow
 * Tab box-shadow when pressed
 *
 * @param {list} $active-box-shadow
 * Tab box-shadow when active
 *
 * @param {list} $focused-box-shadow
 * Tab box-shadow when focused
 *
 * @param {list} $active-focused-box-shadow
 * Tab box-shadow when active and focused
 *
 * @param {list} $disabled-box-shadow
 * Tab box-shadow when disabled
 *
 * @param {string/list} $background-gradient
 * Tab background-gradient.  Can be either the name of a gradient defined by
 * {@link Global_CSS#background-gradient} or a list of color stops.
 *
 * @param {string/list} $hovered-background-gradient
 * Tab background-gradient when hovered.  Can be either the name of a gradient
 * defined by {@link Global_CSS#background-gradient} or a list of color stops.
 *
 * @param {string/list} $pressed-background-gradient
 * Tab background-gradient when pressed.  Can be either the name of a gradient
 * defined by {@link Global_CSS#background-gradient} or a list of color stops.
 *
 * @param {string/list} $active-background-gradient
 * Tab background-gradient when active.  Can be either the name of a gradient
 * defined by {@link Global_CSS#background-gradient} or a list of color stops.
 *
 * @param {string/list} $focused-background-gradient
 * Tab background-gradient when focused.  Can be either the name of a gradient
 * defined by {@link Global_CSS#background-gradient} or a list of color stops.
 *
 * @param {string/list} $active-focused-background-gradient
 * Tab background-gradient when active and focused.  Can be either the name of a gradient
 * defined by {@link Global_CSS#background-gradient} or a list of color stops.
 *
 * @param {string/list} $disabled-background-gradient
 * Tab background-gradient when disabled.  Can be either the name of a gradient
 * defined by {@link Global_CSS#background-gradient} or a list of color stops.
 *
 * @param {color} $color
 * Tab text color
 *
 * @param {color} $hovered-color
 * Tab text color when hovered
 *
 * @param {color} $pressed-color
 * Tab text color when pressed
 *
 * @param {color} $active-color
 * Tab text color when active
 *
 * @param {color} $focused-color
 * Tab text color when focused
 *
 * @param {color} $active-focused-color
 * Tab text color when active and focused
 *
 * @param {color} $disabled-color
 * Tab color when disabled
 *
 * @param {color/list} $border-color
 * Tab border-color
 *
 * @param {color/list} $hovered-border-color
 * Tab border-color when hovered
 *
 * @param {color/list} $pressed-border-color
 * Tab border-color when pressed
 *
 * @param {color/list} $active-border-color
 * Tab border-color when active
 *
 * @param {color/list} $focused-border-color
 * Tab border-color when focused
 *
 * @param {color/list} $active-focused-border-color
 * Tab border-color when active and focused
 *
 * @param {color/list} $disabled-border-color
 * Tab border-color when disabled
 *
 * @param {color} $focused-outline-color
 * Tab focus outline color
 *
 * @param {color} $active-focused-outline-color
 * Tab focus outline color when active
 *
 * @param {string} $focused-outline-style
 * Tab focus outline style
 *
 * @param {number} $focused-outline-width
 * Tab focus outline width
 *
 * @param {number} $focused-outline-offset
 * Tab focus outline offset
 *
 * @param {number/list} $border-width
 * Tab border-width
 *
 * @param {string/list} $border-style
 * Tab border-style
 *
 * @param {number} $border-radius
 * Tab border-radius
 *
 * @param {number} $border-radius-big
 * Tab border-radius in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string/number} $font-weight
 * Tab font-weight
 *
 * @param {number} $font-size
 * Tab font-size
 *
 * @param {number} $font-size-big
 * Tab font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $stacked-font-size
 * Tab font-size when {@link #iconAlign} is `'top'` or `'bottom'`
 *
 * @param {number} $stacked-font-size-big
 * Tab font-size in the {@link Global_CSS#$enable-big big} sizing scheme when {@link #iconAlign} is `'top'` or `'bottom'`
 *
 * @param {number} $line-height
 * Tab line-height
 *
 * @param {number} $line-height-big
 * Tab line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string} $font-family
 * Tab font-family
 *
 * @param {string} $text-transform
 * Tab text-transform
 *
 * @param {string} $text-transform-big
 * Tab text-transform in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number/list} $padding
 * Tab padding
 *
 * @param {number/list} $padding-big
 * Tab padding in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number/list} $icon-only-padding
 * Tab padding when an icon is present without text
 *
 * @param {number/list} $icon-only-padding-big
 * Tab padding when an icon is present without text in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {color} $icon-color
 * Tab icon color.
 *
 * @param {color} $hovered-icon-color
 * Tab icon color when hovered.
 *
 * @param {color} $pressed-icon-color
 * Tab icon color when pressed.
 *
 * @param {color} $active-icon-color
 * Tab icon color when active
 *
 * @param {color} $focused-icon-color
 * Tab icon color when focused
 *
 * @param {color} $active-focused-icon-color
 * Tab icon color when active and focused
 *
 * @param {color} $disabled-icon-color
 * Tab icon color when disabled
 *
 * @param {number} $icon-size
 * Tab icon size
 *
 * @param {number} $icon-size-big
 * Tab icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $icon-font-size
 * Tab icon font-size
 *
 * @param {number} $icon-font-size-big
 * Tab icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $icon-horizontal-spacing
 * The space between the tab icon and text when the icon is horizontally aligned
 *
 * @param {number} $icon-horizontal-spacing-big
 * The space between the tab icon and text when the icon is horizontally aligned
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $icon-vertical-spacing
 * The space between the tab icon and text when the icon is vertically aligned
 *
 * @param {number} $icon-vertical-spacing-big
 * The space between the tab icon and text when the icon is vertically aligned
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $disabled-opacity
 * Tab opacity when disabled
 *
 * @param {string} $arrow-icon
 * Tab arrow icon
 *
 * @param {color} $arrow-icon-color
 * Tab arrow icon color
 *
 * @param {color} $hovered-arrow-icon-color
 * Tab arrow icon color when hovered
 *
 * @param {color} $pressed-arrow-icon-color
 * Tab arrow icon color when pressed
 *
 * @param {color} $active-arrow-icon-color
 * Tab arrow icon color when active
 *
 * @param {color} $focused-arrow-icon-color
 * Tab arrow icon color when focused
 *
 * @param {color} $active-focused-arrow-icon-color
 * Tab arrow icon color when active and focused
 *
 * @param {color} $disabled-arrow-icon-color
 * Tab arrow icon color when disabled
 *
 * @param {number} $arrow-icon-size
 * Tab arrow icon size
 *
 * @param {number} $arrow-icon-size-big
 * Tab arrow icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $arrow-icon-font-size
 * Tab arrow icon font-size
 *
 * @param {number} $arrow-icon-font-size-big
 * Tab arrow icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $arrow-horizontal-spacing
 * The space between the tab arrow and text when {@link #arrowAlign} is `'right'`
 *
 * @param {number} $arrow-horizontal-spacing-big
 * The space between the tab arrow and text when {@link #arrowAlign} is `'right'`
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $arrow-vertical-spacing
 * The space between the tab arrow and text when {@link #arrowAlign} is `'bottom'`
 *
 * @param {number} $arrow-vertical-spacing-big
 * The space between the tab arrow and text when {@link #arrowAlign} is `'bottom'`
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {color} $badge-background-color
 * The background-color of the tab's {@link #badgeText badge}
 *
 * @param {string/list} $badge-background-gradient
 * The background-gradient of the tab's {@link #badgeText badge} Can be either the name
 * of a gradient defined by {@link Global_CSS#background-gradient} or a list of color stops.
 *
 * @param {color} $badge-color
 * The text color of the tab's {@link #badgeText badge}
 *
 * @param {color} $badge-border-color
 * The border-color of the tab's {@link #badgeText badge}
 *
 * @param {number/list} $badge-border-radius
 * The border-radius of the tab's {@link #badgeText badge}
 *
 * @param {number} $badge-min-width
 * The min-width of the tab's {@link #badgeText badge}
 *
 * @param {number} $badge-max-width
 * The max-width of the tab's {@link #badgeText badge}
 *
 * @param {string/number} $badge-font-weight
 * The font-weight of the tab's {@link #badgeText badge}
 *
 * @param {number} $badge-font-size
 * The font-size of the tab's {@link #badgeText badge}
 *
 * @param {number} $badge-font-size-big
 * The font-size of the tab's {@link #badgeText badge} in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string} $badge-font-family
 * The font-family of the tab's {@link #badgeText badge}
 *
 * @param {number} $badge-line-height
 * The line-height of the tab's {@link #badgeText badge}
 *
 * @param {number} $badge-line-height-big
 * The line-height of the tab's {@link #badgeText badge} in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $badge-top
 * Offset of the {@link #badgeText badge} from the top of the tab
 *
 * @param {number} $badge-right
 * Offset of the {@link #badgeText badge} from the right of the tab
 *
 * @param {number} $badge-bottom
 * Offset of the {@link #badgeText badge} from the bottom of the tab
 *
 * @param {number} $badge-left
 * Offset of the {@link #badgeText badge} from the left of the tab
 *
 * @param {number} $badge-padding
 * The padding of the tab's {@link #badgeText badge}
 *
 * @param {number} $badge-padding-big
 * The padding of the tab's {@link #badgeText badge} in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {color} $active-indicator-background-color
 * The background-color of the tab's "active indicator"
 *
 * @param {number} $active-indicator-height
 * The height of the tab's "active indicator"
 *
 * @param {string} $close-icon
 * Tab close icon
 *
 * @param {color} $close-icon-color
 * Tab close icon color
 *
 * @param {color} $close-icon-hovered-color
 * Tab close icon color when the close icon is hovered
 *
 * @param {color} $close-icon-pressed-color
 * Tab close icon color when the close icon is pressed
 *
 * @param {color} $active-close-icon-color
 * Tab close icon color when the tab is active
 *
 * @param {color} $active-close-icon-hovered-color
 * Tab close icon color when the tab is active and the close icon is hovered
 *
 * @param {color} $active-close-icon-pressed-color
 * Tab close icon color when the tab is active and the close icon is pressed
 *
 * @param {color} $close-icon-background-color
 * Tab close icon background-color
 *
 * @param {color} $close-icon-hovered-background-color
 * Tab close icon background-color when the close icon is hovered
 *
 * @param {color} $close-icon-pressed-background-color
 * Tab close icon background-color when the close icon is pressed
 *
 * @param {color} $active-close-icon-background-color
 * Tab close icon background-color when the tab is active
 *
 * @param {color} $active-close-icon-hovered-background-color
 * Tab close icon background-color when the tab is active and the close icon is hovered
 *
 * @param {color} $active-close-icon-pressed-background-color
 * Tab close icon background-color when the tab is active and the close icon is pressed
 *
 * @param {number/list} $close-icon-border-radius
 * Tab close icon border-radius
 *
 * @param {number/list} $close-icon-border-radius-big
 * Tab close icon border-radius in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $close-icon-size
 * Tab close icon size
 *
 * @param {number} $close-icon-size-big
 * Tab close icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $close-icon-font-size
 * Tab close icon font-size
 *
 * @param {number} $close-icon-font-size-big
 * Tab close icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number/list} $close-icon-margin
 * Tab close icon margin.
 * Used to position the close icon relative to the top right corner of the tab.
 *
 * @param {number/list} $close-icon-margin-big
 * Tab close icon margin in the {@link Global_CSS#$enable-big big} sizing scheme.
 * Used to position the close icon relative to the top right corner of the tab.
 *
 * @param {number} $close-icon-spacing
 * Additional spacing to add to the side of the tab that contains the close icon when closable
 *
 * @param {number} $close-icon-spacing-big
 * Additional spacing to add to the side of the tab that contains the close icon when closable
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $rotate-left-margin-right
 * Tab Left rotated margin-right
 *
 * @param {number} $position-active-indicator-el-width
 * Tab active position indicator element width
 *
 * @param {number} $rotate-text-inner-el-padding
 * Tab left/right rotated inner element padding
 *
 * @param {number} $rotate-text-el-min-width
 * Tab left/right text element min width
 */
@mixin tab-ui(
    $ui: null,
    $xtype: tab,
    $background-color: null,
    $hovered-background-color: null,
    $pressed-background-color: null,
    $active-background-color: null,
    $focused-background-color: null,
    $active-focused-background-color: null,
    $disabled-background-color: null,
    $box-shadow: null,
    $hovered-box-shadow: null,
    $pressed-box-shadow: null,
    $active-box-shadow: null,
    $focused-box-shadow: null,
    $active-focused-box-shadow: null,
    $disabled-box-shadow: null,
    $background-gradient: null,
    $hovered-background-gradient: null,
    $pressed-background-gradient: null,
    $active-background-gradient: null,
    $focused-background-gradient: null,
    $active-focused-background-gradient: null,
    $disabled-background-gradient: null,
    $color: null,
    $hovered-color: null,
    $pressed-color: null,
    $active-color: null,
    $focused-color: null,
    $active-focused-color: null,
    $disabled-color: null,
    $border-color: null,
    $hovered-border-color: null,
    $pressed-border-color: null,
    $active-border-color: null,
    $focused-border-color: null,
    $active-focused-border-color: null,
    $disabled-border-color: null,
    $focused-outline-color: null,
    $active-focused-outline-color: null,
    $focused-outline-style: null,
    $focused-outline-width: null,
    $focused-outline-offset: null,
    $border-width: null,
    $border-style: null,
    $border-radius: null,
    $border-radius-big: null,
    $font-weight: null,
    $font-size: null,
    $font-size-big: null,
    $stacked-font-size: null,
    $stacked-font-size-big: null,
    $line-height: null,
    $line-height-big: null,
    $font-family: null,
    $text-transform: null,
    $text-transform-big: null,
    $padding: null,
    $padding-big: null,
    $icon-only-padding: null,
    $icon-only-padding-big: null,
    $icon-color: null,
    $hovered-icon-color: null,
    $pressed-icon-color: null,
    $active-icon-color: null,
    $focused-icon-color: null,
    $active-focused-icon-color: null,
    $disabled-icon-color: null,
    $icon-size: null,
    $icon-size-big: null,
    $icon-font-size: null,
    $icon-font-size-big: null,
    $icon-horizontal-spacing: null,
    $icon-horizontal-spacing-big: null,
    $icon-vertical-spacing: null,
    $icon-vertical-spacing-big: null,
    $disabled-opacity: null,
    $arrow-icon: null,
    $arrow-icon-color: null,
    $hovered-arrow-icon-color: null,
    $pressed-arrow-icon-color: null,
    $active-arrow-icon-color: null,
    $focused-arrow-icon-color: null,
    $active-focused-arrow-icon-color: null,
    $disabled-arrow-icon-color: null,
    $arrow-icon-size: null,
    $arrow-icon-size-big: null,
    $arrow-icon-font-size: null,
    $arrow-icon-font-size-big: null,
    $arrow-horizontal-spacing: null,
    $arrow-horizontal-spacing-big: null,
    $arrow-vertical-spacing: null,
    $arrow-vertical-spacing-big: null,
    $badge-background-color: null,
    $badge-background-gradient: null,
    $badge-color: null,
    $badge-border-color: null,
    $badge-border-radius: null,
    $badge-min-width: null,
    $badge-max-width: null,
    $badge-font-weight: null,
    $badge-font-size: null,
    $badge-font-size-big: null,
    $badge-font-family: null,
    $badge-line-height: null,
    $badge-line-height-big: null,
    $badge-top: null,
    $badge-right: null,
    $badge-bottom: null,
    $badge-left: null,
    $badge-padding: null,
    $badge-padding-big: null,
    $active-indicator-background-color: null,
    $active-indicator-height: null,
    $close-icon: null,
    $close-icon-color: null,
    $close-icon-hovered-color: null,
    $close-icon-pressed-color: null,
    $active-close-icon-color: null,
    $active-close-icon-hovered-color: null,
    $active-close-icon-pressed-color: null,
    $close-icon-background-color: null,
    $close-icon-hovered-background-color: null,
    $close-icon-pressed-background-color: null,
    $active-close-icon-background-color: null,
    $active-close-icon-hovered-background-color: null,
    $active-close-icon-pressed-background-color: null,
    $close-icon-border-radius: null,
    $close-icon-border-radius-big: null,
    $close-icon-size: null,
    $close-icon-size-big: null,
    $close-icon-font-size: null,
    $close-icon-font-size-big: null,
    $close-icon-margin: null,
    $close-icon-margin-big: null,
    $close-icon-spacing: null,
    $close-icon-spacing-big: null,
    $rotate-left-margin-right: null,
    $position-active-indicator-el-width: null,
    $rotate-text-inner-el-padding: null,
    $rotate-text-el-min-width: null
) {
    $ui-suffix: ui-suffix($ui);

    $arguments: map-merge((
        derive-colors: false,
        derive-border-colors: false,
        derive-outline-colors: false,
        derive-background-colors: false,
        derive-background-gradients: false
    ), intersect-arguments(tab-ui, button-ui));

    @include button-ui($arguments...);

    .#{$prefix}#{$xtype}#{$ui-suffix} {
        .#{$prefix}close-icon-el {
            background-color: $close-icon-background-color;
            border-radius: $close-icon-border-radius;
            margin: $close-icon-margin;

            @include icon(
                $icon: $close-icon,
                $color: $close-icon-color,
                $size: $close-icon-size,
                $size-big: $close-icon-size-big,
                $font-size: $close-icon-font-size,
                $font-size-big: $close-icon-font-size-big
            );

            @if $enable-big {
                .#{$prefix}big & {
                    border-radius: $close-icon-border-radius-big;
                    margin: $close-icon-margin-big;
                }
            }

            &:hover {
                color: $close-icon-hovered-color;
                background-color: $close-icon-hovered-background-color;
            }

            &:active {
                color: $close-icon-pressed-color;
                background-color: $close-icon-pressed-background-color;
            }
        }

        &.#{$prefix}active {
            color: $active-color;
            box-shadow: $active-box-shadow;

            .#{$prefix}inner-el {
                border-color: $active-border-color;
                @include background-gradient($active-background-color, $active-background-gradient);
            }

            .#{$prefix}icon-el {
                color: $active-icon-color;
            }

            .#{$prefix}arrow-el {
                color: $active-arrow-icon-color;
            }

            .#{$prefix}active-indicator-el  {
                background-color: $active-indicator-background-color;
                height: $active-indicator-height;
            }

            .#{$prefix}close-icon-el {
                color: $active-close-icon-color;
                background-color: $active-close-icon-background-color;

                &:hover {
                    color: $active-close-icon-hovered-color;
                    background-color: $active-close-icon-hovered-background-color;
                }

                &:active {
                    color: $active-close-icon-pressed-color;
                    background-color: $active-close-icon-pressed-background-color;
                }
            }
        }

        &.#{$prefix}active.#{$prefix}focused {
            color: $active-focused-color;
            box-shadow: $active-focused-box-shadow;

            .#{$prefix}inner-el {
                border-color: $active-focused-border-color;
                @include background-gradient($active-focused-background-color, $active-focused-background-gradient);
            }

            .#{$prefix}icon-el {
                color: $active-focused-icon-color;
            }

            .#{$prefix}arrow-el {
                color: $active-focused-arrow-icon-color;
            }

            &:after {
                .#{$prefix}keyboard-mode & {
                    border-color: $active-focused-outline-color;
                }
            }
        }

        &.#{$prefix}icon-align-top,
        &.#{$prefix}icon-align-bottom {
            &.#{$prefix}has-icon {
                font-size: $stacked-font-size;

                @if $enable-big {
                    .#{$prefix}big & {
                        font-size: $tab-stacked-font-size-big;
                    }
                }
            }
        }

        &.#{$prefix}closable .#{$prefix}body-el {
            margin-right: $close-icon-spacing;

            @if $enable-big {
                .#{$prefix}big & {
                    margin-right: $close-icon-spacing-big;
                }
            }
        }
    }

    .#{$prefix}tab {
        &.#{$prefix}tab-rotate-left {
            .#{$prefix}text-el {
                margin-right: $rotate-left-margin-right;
            }
        }

        &.#{$prefix}tab-position-left.#{$prefix}active {
            .#{$prefix}active-indicator-el {
                width: $position-active-indicator-el-width;
            }
        }

        &.#{$prefix}tab-position-right.#{$prefix}active {
            .#{$prefix}active-indicator-el {
                width: $position-active-indicator-el-width;
            }
        }

        &.#{$prefix}has-text.#{$prefix}tab-rotate-left,
        &.#{$prefix}has-text.#{$prefix}tab-rotate-right {
            .#{$prefix}inner-el {
                padding: $rotate-text-inner-el-padding; 
            }
        }

        &.#{$prefix}has-text.#{$prefix}tab-rotate-left,
        &.#{$prefix}has-text.#{$prefix}tab-rotate-right {
            .#{$prefix}text-el {
                min-width: $rotate-text-el-min-width;
            }
        }
    }
}