saas-one/frontend/operation-web/ext/classic/theme-neutral/sass/var/button/Button.scss

/** @class Ext.button.Button */

/**
 * @var {number}
 * The default width for a button's {@link #cfg-menu} arrow
 */
$button-arrow-width: dynamic(8px);

/**
 * @var {number}
 * The default height for a button's {@link #cfg-menu} arrow
 */
$button-arrow-height: dynamic(8px);

/**
 * @var {number}
 * The default width for a {@link Ext.button.Split Split Button}'s arrow
 */
$button-split-width: dynamic(14px);

/**
 * @var {number}
 * The default height for a {@link Ext.button.Split Split Button}'s arrow
 */
$button-split-height: dynamic(14px);

/**
 * @var {number}
 * The default width for a {@link Ext.button.Split Split Button}'s line.
 * Themes that include the line in the arrow background image should set this to 0
 */
$button-split-line-width: dynamic(0);

/**
 * @var {number}
 * The default space between a button's icon and text
 */
$button-icon-spacing: dynamic(4px);

/**
 * @var {number}
 * The default border-radius for a small {@link #scale} button
 */
$button-small-border-radius: dynamic(3px);

/**
 * @var {number}
 * The default border-width for a small {@link #scale} button
 */
$button-small-border-width: dynamic(1px);

/**
 * @var {number}
 * The default padding for a small {@link #scale} button
 */
$button-small-padding: dynamic(2px);

/**
 * @var {number}
 * The default horizontal padding to add to the left and right of the text element for
 * a small {@link #scale} button
 */
$button-small-text-padding: dynamic(4px);

/**
 * @var {number}
 * The default font-size for a small {@link #scale} button
 */
$button-small-font-size: dynamic(ceil($font-size * .9));  //11px

/**
 * @var {number}
 * The default font-size for a small {@link #scale} button when the cursor is over the button
 */
$button-small-font-size-over: dynamic($button-small-font-size);

/**
 * @var {number}
 * The default font-size for a small {@link #scale} button when the button is focused
 */
$button-small-font-size-focus: dynamic($button-small-font-size-over);

/**
 * @var {number}
 * The default font-size for a small {@link #scale} button when the button is pressed
 */
$button-small-font-size-pressed: dynamic($button-small-font-size);

/**
 * @var {number}
 * The default font-size for a small {@link #scale} button when the button is focused and
 * the cursor is over the button
 */
$button-small-font-size-focus-over: dynamic($button-small-font-size-over);

/**
 * @var {number}
 * The default font-size for a small {@link #scale} button when the button is focused and pressed
 */
$button-small-font-size-focus-pressed: dynamic($button-small-font-size-pressed);

/**
 * @var {number}
 * The default font-size for a small {@link #scale} button when the button is disabled
 */
$button-small-font-size-disabled: dynamic($button-small-font-size);

/**
 * @var {string}
 * The default font-weight for a small {@link #scale} button
 */
$button-small-font-weight: dynamic($font-weight);

/**
 * @var {string}
 * The default font-weight for a small {@link #scale} button when the cursor is over the button
 */
$button-small-font-weight-over: dynamic($button-small-font-weight);

/**
 * @var {string}
 * The default font-weight for a small {@link #scale} button when the button is focused
 */
$button-small-font-weight-focus: dynamic($button-small-font-weight-over);

/**
 * @var {string}
 * The default font-weight for a small {@link #scale} button when the button is pressed
 */
$button-small-font-weight-pressed: dynamic($button-small-font-weight);

/**
 * @var {string}
 * The default font-weight for a small {@link #scale} button when the button is focused
 * and the cursor is over the button
 */
$button-small-font-weight-focus-over: dynamic($button-small-font-weight-over);

/**
 * @var {string}
 * The default font-weight for a small {@link #scale} button when the button is focused
 * and pressed
 */
$button-small-font-weight-focus-pressed: dynamic($button-small-font-weight-pressed);

/**
 * @var {string}
 * The default font-weight for a small {@link #scale} button when the button is disabled
 */
$button-small-font-weight-disabled: dynamic($button-small-font-weight);

/**
 * @var {string}
 * The default font-family for a small {@link #scale} button
 */
$button-small-font-family: dynamic($font-family);

/**
 * @var {string}
 * The default font-family for a small {@link #scale} button when the cursor is over the button
 */
$button-small-font-family-over: dynamic($button-small-font-family);

/**
 * @var {string}
 * The default font-family for a small {@link #scale} button when the button is focused
 */
$button-small-font-family-focus: dynamic($button-small-font-family-over);

/**
 * @var {string}
 * The default font-family for a small {@link #scale} button when the button is pressed
 */
$button-small-font-family-pressed: dynamic($button-small-font-family);

/**
 * @var {string}
 * The default font-family for a small {@link #scale} button when the button is focused
 * and the cursor is over the button
 */
$button-small-font-family-focus-over: dynamic($button-small-font-family-over);

/**
 * @var {string}
 * The default font-family for a small {@link #scale} button when the button is focused
 * and pressed
 */
$button-small-font-family-focus-pressed: dynamic($button-small-font-family-pressed);

/**
 * @var {string}
 * The default font-family for a small {@link #scale} button when the button is disabled
 */
$button-small-font-family-disabled: dynamic($button-small-font-family);

/**
 * @var {number}
 * The line-height for the text in a small {@link #scale} button
 */
$button-small-line-height: dynamic(16px);

/**
 * @var {number}
 * The default icon size for a small {@link #scale} button
 */
$button-small-icon-size: dynamic(16px);

/**
 * @var {number}
 * The the font-size for small {@link #scale} button glyphs
 */
$button-small-glyph-font-size: dynamic($button-small-icon-size);

/**
 * @var {number}
 * The space between a small {@link #scale} button's icon and text
 */
$button-small-icon-spacing: dynamic($button-icon-spacing);

/**
 * @var {number}
 * The default width of a small {@link #scale} button's {@link #cfg-menu} arrow
 */
$button-small-arrow-width: dynamic($button-arrow-width);

/**
 * @var {number}
 * The default height of a small {@link #scale} button's {@link #cfg-menu} arrow
 */
$button-small-arrow-height: dynamic($button-arrow-height);

/**
 * @var {string/list}
 * Glyph for a small button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$button-small-arrow-glyph: dynamic($fa-var-caret-down 16px $font-icon-font-family);

/**
 * @var {number}
 * The default width of a small {@link #scale} {@link Ext.button.Split Split Button}'s arrow
 */
$button-small-split-width: dynamic($button-split-width);

/**
 * @var {number}
 * The default height of a small {@link #scale} {@link Ext.button.Split Split Button}'s arrow
 */
$button-small-split-height: dynamic($button-split-height);

/**
 * @var {number}
 * The width of a small {@link #scale} {@link Ext.button.Split Split Button}'s line.
 * Themes that include the line in the arrow background image should set this to 0
 */
$button-small-split-line-width: dynamic($button-split-line-width);

/**
 * @var {number}
 * The default border-radius for a medium {@link #scale} button
 */
$button-medium-border-radius: dynamic(3px);

/**
 * @var {number}
 * The default border-width for a medium {@link #scale} button
 */
$button-medium-border-width: dynamic(1px);

/**
 * @var {number}
 * The default padding for a medium {@link #scale} button
 */
$button-medium-padding: dynamic(3px);

/**
 * @var {number}
 * The default horizontal padding to add to the left and right of the text element for
 * a medium {@link #scale} button
 */
$button-medium-text-padding: dynamic(4px);

/**
 * @var {number}
 * The default font-size for a medium {@link #scale} button
 */
$button-medium-font-size: dynamic($font-size);  //11px

/**
 * @var {number}
 * The default font-size for a medium {@link #scale} button when the cursor is over the button
 */
$button-medium-font-size-over: dynamic($button-medium-font-size);

/**
 * @var {number}
 * The default font-size for a medium {@link #scale} button when the button is focused
 */
$button-medium-font-size-focus: dynamic($button-medium-font-size-over);

/**
 * @var {number}
 * The default font-size for a medium {@link #scale} button when the button is pressed
 */
$button-medium-font-size-pressed: dynamic($button-medium-font-size);

/**
 * @var {number}
 * The default font-size for a medium {@link #scale} button when the button is focused
 * and the cursor is over the button
 */
$button-medium-font-size-focus-over: dynamic($button-medium-font-size-over);

/**
 * @var {number}
 * The default font-size for a medium {@link #scale} button when the button is focused
 * and pressed
 */
$button-medium-font-size-focus-pressed: dynamic($button-medium-font-size-pressed);

/**
 * @var {number}
 * The default font-size for a medium {@link #scale} button when the button is disabled
 */
$button-medium-font-size-disabled: dynamic($button-medium-font-size);

/**
 * @var {string}
 * The default font-weight for a medium {@link #scale} button
 */
$button-medium-font-weight: dynamic($font-weight);

/**
 * @var {string}
 * The default font-weight for a medium {@link #scale} button when the cursor is over the button
 */
$button-medium-font-weight-over: dynamic($button-medium-font-weight);

/**
 * @var {string}
 * The default font-weight for a medium {@link #scale} button when the button is focused
 */
$button-medium-font-weight-focus: dynamic($button-medium-font-weight-over);

/**
 * @var {string}
 * The default font-weight for a medium {@link #scale} button when the button is pressed
 */
$button-medium-font-weight-pressed: dynamic($button-medium-font-weight);

/**
 * @var {string}
 * The default font-weight for a medium {@link #scale} button when the button is focused
 * and the cursor is over the button
 */
$button-medium-font-weight-focus-over: dynamic($button-medium-font-weight-over);

/**
 * @var {string}
 * The default font-weight for a medium {@link #scale} button when the button is focused
 * and pressed
 */
$button-medium-font-weight-focus-pressed: dynamic($button-medium-font-weight-pressed);

/**
 * @var {string}
 * The default font-weight for a medium {@link #scale} button when the button is disabled
 */
$button-medium-font-weight-disabled: dynamic($button-medium-font-weight);

/**
 * @var {string}
 * The default font-family for a medium {@link #scale} button
 */
$button-medium-font-family: dynamic($font-family);

/**
 * @var {string}
 * The default font-family for a medium {@link #scale} button when the cursor is over the button
 */
$button-medium-font-family-over: dynamic($button-medium-font-family);

/**
 * @var {string}
 * The default font-family for a medium {@link #scale} button when the button is focused
 */
$button-medium-font-family-focus: dynamic($button-medium-font-family-over);

/**
 * @var {string}
 * The default font-family for a medium {@link #scale} button when the button is pressed
 */
$button-medium-font-family-pressed: dynamic($button-medium-font-family);

/**
 * @var {string}
 * The default font-family for a medium {@link #scale} button when the button is focused
 * and the cursor is over the button
 */
$button-medium-font-family-focus-over: dynamic($button-medium-font-family-over);

/**
 * @var {string}
 * The default font-family for a medium {@link #scale} button when the button is focused
 * and pressed
 */
$button-medium-font-family-focus-pressed: dynamic($button-medium-font-family-pressed);

/**
 * @var {string}
 * The default font-family for a medium {@link #scale} button when the button is disabled
 */
$button-medium-font-family-disabled: dynamic($button-medium-font-family);

/**
 * @var {number}
 * The line-height for the text in a medium {@link #scale} button
 */
$button-medium-line-height: dynamic(16px);

/**
 * @var {number}
 * The default icon size for a medium {@link #scale} button
 */
$button-medium-icon-size: dynamic(24px);

/**
 * @var {number}
 * The the font-size for medium {@link #scale} button glyphs
 */
$button-medium-glyph-font-size: dynamic($button-medium-icon-size);

/**
 * @var {number}
 * The space between a medium {@link #scale} button's icon and text
 */
$button-medium-icon-spacing: dynamic($button-icon-spacing);

/**
 * @var {number}
 * The default width of a medium {@link #scale} button's {@link #cfg-menu} arrow
 */
$button-medium-arrow-width: dynamic($button-arrow-width);

/**
 * @var {number}
 * The default height of a medium {@link #scale} button's {@link #cfg-menu} arrow
 */
$button-medium-arrow-height: dynamic($button-arrow-height);

/**
 * @var {string/list}
 * Glyph for a medium button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$button-medium-arrow-glyph: dynamic($fa-var-caret-down 20px $font-icon-font-family);

/**
 * @var {number}
 * The default width of a medium {@link #scale} {@link Ext.button.Split Split Button}'s arrow
 */
$button-medium-split-width: dynamic($button-split-width);

/**
 * @var {number}
 * The default height of a medium {@link #scale} {@link Ext.button.Split Split Button}'s arrow
 */
$button-medium-split-height: dynamic($button-split-height);

/**
 * @var {number}
 * The width of a medium {@link #scale} {@link Ext.button.Split Split Button}'s line.
 * Themes that include the line in the arrow background image should set this to 0
 */
$button-medium-split-line-width: dynamic($button-split-line-width);

/**
 * @var {number}
 * The default border-radius for a large {@link #scale} button
 */
$button-large-border-radius: dynamic(3px);

/**
 * @var {number}
 * The default border-width for a large {@link #scale} button
 */
$button-large-border-width: dynamic(1px);

/**
 * @var {number}
 * The default padding for a large {@link #scale} button
 */
$button-large-padding: dynamic(3px);

/**
 * @var {number}
 * The default horizontal padding to add to the left and right of the text element for
 * a large {@link #scale} button
 */
$button-large-text-padding: dynamic(4px);

/**
 * @var {number}
 * The default font-size for a large {@link #scale} button
 */
$button-large-font-size: dynamic($font-size);  //11px

/**
 * @var {number}
 * The default font-size for a large {@link #scale} button when the cursor is over the button
 */
$button-large-font-size-over: dynamic($button-large-font-size);

/**
 * @var {number}
 * The default font-size for a large {@link #scale} button when the button is focused
 */
$button-large-font-size-focus: dynamic($button-large-font-size-over);

/**
 * @var {number}
 * The default font-size for a large {@link #scale} button when the button is pressed
 */
$button-large-font-size-pressed: dynamic($button-large-font-size);

/**
 * @var {number}
 * The default font-size for a large {@link #scale} button when the button is focused
 * and the cursor is over the button
 */
$button-large-font-size-focus-over: dynamic($button-large-font-size-over);

/**
 * @var {number}
 * The default font-size for a large {@link #scale} button when the button is focused
 * and pressed
 */
$button-large-font-size-focus-pressed: dynamic($button-large-font-size-pressed);

/**
 * @var {number}
 * The default font-size for a large {@link #scale} button when the button is disabled
 */
$button-large-font-size-disabled: dynamic($button-large-font-size);

/**
 * @var {string}
 * The default font-weight for a large {@link #scale} button
 */
$button-large-font-weight: dynamic($font-weight);

/**
 * @var {string}
 * The default font-weight for a large {@link #scale} button when the cursor is over the button
 */
$button-large-font-weight-over: dynamic($button-large-font-weight);

/**
 * @var {string}
 * The default font-weight for a large {@link #scale} button when the button is focused
 */
$button-large-font-weight-focus: dynamic($button-large-font-weight-over);

/**
 * @var {string}
 * The default font-weight for a large {@link #scale} button when the button is pressed
 */
$button-large-font-weight-pressed: dynamic($button-large-font-weight);

/**
 * @var {string}
 * The default font-weight for a large {@link #scale} button when the button is focused
 * and the cursor is over the button
 */
$button-large-font-weight-focus-over: dynamic($button-large-font-weight-over);

/**
 * @var {string}
 * The default font-weight for a large {@link #scale} button when the button is focused
 * and pressed
 */
$button-large-font-weight-focus-pressed: dynamic($button-large-font-weight-pressed);

/**
 * @var {string}
 * The default font-weight for a large {@link #scale} button when the button is disabled
 */
$button-large-font-weight-disabled: dynamic($button-large-font-weight);

/**
 * @var {string}
 * The default font-family for a large {@link #scale} button
 */
$button-large-font-family: dynamic($font-family);

/**
 * @var {string}
 * The default font-family for a large {@link #scale} button when the cursor is over the button
 */
$button-large-font-family-over: dynamic($button-large-font-family);

/**
 * @var {string}
 * The default font-family for a large {@link #scale} button when the button is focused
 */
$button-large-font-family-focus: dynamic($button-large-font-family-over);

/**
 * @var {string}
 * The default font-family for a large {@link #scale} button when the button is pressed
 */
$button-large-font-family-pressed: dynamic($button-large-font-family);

/**
 * @var {string}
 * The default font-family for a large {@link #scale} button when the button is focused
 * and the cursor is over the button
 */
$button-large-font-family-focus-over: dynamic($button-large-font-family-over);

/**
 * @var {string}
 * The default font-family for a large {@link #scale} button when the button is focused
 * and pressed
 */
$button-large-font-family-focus-pressed: dynamic($button-large-font-family-pressed);

/**
 * @var {string}
 * The default font-family for a large {@link #scale} button when the button is disabled
 */
$button-large-font-family-disabled: dynamic($button-large-font-family);

/**
 * @var {number}
 * The line-height for the text in a large {@link #scale} button
 */
$button-large-line-height: dynamic(16px);

/**
 * @var {number}
 * The default icon size for a large {@link #scale} button
 */
$button-large-icon-size: dynamic(32px);

/**
 * @var {number}
 * The the font-size for large {@link #scale} button glyphs
 */
$button-large-glyph-font-size: dynamic($button-large-icon-size);

/**
 * @var {number}
 * The space between a large {@link #scale} button's icon and text
 */
$button-large-icon-spacing: dynamic($button-icon-spacing);

/**
 * @var {number}
 * The default width of a large {@link #scale} button's {@link #cfg-menu} arrow
 */
$button-large-arrow-width: dynamic($button-arrow-width);

/**
 * @var {number}
 * The default height of a large {@link #scale} button's {@link #cfg-menu} arrow
 */
$button-large-arrow-height: dynamic($button-arrow-height);

/**
 * @var {string/list}
 * Glyph for a large button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$button-large-arrow-glyph: dynamic($fa-var-caret-down 24px $font-icon-font-family);

/**
 * @var {number}
 * The default width of a large {@link #scale} {@link Ext.button.Split Split Button}'s arrow
 */
$button-large-split-width: dynamic($button-split-width);

/**
 * @var {number}
 * The default height of a large {@link #scale} {@link Ext.button.Split Split Button}'s arrow
 */
$button-large-split-height: dynamic($button-split-height);

/**
 * @var {number}
 * The width of a large {@link #scale} {@link Ext.button.Split Split Button}'s line.
 * Themes that include the line in the arrow background image should set this to 0
 */
$button-large-split-line-width: dynamic($button-split-line-width);

/**
 * @var {color}
 * The base color for the `default` button UI
 */
$button-default-base-color: dynamic($base-color);

/**
 * @var {color}
 * The base color for the `default` button UI when the cursor is over the button
 */
$button-default-base-color-over: dynamic(button-default-background-color-over($button-default-base-color));

/**
 * @var {color}
 * The base color for the `default` button UI when the button is focused
 */
$button-default-base-color-focus: dynamic(button-default-background-color-focus($button-default-base-color));

/**
 * @var {color}
 * The base color for the `default` button UI when the button is pressed
 */
$button-default-base-color-pressed: dynamic(button-default-background-color-pressed($button-default-base-color));

/**
 * @var {color}
 * The base color for the `default` button UI when the button is focused and the cursor
 * is over the button
 */
$button-default-base-color-focus-over: dynamic($button-default-base-color-over);

/**
 * @var {color}
 * The base color for the `default` button UI when the button is focused and pressed
 */
$button-default-base-color-focus-pressed: dynamic($button-default-base-color-pressed);

/**
 * @var {color}
 * The base color for the `default` button UI when the button is disabled
 */
$button-default-base-color-disabled: dynamic(button-default-background-color-disabled($button-default-base-color));

/**
 * @var {color}
 * The border-color for the `default` button UI
 */
$button-default-border-color: dynamic($button-default-base-color);

/**
 * @var {color}
 * The border-color for the `default` button UI when the cursor is over the button
 */
$button-default-border-color-over: dynamic(button-default-border-color-over($button-default-border-color));

/**
 * @var {color}
 * The border-color for the `default` button UI when the button is focused
 */
$button-default-border-color-focus: dynamic(button-default-border-color-focus($button-default-border-color));

/**
 * @var {color}
 * The border-color for the `default` button UI when the button is pressed
 */
$button-default-border-color-pressed: dynamic(button-default-border-color-pressed($button-default-border-color));

/**
 * @var {color}
 * The border-color for the `default` button UI when the button is focused and the cursor
 * is over the button
 */
$button-default-border-color-focus-over: dynamic($button-default-border-color-over);

/**
 * @var {color}
 * The border-color for the `default` button UI when the button is focused and pressed
 */
$button-default-border-color-focus-pressed: dynamic($button-default-border-color-pressed);

/**
 * @var {color}
 * The border-color for the `default` button UI when the button is disabled
 */
$button-default-border-color-disabled: dynamic(button-default-border-color-disabled($button-default-border-color));

/**
 * @var {color}
 * The background-color for the `default` button UI
 */
$button-default-background-color: dynamic($button-default-base-color);

/**
 * @var {color}
 * The background-color for the `default` button UI when the cursor is over the button
 */
$button-default-background-color-over: dynamic($button-default-base-color-over);

/**
 * @var {color}
 * The background-color for the `default` button UI when the button is focused
 */
$button-default-background-color-focus: dynamic($button-default-base-color-focus);

/**
 * @var {color}
 * The background-color for the `default` button UI when the button is pressed
 */
$button-default-background-color-pressed: dynamic($button-default-base-color-pressed);

/**
 * @var {color}
 * The background-color for the `default` button UI when the button is focused and the
 * cursor is over the button
 */
$button-default-background-color-focus-over: dynamic($button-default-background-color-over);

/**
 * @var {color}
 * The background-color for the `default` button UI when the button is focused and pressed
 */
$button-default-background-color-focus-pressed: dynamic($button-default-background-color-pressed);

/**
 * @var {color}
 * The background-color for the `default` button UI when the button is disabled
 */
$button-default-background-color-disabled: dynamic($button-default-base-color-disabled);

/**
 * @var {string/list}
 * The background-gradient for the `default` button UI.  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}.
 */
$button-default-background-gradient: dynamic('glossy-button');

/**
 * @var {string/list}
 * The background-gradient for the `default` button UI when the cursor is over the button.
 * 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}.
 */
$button-default-background-gradient-over: dynamic('glossy-button-over');

/**
 * @var {string/list}
 * The background-gradient for the `default` button UI when the button is 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}.
 */
$button-default-background-gradient-focus: dynamic($button-default-background-gradient-over);

/**
 * @var {string/list}
 * The background-gradient for the `default` button UI when the button is pressed.  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}.
 */
$button-default-background-gradient-pressed: dynamic('glossy-button-pressed');

/**
 * @var {string/list}
 * The background-gradient for the `default` button UI when the button is focused and the
 * cursor is over the button. 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}.
 */
$button-default-background-gradient-focus-over: dynamic($button-default-background-gradient-over);

/**
 * @var {string/list}
 * The background-gradient for the `default` button UI when the button is focused and
 * pressed.  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}.
 */
$button-default-background-gradient-focus-pressed: dynamic($button-default-background-gradient-pressed);

/**
 * @var {string/list}
 * The background-gradient for the `default` button UI when the button is disabled.  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}.
 */
$button-default-background-gradient-disabled: dynamic('glossy-button-disabled');

/**
 * @var {color}
 * The text color for the `default` button UI
 */
$button-default-color: dynamic(#000);

/**
 * @var {color}
 * The text color for the `default` button UI when the cursor is over the button
 */
$button-default-color-over: dynamic(button-default-color-over($button-default-color));

/**
 * @var {color}
 * The text color for the `default` button UI when the button is focused
 */
$button-default-color-focus: dynamic(button-default-color-focus($button-default-color));

/**
 * @var {color}
 * The text color for the `default` button UI when the button is pressed
 */
$button-default-color-pressed: dynamic(button-default-color-pressed($button-default-color));

/**
 * @var {color}
 * The text color for the `default` button UI when the button is focused and the cursor
 * is over the button
 */
$button-default-color-focus-over: dynamic($button-default-color-over);

/**
 * @var {color}
 * The text color for the `default` button UI when the button is focused and pressed
 */
$button-default-color-focus-pressed: dynamic($button-default-color-pressed);

/**
 * @var {color}
 * The text color for the `default` button UI when the button is disabled
 */
$button-default-color-disabled: dynamic(button-default-color-disabled($button-default-color));

/**
 * @var {number/list}
 * The inner border-width for the `default` button UI
 */
$button-default-inner-border-width: dynamic('none');

/**
 * @var {number/list}
 * The inner border-width for the `default` button UI when the cursor is over the button
 */
$button-default-inner-border-width-over: dynamic($button-default-inner-border-width);

/**
 * @var {number/list}
 * The inner border-width for the `default` button UI when the button is focused
 */
$button-default-inner-border-width-focus: dynamic($button-default-inner-border-width);

/**
 * @var {number/list}
 * The inner border-width for the `default` button UI when the button is pressed
 */
$button-default-inner-border-width-pressed: dynamic($button-default-inner-border-width);

/**
 * @var {number/list}
 * The inner border-width for the `default` button UI when the button is focused and the
 * cursor is over the button
 */
$button-default-inner-border-width-focus-over: dynamic($button-default-inner-border-width-focus);

/**
 * @var {number/list}
 * The inner border-width for the `default` button UI when the button is focused and pressed
 */
$button-default-inner-border-width-focus-pressed: dynamic($button-default-inner-border-width-focus);

/**
 * @var {number/lipressed}
 * The inner border-width for the `default` button UI when the button is disabled
 */
$button-default-inner-border-width-disabled: dynamic($button-default-inner-border-width);

/**
 * @var {color}
 * The inner border-color for the `default` button UI
 */
$button-default-inner-border-color: dynamic(button-default-inner-border-color($button-default-background-color, $button-default-color));

/**
 * @var {color}
 * The inner border-color for the `default` button UI when the cursor is over the button
 */
$button-default-inner-border-color-over: dynamic(button-default-inner-border-color-over($button-default-background-color-over, $button-default-color-over));

/**
 * @var {color}
 * The inner border-color for the `default` button UI when the button is focused
 */
$button-default-inner-border-color-focus: dynamic(button-default-inner-border-color-focus($button-default-background-color-focus, $button-default-color-focus));

/**
 * @var {color}
 * The inner border-color for the `default` button UI when the button is pressed
 */
$button-default-inner-border-color-pressed: dynamic(button-default-inner-border-color-pressed($button-default-background-color-pressed, $button-default-color-pressed));

/**
 * @var {color}
 * The inner border-color for the `default` button UI when the button is focused and the
 * cursor is over the button
 */
$button-default-inner-border-color-focus-over: dynamic(button-default-inner-border-color-focus-over($button-default-background-color-focus-over, $button-default-color-focus-over));

/**
 * @var {color}
 * The inner border-color for the `default` button UI when the button is focused and pressed
 */
$button-default-inner-border-color-focus-pressed: dynamic(button-default-inner-border-color-focus-pressed($button-default-background-color-focus-pressed, $button-default-color-focus-pressed));

/**
 * @var {color}
 * The inner border-color for the `default` button UI when the button is disabled
 */
$button-default-inner-border-color-disabled: dynamic(button-default-inner-border-color-disabled($button-default-background-color-disabled, $button-default-color-disabled));

/**
 * @var {number}
 * The body outline width for the `default` button UI when the button is focused
 */
$button-default-body-outline-width-focus: dynamic(0);

/**
 * @var {string}
 * The body outline-style for the `default` button UI when the button is focused
 */
$button-default-body-outline-style-focus: dynamic(dotted);

/**
 * @var {color}
 * The body outline color for the `default` button UI when the button is focused
 */
$button-default-body-outline-color-focus: dynamic($button-default-color);

/**
 * @var {color}
 * The color of the {@link #glyph} icon for the `default` button UI
 */
$button-default-glyph-color: dynamic($button-default-color);

/**
 * @var {string/list}
 * Glyph color for the button arrow of the `default` button UI when
 * {@link Global_CSS#$enable-font-icons} is `true`.
 */
$button-default-arrow-glyph-color: dynamic($button-default-color);

/**
 * @var {color}
 * The color for a {@link Ext.button.Split Split Button}'s line in the `default` button UI.
 * Only applicable when {@link #$button-split-width} is greater than 0.
 */
$button-default-split-line-color: dynamic($button-default-arrow-glyph-color);

/**
 * @var {color}
 * The opacity of the {@link #glyph} icon for the `default` button UI
 */
$button-default-glyph-opacity: dynamic(0.5);

/**
 * @var {color}
 * The border-color for the `default-toolbar` button UI
 */
$button-toolbar-border-color: dynamic($base-color);

/**
 * @var {color}
 * The border-color for the `default-toolbar` button UI when the cursor is over the button
 */
$button-toolbar-border-color-over: dynamic(button-toolbar-border-color-over($button-toolbar-border-color));

/**
 * @var {color}
 * The border-color for the `default-toolbar` button UI when the button is focused
 */
$button-toolbar-border-color-focus: dynamic(button-toolbar-border-color-focus($button-toolbar-border-color));

/**
 * @var {color}
 * The border-color for the `default-toolbar` button UI when the button is pressed
 */
$button-toolbar-border-color-pressed: dynamic(button-toolbar-border-color-pressed($button-toolbar-border-color));

/**
 * @var {color}
 * The border-color for the `default-toolbar` button UI when the button is focused and the
 * cursor is over the button
 */
$button-toolbar-border-color-focus-over: dynamic($button-toolbar-border-color-over);

/**
 * @var {color}
 * The border-color for the `default-toolbar` button UI when the button is focused and
 * pressed
 */
$button-toolbar-border-color-focus-pressed: dynamic($button-toolbar-border-color-pressed);

/**
 * @var {color}
 * The border-color for the `default-toolbar` button UI when the button is disabled
 */
$button-toolbar-border-color-disabled: dynamic(button-toolbar-border-color-disabled($button-toolbar-border-color));

/**
 * @var {color}
 * The background-color for the `default-toolbar` button UI
 */
$button-toolbar-background-color: dynamic($base-color);

/**
 * @var {color}
 * The background-color for the `default-toolbar` button UI when the cursor is over the button
 */
$button-toolbar-background-color-over: dynamic(button-toolbar-background-color-over($button-toolbar-background-color));

/**
 * @var {color}
 * The background-color for the `default-toolbar` button UI when the button is focused
 */
$button-toolbar-background-color-focus: dynamic(button-toolbar-background-color-focus($button-toolbar-background-color));

/**
 * @var {color}
 * The background-color for the `default-toolbar` button UI when the button is pressed
 */
$button-toolbar-background-color-pressed: dynamic(button-toolbar-background-color-pressed($button-toolbar-background-color));

/**
 * @var {color}
 * The background-color for the `default-toolbar` button UI when the button is focused
 * and the cursor is over the button
 */
$button-toolbar-background-color-focus-over: dynamic($button-toolbar-background-color-over);

/**
 * @var {color}
 * The background-color for the `default-toolbar` button UI when the button is focused
 * and pressed
 */
$button-toolbar-background-color-focus-pressed: dynamic($button-toolbar-background-color-pressed);

/**
 * @var {color}
 * The background-color for the `default-toolbar` button UI when the button is disabled
 */
$button-toolbar-background-color-disabled: dynamic(button-toolbar-background-color-disabled($button-toolbar-background-color));

/**
 * @var {string/list}
 * The background-gradient for the `default-toolbar` button UI.  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}.
 */
$button-toolbar-background-gradient: dynamic('glossy-button');

/**
 * @var {string/list}
 * The background-gradient for the `default-toolbar` button UI when the cursor is over the
 * button. 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}.
 */
$button-toolbar-background-gradient-over: dynamic('glossy-button-over');

/**
 * @var {string/list}
 * The background-gradient for the `default-toolbar` button UI when the button is 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}.
 */
$button-toolbar-background-gradient-focus: dynamic($button-toolbar-background-gradient-over);

/**
 * @var {string/list}
 * The background-gradient for the `default-toolbar` button UI when the button is pressed.
 * 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}.
 */
$button-toolbar-background-gradient-pressed: dynamic('glossy-button-pressed');

/**
 * @var {string/list}
 * The background-gradient for the `default-toolbar` button UI when the button is focused
 * and the cursor is over the button. 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}.
 */
$button-toolbar-background-gradient-focus-over: dynamic($button-toolbar-background-gradient-over);

/**
 * @var {string/list}
 * The background-gradient for the `default-toolbar` button UI when the button is focused
 * and pressed. 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}.
 */
$button-toolbar-background-gradient-focus-pressed: dynamic($button-toolbar-background-gradient-pressed);

/**
 * @var {string/list}
 * The background-gradient for the `default-toolbar` button UI when the button is disabled.
 * 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}.
 */
$button-toolbar-background-gradient-disabled: dynamic('glossy-button-disabled');

/**
 * @var {color}
 * The text color for the `default-toolbar` button UI
 */
$button-toolbar-color: dynamic(#000);

/**
 * @var {color}
 * The text color for the `default-toolbar` button UI when the cursor is over the button
 */
$button-toolbar-color-over: dynamic(button-toolbar-color-over($button-toolbar-color));

/**
 * @var {color}
 * The text color for the `default-toolbar` button UI when the button is focused
 */
$button-toolbar-color-focus: dynamic(button-toolbar-color-focus($button-toolbar-color));

/**
 * @var {color}
 * The text color for the `default-toolbar` button UI when the button is pressed
 */
$button-toolbar-color-pressed: dynamic(button-toolbar-color-pressed($button-toolbar-color));

/**
 * @var {color}
 * The text color for the `default-toolbar` button UI when the button is focused and the
 * cursor is over the button
 */
$button-toolbar-color-focus-over: dynamic($button-toolbar-color-over);

/**
 * @var {color}
 * The text color for the `default-toolbar` button UI when the button is focused and pressed
 */
$button-toolbar-color-focus-pressed: dynamic($button-toolbar-color-pressed);

/**
 * @var {color}
 * The text color for the `default-toolbar` button UI when the button is disabled
 */
$button-toolbar-color-disabled: dynamic(button-toolbar-color-disabled($button-toolbar-color));

/**
 * @var {number/list}
 * The inner border-width for the `default-toolbar` button UI
 */
$button-toolbar-inner-border-width: dynamic('none');

/**
 * @var {number/list}
 * The inner border-width for the `default-toolbar` button UI when the cursor is over the button
 */
$button-toolbar-inner-border-width-over: dynamic($button-toolbar-inner-border-width);

/**
 * @var {number/list}
 * The inner border-width for the `default-toolbar` button UI when the button is focused
 */
$button-toolbar-inner-border-width-focus: dynamic($button-toolbar-inner-border-width);

/**
 * @var {number/list}
 * The inner border-width for the `default-toolbar` button UI when the button is pressed
 */
$button-toolbar-inner-border-width-pressed: dynamic($button-toolbar-inner-border-width);

/**
 * @var {number/list}
 * The inner border-width for the `default-toolbar` button UI when the button is focused
 * and the cursor is over the button
 */
$button-toolbar-inner-border-width-focus-over: dynamic($button-toolbar-inner-border-width-focus);

/**
 * @var {number/list}
 * The inner border-width for the `default-toolbar` button UI when the button is focused
 * and pressed
 */
$button-toolbar-inner-border-width-focus-pressed: dynamic($button-toolbar-inner-border-width-focus);

/**
 * @var {number/list}
 * The inner border-width for the `default-toolbar` button UI when the button is disabled
 */
$button-toolbar-inner-border-width-disabled: dynamic($button-toolbar-inner-border-width);

/**
 * @var {color}
 * The inner border-color for the `default-toolbar` button UI
 */
$button-toolbar-inner-border-color: dynamic(button-toolbar-inner-border-color($button-toolbar-background-color, $button-toolbar-color));

/**
 * @var {color}
 * The inner border-color for the `default-toolbar` button UI when the cursor is over the button
 */
$button-toolbar-inner-border-color-over: dynamic(button-toolbar-inner-border-color-over($button-toolbar-background-color-over, $button-toolbar-color-over));

/**
 * @var {color}
 * The inner border-color for the `default-toolbar` button UI when the button is focused
 */
$button-toolbar-inner-border-color-focus: dynamic(button-toolbar-inner-border-color-focus($button-toolbar-background-color-focus, $button-toolbar-color-focus));

/**
 * @var {color}
 * The inner border-color for the `default-toolbar` button UI when the button is pressed
 */
$button-toolbar-inner-border-color-pressed: dynamic(button-toolbar-inner-border-color-pressed($button-toolbar-background-color-pressed, $button-toolbar-color-pressed));

/**
 * @var {color}
 * The inner border-color for the `default-toolbar` button UI when the button is focused
 * and the cursor is over the button
 */
$button-toolbar-inner-border-color-focus-over: dynamic(button-toolbar-inner-border-color-focus-over($button-toolbar-background-color-focus-over, $button-toolbar-color-focus-over));

/**
 * @var {color}
 * The inner border-color for the `default-toolbar` button UI when the button is focused
 * and pressed
 */
$button-toolbar-inner-border-color-focus-pressed: dynamic(button-toolbar-inner-border-color-focus-pressed($button-toolbar-background-color-focus-pressed, $button-toolbar-color-focus-pressed));

/**
 * @var {color}
 * The inner border-color for the `default-toolbar` button UI when the button is disabled
 */
$button-toolbar-inner-border-color-disabled: dynamic(button-toolbar-inner-border-color-disabled($button-toolbar-background-color-disabled, $button-toolbar-color-disabled));

/**
 * @var {number}
 * The body outline width for the `default-toolbar` button UI when the button is focused
 */
$button-toolbar-body-outline-width-focus: dynamic($button-default-body-outline-width-focus);

/**
 * @var {string}
 * The body outline-style for the `default-toolbar` button UI when the button is focused
 */
$button-toolbar-body-outline-style-focus: dynamic($button-default-body-outline-style-focus);

/**
 * @var {color}
 * The body outline color for the `default-toolbar` button UI when the button is focused
 */
$button-toolbar-body-outline-color-focus: dynamic($button-default-body-outline-color-focus);

/**
 * @var {color}
 * The color of the {@link #glyph} icon for the `default-toolbar` button UI
 */
$button-toolbar-glyph-color: dynamic($button-toolbar-color);

/**
 * @var {string/list}
 * Glyph color for the button arrow of the `default-toolbar` button UI when when
 * {@link Global_CSS#$enable-font-icons} is `true`.
 */
$button-toolbar-arrow-glyph-color: dynamic($button-toolbar-color);

/**
 * @var {color}
 * The color for a {@link Ext.button.Split Split Button}'s line in the `toolbar` button UI.
 * Only applicable when {@link #$button-split-width} is greater than 0.
 */
$button-toolbar-split-line-color: dynamic($button-toolbar-arrow-glyph-color);

/**
 * @var {color}
 * The opacity of the {@link #glyph} icon for the `default-toolbar` button UI
 */
$button-toolbar-glyph-opacity: dynamic(.5);

/**
 * @var {boolean} $button-include-ui-menu-arrows
 * True to use a different image url for the menu button arrows for each button UI
 */
$button-include-ui-menu-arrows: dynamic(false);

/**
 * @var {boolean} $button-include-ui-split-arrows
 * True to use a different image url for the split button arrows for each button UI
 */
$button-include-ui-split-arrows: dynamic(false);

/**
 * @var {boolean} $button-include-split-over-arrows
 * True to include different split arrows for buttons' hover state.
 */
$button-include-split-over-arrows: dynamic(false);

/**
 * @var {boolean} $button-include-split-noline-arrows
 * True to include "noline" split arrows for buttons in their default state.
 */
$button-include-split-noline-arrows: dynamic(false);

/**
 * @var {boolean} $button-toolbar-include-split-noline-arrows
 * True to include "noline" split arrows for toolbar buttons in their default state.
 */
$button-toolbar-include-split-noline-arrows: dynamic(false);

/**
 * @var {number} $button-opacity-disabled
 * opacity to apply to the button's main element when the buton is disabled
 */
$button-opacity-disabled: dynamic(0.5);

/**
 * @var {number} $button-inner-opacity-disabled
 * opacity to apply to the button's inner elements (icon and text) when the buton is disabled
 */
$button-inner-opacity-disabled: dynamic(1);

/**
 * @var {number} $button-toolbar-opacity-disabled
 * opacity to apply to the toolbar button's main element when the button is disabled
 */
$button-toolbar-opacity-disabled: dynamic(0.5);

/**
 * @var {number} $button-toolbar-inner-opacity-disabled
 * opacity to apply to the toolbar button's inner elements (icon and text) when the buton is disabled
 */
$button-toolbar-inner-opacity-disabled: dynamic(1);

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

/**
 * @var {boolean}
 * True to include the "default" button UI for "small" scale buttons
 */
$include-button-default-small-ui: dynamic($include-button-default-ui);

/**
 * @var {boolean}
 * True to include the "default" button UI for "medium" scale buttons
 */
$include-button-default-medium-ui: dynamic($include-button-default-ui);

/**
 * @var {boolean}
 * True to include the "default" button UI for "large" scale buttons
 */
$include-button-default-large-ui: dynamic($include-button-default-ui);

/**
 * @var {boolean}
 * True to include the "default" button UI for buttons rendered inside a grid cell (Slightly smaller height than default)
 */
$include-button-grid-cell-ui: dynamic($include-button-default-ui);

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

/**
 * @var {boolean}
 * True to include the "default-toolbar" button UI for "small" scale buttons
 */
$include-button-default-toolbar-small-ui: dynamic($include-button-default-toolbar-ui);

/**
 * @var {boolean}
 * True to include the "default-toolbar" button UI for "medium" scale buttons
 */
$include-button-default-toolbar-medium-ui: dynamic($include-button-default-toolbar-ui);

/**
 * @var {boolean}
 * True to include the "default-toolbar" button UI for "large" scale buttons
 */
$include-button-default-toolbar-large-ui: dynamic($include-button-default-toolbar-ui);

/**
 * @var {number}
 * The default width for a grid cell button's {@link #cfg-menu} arrow
 */
$button-grid-cell-arrow-width: dynamic($button-arrow-width);

/**
 * @var {number}
 * The default height for a grid cell button's {@link #cfg-menu} arrow
 */
$button-grid-cell-arrow-height: dynamic($button-arrow-height);

/**
 * @var {string/list}
 * Glyph for a grid cell button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$button-grid-cell-arrow-glyph: dynamic($button-small-arrow-glyph);

/**
 * @var {number}
 * The default width a grid cell {@link Ext.button.Split Split Button}'s arrow
 */
$button-grid-cell-split-width: dynamic($button-split-width);

/**
 * @var {number}
 * The default height a grid cell {@link Ext.button.Split Split Button}'s arrow
 */
$button-grid-cell-split-height: dynamic($button-split-height);

/**
 * @var {number}
 * The default space between a grid cell button's icon and text
 */
$button-grid-cell-icon-spacing: dynamic($button-icon-spacing);

/**
 * @var {number}
 * The default border-radius for a grid cell button
 */
$button-grid-cell-border-radius: dynamic($button-small-border-radius);

/**
 * @var {number}
 * The default border-width for a grid cell button
 */
$button-grid-cell-border-width: dynamic($button-small-border-width);

/**
 * @var {number}
 * The default padding for a grid cell button
 */
$button-grid-cell-padding: dynamic($button-small-padding);

/**
 * @var {number}
 * The default horizontal padding to add to the left and right of the text element for
 * a grid cell button
 */
$button-grid-cell-text-padding: dynamic($button-small-text-padding);

/**
 * @var {number}
 * The default font-size for a grid cell button
 */
$button-grid-cell-font-size: dynamic($button-small-font-size);  //11px

/**
 * @var {number}
 * The default font-size for a grid cell button when the cursor is over the button
 */
$button-grid-cell-font-size-over: dynamic($button-grid-cell-font-size);

/**
 * @var {number}
 * The default font-size for a grid cell button when the button is focused
 */
$button-grid-cell-font-size-focus: dynamic($button-grid-cell-font-size-over);

/**
 * @var {number}
 * The default font-size for a grid cell button when the button is pressed
 */
$button-grid-cell-font-size-pressed: dynamic($button-grid-cell-font-size);

/**
 * @var {number}
 * The default font-size for a grid cell button when the button is focused and the cursor
 * is over the button
 */
$button-grid-cell-font-size-focus-over: dynamic($button-grid-cell-font-size-over);

/**
 * @var {number}
 * The default font-size for a grid cell button when the button is focused and pressed
 */
$button-grid-cell-font-size-focus-pressed: dynamic($button-grid-cell-font-size-pressed);

/**
 * @var {number}
 * The default font-size for a grid cell button when the button is disabled
 */
$button-grid-cell-font-size-disabled: dynamic($button-grid-cell-font-size);

/**
 * @var {string}
 * The default font-weight for a grid cell button
 */
$button-grid-cell-font-weight: dynamic($button-small-font-weight);

/**
 * @var {string}
 * The default font-weight for a grid cell button when the cursor is over the button
 */
$button-grid-cell-font-weight-over: dynamic($button-grid-cell-font-weight);

/**
 * @var {string}
 * The default font-weight for a grid cell button when the button is focused
 */
$button-grid-cell-font-weight-focus: dynamic($button-grid-cell-font-weight-over);

/**
 * @var {string}
 * The default font-weight for a grid cell button when the button is pressed
 */
$button-grid-cell-font-weight-pressed: dynamic($button-grid-cell-font-weight);

/**
 * @var {string}
 * The default font-weight for a grid cell button when the button is focused and the
 * cursor is over the button
 */
$button-grid-cell-font-weight-focus-over: dynamic($button-grid-cell-font-weight-over);

/**
 * @var {string}
 * The default font-weight for a grid cell button when the button is focused and pressed
 */
$button-grid-cell-font-weight-focus-pressed: dynamic($button-grid-cell-font-weight-pressed);

/**
 * @var {string}
 * The default font-weight for a grid cell button when the button is disabled
 */
$button-grid-cell-font-weight-disabled: dynamic($button-grid-cell-font-weight);

/**
 * @var {string}
 * The default font-family for a grid cell button
 */
$button-grid-cell-font-family: dynamic($button-small-font-family);

/**
 * @var {string}
 * The default font-family for a grid cell button when the cursor is over the button
 */
$button-grid-cell-font-family-over: dynamic($button-grid-cell-font-family);

/**
 * @var {string}
 * The default font-family for a grid cell button when the button is focused
 */
$button-grid-cell-font-family-focus: dynamic($button-grid-cell-font-family-over);

/**
 * @var {string}
 * The default font-family for a grid cell button when the button is pressed
 */
$button-grid-cell-font-family-pressed: dynamic($button-grid-cell-font-family);

/**
 * @var {string}
 * The default font-family for a grid cell button when the button is focused and the
 * cursor is over the button
 */
$button-grid-cell-font-family-focus-over: dynamic($button-grid-cell-font-family-over);

/**
 * @var {string}
 * The default font-family for a grid cell button when the button is focused and pressed
 */
$button-grid-cell-font-family-focus-pressed: dynamic($button-grid-cell-font-family-pressed);

/**
 * @var {string}
 * The default font-family for a grid cell button when the button is disabled
 */
$button-grid-cell-font-family-disabled: dynamic($button-grid-cell-font-family);

/**
 * @var {number}
 * The line-height for the text in a grid cell button
 */
$button-grid-cell-line-height: dynamic($button-small-line-height);

/**
 * @var {number}
 * The default icon size for a grid cell button
 */
$button-grid-cell-icon-size: dynamic($button-small-icon-size);

/**
 * @var {number}
 * The the font-size for grid cell button glyphs
 */
$button-grid-cell-glyph-font-size: dynamic($button-grid-cell-icon-size);

/**
 * @var {color}
 * The border-color for the `cell` button UI
 */
$button-grid-cell-border-color: dynamic($button-default-border-color);

/**
 * @var {color}
 * The border-color for the `cell` button UI when the cursor is over the button
 */
$button-grid-cell-border-color-over: dynamic(button-default-border-color-over($button-grid-cell-border-color));

/**
 * @var {color}
 * The border-color for the `cell` button UI when the button is focused
 */
$button-grid-cell-border-color-focus: dynamic(button-default-border-color-focus($button-grid-cell-border-color));

/**
 * @var {color}
 * The border-color for the `cell` button UI when the button is pressed
 */
$button-grid-cell-border-color-pressed: dynamic(button-default-border-color-pressed($button-grid-cell-border-color));

/**
 * @var {color}
 * The border-color for the `cell` button UI when the button is focused and the cursor
 * is over the button
 */
$button-grid-cell-border-color-focus-over: dynamic($button-grid-cell-border-color-over);

/**
 * @var {color}
 * The border-color for the `cell` button UI when the button is focused and pressed
 */
$button-grid-cell-border-color-focus-pressed: dynamic($button-grid-cell-border-color-pressed);

/**
 * @var {color}
 * The border-color for the `cell` button UI when the button is disabled
 */
$button-grid-cell-border-color-disabled: dynamic(button-default-border-color-disabled($button-grid-cell-border-color));

/**
 * @var {color}
 * The background-color for the `cell` button UI
 */
$button-grid-cell-background-color: dynamic($button-default-background-color);

/**
 * @var {color}
 * The background-color for the `cell` button UI when the cursor is over the button
 */
$button-grid-cell-background-color-over: dynamic(button-default-background-color-over($button-grid-cell-background-color));

/**
 * @var {color}
 * The background-color for the `cell` button UI when the button is focused
 */
$button-grid-cell-background-color-focus: dynamic(button-default-background-color-focus($button-grid-cell-background-color));

/**
 * @var {color}
 * The background-color for the `cell` button UI when the button is pressed
 */
$button-grid-cell-background-color-pressed: dynamic(button-default-background-color-pressed($button-grid-cell-background-color));

/**
 * @var {color}
 * The background-color for the `cell` button UI when the button is focused and the cursor
 * is over the button
 */
$button-grid-cell-background-color-focus-over: dynamic($button-grid-cell-background-color-over);

/**
 * @var {color}
 * The background-color for the `cell` button UI when the button is focused and pressed
 */
$button-grid-cell-background-color-focus-pressed: dynamic($button-grid-cell-background-color-pressed);

/**
 * @var {color}
 * The background-color for the `cell` button UI when the button is disabled
 */
$button-grid-cell-background-color-disabled: dynamic(button-default-background-color-disabled($button-grid-cell-background-color));

/**
 * @var {string/list}
 * The background-gradient for the `cell` button UI.  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}.
 */
$button-grid-cell-background-gradient: dynamic($button-default-background-gradient);

/**
 * @var {string/list}
 * The background-gradient for the `cell` button UI when the cursor is over the button.
 * 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}.
 */
$button-grid-cell-background-gradient-over: dynamic($button-default-background-gradient-over);

/**
 * @var {string/list}
 * The background-gradient for the `cell` button UI when the button is 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}.
 */
$button-grid-cell-background-gradient-focus: dynamic($button-grid-cell-background-gradient-over);

/**
 * @var {string/list}
 * The background-gradient for the `cell` button UI when the button is pressed.  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}.
 */
$button-grid-cell-background-gradient-pressed: dynamic($button-default-background-gradient-pressed);

/**
 * @var {string/list}
 * The background-gradient for the `cell` button UI when the button is focused and the
 * cursor is over the button.  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}.
 */
$button-grid-cell-background-gradient-focus-over: dynamic($button-grid-cell-background-gradient-over);

/**
 * @var {string/list}
 * The background-gradient for the `cell` button UI when the button is focused and pressed.
 * 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}.
 */
$button-grid-cell-background-gradient-focus-pressed: dynamic($button-grid-cell-background-gradient-pressed);

/**
 * @var {string/list}
 * The background-gradient for the `cell` button UI when the button is disabled.  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}.
 */
$button-grid-cell-background-gradient-disabled: dynamic($button-default-background-gradient-disabled);

/**
 * @var {color}
 * The text color for the `cell` button UI
 */
$button-grid-cell-color: dynamic($button-default-color);

/**
 * @var {color}
 * The text color for the `cell` button UI when the cursor is over the button
 */
$button-grid-cell-color-over: dynamic(button-default-color-over($button-grid-cell-color));

/**
 * @var {color}
 * The text color for the `cell` button UI when the button is focused
 */
$button-grid-cell-color-focus: dynamic(button-default-color-focus($button-grid-cell-color));

/**
 * @var {color}
 * The text color for the `cell` button UI when the button is pressed
 */
$button-grid-cell-color-pressed: dynamic(button-default-color-pressed($button-grid-cell-color));

/**
 * @var {color}
 * The text color for the `cell` button UI when the button is focused and the cursor is
 * over the button
 */
$button-grid-cell-color-focus-over: dynamic($button-grid-cell-color-over);

/**
 * @var {color}
 * The text color for the `cell` button UI when the button is focused and pressed
 */
$button-grid-cell-color-focus-pressed: dynamic($button-grid-cell-color-pressed);

/**
 * @var {color}
 * The text color for the `cell` button UI when the button is disabled
 */
$button-grid-cell-color-disabled: dynamic(button-default-color-disabled($button-grid-cell-color));

/**
 * @var {number/list}
 * The inner border-width for the `cell` button UI
 */
$button-grid-cell-inner-border-width: dynamic('none');

/**
 * @var {number/list}
 * The inner border-width for the `cell` button UI when the cursor is over the button
 */
$button-grid-cell-inner-border-width-over: dynamic($button-grid-cell-inner-border-width);

/**
 * @var {number/list}
 * The inner border-width for the `cell` button UI when the button is focused
 */
$button-grid-cell-inner-border-width-focus: dynamic($button-grid-cell-inner-border-width);

/**
 * @var {number/list}
 * The inner border-width for the `cell` button UI when the button is pressed
 */
$button-grid-cell-inner-border-width-pressed: dynamic($button-grid-cell-inner-border-width);

/**
 * @var {number/list}
 * The inner border-width for the `cell` button UI when the button is focused and the
 * cursor is over the button
 */
$button-grid-cell-inner-border-width-focus-over: dynamic($button-grid-cell-inner-border-width-focus);

/**
 * @var {number/list}
 * The inner border-width for the `cell` button UI when the button is focused and pressed
 */
$button-grid-cell-inner-border-width-focus-pressed: dynamic($button-grid-cell-inner-border-width-focus);

/**
 * @var {number/list}
 * The inner border-width for the `cell` button UI when the button is disabled
 */
$button-grid-cell-inner-border-width-disabled: dynamic($button-grid-cell-inner-border-width);

/**
 * @var {color}
 * The inner border-color for the `cell` button UI
 */
$button-grid-cell-inner-border-color: dynamic(button-default-inner-border-color($button-grid-cell-background-color, $button-grid-cell-color));

/**
 * @var {color}
 * The inner border-color for the `cell` button UI when the cursor is over the button
 */
$button-grid-cell-inner-border-color-over: dynamic(button-default-inner-border-color-over($button-grid-cell-background-color-over, $button-grid-cell-color-over));

/**
 * @var {color}
 * The inner border-color for the `cell` button UI when the button is focused
 */
$button-grid-cell-inner-border-color-focus: dynamic(button-default-inner-border-color-focus($button-grid-cell-background-color-focus, $button-grid-cell-color-focus));

/**
 * @var {color}
 * The inner border-color for the `cell` button UI when the button is pressed
 */
$button-grid-cell-inner-border-color-pressed: dynamic(button-default-inner-border-color-pressed($button-grid-cell-background-color-pressed, $button-grid-cell-color-pressed));

/**
 * @var {color}
 * The inner border-color for the `cell` button UI when the button is focused and the
 * cursor is over the button
 */
$button-grid-cell-inner-border-color-focus-over: dynamic(button-default-inner-border-color-focus-over($button-grid-cell-background-color-focus-over, $button-grid-cell-color-focus-over));

/**
 * @var {color}
 * The inner border-color for the `cell` button UI when the button is focused and pressed
 */
$button-grid-cell-inner-border-color-focus-pressed: dynamic(button-default-inner-border-color-focus-pressed($button-grid-cell-background-color-focus-pressed, $button-grid-cell-color-focus-pressed));

/**
 * @var {color}
 * The inner border-color for the `cell` button UI when the button is disabled
 */
$button-grid-cell-inner-border-color-disabled: dynamic(button-default-inner-border-color-disabled($button-grid-cell-background-color-disabled, $button-grid-cell-color-disabled));

/**
 * @var {number}
 * The body outline width for the `cell` button UI when the button is focused
 */
$button-grid-cell-body-outline-width-focus: dynamic($button-default-body-outline-width-focus);

/**
 * @var {string}
 * The body outline-style for the `cell` button UI when the button is focused
 */
$button-grid-cell-body-outline-style-focus: dynamic($button-default-body-outline-style-focus);

/**
 * @var {color}
 * The body outline color for the `cell` button UI when the button is focused
 */
$button-grid-cell-body-outline-color-focus: dynamic($button-default-body-outline-color-focus);

/**
 * @var {color}
 * The color of the {@link #glyph} icon for the `cell` button UI
 */
$button-grid-cell-glyph-color: dynamic($button-grid-cell-color);

/**
 * @var {string/list}
 * Glyph color for the button arrow of the `cell` button UI when when
 * {@link Global_CSS#$enable-font-icons} is `true`.
 */
$button-grid-cell-arrow-glyph-color: dynamic($button-grid-cell-color);

/**
 * @var {color}
 * The width for a {@link Ext.button.Split Split Button}'s line in the `cell` button UI.
 */
$button-grid-cell-split-line-width: dynamic($button-small-split-line-width);

/**
 * @var {color}
 * The color for a {@link Ext.button.Split Split Button}'s line in the `cell` button UI.
 * Only applicable when {@link #$button-grid-cell-split-line-width} is greater than 0.
 */
$button-grid-cell-split-line-color: dynamic($button-grid-cell-arrow-glyph-color);

/**
 * @var {color}
 * The opacity of the {@link #glyph} icon for the `cell` button UI
 */
$button-grid-cell-glyph-opacity: dynamic($button-default-glyph-opacity);

/**
 * @var {number} $button-grid-cell-opacity-disabled
 * opacity to apply to the button's main element when the button is disabled
 */
$button-grid-cell-opacity-disabled: dynamic($button-opacity-disabled);

/**
 * @var {number} $button-grid-cell-inner-opacity-disabled
 * opacity to apply to the button's inner elements (icon and text) when the buton is disabled
 */
$button-grid-cell-inner-opacity-disabled: dynamic($button-inner-opacity-disabled);

/**
 * Creates a visual theme for a Button.  This mixin is not {@link #scale} aware, and therefore
 * does not provide defaults for most parameters, so it is advisable to use one of the
 * following mixins instead when creating a custom buttonUI:
 *
 * #extjs-button-small-ui - creates a button UI for a small button
 * #extjs-button-medium-ui - creates a button UI for a medium button
 * #extjs-button-large-ui - creates a button UI for a large button
 * #extjs-button-toolbar-small-ui - creates a button UI for a small toolbar button
 * #extjs-button-toolbar-medium-ui - creates a button UI for a medium toolbar button
 * #extjs-button-toolbar-large-ui - creates a button UI for a large toolbar button
 *
 * @param {string} $ui
 * The name of the UI being created. Can not included spaces or special punctuation
 * (used in CSS class names).
 *
 * @param {number} [$border-radius=0px]
 * The border-radius of the button
 *
 * @param {number} [$border-width=0px]
 * The border-width of the button
 *
 * @param {color} $border-color
 * The border-color of the button
 *
 * @param {color} $border-color-over
 * The border-color of the button when the cursor is over the button
 *
 * @param {color} $border-color-focus
 * The border-color of the button when focused
 *
 * @param {color} $border-color-pressed
 * The border-color of the button when pressed
 *
 * @param {color} $border-color-focus-over
 * The border-color of the button when the button is focused and the cursor is over the
 * button
 *
 * @param {color} $border-color-focus-pressed
 * The border-color of the button when focused and pressed
 *
 * @param {color} $border-color-disabled
 * The border-color of the button when disabled
 *
 * @param {number} $padding
 * The amount of padding inside the border of the button on all sides
 *
 * @param {number} $text-padding
 * The amount of horizontal space to add to the left and right of the button text
 *
 * @param {color} $background-color
 * The background-color of the button
 *
 * @param {color} $background-color-over
 * The background-color of the button when the cursor is over the button
 *
 * @param {color} $background-color-focus
 * The background-color of the button when focused
 *
 * @param {color} $background-color-pressed
 * The background-color of the button when pressed
 *
 * @param {color} $background-color-focus-over
 * The background-color of the button when the button is focused and the cursor is over
 * the button
 *
 * @param {color} $background-color-focus-pressed
 * The background-color of the button when focused and pressed
 *
 * @param {color} $background-color-disabled
 * The background-color of the button when disabled
 *
 * @param {string/list} $background-gradient
 * The background-gradient for the button.  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} $background-gradient-over
 * The background-gradient to use when the cursor is over the button. 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} $background-gradient-focus
 * The background-gradient to use when the the button is 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} $background-gradient-pressed
 * The background-gradient to use when the the button is pressed. 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} $background-gradient-focus-over
 * The background-gradient to use when the the button is focused and the cursor is over
 * the button. 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} $background-gradient-focus-pressed
 * The background-gradient to use when the the button is focused and pressed. 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} $background-gradient-disabled
 * The background-gradient to use when the the button is disabled. Can be either the name
 * of a predefined gradient or a list of color stops. Used as the `$type` parameter for
 * {@link Global_CSS#background-gradient}.
 *
 * @param {color} $color
 * The text color of the button
 *
 * @param {color} $color-over
 * The text color of the button when the cursor is over the button
 *
 * @param {color} $color-focus
 * The text color of the button when the button is focused
 *
 * @param {color} $color-pressed
 * The text color of the button when the button is pressed
 *
 * @param {color} $color-focus-over
 * The text color of the button when the button is focused and the cursor is over the button
 *
 * @param {color} $color-focus-pressed
 * The text color of the button when the button is focused and pressed
 *
 * @param {color} $color-disabled
 * The text color of the button when the button is disabled
 *
 * @param {number/list} $inner-border-width
 * The inner border-width of the button
 *
 * @param {number/list} $inner-border-width-over
 * The inner border-width of the button when the cursor is over the button
 *
 * @param {number/list} $inner-border-width-focus
 * The inner border-width of the button when focused
 *
 * @param {number/list} $inner-border-width-pressed
 * The inner border-width of the button when pressed
 *
 * @param {number/list} $inner-border-width-focus-over
 * The inner border-width of the button when the button is focused and the cursor is over
 * the button
 *
 * @param {number/list} $inner-border-width-focus-pressed
 * The inner border-width of the button when focused and pressed
 *
 * @param {number/list} $inner-border-width-disabled
 * The inner border-width of the button when disabled
 *
 * @param {color} $inner-border-color
 * The inner border-color of the button
 *
 * @param {color} $inner-border-color-over
 * The inner border-color of the button when the cursor is over the button
 *
 * @param {color} $inner-border-color-focus
 * The inner border-color of the button when focused
 *
 * @param {color} $inner-border-color-pressed
 * The inner border-color of the button when pressed
 *
 * @param {color} $inner-border-color-focus-over
 * The inner border-color of the button when the button is focused and the cursor is over
 * the button
 *
 * @param {color} $inner-border-color-focus-pressed
 * The inner border-color of the button when focused and pressed
 *
 * @param {color} $inner-border-color-disabled
 * The inner border-color of the button when disabled
 *
 * @param {number} $body-outline-width-focus
 * The body outline width of the button when focused
 *
 * @param {string} $body-outline-style-focus
 * The body outline-style of the button when focused
 *
 * @param {color} $body-outline-color-focus
 * The body outline color of the button when focused
 *
 * @param {number} $font-size
 * The font-size of the button
 *
 * @param {number} $font-size-over
 * The font-size of the button when the cursor is over the button
 *
 * @param {number} $font-size-focus
 * The font-size of the button when the button is focused
 *
 * @param {number} $font-size-pressed
 * The font-size of the button when the button is pressed
 *
 * @param {number} $font-size-focus-over
 * The font-size of the button when the button is focused and the cursor is over the
 * button
 *
 * @param {number} $font-size-focus-pressed
 * The font-size of the button when the button is focused and pressed
 *
 * @param {number} $font-size-disabled
 * The font-size of the button when the button is disabled
 *
 * @param {string} $font-weight
 * The font-weight of the button
 *
 * @param {string} $font-weight-over
 * The font-weight of the button when the cursor is over the button
 *
 * @param {string} $font-weight-focus
 * The font-weight of the button when the button is focused
 *
 * @param {string} $font-weight-pressed
 * The font-weight of the button when the button is pressed
 *
 * @param {string} $font-weight-focus-over
 * The font-weight of the button when the button is focused and the cursor is over the
 * button
 *
 * @param {string} $font-weight-focus-pressed
 * The font-weight of the button when the button is focused and pressed
 *
 * @param {string} $font-weight-disabled
 * The font-weight of the button when the button is disabled
 *
 * @param {string} $font-family
 * The font-family of the button
 *
 * @param {string} $font-family-over
 * The font-family of the button when the cursor is over the button
 *
 * @param {string} $font-family-focus
 * The font-family of the button when the button is focused
 *
 * @param {string} $font-family-pressed
 * The font-family of the button when the button is pressed
 *
 * @param {string} $font-family-focus-over
 * The font-family of the button when the button is focused and the cursor is over the
 * button
 *
 * @param {string} $font-family-focus-pressed
 * The font-family of the button when the button is focused and pressed
 *
 * @param {string} $font-family-disabled
 * The font-family of the button when the button is disabled
 *
 * @param {number} $icon-size
 * The size of the button icon
 *
 * @param {number} $glyph-font-size
 * The font-size for the button glyph
 *
 * @param {number} [$line-height=$icon-size]
 * The line-height for the button glyph
 *
 * @param {number} $icon-spacing
 * The space between the button's icon and text
 *
 * @param {color} $glyph-color
 * The color of the button's {@link #glyph} icon
 *
 * @param {number} [$glyph-opacity=1]
 * The opacity of the button's {@link #glyph} icon
 *
 * @param {number} $arrow-width
 * The width of the button's {@link #cfg-menu} arrow
 *
 * @param {number} $arrow-height
 * The height of the button's {@link #cfg-menu} arrow
 *
 * @param {string/list} $arrow-glyph
 * Glyph for the button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {string/list} $arrow-glyph-color
 * Glyph color for the button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {number} $split-width
 * The width of a {@link Ext.button.Split Split Button}'s arrow
 *
 * @param {number} $split-height
 * The height of a {@link Ext.button.Split Split Button}'s arrow
 *
 * @param {number} $split-line-width
 * The default width for a {@link Ext.button.Split Split Button}'s line.
 * Themes that include the line in the arrow background image should set this to 0
 *
 * @param {color} $split-line-color
 * The color for a {@link Ext.button.Split Split Button}'s line.
 * Only applicable when `$split-line-width` is greater than 0.
 *
 * @param {boolean} [$include-ui-menu-arrows=$button-include-ui-menu-arrows]
 * True to include the UI name in the file name of the {@link #cfg-menu}
 * arrow icon. Set this to false to share the same arrow bewteen multiple UIs.
 *
 * @param {boolean} [$include-ui-split-arrows=$button-include-ui-split-arrows]
 * True to include the UI name in the file name of the {@link Ext.button.Split Split Button}'s
 * arrow icon. Set this to false to share the same arrow bewteen multiple UIs.
 *
 * @param {boolean} [$include-split-noline-arrows=$button-include-split-noline-arrows]
 * True to add a "-noline" suffix to the file name of the {@link Ext.button.Split Split Button}'s 
 * arrow icon.  Used for hiding the split line when toolbar buttons are in their default
 * state.
 *
 * @param {boolean} [$include-split-over-arrows=$button-include-split-over-arrows]
 * True to use a separate icon for {@link Ext.button.Split Split Button}s when the cursor
 * is over the button.  The over icon file name will have a "-o" suffix
 *
 * @param {number} [$opacity-disabled=1]
 * The opacity of the button when it is disabled
 *
 * @param {number} [$inner-opacity-disabled=1]
 * The opacity of the button's text and icon elements when when the button is disabled
 * 
 * @member Ext.button.Button
 */
@mixin extjs-button-ui(
    $ui,

    $border-radius: 0px,

    $border-width: 0px,

    $border-color: null,
    $border-color-over: null,
    $border-color-focus: null,
    $border-color-pressed: null,
    $border-color-focus-over: null,
    $border-color-focus-pressed: null,
    $border-color-disabled: null,

    $padding: null,
    $text-padding: null,

    $background-color: null,
    $background-color-over: null,
    $background-color-focus: null,
    $background-color-pressed: null,
    $background-color-focus-over: null,
    $background-color-focus-pressed: null,
    $background-color-disabled: null,

    $background-gradient: null,
    $background-gradient-over: null,
    $background-gradient-focus: null,
    $background-gradient-pressed: null,
    $background-gradient-focus-over: null,
    $background-gradient-focus-pressed: null,
    $background-gradient-disabled: null,

    $color: null,
    $color-over: null,
    $color-focus: null,
    $color-pressed: null,
    $color-focus-over: null,
    $color-focus-pressed: null,
    $color-disabled: null,

    $inner-border-width: null,
    $inner-border-width-over: null,
    $inner-border-width-focus: null,
    $inner-border-width-pressed: null,
    $inner-border-width-focus-over: null,
    $inner-border-width-focus-pressed: null,
    $inner-border-width-disabled: null,

    $inner-border-color: null,
    $inner-border-color-over: null,
    $inner-border-color-focus: null,
    $inner-border-color-pressed: null,
    $inner-border-color-focus-over: null,
    $inner-border-color-focus-pressed: null,
    $inner-border-color-disabled: null,

    $body-outline-width-focus: null,
    $body-outline-style-focus: null,
    $body-outline-color-focus: null,

    $font-size: null,
    $font-size-over: null,
    $font-size-focus: null,
    $font-size-pressed: null,
    $font-size-focus-over: null,
    $font-size-focus-pressed: null,
    $font-size-disabled: null,

    $font-weight: null,
    $font-weight-over: null,
    $font-weight-focus: null,
    $font-weight-pressed: null,
    $font-weight-focus-over: null,
    $font-weight-focus-pressed: null,
    $font-weight-disabled: null,

    $font-family: null,
    $font-family-over: null,
    $font-family-focus: null,
    $font-family-pressed: null,
    $font-family-focus-over: null,
    $font-family-focus-pressed: null,
    $font-family-disabled: null,

    $icon-size: null,
    $glyph-font-size: null,
    $line-height: $icon-size,
    $icon-spacing: $button-icon-spacing,
    $glyph-color: $button-default-glyph-color,
    $glyph-opacity: $button-default-glyph-opacity,
    $arrow-width: null,
    $arrow-height: null,
    $arrow-glyph: null,
    $arrow-glyph-color: null,
    $split-width: null,
    $split-height: null,
    $split-line-width: null,
    $split-line-color: null,
    $include-ui-menu-arrows: $button-include-ui-menu-arrows,
    $include-ui-split-arrows: $button-include-ui-split-arrows,
    $include-split-noline-arrows: $button-include-split-noline-arrows,
    $include-split-over-arrows: $button-include-split-over-arrows,
    $opacity-disabled: $button-opacity-disabled,
    $inner-opacity-disabled: $button-inner-opacity-disabled
) {
    $inner-border-max: max(
        max(top($inner-border-width) right($inner-border-width) bottom($inner-border-width) left($inner-border-width))
        max(top($inner-border-width-over) right($inner-border-width-over) bottom($inner-border-width-over) left($inner-border-width-over))
        max(top($inner-border-width-focus) right($inner-border-width-focus) bottom($inner-border-width-focus) left($inner-border-width-focus))
        max(top($inner-border-width-pressed) right($inner-border-width-pressed) bottom($inner-border-width-pressed) left($inner-border-width-pressed))
        max(top($inner-border-width-disabled) right($inner-border-width-disabled) bottom($inner-border-width-disabled) left($inner-border-width-disabled))
    );

    $frame-size: frame-size($border-width, $inner-border-max, $border-radius);

    @include x-frame(
        $cls: 'btn',
        $ui: $ui,
        $border-radius: $border-radius,
        $border-width: $border-width,
        $padding: $padding,
        $background-color: $background-color,
        $background-gradient: $background-gradient,
        $table: true,
        $inner-border-width: $inner-border-width
    );

    .#{$prefix}btn-#{$ui} {
        border-color: $border-color;
        @if not is-null($inner-border-width) and not is-null($inner-border-color) and $inner-border-width != 0 {
            @include inner-border($inner-border-width, $inner-border-color);
        }
    }

    .#{$prefix}btn-button-#{$ui} {
        min-height: max($icon-size, $line-height);

        @if $include-ie {
            // In ie9m this element is a table cell, so height works like min-height
            .#{$prefix}ie9m & {
                min-height: auto;
                height: max($icon-size, $line-height);
            }
        }
    }

    .#{$prefix}btn-inner-#{$ui} {
        font: $font-weight #{$font-size}/#{$line-height} $font-family;
        color: $color;
        @if $text-padding != 0 {
            padding: 0 $text-padding;
        }

        // Where table-based layouts are used (IE8/9) inner el requires max-width in order
        // for ellipsis to work.  Safari also requires max width because of a bug in its
        // -webkit-box layout that allows an element to expand beyond its flexed width if
        // its content is larger than the flexed width.
        // Rather than target the max rule to all the browsers that need it, we'll just add
        // it everywhere, and then disable it where it causes problems (IE10p)
        max-width: 100%;

        .#{$prefix}btn-icon-right > &,
        .#{$prefix}btn-icon-left > & {
            // since calc is only supported in IE9+ ellipsis will not work in IE8 when
            // there is a left or right icon present
            @if $include-ie {
                .#{$prefix}ie9 & {
                    max-width: calc(100% - #{$icon-size});
                }
            }

            // Safari calc() does not handle sub-pixel sizes correctly and therefore the max width
            // can be larger than its parent and causes text-overflow. We remove 1px from the
            // calculation to prevent overflow.
            .#{$prefix}safari8m & {
                max-width: calc(100% - #{$icon-size - 1px});
            }
        }

        // Max-width interferes with the layout in IE11.  Fortunately we don't need the hack there
        .#{$prefix}ie10p & {
            max-width: none;
        }
    }

    .#{$prefix}btn-icon-el-#{$ui} {
        font-size: $glyph-font-size;
        height: $icon-size;
        color: $glyph-color;
        line-height: $icon-size;

        .#{$prefix}btn-icon-left > &,
        .#{$prefix}btn-icon-right > & {
            width: $icon-size;
        }

        .#{$prefix}btn-icon-top > &,
        .#{$prefix}btn-icon-bottom > & {
            min-width: $icon-size;
        }

        &.#{$prefix}btn-glyph {
            @if $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: $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 button's background-color.
            $mix-color: $background-color;
            @if $mix-color == transparent {
                $mix-color: #fff;
            }
            @if $include-ie {
                .#{$prefix}ie8 & {
                    color: mix($glyph-color, $mix-color, $glyph-opacity * 100);
                }
            }
        }

        // when the button contains both icon and text, add $icon-spacing to the icon
        .#{$prefix}btn-text.#{$prefix}btn-icon-left > & {
            margin-right: max($icon-spacing - $text-padding, 0);

            @if $include-rtl {
                &.#{$prefix}rtl {
                    margin-right: 0;
                    margin-left: max($icon-spacing - $text-padding, 0);
                }
            }
        }

        .#{$prefix}btn-text.#{$prefix}btn-icon-right > & {
            margin-left: max($icon-spacing - $text-padding, 0);

            @if $include-rtl {
                &.#{$prefix}rtl {
                    margin-left: 0;
                    margin-right: max($icon-spacing - $text-padding, 0);
                }
            }
        }

        .#{$prefix}btn-text.#{$prefix}btn-icon-top > & {
            margin-bottom: $icon-spacing;
        }

        .#{$prefix}btn-text.#{$prefix}btn-icon-bottom > & {
            margin-top: $icon-spacing;
        }
    }

    .#{$prefix}btn-arrow-right > {
        .#{$prefix}btn-icon.#{$prefix}btn-no-text.#{$prefix}btn-button-#{$ui} {
            padding-right: $icon-spacing;
        }
        .#{$prefix}btn-text.#{$prefix}btn-icon-right > .#{$prefix}btn-icon-el-#{$ui} {
            margin-right: $text-padding;
        }
    }

    .#{$prefix}btn-arrow-bottom,
    .#{$prefix}btn-split-bottom {
        > .#{$prefix}btn-button-#{$ui} {
            padding-bottom: bottom($padding);
        }
    }

    .#{$prefix}btn-wrap-#{$ui} {
        &.#{$prefix}btn-arrow-right:after {
            width: $arrow-width;
            @if $enable-font-icons and ($arrow-glyph != null) {
                @include font-icon($glyph: $arrow-glyph, $pseudo: false);
                color: $arrow-glyph-color;
            } @else {
                @if $include-ui-menu-arrows {
                    background-image: theme-background-image('button/#{$ui}-arrow');
                } @else {
                    background-image: theme-background-image('button/arrow');
                }
                // The arrow can get smashed into oblivion by an outer containing element if
                // the container is smaller than the button. padding prevents this.
                padding-right: $arrow-width;
            }
        }

        @if $include-rtl and ((not $enable-font-icons) or ($arrow-glyph == null)) {
            &.#{$prefix}rtl.#{$prefix}btn-arrow-right:after {
                @if $include-ui-menu-arrows {
                    background-image: theme-background-image('button/#{$ui}-arrow-rtl');
                } @else {
                    background-image: theme-background-image('button/arrow-rtl');
                }
            }
        }

        &.#{$prefix}btn-arrow-bottom:after {
            height: $arrow-height;
            @if $enable-font-icons and ($arrow-glyph != null) {
                @include font-icon($glyph: $arrow-glyph, $pseudo: false, $line-height: $arrow-height);
                color: $arrow-glyph-color;
            } @else {
                @if $include-ui-menu-arrows {
                    background-image: theme-background-image('button/#{$ui}-arrow');
                } @else {
                    background-image: theme-background-image('button/arrow');
                }
            }
        }
    }

    $arrow-prefix: '';
    @if $include-ui-split-arrows {
        $arrow-prefix: $ui + '-';
    }
    $arrow-suffix: '';
    @if $include-split-noline-arrows {
        $arrow-suffix: '-noline';
    }

    .#{$prefix}btn-wrap-#{$ui} {
        &.#{$prefix}btn-split-right {
            @if $split-line-width > 0 {
                > .#{$prefix}btn-button {
                    padding-right: right($padding);
                    @if $include-rtl {
                        &.#{$prefix}rtl {
                            padding-right: 0;
                            padding-left: right($padding);
                        }
                    }
                    &:after {
                        border-right: $split-line-width solid $split-line-color;
                    }
                }
            }
            &:after {
                width: $split-width;
                @if $enable-font-icons and ($arrow-glyph != null) {
                    @include font-icon($glyph: $arrow-glyph, $pseudo: false);
                    color: $arrow-glyph-color;
                    padding-left: right($padding); // center the arrow in the trigger area
                } @else {
                    background-image: theme-background-image('button/#{$arrow-prefix}s-arrow#{$arrow-suffix}');
                    // The arrow can get smashed into oblivion by an outer containing element if
                    // the container is smaller than the button. padding prevents this.
                    padding-right: $split-width;
                }
            }
        }

        @if $include-rtl {
            &.#{$prefix}rtl.#{$prefix}btn-split-right:after {
                @if $enable-font-icons and ($arrow-glyph != null) {
                    padding-left: 0;
                    padding-right: right($padding);
                } @else {
                    background-image: theme-background-image('button/#{$arrow-prefix}s-arrow#{$arrow-suffix}-rtl');
                }
            }
        }

        &.#{$prefix}btn-split-bottom {
            @if $split-line-width > 0 {
                > .#{$prefix}btn-button:after {
                    border-bottom: $split-line-width solid $split-line-color;
                }
            }

            @if $enable-font-icons and ($arrow-glyph != null) {
                // negate the effect of bottom padding so that the split arrow icon
                // appears roughly vertically centered by virtue of its line-height
                margin-bottom: -(bottom($padding));
            }

            &:after {
                height: $split-height;
                @if $enable-font-icons and ($arrow-glyph != null) {
                    @include font-icon($glyph: $arrow-glyph, $pseudo: false, $line-height: $split-height);
                    color: $arrow-glyph-color;
                } @else {
                    background-image: theme-background-image('button/#{$arrow-prefix}s-arrow-b#{$arrow-suffix}');
                }
            }
        }
    }

    @if $include-split-over-arrows and ((not $enable-font-icons) or ($arrow-glyph == null)) {
        .#{$prefix}btn-over > {
            .#{$prefix}btn-wrap-#{$ui} {
                &.#{$prefix}btn-split-right:after {
                    background-image: theme-background-image('button/#{$arrow-prefix}s-arrow-o');
                }

                @if $include-rtl {
                    &.#{$prefix}rtl.#{$prefix}btn-split-right:after {
                        background-image: theme-background-image('button/#{$arrow-prefix}s-arrow-o-rtl');
                    }
                }

                &.#{$prefix}btn-split-bottom:after {
                    background-image: theme-background-image('button/#{$arrow-prefix}s-arrow-bo');
                }
            }
        }
    }

    .#{$prefix}btn-split-right > {
        .#{$prefix}btn-icon.#{$prefix}btn-no-text.#{$prefix}btn-button-#{$ui} {
            padding-right: $icon-spacing;
        }
        .#{$prefix}btn-text.#{$prefix}btn-icon-right > .#{$prefix}btn-icon-el-#{$ui} {
            margin-right: $text-padding;
        }
    }

    .#{$prefix}btn-focus.#{$prefix}btn-#{$ui} {
        .#{$prefix}keyboard-mode & {
            @if $border-color-focus != $border-color {
                border-color: $border-color-focus;
            }
            @if $background-color-focus != null {
                @include background-gradient($background-color-focus, $background-gradient-focus);
            }
            @if not is-null($inner-border-width-focus) and not is-null($inner-border-color-focus) {
                @include inner-border($inner-border-width-focus, $inner-border-color-focus);
            }

            @if not is-null($body-outline-width-focus) and $body-outline-width-focus != 0 {
                .#{$prefix}btn-wrap {
                    $outline-color: if(not is-null($body-outline-color-focus), $body-outline-color-focus, $color);
                    $outline-style: if(not is-null($body-outline-style-focus), $body-outline-style-focus, dotted);
                    outline: $body-outline-width-focus $outline-style $outline-color;
                }
            }

            .#{$prefix}btn-inner {
                @if $color-focus != $color {
                    color: $color-focus;
                }
                @if $font-weight-focus != $font-weight {
                    font-weight: $font-weight-focus;
                }
                @if $font-size-focus != $font-size {
                    font-size: $font-size-focus;
                }
                @if $font-family-focus != $font-family {
                    font-family: $font-family-focus;
                }
            }
        }
    }
    
    .#{$prefix}btn-#{$ui} .#{$prefix}btn-arrow-el {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: $split-width + right($padding);
        pointer-events: none;
        
        @if $include-rtl {
            &.#{$prefix}rtl {
                right: inherit;
                left: 0;
            }
        }
    }
    
    .#{$prefix}btn-#{$ui}.#{$prefix}arrow-focus .#{$prefix}btn-arrow-el {
        .#{$prefix}keyboard-mode & {
            @if not is-null($inner-border-width-focus) and not is-null($inner-border-color-focus) {
                border: $inner-border-width-focus solid $inner-border-color-focus;
            }
        }
    }
    
    .#{$prefix}btn-over.#{$prefix}btn-#{$ui} {
        @if $border-color-over != $border-color {
            border-color: $border-color-over;
        }
        @if $background-color-over != null {
            @include background-gradient($background-color-over, $background-gradient-over);
        }
        @if not is-null($inner-border-width-over) and not is-null($inner-border-color-over) {
            @include inner-border($inner-border-width-over, $inner-border-color-over);
        }

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

    .#{$prefix}btn-focus.#{$prefix}btn-over.#{$prefix}btn-#{$ui} {
        .#{$prefix}keyboard-mode & {
            @if $border-color-focus-over != $border-color-over {
                border-color: $border-color-focus-over;
            }
            @if $background-color-focus-over != $background-color-over or $background-gradient-focus-over != $background-gradient-over {
                @include background-gradient($background-color-focus-over, $background-gradient-focus-over);
            }
            @if not is-null($inner-border-width-focus-over) and not is-null($inner-border-color-focus-over) {
                @include inner-border($inner-border-width-focus-over, $inner-border-color-focus-over);
            }

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

    // add x-btn class to increase specificity over focus-over rule above
    .#{$prefix}btn.#{$prefix}btn-menu-active.#{$prefix}btn-#{$ui},
    .#{$prefix}btn.#{$prefix}btn-pressed.#{$prefix}btn-#{$ui} {
        @if $border-color-pressed != $border-color {
            border-color: $border-color-pressed;
        }
        @if $background-color-pressed != null {
            @include background-gradient($background-color-pressed, $background-gradient-pressed);
        }
        @if not is-null($inner-border-width-pressed) and not is-null($inner-border-color-pressed) {
            @include inner-border($inner-border-width-pressed, $inner-border-color-pressed);
        }

        .#{$prefix}btn-inner {
            @if $color-pressed != $color {
                color: $color-pressed;
            }
            @if $font-weight-pressed != $font-weight {
                font-weight: $font-weight-pressed;
            }
            @if $font-size-pressed != $font-size {
                font-size: $font-size-pressed;
            }
            @if $font-family-pressed != $font-family {
                font-family: $font-family-pressed;
            }
        }
    }

    .#{$prefix}btn-focus.#{$prefix}btn-menu-active.#{$prefix}btn-#{$ui},
    .#{$prefix}btn-focus.#{$prefix}btn-pressed.#{$prefix}btn-#{$ui} {
        .#{$prefix}keyboard-mode & {
            @if $border-color-focus-pressed != $border-color-pressed {
                border-color: $border-color-focus-pressed;
            }
            @if $background-color-focus-pressed != $background-color-pressed or $background-gradient-focus-pressed != $background-gradient-pressed {
                @include background-gradient($background-color-focus-pressed, $background-gradient-focus-pressed);
            }
            @if not is-null($inner-border-width-focus-pressed) and not is-null($inner-border-color-focus-pressed) {
                @include inner-border($inner-border-width-focus-pressed, $inner-border-color-focus-pressed);
            }

            .#{$prefix}btn-inner {
                @if $color-focus-pressed != $color-pressed {
                    color: $color-focus-pressed;
                }
                @if $font-weight-focus-pressed != $font-weight-pressed {
                    font-weight: $font-weight-focus-pressed;
                }
                @if $font-size-focus-pressed != $font-size-pressed {
                    font-size: $font-size-focus-pressed;
                }
                @if $font-family-focus-pressed != $font-family-pressed {
                    font-family: $font-family-focus-pressed;
                }
            }
        }
    }

    // add x-btn class to increase specificity over focus-pressed
    .#{$prefix}btn.#{$prefix}btn-disabled.#{$prefix}btn-#{$ui} {
        @if $border-color-disabled != $border-color {
            border-color: $border-color-disabled;
        }
        @if not is-null($background-color-disabled) {
            @include background-gradient($background-color-disabled, $background-gradient-disabled);
        }
        @if not is-null($inner-border-width-disabled) and not is-null($inner-border-color-disabled) {
            @include inner-border($inner-border-width-disabled, $inner-border-color-disabled);
        }

        .#{$prefix}btn-inner {
            @if $color-disabled != $color {
                color: $color-disabled;
            }
            @if $font-weight-disabled != $font-weight {
                font-weight: $font-weight-disabled;
            }
            @if $font-size-disabled != $font-size {
                font-size: $font-size-disabled;
            }
            @if $font-family-disabled != $font-family {
                font-family: $font-family-disabled;
            }
        }
    }

    @if $include-slicer-border-radius {
        .#{$prefix}btn-focus {
            .#{$prefix}keyboard-mode & {
                $stretch: slicer-background-stretch('btn-focus.#{$prefix}btn-#{$ui}', 'bottom');
                $frame: slicer-frame('btn-focus.#{$prefix}btn-#{$ui}', $frame-size);

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

        .#{$prefix}btn-over {
            $stretch: slicer-background-stretch('btn-over.#{$prefix}btn-#{$ui}', 'bottom');
            $frame: slicer-frame('btn-over.#{$prefix}btn-#{$ui}', $frame-size);

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

        .#{$prefix}btn-focus.#{$prefix}btn-over {
            .#{$prefix}keyboard-mode & {
                $stretch: slicer-background-stretch('btn-focus.#{$prefix}btn-over.#{$prefix}btn-#{$ui}', 'bottom');
                $frame: slicer-frame('btn-focus.#{$prefix}btn-over.#{$prefix}btn-#{$ui}', $frame-size);

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

        // add x-btn class to increase specificity over focus-over rules above
        .#{$prefix}btn.#{$prefix}btn-menu-active,
        .#{$prefix}btn.#{$prefix}btn-pressed {
            $stretch: slicer-background-stretch('btn-pressed.#{$prefix}btn-#{$ui}', 'bottom');
            $frame: slicer-frame('btn-pressed.#{$prefix}btn-#{$ui}', $frame-size);

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

        .#{$prefix}btn-focus.#{$prefix}btn-menu-active,
        .#{$prefix}btn-focus.#{$prefix}btn-pressed {
            .#{$prefix}keyboard-mode & {
                $stretch: slicer-background-stretch('btn-focus.#{$prefix}btn-pressed.#{$prefix}btn-#{$ui}', 'bottom');
                $frame: slicer-frame('btn-focus.#{$prefix}btn-pressed.#{$prefix}btn-#{$ui}', $frame-size);

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

        // add x-btn class to increase specificity over focus-pressed
        .#{$prefix}btn.#{$prefix}btn-disabled {
            $stretch: slicer-background-stretch('btn-disabled.#{$prefix}btn-#{$ui}', 'bottom');
            $frame: slicer-frame('btn-disabled.#{$prefix}btn-#{$ui}', $frame-size);

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

    @if $include-slicer-border-radius {
        .#{$prefix}nbr .#{$prefix}btn-#{$ui} {
            background-image: none;
        }
    }

    @if $opacity-disabled != 1 {
        .#{$prefix}btn-disabled.#{$prefix}btn-#{$ui} {
            @include opacity($opacity-disabled);
        }
    }

    @if $inner-opacity-disabled != 1 {
        .#{$prefix}btn-disabled.#{$prefix}btn-#{$ui} {
            .#{$prefix}btn-inner,
            .#{$prefix}btn-icon-el {
                @include opacity($inner-opacity-disabled);
            }
        }
    }

    @if $include-ext-button-segmented and $include-slicer-border-radius {
        // These rules must use !important to overcome the !important border/padding
        // removal rules from x-frame()
        .#{$prefix}nbr {
            .#{$prefix}segmented-button-item-horizontal.#{$prefix}btn-#{$ui} {
                &.#{$prefix}segmented-button-first {
                    border-right-width: right($border-width) !important;
                    .#{$prefix}btn-#{$ui}-mc {
                        padding-right: right($padding) !important;
                    }
                }
                &.#{$prefix}segmented-button-middle {
                    border-right-width: right($border-width) !important;
                    .#{$prefix}btn-#{$ui}-mc {
                        padding-right: right($padding) !important;
                        padding-left: left($padding) !important;
                    }
                }
                &.#{$prefix}segmented-button-last {
                    .#{$prefix}btn-#{$ui}-mc {
                        padding-left: left($padding) !important;
                    }
                }
            }

            .#{$prefix}segmented-button-item-vertical.#{$prefix}btn-#{$ui} {
                &.#{$prefix}segmented-button-first {
                    border-bottom-width: bottom($border-width) !important;
                    .#{$prefix}btn-#{$ui}-mc {
                        padding-bottom: bottom($padding) !important;
                    }
                }
                &.#{$prefix}segmented-button-middle {
                    border-bottom-width: bottom($border-width) !important;
                    .#{$prefix}btn-#{$ui}-mc {
                        padding-top: top($padding) !important;
                        padding-bottom: bottom($padding) !important;
                    }
                }
                &.#{$prefix}segmented-button-last {
                    .#{$prefix}btn-#{$ui}-mc {
                        padding-top: top($padding) !important;
                    }
                }
            }

            .#{$prefix}segmented-button-item.#{$prefix}btn-#{$ui}:after {
                // Inner borders are contained in the framing elements of a button. Since
                // we have suppressed the borders on the inner edges to remove the rounded
                // corners, we need to simulate the inner-border using a pseudo el.
                // Always set up the positioning of the pseudo element just in case
                // it is needed by the following rules
                content: ' ';
                border-style: solid;
                border-width: 0;
                position: absolute;

                @if not is-null($inner-border-width) and not is-null($inner-border-color) and $inner-border-width != 0 {
                    border-width: $inner-border-width;
                    border-color: $inner-border-color;
                }
            }

            .#{$prefix}segmented-button-item-horizontal.#{$prefix}btn-#{$ui} {
                &:after {
                    top: $border-width;
                    right: 0;
                    bottom: $border-width;
                    left: 0;
                }
                &.#{$prefix}segmented-button-first:after {
                    left: $border-width;
                }
                &.#{$prefix}segmented-button-last:after {
                    right: $border-width;
                }
            }

            .#{$prefix}segmented-button-item-vertical.#{$prefix}btn-#{$ui} {
                &:after {
                    top: 0;
                    right: $border-width;
                    bottom: 0;
                    left: $border-width;
                }
                &.#{$prefix}segmented-button-first:after {
                    top: $border-width;
                }
                &.#{$prefix}segmented-button-last:after {
                    bottom: $border-width;
                }
            }

            .#{$prefix}segmented-button-item {
                @if not is-null($inner-border-width-focus) and not is-null($inner-border-color-focus) {
                    &.#{$prefix}btn-focus.#{$prefix}btn-#{$ui}:after {
                        .#{$prefix}keyboard-mode & {
                            border-width: $inner-border-width-focus;
                            border-color: $inner-border-color-focus;
                        }
                    }
                }

                @if not is-null($inner-border-width-over) and not is-null($inner-border-color-over) {
                    &.#{$prefix}btn-over.#{$prefix}btn-#{$ui}:after {
                        border-width: $inner-border-width-over;
                        border-color: $inner-border-color-over;
                    }
                }

                @if not is-null($inner-border-width-focus-over) and not is-null($inner-border-color-focus-over) {
                    &.#{$prefix}btn-focus.#{$prefix}btn-over.#{$prefix}btn-#{$ui}:after {
                        .#{$prefix}keyboard-mode & {
                            border-width: $inner-border-width-focus-over;
                            border-color: $inner-border-color-focus-over;
                        }
                    }
                }

                @if not is-null($inner-border-width-pressed) and not is-null($inner-border-color-pressed) {
                    &.#{$prefix}btn.#{$prefix}btn-menu-active.#{$prefix}btn-#{$ui}:after,
                    &.#{$prefix}btn.#{$prefix}btn-pressed.#{$prefix}btn-#{$ui}:after {
                        border-width: $inner-border-width-pressed;
                        border-color: $inner-border-color-pressed;
                    }
                }

                @if not is-null($inner-border-width-focus-pressed) and not is-null($inner-border-color-focus-pressed) {
                    &.#{$prefix}btn-focus.#{$prefix}btn-menu-active.#{$prefix}btn-#{$ui}:after,
                    &.#{$prefix}btn-focus.#{$prefix}btn-pressed.#{$prefix}btn-#{$ui}:after {
                        .#{$prefix}keyboard-mode & {
                            border-width: $inner-border-width-focus-pressed;
                            border-color: $inner-border-color-focus-pressed;
                        }
                    }
                }

                @if not is-null($inner-border-width-disabled) and not is-null($inner-border-color-disabled) {
                    &.#{$prefix}btn.#{$prefix}btn-disabled.#{$prefix}btn-#{$ui}:after {
                        border-width: $inner-border-width-disabled;
                        border-color: $inner-border-color-disabled;
                    }
                }
            }
        }
    }

    @include x-slicer('btn-focus.#{$prefix}btn-#{$ui}');
    @include x-slicer('btn-over.#{$prefix}btn-#{$ui}');
    @include x-slicer('btn-focus.#{$prefix}btn-over.#{$prefix}btn-#{$ui}');
    @include x-slicer('btn-pressed.#{$prefix}btn-#{$ui}');
    @include x-slicer('btn-focus.#{$prefix}btn-pressed.#{$prefix}btn-#{$ui}');
    @include x-slicer('btn-disabled.#{$prefix}btn-#{$ui}');

    // Button field or subclass inside cell - calculate top/bottom padding to keep row height correct
    @if $include-ext-grid-column-widget {
        $ui-height: $icon-size + vertical($padding) + vertical($border-width);
        .#{$prefix}button-#{$ui}-cell > .#{$prefix}grid-cell-inner {
            padding-top:    max(ceil(($grid-row-height - $ui-height) / 2), 0);
            padding-bottom: max(floor(($grid-row-height - $ui-height) / 2), 0);

            // vertical-align: top needed when in grid cells to avoid margin stretching the cell-inner
            >.#{$prefix}btn-#{$ui} {
                vertical-align: top;
            }
        }
    }
}
/**
 * Creates a visual theme for a {@link #scale large} Button.
 *
 * @param {string} $ui
 * The name of the UI being created. Can not included spaces or special punctuation
 * (used in CSS class names).
 *
 * @param {number} [$border-radius=$button-large-border-radius]
 * The border-radius of the button
 *
 * @param {number} [$border-width=$button-large-border-width]
 * The border-width of the button
 *
 * @param {color} [$border-color=$button-default-border-color]
 * The border-color of the button
 *
 * @param {color} [$border-color-over=$button-default-border-color-over]
 * The border-color of the button when the cursor is over the button
 *
 * @param {color} [$border-color-focus=$button-default-border-color-focus]
 * The border-color of the button when focused
 *
 * @param {color} [$border-color-pressed=$button-default-border-color-pressed]
 * The border-color of the button when pressed
 *
 * @param {color} [$border-color-focus-over=$button-default-border-color-focus-over]
 * The border-color of the button when the button is focused and the cursor is over the
 * button
 *
 * @param {color} [$border-color-focus-pressed=$button-default-border-color-focus-pressed]
 * The border-color of the button when focused and pressed
 *
 * @param {color} [$border-color-disabled=$button-default-border-color-disabled]
 * The border-color of the button when disabled
 *
 * @param {number} [$padding=$button-large-padding]
 * The amount of padding inside the border of the button on all sides
 *
 * @param {number} [$text-padding=$button-large-text-padding]
 * The amount of horizontal space to add to the left and right of the button text
 *
 * @param {color} [$background-color=$button-default-background-color]
 * The background-color of the button
 *
 * @param {color} [$background-color-over=$button-default-background-color-over]
 * The background-color of the button when the cursor is over the button
 *
 * @param {color} [$background-color-focus=$button-default-background-color-focus]
 * The background-color of the button when focused
 *
 * @param {color} [$background-color-pressed=$button-default-background-color-pressed]
 * The background-color of the button when pressed
 *
 * @param {color} [$background-color-focus-over=$button-default-background-color-focus-over]
 * The background-color of the button when the button is focused and the cursor is over
 * the button
 *
 * @param {color} [$background-color-focus-pressed=$button-default-background-color-focus-pressed]
 * The background-color of the button when focused and pressed
 *
 * @param {color} [$background-color-disabled=$button-default-background-color-disabled]
 * The background-color of the button when disabled
 *
 * @param {string/list} [$background-gradient=$button-default-background-gradient]
 * The background-gradient for the button.  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} [$background-gradient-over=$button-default-background-gradient-over]
 * The background-gradient to use when the cursor is over the button. 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} [$background-gradient-focus=$button-default-background-gradient-focus]
 * The background-gradient to use when the the button is 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} [$background-gradient-pressed=$button-default-background-gradient-pressed]
 * The background-gradient to use when the the button is pressed. 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} [$background-gradient-focus-over=$button-default-background-gradient-focus-over]
 * The background-gradient to use when the the button is focused and the cursor is over
 * the button. 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} [$background-gradient-focus-pressed=$button-default-background-gradient-focus-pressed]
 * The background-gradient to use when the the button is focused and pressed. 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} [$background-gradient-disabled=$button-default-background-gradient-disabled]
 * The background-gradient to use when the the button is disabled. Can be either the name
 * of a predefined gradient or a list of color stops. Used as the `$type` parameter for
 * {@link Global_CSS#background-gradient}.
 *
 * @param {color} [$color=$button-default-color]
 * The text color of the button
 *
 * @param {color} [$color-over=$button-default-color-over]
 * The text color of the button when the cursor is over the button
 *
 * @param {color} [$color-focus=$button-default-color-focus]
 * The text color of the button when the button is focused
 *
 * @param {color} [$color-pressed=$button-default-color-pressed]
 * The text color of the button when the button is pressed
 *
 * @param {color} [$color-focus-over=$button-default-color-focus-over]
 * The text color of the button when the button is focused and the cursor is over the button
 *
 * @param {color} [$color-focus-pressed=$button-default-color-focus-pressed]
 * The text color of the button when the button is focused and pressed
 *
 * @param {color} [$color-disabled=$button-default-color-disabled]
 * The text color of the button when the button is disabled
 *
 * @param {number/list} [$inner-border-width=$button-default-inner-border-width]
 * The inner border-width of the button
 *
 * @param {number/list} [$inner-border-width-over=$button-default-inner-border-width-over]
 * The inner border-width of the button when the cursor is over the button
 *
 * @param {number/list} [$inner-border-width-focus=$button-default-inner-border-width-focus]
 * The inner border-width of the button when focused
 *
 * @param {number/list} [$inner-border-width-pressed=$button-default-inner-border-width-pressed]
 * The inner border-width of the button when pressed
 *
 * @param {number/list} [$inner-border-width-focus-over=$button-default-inner-border-width-focus-over]
 * The inner border-width of the button when the button is focused and the cursor is over
 * the button
 *
 * @param {number/list} [$inner-border-width-focus-pressed=$button-default-inner-border-width-focus-pressed]
 * The inner border-width of the button when focused and pressed
 *
 * @param {number/list} [$inner-border-width-disabled=$button-default-inner-border-width-disabled]
 * The inner border-width of the button when disabled
 *
 * @param {color} [$inner-border-color=$button-default-inner-border-color]
 * The inner border-color of the button
 *
 * @param {color} [$inner-border-color-over=$button-default-inner-border-color-over]
 * The inner border-color of the button when the cursor is over the button
 *
 * @param {color} [$inner-border-color-focus=$button-default-inner-border-color-focus]
 * The inner border-color of the button when focused
 *
 * @param {color} [$inner-border-color-pressed=$button-default-inner-border-color-pressed]
 * The inner border-color of the button when pressed
 *
 * @param {color} [$inner-border-color-focus-over=$button-default-inner-border-color-focus-over]
 * The inner border-color of the button when the button is focused and the cursor is over
 * the button
 *
 * @param {color} [$inner-border-color-focus-pressed=$button-default-inner-border-color-focus-pressed]
 * The inner border-color of the button when focused and pressed
 *
 * @param {color} [$inner-border-color-disabled=$button-default-inner-border-color-disabled]
 * The inner border-color of the button when disabled
 *
 * @param {number} [$body-outline-width-focus=$button-default-body-outline-width-focus]
 * The body outline width of the button when focused
 *
 * @param {number} [$body-outline-style-focus=$button-default-body-outline-style-focus]
 * The body outline-style of the button when focused
 *
 * @param {number} [$body-outline-color-focus=$button-default-body-outline-color-focus]
 * The body outline color of the button when focused
 *
 * @param {number} [$font-size=$button-large-font-size]
 * The font-size of the button
 *
 * @param {number} [$font-size-over=$button-large-font-size-over]
 * The font-size of the button when the cursor is over the button
 *
 * @param {number} [$font-size-focus=$button-large-font-size-focus]
 * The font-size of the button when the button is focused
 *
 * @param {number} [$font-size-pressed=$button-large-font-size-pressed]
 * The font-size of the button when the button is pressed
 *
 * @param {number} [$font-size-focus-over=$button-large-font-size-focus-over]
 * The font-size of the button when the button is focused and the cursor is over the
 * button
 *
 * @param {number} [$font-size-focus-pressed=$button-large-font-size-focus-pressed]
 * The font-size of the button when the button is focused and pressed
 *
 * @param {number} [$font-size-disabled=$button-large-font-size-disabled]
 * The font-size of the button when the button is disabled
 *
 * @param {string} [$font-weight=$button-large-font-weight]
 * The font-weight of the button
 *
 * @param {string} [$font-weight-over=$button-large-font-weight-over]
 * The font-weight of the button when the cursor is over the button
 *
 * @param {string} [$font-weight-focus=$button-large-font-weight-focus]
 * The font-weight of the button when the button is focused
 *
 * @param {string} [$font-weight-pressed=$button-large-font-weight-pressed]
 * The font-weight of the button when the button is pressed
 *
 * @param {string} [$font-weight-focus-over=$button-large-font-weight-focus-over]
 * The font-weight of the button when the button is focused and the cursor is over the
 * button
 *
 * @param {string} [$font-weight-focus-pressed=$button-large-font-weight-focus-pressed]
 * The font-weight of the button when the button is focused and pressed
 *
 * @param {string} [$font-weight-disabled=$button-large-font-weight-disabled]
 * The font-weight of the button when the button is disabled
 *
 * @param {string} [$font-family=$button-large-font-family]
 * The font-family of the button
 *
 * @param {string} [$font-family-over=$button-large-font-family-over]
 * The font-family of the button when the cursor is over the button
 *
 * @param {string} [$font-family-focus=$button-large-font-family-focus]
 * The font-family of the button when the button is focused
 *
 * @param {string} [$font-family-pressed=$button-large-font-family-pressed]
 * The font-family of the button when the button is pressed
 *
 * @param {string} [$font-family-focus-over=$button-large-font-family-focus-over]
 * The font-family of the button when the button is focused and the cursor is over the
 * button
 *
 * @param {string} [$font-family-focus-pressed=$button-large-font-family-focus-pressed]
 * The font-family of the button when the button is focused and pressed
 *
 * @param {string} [$font-family-disabled=$button-large-font-family-disabled]
 * The font-family of the button when the button is disabled
 *
 * @param {number} [$line-height=$button-large-line-height]
 * The line-height of the button text
 *
 * @param {number} [$icon-size=$button-large-icon-size]
 * The size of the button icon
 *
 * @param {number} [$glyph-font-size=$button-large-glyph-font-size]
 * The font-size for the button glyph
 *
 * @param {number} [$icon-spacing=$button-large-icon-spacing]
 * The space between the button's icon and text
 *
 * @param {color} [$glyph-color=$button-default-glyph-color]
 * The color of the button's {@link #glyph} icon
 *
 * @param {number} [$glyph-opacity=$button-default-glyph-opacity]
 * The opacity of the button's {@link #glyph} icon
 *
 * @param {number} [$arrow-width=$button-large-arrow-width]
 * The width of the button's {@link #cfg-menu} arrow
 *
 * @param {number} [$arrow-height=$button-large-arrow-height]
 * The height of the button's {@link #cfg-menu} arrow
 *
 * @param {string/list} [$arrow-glyph=$button-large-arrow-glyph]
 * Glyph for the button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {string/list} [$arrow-glyph-color=$button-default-arrow-glyph-color]
 * Glyph color for the button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {number} [$split-width=$button-large-split-width]
 * The width of a {@link Ext.button.Split Split Button}'s arrow
 *
 * @param {number} [$split-height=$button-large-split-height]
 * The height of a {@link Ext.button.Split Split Button}'s arrow
 *
 * @param {number} [$split-line-width=$button-large-split-line-width]
 * The default width for a {@link Ext.button.Split Split Button}'s line.
 * Themes that include the line in the arrow background image should set this to 0
 *
 * @param {color} [$split-line-color=$button-default-split-line-color]
 * The color for a {@link Ext.button.Split Split Button}'s line.
 * Only applicable when `$split-line-width` is greater than 0.
 *
 * @param {boolean} [$include-ui-menu-arrows=$button-include-ui-menu-arrows]
 * True to include the UI name in the file name of the {@link #cfg-menu}
 * arrow icon. Set this to false to share the same arrow bewteen multiple UIs.
 *
 * @param {boolean} [$include-ui-split-arrows=$button-include-ui-split-arrows]
 * True to include the UI name in the file name of the {@link Ext.button.Split Split Button}'s
 * arrow icon. Set this to false to share the same arrow bewteen multiple UIs.
 *
 * @param {boolean} [$include-split-noline-arrows=$button-include-split-noline-arrows]
 * True to add a "-noline" suffix to the file name of the {@link Ext.button.Split Split Button}'s 
 * arrow icon.  Used for hiding the split line when toolbar buttons are in their default
 * state.
 *
 * @param {boolean} [$include-split-over-arrows=$button-include-split-over-arrows]
 * True to use a separate icon for {@link Ext.button.Split Split Button}s when the cursor
 * is over the button.  The over icon file name will have a "-o" suffix
 *
 * @param {number} [$opacity-disabled=$button-opacity-disabled]
 * The opacity of the button when it is disabled
 *
 * @param {number} [$inner-opacity-disabled=$button-inner-opacity-disabled]
 * The opacity of the button's text and icon elements when when the button is disabled
 * 
 * @member Ext.button.Button
 */
@mixin extjs-button-large-ui(
    $ui,

    $border-radius: $button-large-border-radius,
    $border-width: $button-large-border-width,

    $border-color: null,
    $border-color-over: null,
    $border-color-focus: null,
    $border-color-pressed: null,
    $border-color-focus-over: null,
    $border-color-focus-pressed: null,
    $border-color-disabled: null,

    $padding: $button-large-padding,
    $text-padding: $button-large-text-padding,

    $background-color: null,
    $background-color-over: null,
    $background-color-focus: null,
    $background-color-pressed: null,
    $background-color-focus-over: null,
    $background-color-focus-pressed: null,
    $background-color-disabled: null,

    $background-gradient: $button-default-background-gradient,
    $background-gradient-over: $button-default-background-gradient-over,
    $background-gradient-focus: $button-default-background-gradient-focus,
    $background-gradient-pressed: $button-default-background-gradient-pressed,
    $background-gradient-focus-over: $button-default-background-gradient-focus-over,
    $background-gradient-focus-pressed: $button-default-background-gradient-focus-pressed,
    $background-gradient-disabled: $button-default-background-gradient-disabled,

    $color: null,
    $color-over: null,
    $color-focus: null,
    $color-pressed: null,
    $color-focus-over: null,
    $color-focus-pressed: null,
    $color-disabled: null,

    $inner-border-width: null,
    $inner-border-width-over: null,
    $inner-border-width-focus: null,
    $inner-border-width-pressed: null,
    $inner-border-width-focus-over: null,
    $inner-border-width-focus-pressed: null,
    $inner-border-width-disabled: null,

    $inner-border-color: null,
    $inner-border-color-over: null,
    $inner-border-color-focus: null,
    $inner-border-color-pressed: null,
    $inner-border-color-focus-over: null,
    $inner-border-color-focus-pressed: null,
    $inner-border-color-disabled: null,

    $body-outline-width-focus: $button-default-body-outline-width-focus,
    $body-outline-style-focus: $button-default-body-outline-style-focus,
    $body-outline-color-focus: $button-default-body-outline-color-focus,

    $font-size: null,
    $font-size-over: null,
    $font-size-focus: null,
    $font-size-pressed: null,
    $font-size-focus-over: null,
    $font-size-focus-pressed: null,
    $font-size-disabled: null,

    $font-weight: null,
    $font-weight-over: null,
    $font-weight-focus: null,
    $font-weight-pressed: null,
    $font-weight-focus-over: null,
    $font-weight-focus-pressed: null,
    $font-weight-disabled: null,

    $font-family: null,
    $font-family-over: null,
    $font-family-focus: null,
    $font-family-pressed: null,
    $font-family-focus-over: null,
    $font-family-focus-pressed: null,
    $font-family-disabled: null,

    $line-height: $button-large-line-height,
    $icon-size: $button-large-icon-size,
    $glyph-font-size: $button-large-glyph-font-size,
    $icon-spacing: $button-large-icon-spacing,
    $glyph-color: $button-default-glyph-color,
    $glyph-opacity: $button-default-glyph-opacity,
    $arrow-width: $button-large-arrow-width,
    $arrow-height: $button-large-arrow-height,
    $arrow-glyph: $button-large-arrow-glyph,
    $arrow-glyph-color: $button-default-arrow-glyph-color,
    $split-width: $button-large-split-width,
    $split-height: $button-large-split-height,
    $split-line-width: $button-large-split-line-width,
    $split-line-color: $button-default-split-line-color,
    $include-ui-menu-arrows:  $button-include-ui-menu-arrows,
    $include-ui-split-arrows: $button-include-ui-split-arrows,
    $include-split-noline-arrows: $button-include-split-noline-arrows,
    $include-split-over-arrows: $button-include-split-over-arrows,
    $opacity-disabled: $button-opacity-disabled,
    $inner-opacity-disabled: $button-inner-opacity-disabled
) {
    @if $border-color == null {
        $border-color: $button-default-border-color;

        @if $border-color-over == null {
            $border-color-over: $button-default-border-color-over;
        }

        @if $border-color-focus == null {
            $border-color-focus: $button-default-border-color-focus;
        }

        @if $border-color-pressed == null {
            $border-color-pressed: $button-default-border-color-pressed;
        }

        @if $border-color-focus-over == null {
            $border-color-focus-over: $button-default-border-color-focus-over;
        }

        @if $border-color-focus-pressed == null {
            $border-color-focus-pressed: $button-default-border-color-focus-pressed;
        }

        @if $border-color-disabled == null {
            $border-color-disabled: $button-default-border-color-disabled;
        }
    } @else {
        @if $border-color-over == null {
            $border-color-over: button-default-border-color-over($border-color);
        }

        @if $border-color-focus == null {
            $border-color-focus: button-default-border-color-focus($border-color);
        }

        @if $border-color-pressed == null {
            $border-color-pressed: button-default-border-color-pressed($border-color);
        }

        @if $border-color-focus-over == null {
            $border-color-focus-over: $border-color-over;
        }

        @if $border-color-focus-pressed == null {
            $border-color-focus-pressed: $border-color-pressed;
        }

        @if $border-color-disabled == null {
            $border-color-disabled: button-default-border-color-disabled($border-color);
        }
    }

    @if $background-color == null {
        $background-color: $button-default-background-color;

        @if $background-color-over == null {
            $background-color-over: $button-default-background-color-over;
        }

        @if $background-color-focus == null {
            $background-color-focus: $button-default-background-color-focus;
        }

        @if $background-color-pressed == null {
            $background-color-pressed: $button-default-background-color-pressed;
        }

        @if $background-color-focus-over == null {
            $background-color-focus-over: $button-default-background-color-focus-over;
        }

        @if $background-color-focus-pressed == null {
            $background-color-focus-pressed: $button-default-background-color-focus-pressed;
        }

        @if $background-color-disabled == null {
            $background-color-disabled: $button-default-background-color-disabled;
        }
    } @else {
        @if $background-color-over == null {
            $background-color-over: button-default-background-color-over($background-color);
        }

        @if $background-color-focus == null {
            $background-color-focus: button-default-background-color-focus($background-color);
        }

        @if $background-color-pressed == null {
            $background-color-pressed: button-default-background-color-pressed($background-color);
        }

        @if $background-color-focus-over == null {
            $background-color-focus-over: $background-color-over;
        }

        @if $background-color-focus-pressed == null {
            $background-color-focus-pressed: $background-color-pressed;
        }

        @if $background-color-disabled == null {
            $background-color-disabled: button-default-background-color-disabled($background-color);
        }
    }

    @if $color == null {
        $color: $button-default-color;

        @if $color-over == null {
            $color-over: $button-default-color-over;
        }

        @if $color-focus == null {
            $color-focus: $button-default-color-focus;
        }

        @if $color-pressed == null {
            $color-pressed: $button-default-color-pressed;
        }

        @if $color-focus-over == null {
            $color-focus-over: $button-default-color-focus-over;
        }

        @if $color-focus-pressed == null {
            $color-focus-pressed: $button-default-color-focus-pressed;
        }

        @if $color-disabled == null {
            $color-disabled: $button-default-color-disabled;
        }
    } @else {
        @if $color-over == null {
            $color-over: button-default-color-over($color);
        }

        @if $color-focus == null {
            $color-focus: button-default-color-focus($color);
        }

        @if $color-pressed == null {
            $color-pressed: button-default-color-pressed($color);
        }

        @if $color-focus-over == null {
            $color-focus-over: $color-over;
        }

        @if $color-focus-pressed == null {
            $color-focus-pressed: $color-pressed;
        }

        @if $color-disabled == null {
            $color-disabled: button-default-color-disabled($color);
        }
    }

    @if $inner-border-width == null {
        $inner-border-width: $button-default-inner-border-width;

        @if $inner-border-width-over == null {
            $inner-border-width-over: $button-default-inner-border-width-over;
        }

        @if $inner-border-width-focus == null {
            $inner-border-width-focus: $button-default-inner-border-width-focus;
        }

        @if $inner-border-width-pressed == null {
            $inner-border-width-pressed: $button-default-inner-border-width-pressed;
        }

        @if $inner-border-width-focus-over == null {
            $inner-border-width-focus-over: $button-default-inner-border-width-focus-over;
        }

        @if $inner-border-width-focus-pressed == null {
            $inner-border-width-focus-pressed: $button-default-inner-border-width-focus-pressed;
        }

        @if $inner-border-width-disabled == null {
            $inner-border-width-disabled: $button-default-inner-border-width-disabled;
        }
    } @else {
        @if $inner-border-width-over == null {
            $inner-border-width-over: $inner-border-width;
        }

        @if $inner-border-width-focus == null {
            $inner-border-width-focus: $inner-border-width;
        }

        @if $inner-border-width-pressed == null {
            $inner-border-width-pressed: $inner-border-width;
        }

        @if $inner-border-width-focus-over == null {
            $inner-border-width-focus-over: $inner-border-width-over;
        }

        @if $inner-border-width-focus-pressed == null {
            $inner-border-width-focus-pressed: $inner-border-width-pressed;
        }

        @if $inner-border-width-disabled == null {
            $inner-border-width-disabled: $inner-border-width;
        }
    }

    @if $inner-border-color == null {
        $inner-border-color: $button-default-inner-border-color;

        @if $inner-border-color-over == null {
            $inner-border-color-over: $button-default-inner-border-color-over;
        }

        @if $inner-border-color-focus == null {
            $inner-border-color-focus: $button-default-inner-border-color-focus;
        }

        @if $inner-border-color-pressed == null {
            $inner-border-color-pressed: $button-default-inner-border-color-pressed;
        }

        @if $inner-border-color-focus-over == null {
            $inner-border-color-focus-over: $button-default-inner-border-color-focus-over;
        }

        @if $inner-border-color-focus-pressed == null {
            $inner-border-color-focus-pressed: $button-default-inner-border-color-focus-pressed;
        }

        @if $inner-border-color-disabled == null {
            $inner-border-color-disabled: $button-default-inner-border-color-disabled;
        }
    } @else {
        @if $inner-border-color-over == null {
            $inner-border-color-over: button-default-inner-border-color-over($background-color-over, $color-over);
        }

        @if $inner-border-color-focus == null {
            $inner-border-color-focus: button-default-inner-border-color-focus($background-color-focus, $color-focus);
        }

        @if $inner-border-color-pressed == null {
            $inner-border-color-pressed: button-default-inner-border-color-pressed($background-color-pressed, $color-pressed);
        }

        @if $inner-border-color-focus-over == null {
            $inner-border-color-focus-over: button-default-inner-border-color-focus-over($background-color-focus-over, $color-focus-over);
        }

        @if $inner-border-color-focus-pressed == null {
            $inner-border-color-focus-pressed: button-default-inner-border-color-focus-pressed($background-color-focus-pressed, $color-focus-pressed);
        }

        @if $inner-border-color-disabled == null {
            $inner-border-color-disabled: button-default-inner-border-color-disabled($background-color-disabled, $color-disabled);
        }
    }

    @if $font-size == null {
        $font-size: $button-large-font-size;

        @if $font-size-over == null {
            $font-size-over: $button-large-font-size-over;
        }

        @if $font-size-focus == null {
            $font-size-focus: $button-large-font-size-focus;
        }

        @if $font-size-pressed == null {
            $font-size-pressed: $button-large-font-size-pressed;
        }

        @if $font-size-focus-over == null {
            $font-size-focus-over: $button-large-font-size-focus-over;
        }

        @if $font-size-focus-pressed == null {
            $font-size-focus-pressed: $button-large-font-size-focus-pressed;
        }

        @if $font-size-disabled == null {
            $font-size-disabled: $button-large-font-size-disabled;
        }
    } @else {
        @if $font-size-over == null {
            $font-size-over: $font-size;
        }

        @if $font-size-focus == null {
            $font-size-focus: $font-size;
        }

        @if $font-size-pressed == null {
            $font-size-pressed: $font-size;
        }

        @if $font-size-focus-over == null {
            $font-size-focus-over: $font-size-over;
        }

        @if $font-size-focus-pressed == null {
            $font-size-focus-pressed: $font-size-pressed;
        }

        @if $font-size-disabled == null {
            $font-size-disabled: $font-size;
        }
    }

    @if $font-weight == null {
        $font-weight: $button-large-font-weight;

        @if $font-weight-over == null {
            $font-weight-over: $button-large-font-weight-over;
        }

        @if $font-weight-focus == null {
            $font-weight-focus: $button-large-font-weight-focus;
        }

        @if $font-weight-pressed == null {
            $font-weight-pressed: $button-large-font-weight-pressed;
        }

        @if $font-weight-focus-over == null {
            $font-weight-focus-over: $button-large-font-weight-focus-over;
        }

        @if $font-weight-focus-pressed == null {
            $font-weight-focus-pressed: $button-large-font-weight-focus-pressed;
        }

        @if $font-weight-disabled == null {
            $font-weight-disabled: $button-large-font-weight-disabled;
        }
    } @else {
        @if $font-weight-over == null {
            $font-weight-over: $font-weight;
        }

        @if $font-weight-focus == null {
            $font-weight-focus: $font-weight;
        }

        @if $font-weight-pressed == null {
            $font-weight-pressed: $font-weight;
        }

        @if $font-weight-focus-over == null {
            $font-weight-focus-over: $font-weight-over;
        }

        @if $font-weight-focus-pressed == null {
            $font-weight-focus-pressed: $font-weight-pressed;
        }

        @if $font-weight-disabled == null {
            $font-weight-disabled: $font-weight;
        }
    }

    @if $font-family == null {
        $font-family: $button-large-font-family;

        @if $font-family-over == null {
            $font-family-over: $button-large-font-family-over;
        }

        @if $font-family-focus == null {
            $font-family-focus: $button-large-font-family-focus;
        }

        @if $font-family-pressed == null {
            $font-family-pressed: $button-large-font-family-pressed;
        }

        @if $font-family-focus-over == null {
            $font-family-focus-over: $button-large-font-family-focus-over;
        }

        @if $font-family-focus-pressed == null {
            $font-family-focus-pressed: $button-large-font-family-focus-pressed;
        }

        @if $font-family-disabled == null {
            $font-family-disabled: $button-large-font-family-disabled;
        }
    } @else {
        @if $font-family-over == null {
            $font-family-over: $font-family;
        }

        @if $font-family-focus == null {
            $font-family-focus: $font-family;
        }

        @if $font-family-pressed == null {
            $font-family-pressed: $font-family;
        }

        @if $font-family-focus-over == null {
            $font-family-focus-over: $font-family-over;
        }

        @if $font-family-focus-pressed == null {
            $font-family-focus-pressed: $font-family-pressed;
        }

        @if $font-family-disabled == null {
            $font-family-disabled: $font-family;
        }
    }

    @include extjs-button-ui(
        $ui: '#{$ui}-large',

        $border-radius: $border-radius,
        $border-width: $border-width,

        $border-color: $border-color,
        $border-color-over: $border-color-over,
        $border-color-focus: $border-color-focus,
        $border-color-pressed: $border-color-pressed,
        $border-color-focus-over: $border-color-focus-over,
        $border-color-focus-pressed: $border-color-focus-pressed,
        $border-color-disabled: $border-color-disabled,

        $padding: $padding,
        $text-padding: $text-padding,

        $background-color: $background-color,
        $background-color-over: $background-color-over,
        $background-color-focus: $background-color-focus,
        $background-color-pressed: $background-color-pressed,
        $background-color-focus-over: $background-color-focus-over,
        $background-color-focus-pressed: $background-color-focus-pressed,
        $background-color-disabled: $background-color-disabled,

        $background-gradient: $background-gradient,
        $background-gradient-over: $background-gradient-over,
        $background-gradient-focus: $background-gradient-focus,
        $background-gradient-pressed: $background-gradient-pressed,
        $background-gradient-focus-over: $background-gradient-focus-over,
        $background-gradient-focus-pressed: $background-gradient-focus-pressed,
        $background-gradient-disabled: $background-gradient-disabled,

        $color: $color,
        $color-over: $color-over,
        $color-focus: $color-focus,
        $color-pressed: $color-pressed,
        $color-focus-over: $color-focus-over,
        $color-focus-pressed: $color-focus-pressed,
        $color-disabled: $color-disabled,

        $inner-border-width: $inner-border-width,
        $inner-border-width-over: $inner-border-width-over,
        $inner-border-width-focus: $inner-border-width-focus,
        $inner-border-width-pressed: $inner-border-width-pressed,
        $inner-border-width-focus-over: $inner-border-width-focus-over,
        $inner-border-width-focus-pressed: $inner-border-width-focus-pressed,
        $inner-border-width-disabled: $inner-border-width-disabled,

        $inner-border-color: $inner-border-color,
        $inner-border-color-over: $inner-border-color-over,
        $inner-border-color-focus: $inner-border-color-focus,
        $inner-border-color-pressed: $inner-border-color-pressed,
        $inner-border-color-focus-over: $inner-border-color-focus-over,
        $inner-border-color-focus-pressed: $inner-border-color-focus-pressed,
        $inner-border-color-disabled: $inner-border-color-disabled,

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

        $font-size: $font-size,
        $font-size-over: $font-size-over,
        $font-size-focus: $font-size-focus,
        $font-size-pressed: $font-size-pressed,
        $font-size-focus-over: $font-size-focus-over,
        $font-size-focus-pressed: $font-size-focus-pressed,
        $font-size-disabled: $font-size-disabled,

        $font-weight: $font-weight,
        $font-weight-over: $font-weight-over,
        $font-weight-focus: $font-weight-focus,
        $font-weight-pressed: $font-weight-pressed,
        $font-weight-focus-over: $font-weight-focus-over,
        $font-weight-focus-pressed: $font-weight-focus-pressed,
        $font-weight-disabled: $font-weight-disabled,

        $font-family: $font-family,
        $font-family-over: $font-family-over,
        $font-family-focus: $font-family-focus,
        $font-family-pressed: $font-family-pressed,
        $font-family-focus-over: $font-family-focus-over,
        $font-family-focus-pressed: $font-family-focus-pressed,
        $font-family-disabled: $font-family-disabled,

        $line-height: $line-height,
        $icon-size: $icon-size,
        $glyph-font-size: $glyph-font-size,
        $icon-spacing: $icon-spacing,
        $glyph-color: $glyph-color,
        $glyph-opacity: $glyph-opacity,
        $arrow-width: $arrow-width,
        $arrow-height: $arrow-height,
        $arrow-glyph: $arrow-glyph,
        $arrow-glyph-color: $arrow-glyph-color,
        $split-width: $split-width,
        $split-height: $split-height,
        $split-line-width: $split-line-width,
        $split-line-color: $split-line-color,
        $include-ui-menu-arrows:  $include-ui-menu-arrows,
        $include-ui-split-arrows: $include-ui-split-arrows,
        $include-split-noline-arrows: $include-split-noline-arrows,
        $include-split-over-arrows: $include-split-over-arrows,
        $opacity-disabled: $opacity-disabled,
        $inner-opacity-disabled: $inner-opacity-disabled
    );
}

/**
 * Creates a visual theme for a {@link #scale small} Button.
 *
 * @param {string} $ui
 * The name of the UI being created. Can not included spaces or special punctuation
 * (used in CSS class names).
 *
 * @param {number} [$border-radius=$button-small-border-radius]
 * The border-radius of the button
 *
 * @param {number} [$border-width=$button-small-border-width]
 * The border-width of the button
 *
 * @param {color} [$border-color=$button-default-border-color]
 * The border-color of the button
 *
 * @param {color} [$border-color-over=$button-default-border-color-over]
 * The border-color of the button when the cursor is over the button
 *
 * @param {color} [$border-color-focus=$button-default-border-color-focus]
 * The border-color of the button when focused
 *
 * @param {color} [$border-color-pressed=$button-default-border-color-pressed]
 * The border-color of the button when pressed
 *
 * @param {color} [$border-color-focus-over=$button-default-border-color-focus-over]
 * The border-color of the button when the button is focused and the cursor is over the
 * button
 *
 * @param {color} [$border-color-focus-pressed=$button-default-border-color-focus-pressed]
 * The border-color of the button when focused and pressed
 *
 * @param {color} [$border-color-disabled=$button-default-border-color-disabled]
 * The border-color of the button when disabled
 *
 * @param {number} [$padding=$button-small-padding]
 * The amount of padding inside the border of the button on all sides
 *
 * @param {number} [$text-padding=$button-small-text-padding]
 * The amount of horizontal space to add to the left and right of the button text
 *
 * @param {color} [$background-color=$button-default-background-color]
 * The background-color of the button
 *
 * @param {color} [$background-color-over=$button-default-background-color-over]
 * The background-color of the button when the cursor is over the button
 *
 * @param {color} [$background-color-focus=$button-default-background-color-focus]
 * The background-color of the button when focused
 *
 * @param {color} [$background-color-pressed=$button-default-background-color-pressed]
 * The background-color of the button when pressed
 *
 * @param {color} [$background-color-focus-over=$button-default-background-color-focus-over]
 * The background-color of the button when the button is focused and the cursor is over
 * the button
 *
 * @param {color} [$background-color-focus-pressed=$button-default-background-color-focus-pressed]
 * The background-color of the button when focused and pressed
 *
 * @param {color} [$background-color-disabled=$button-default-background-color-disabled]
 * The background-color of the button when disabled
 *
 * @param {string/list} [$background-gradient=$button-default-background-gradient]
 * The background-gradient for the button.  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} [$background-gradient-over=$button-default-background-gradient-over]
 * The background-gradient to use when the cursor is over the button. 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} [$background-gradient-focus=$button-default-background-gradient-focus]
 * The background-gradient to use when the the button is 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} [$background-gradient-pressed=$button-default-background-gradient-pressed]
 * The background-gradient to use when the the button is pressed. 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} [$background-gradient-focus-over=$button-default-background-gradient-focus-over]
 * The background-gradient to use when the the button is focused and the cursor is over
 * the button. 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} [$background-gradient-focus-pressed=$button-default-background-gradient-focus-pressed]
 * The background-gradient to use when the the button is focused and pressed. 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} [$background-gradient-disabled=$button-default-background-gradient-disabled]
 * The background-gradient to use when the the button is disabled. Can be either the name
 * of a predefined gradient or a list of color stops. Used as the `$type` parameter for
 * {@link Global_CSS#background-gradient}.
 *
 * @param {color} [$color=$button-default-color]
 * The text color of the button
 *
 * @param {color} [$color-over=$button-default-color-over]
 * The text color of the button when the cursor is over the button
 *
 * @param {color} [$color-focus=$button-default-color-focus]
 * The text color of the button when the button is focused
 *
 * @param {color} [$color-pressed=$button-default-color-pressed]
 * The text color of the button when the button is pressed
 *
 * @param {color} [$color-focus-over=$button-default-color-focus-over]
 * The text color of the button when the button is focused and the cursor is over the button
 *
 * @param {color} [$color-focus-pressed=$button-default-color-focus-pressed]
 * The text color of the button when the button is focused and pressed
 *
 * @param {color} [$color-disabled=$button-default-color-disabled]
 * The text color of the button when the button is disabled
 *
 * @param {number/list} [$inner-border-width=$button-default-inner-border-width]
 * The inner border-width of the button
 *
 * @param {number/list} [$inner-border-width-over=$button-default-inner-border-width-over]
 * The inner border-width of the button when the cursor is over the button
 *
 * @param {number/list} [$inner-border-width-focus=$button-default-inner-border-width-focus]
 * The inner border-width of the button when focused
 *
 * @param {number/list} [$inner-border-width-pressed=$button-default-inner-border-width-pressed]
 * The inner border-width of the button when pressed
 *
 * @param {number/list} [$inner-border-width-focus-over=$button-default-inner-border-width-focus-over]
 * The inner border-width of the button when the button is focused and the cursor is over
 * the button
 *
 * @param {number/list} [$inner-border-width-focus-pressed=$button-default-inner-border-width-focus-pressed]
 * The inner border-width of the button when focused and pressed
 *
 * @param {number/list} [$inner-border-width-disabled=$button-default-inner-border-width-disabled]
 * The inner border-width of the button when disabled
 *
 * @param {color} [$inner-border-color=$button-default-inner-border-color]
 * The inner border-color of the button
 *
 * @param {color} [$inner-border-color-over=$button-default-inner-border-color-over]
 * The inner border-color of the button when the cursor is over the button
 *
 * @param {color} [$inner-border-color-focus=$button-default-inner-border-color-focus]
 * The inner border-color of the button when focused
 *
 * @param {color} [$inner-border-color-pressed=$button-default-inner-border-color-pressed]
 * The inner border-color of the button when pressed
 *
 * @param {color} [$inner-border-color-focus-over=$button-default-inner-border-color-focus-over]
 * The inner border-color of the button when the button is focused and the cursor is over
 * the button
 *
 * @param {color} [$inner-border-color-focus-pressed=$button-default-inner-border-color-focus-pressed]
 * The inner border-color of the button when focused and pressed
 *
 * @param {color} [$inner-border-color-disabled=$button-default-inner-border-color-disabled]
 * The inner border-color of the button when disabled
 *
 * @param {number} [$body-outline-width-focus=$button-default-body-outline-width-focus]
 * The body outline width of the button when focused
 *
 * @param {number} [$body-outline-style-focus=$button-default-body-outline-style-focus]
 * The body outline-style of the button when focused
 *
 * @param {number} [$body-outline-color-focus=$button-default-body-outline-color-focus]
 * The body outline color of the button when focused
 *
 * @param {number} [$font-size=$button-small-font-size]
 * The font-size of the button
 *
 * @param {number} [$font-size-over=$button-small-font-size-over]
 * The font-size of the button when the cursor is over the button
 *
 * @param {number} [$font-size-focus=$button-small-font-size-focus]
 * The font-size of the button when the button is focused
 *
 * @param {number} [$font-size-pressed=$button-small-font-size-pressed]
 * The font-size of the button when the button is pressed
 *
 * @param {number} [$font-size-focus-over=$button-small-font-size-focus-over]
 * The font-size of the button when the button is focused and the cursor is over the
 * button
 *
 * @param {number} [$font-size-focus-pressed=$button-small-font-size-focus-pressed]
 * The font-size of the button when the button is focused and pressed
 *
 * @param {number} [$font-size-disabled=$button-small-font-size-disabled]
 * The font-size of the button when the button is disabled
 *
 * @param {string} [$font-weight=$button-small-font-weight]
 * The font-weight of the button
 *
 * @param {string} [$font-weight-over=$button-small-font-weight-over]
 * The font-weight of the button when the cursor is over the button
 *
 * @param {string} [$font-weight-focus=$button-small-font-weight-focus]
 * The font-weight of the button when the button is focused
 *
 * @param {string} [$font-weight-pressed=$button-small-font-weight-pressed]
 * The font-weight of the button when the button is pressed
 *
 * @param {string} [$font-weight-focus-over=$button-small-font-weight-focus-over]
 * The font-weight of the button when the button is focused and the cursor is over the
 * button
 *
 * @param {string} [$font-weight-focus-pressed=$button-small-font-weight-focus-pressed]
 * The font-weight of the button when the button is focused and pressed
 *
 * @param {string} [$font-weight-disabled=$button-small-font-weight-disabled]
 * The font-weight of the button when the button is disabled
 *
 * @param {string} [$font-family=$button-small-font-family]
 * The font-family of the button
 *
 * @param {string} [$font-family-over=$button-small-font-family-over]
 * The font-family of the button when the cursor is over the button
 *
 * @param {string} [$font-family-focus=$button-small-font-family-focus]
 * The font-family of the button when the button is focused
 *
 * @param {string} [$font-family-pressed=$button-small-font-family-pressed]
 * The font-family of the button when the button is pressed
 *
 * @param {string} [$font-family-focus-over=$button-small-font-family-focus-over]
 * The font-family of the button when the button is focused and the cursor is over the
 * button
 *
 * @param {string} [$font-family-focus-pressed=$button-small-font-family-focus-pressed]
 * The font-family of the button when the button is focused and pressed
 *
 * @param {string} [$font-family-disabled=$button-small-font-family-disabled]
 * The font-family of the button when the button is disabled
 *
 * @param {number} [$line-height=$button-small-line-height]
 * The line-height of the button text
 *
 * @param {number} [$icon-size=$button-small-icon-size]
 * The size of the button icon
 *
 * @param {number} [$glyph-font-size=$button-small-glyph-font-size]
 * The font-size for the button glyph
 *
 * @param {number} [$icon-spacing=$button-small-icon-spacing]
 * The space between the button's icon and text
 *
 * @param {color} [$glyph-color=$button-default-glyph-color]
 * The color of the button's {@link #glyph} icon
 *
 * @param {number} [$glyph-opacity=$button-default-glyph-opacity]
 * The opacity of the button's {@link #glyph} icon
 *
 * @param {number} [$arrow-width=$button-small-arrow-width]
 * The width of the button's {@link #cfg-menu} arrow
 *
 * @param {number} [$arrow-height=$button-small-arrow-height]
 * The height of the button's {@link #cfg-menu} arrow
 *
 * @param {string/list} [$arrow-glyph=$button-small-arrow-glyph]
 * Glyph for the button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {string/list} [$arrow-glyph-color=$button-default-arrow-glyph-color]
 * Glyph color for the button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {number} [$split-width=$button-small-split-width]
 * The width of a {@link Ext.button.Split Split Button}'s arrow
 *
 * @param {number} [$split-height=$button-small-split-height]
 * The height of a {@link Ext.button.Split Split Button}'s arrow
 *
 * @param {number} [$split-line-width=$button-small-split-line-width]
 * The default width for a {@link Ext.button.Split Split Button}'s line.
 * Themes that include the line in the arrow background image should set this to 0
 *
 * @param {color} [$split-line-color=$button-default-split-line-color]
 * The color for a {@link Ext.button.Split Split Button}'s line.
 * Only applicable when `$split-line-width` is greater than 0.
 *
 * @param {boolean} [$include-ui-menu-arrows=$button-include-ui-menu-arrows]
 * True to include the UI name in the file name of the {@link #cfg-menu}
 * arrow icon. Set this to false to share the same arrow bewteen multiple UIs.
 *
 * @param {boolean} [$include-ui-split-arrows=$button-include-ui-split-arrows]
 * True to include the UI name in the file name of the {@link Ext.button.Split Split Button}'s
 * arrow icon. Set this to false to share the same arrow bewteen multiple UIs.
 *
 * @param {boolean} [$include-split-noline-arrows=$button-include-split-noline-arrows]
 * True to add a "-noline" suffix to the file name of the {@link Ext.button.Split Split Button}'s 
 * arrow icon.  Used for hiding the split line when toolbar buttons are in their default
 * state.
 *
 * @param {boolean} [$include-split-over-arrows=$button-include-split-over-arrows]
 * True to use a separate icon for {@link Ext.button.Split Split Button}s when the cursor
 * is over the button.  The over icon file name will have a "-o" suffix
 *
 * @param {number} [$opacity-disabled=$button-opacity-disabled]
 * The opacity of the button when it is disabled
 *
 * @param {number} [$inner-opacity-disabled=$button-inner-opacity-disabled]
 * The opacity of the button's text and icon elements when when the button is disabled
 * 
 * @member Ext.button.Button
 */
@mixin extjs-button-small-ui(
    $ui,

    $border-radius: $button-small-border-radius,
    $border-width: $button-small-border-width,

    $border-color: null,
    $border-color-over: null,
    $border-color-focus: null,
    $border-color-pressed: null,
    $border-color-focus-over: null,
    $border-color-focus-pressed: null,
    $border-color-disabled: null,

    $padding: $button-small-padding,
    $text-padding: $button-small-text-padding,

    $background-color: null,
    $background-color-over: null,
    $background-color-focus: null,
    $background-color-pressed: null,
    $background-color-focus-over: null,
    $background-color-focus-pressed: null,
    $background-color-disabled: null,

    $background-gradient: $button-default-background-gradient,
    $background-gradient-over: $button-default-background-gradient-over,
    $background-gradient-focus: $button-default-background-gradient-focus,
    $background-gradient-pressed: $button-default-background-gradient-pressed,
    $background-gradient-focus-over: $button-default-background-gradient-focus-over,
    $background-gradient-focus-pressed: $button-default-background-gradient-focus-pressed,
    $background-gradient-disabled: $button-default-background-gradient-disabled,

    $color: null,
    $color-over: null,
    $color-focus: null,
    $color-pressed: null,
    $color-focus-over: null,
    $color-focus-pressed: null,
    $color-disabled: null,

    $inner-border-width: null,
    $inner-border-width-over: null,
    $inner-border-width-focus: null,
    $inner-border-width-pressed: null,
    $inner-border-width-focus-over: null,
    $inner-border-width-focus-pressed: null,
    $inner-border-width-disabled: null,

    $inner-border-color: null,
    $inner-border-color-over: null,
    $inner-border-color-focus: null,
    $inner-border-color-pressed: null,
    $inner-border-color-focus-over: null,
    $inner-border-color-focus-pressed: null,
    $inner-border-color-disabled: null,

    $body-outline-width-focus: $button-default-body-outline-width-focus,
    $body-outline-style-focus: $button-default-body-outline-style-focus,
    $body-outline-color-focus: $button-default-body-outline-color-focus,

    $font-size: null,
    $font-size-over: null,
    $font-size-focus: null,
    $font-size-pressed: null,
    $font-size-focus-over: null,
    $font-size-focus-pressed: null,
    $font-size-disabled: null,

    $font-weight: null,
    $font-weight-over: null,
    $font-weight-focus: null,
    $font-weight-pressed: null,
    $font-weight-focus-over: null,
    $font-weight-focus-pressed: null,
    $font-weight-disabled: null,

    $font-family: null,
    $font-family-over: null,
    $font-family-focus: null,
    $font-family-pressed: null,
    $font-family-focus-over: null,
    $font-family-focus-pressed: null,
    $font-family-disabled: null,

    $line-height: $button-small-line-height,
    $icon-size: $button-small-icon-size,
    $glyph-font-size: $button-small-glyph-font-size,
    $icon-spacing: $button-small-icon-spacing,
    $glyph-color: $button-default-glyph-color,
    $glyph-opacity: $button-default-glyph-opacity,
    $arrow-width: $button-small-arrow-width,
    $arrow-height: $button-small-arrow-height,
    $arrow-glyph: $button-small-arrow-glyph,
    $arrow-glyph-color: $button-default-arrow-glyph-color,
    $split-width: $button-small-split-width,
    $split-height: $button-small-split-height,
    $split-line-width: $button-small-split-line-width,
    $split-line-color: $button-default-split-line-color,
    $include-ui-menu-arrows:  $button-include-ui-menu-arrows,
    $include-ui-split-arrows: $button-include-ui-split-arrows,
    $include-split-noline-arrows: $button-include-split-noline-arrows,
    $include-split-over-arrows: $button-include-split-over-arrows,
    $opacity-disabled: $button-opacity-disabled,
    $inner-opacity-disabled: $button-inner-opacity-disabled
) {
    @if $border-color == null {
        $border-color: $button-default-border-color;

        @if $border-color-over == null {
            $border-color-over: $button-default-border-color-over;
        }

        @if $border-color-focus == null {
            $border-color-focus: $button-default-border-color-focus;
        }

        @if $border-color-pressed == null {
            $border-color-pressed: $button-default-border-color-pressed;
        }

        @if $border-color-focus-over == null {
            $border-color-focus-over: $button-default-border-color-focus-over;
        }

        @if $border-color-focus-pressed == null {
            $border-color-focus-pressed: $button-default-border-color-focus-pressed;
        }

        @if $border-color-disabled == null {
            $border-color-disabled: $button-default-border-color-disabled;
        }
    } @else {
        @if $border-color-over == null {
            $border-color-over: button-default-border-color-over($border-color);
        }

        @if $border-color-focus == null {
            $border-color-focus: button-default-border-color-focus($border-color);
        }

        @if $border-color-pressed == null {
            $border-color-pressed: button-default-border-color-pressed($border-color);
        }

        @if $border-color-focus-over == null {
            $border-color-focus-over: $border-color-over;
        }

        @if $border-color-focus-pressed == null {
            $border-color-focus-pressed: $border-color-pressed;
        }

        @if $border-color-disabled == null {
            $border-color-disabled: button-default-border-color-disabled($border-color);
        }
    }

    @if $background-color == null {
        $background-color: $button-default-background-color;

        @if $background-color-over == null {
            $background-color-over: $button-default-background-color-over;
        }

        @if $background-color-focus == null {
            $background-color-focus: $button-default-background-color-focus;
        }

        @if $background-color-pressed == null {
            $background-color-pressed: $button-default-background-color-pressed;
        }

        @if $background-color-focus-over == null {
            $background-color-focus-over: $button-default-background-color-focus-over;
        }

        @if $background-color-focus-pressed == null {
            $background-color-focus-pressed: $button-default-background-color-focus-pressed;
        }

        @if $background-color-disabled == null {
            $background-color-disabled: $button-default-background-color-disabled;
        }
    } @else {
        @if $background-color-over == null {
            $background-color-over: button-default-background-color-over($background-color);
        }

        @if $background-color-focus == null {
            $background-color-focus: button-default-background-color-focus($background-color);
        }

        @if $background-color-pressed == null {
            $background-color-pressed: button-default-background-color-pressed($background-color);
        }

        @if $background-color-focus-over == null {
            $background-color-focus-over: $background-color-over;
        }

        @if $background-color-focus-pressed == null {
            $background-color-focus-pressed: $background-color-pressed;
        }

        @if $background-color-disabled == null {
            $background-color-disabled: button-default-background-color-disabled($background-color);
        }
    }

    @if $color == null {
        $color: $button-default-color;

        @if $color-over == null {
            $color-over: $button-default-color-over;
        }

        @if $color-focus == null {
            $color-focus: $button-default-color-focus;
        }

        @if $color-pressed == null {
            $color-pressed: $button-default-color-pressed;
        }

        @if $color-focus-over == null {
            $color-focus-over: $button-default-color-focus-over;
        }

        @if $color-focus-pressed == null {
            $color-focus-pressed: $button-default-color-focus-pressed;
        }

        @if $color-disabled == null {
            $color-disabled: $button-default-color-disabled;
        }
    } @else {
        @if $color-over == null {
            $color-over: button-default-color-over($color);
        }

        @if $color-focus == null {
            $color-focus: button-default-color-focus($color);
        }

        @if $color-pressed == null {
            $color-pressed: button-default-color-pressed($color);
        }

        @if $color-focus-over == null {
            $color-focus-over: $color-over;
        }

        @if $color-focus-pressed == null {
            $color-focus-pressed: $color-pressed;
        }

        @if $color-disabled == null {
            $color-disabled: button-default-color-disabled($color);
        }
    }

    @if $inner-border-width == null {
        $inner-border-width: $button-default-inner-border-width;

        @if $inner-border-width-over == null {
            $inner-border-width-over: $button-default-inner-border-width-over;
        }

        @if $inner-border-width-focus == null {
            $inner-border-width-focus: $button-default-inner-border-width-focus;
        }

        @if $inner-border-width-pressed == null {
            $inner-border-width-pressed: $button-default-inner-border-width-pressed;
        }

        @if $inner-border-width-focus-over == null {
            $inner-border-width-focus-over: $button-default-inner-border-width-focus-over;
        }

        @if $inner-border-width-focus-pressed == null {
            $inner-border-width-focus-pressed: $button-default-inner-border-width-focus-pressed;
        }

        @if $inner-border-width-disabled == null {
            $inner-border-width-disabled: $button-default-inner-border-width-disabled;
        }
    } @else {
        @if $inner-border-width-over == null {
            $inner-border-width-over: $inner-border-width;
        }

        @if $inner-border-width-focus == null {
            $inner-border-width-focus: $inner-border-width;
        }

        @if $inner-border-width-pressed == null {
            $inner-border-width-pressed: $inner-border-width;
        }

        @if $inner-border-width-focus-over == null {
            $inner-border-width-focus-over: $inner-border-width-over;
        }

        @if $inner-border-width-focus-pressed == null {
            $inner-border-width-focus-pressed: $inner-border-width-pressed;
        }

        @if $inner-border-width-disabled == null {
            $inner-border-width-disabled: $inner-border-width;
        }
    }

    @if $inner-border-color == null {
        $inner-border-color: $button-default-inner-border-color;

        @if $inner-border-color-over == null {
            $inner-border-color-over: $button-default-inner-border-color-over;
        }

        @if $inner-border-color-focus == null {
            $inner-border-color-focus: $button-default-inner-border-color-focus;
        }

        @if $inner-border-color-pressed == null {
            $inner-border-color-pressed: $button-default-inner-border-color-pressed;
        }

        @if $inner-border-color-focus-over == null {
            $inner-border-color-focus-over: $button-default-inner-border-color-focus-over;
        }

        @if $inner-border-color-focus-pressed == null {
            $inner-border-color-focus-pressed: $button-default-inner-border-color-focus-pressed;
        }

        @if $inner-border-color-disabled == null {
            $inner-border-color-disabled: $button-default-inner-border-color-disabled;
        }
    } @else {
        @if $inner-border-color-over == null {
            $inner-border-color-over: button-default-inner-border-color-over($background-color-over, $color-over);
        }

        @if $inner-border-color-focus == null {
            $inner-border-color-focus: button-default-inner-border-color-focus($background-color-focus, $color-focus);
        }

        @if $inner-border-color-pressed == null {
            $inner-border-color-pressed: button-default-inner-border-color-pressed($background-color-pressed, $color-pressed);
        }

        @if $inner-border-color-focus-over == null {
            $inner-border-color-focus-over: button-default-inner-border-color-focus-over($background-color-focus-over, $color-focus-over);
        }

        @if $inner-border-color-focus-pressed == null {
            $inner-border-color-focus-pressed: button-default-inner-border-color-focus-pressed($background-color-focus-pressed, $color-focus-pressed);
        }

        @if $inner-border-color-disabled == null {
            $inner-border-color-disabled: button-default-inner-border-color-disabled($background-color-disabled, $color-disabled);
        }
    }

    @if $font-size == null {
        $font-size: $button-small-font-size;

        @if $font-size-over == null {
            $font-size-over: $button-small-font-size-over;
        }

        @if $font-size-focus == null {
            $font-size-focus: $button-small-font-size-focus;
        }

        @if $font-size-pressed == null {
            $font-size-pressed: $button-small-font-size-pressed;
        }

        @if $font-size-focus-over == null {
            $font-size-focus-over: $button-small-font-size-focus-over;
        }

        @if $font-size-focus-pressed == null {
            $font-size-focus-pressed: $button-small-font-size-focus-pressed;
        }

        @if $font-size-disabled == null {
            $font-size-disabled: $button-small-font-size-disabled;
        }
    } @else {
        @if $font-size-over == null {
            $font-size-over: $font-size;
        }

        @if $font-size-focus == null {
            $font-size-focus: $font-size;
        }

        @if $font-size-pressed == null {
            $font-size-pressed: $font-size;
        }

        @if $font-size-focus-over == null {
            $font-size-focus-over: $font-size-over;
        }

        @if $font-size-focus-pressed == null {
            $font-size-focus-pressed: $font-size-pressed;
        }

        @if $font-size-disabled == null {
            $font-size-disabled: $font-size;
        }
    }

    @if $font-weight == null {
        $font-weight: $button-small-font-weight;

        @if $font-weight-over == null {
            $font-weight-over: $button-small-font-weight-over;
        }

        @if $font-weight-focus == null {
            $font-weight-focus: $button-small-font-weight-focus;
        }

        @if $font-weight-pressed == null {
            $font-weight-pressed: $button-small-font-weight-pressed;
        }

        @if $font-weight-focus-over == null {
            $font-weight-focus-over: $button-small-font-weight-focus-over;
        }

        @if $font-weight-focus-pressed == null {
            $font-weight-focus-pressed: $button-small-font-weight-focus-pressed;
        }

        @if $font-weight-disabled == null {
            $font-weight-disabled: $button-small-font-weight-disabled;
        }
    } @else {
        @if $font-weight-over == null {
            $font-weight-over: $font-weight;
        }

        @if $font-weight-focus == null {
            $font-weight-focus: $font-weight;
        }

        @if $font-weight-pressed == null {
            $font-weight-pressed: $font-weight;
        }

        @if $font-weight-focus-over == null {
            $font-weight-focus-over: $font-weight-over;
        }

        @if $font-weight-focus-pressed == null {
            $font-weight-focus-pressed: $font-weight-pressed;
        }

        @if $font-weight-disabled == null {
            $font-weight-disabled: $font-weight;
        }
    }

    @if $font-family == null {
        $font-family: $button-small-font-family;

        @if $font-family-over == null {
            $font-family-over: $button-small-font-family-over;
        }

        @if $font-family-focus == null {
            $font-family-focus: $button-small-font-family-focus;
        }

        @if $font-family-pressed == null {
            $font-family-pressed: $button-small-font-family-pressed;
        }

        @if $font-family-focus-over == null {
            $font-family-focus-over: $button-small-font-family-focus-over;
        }

        @if $font-family-focus-pressed == null {
            $font-family-focus-pressed: $button-small-font-family-focus-pressed;
        }

        @if $font-family-disabled == null {
            $font-family-disabled: $button-small-font-family-disabled;
        }
    } @else {
        @if $font-family-over == null {
            $font-family-over: $font-family;
        }

        @if $font-family-focus == null {
            $font-family-focus: $font-family;
        }

        @if $font-family-pressed == null {
            $font-family-pressed: $font-family;
        }

        @if $font-family-focus-over == null {
            $font-family-focus-over: $font-family-over;
        }

        @if $font-family-focus-pressed == null {
            $font-family-focus-pressed: $font-family-pressed;
        }

        @if $font-family-disabled == null {
            $font-family-disabled: $font-family;
        }
    }

    @include extjs-button-ui(
        $ui: '#{$ui}-small',

        $border-radius: $border-radius,
        $border-width: $border-width,

        $border-color: $border-color,
        $border-color-over: $border-color-over,
        $border-color-focus: $border-color-focus,
        $border-color-pressed: $border-color-pressed,
        $border-color-focus-over: $border-color-focus-over,
        $border-color-focus-pressed: $border-color-focus-pressed,
        $border-color-disabled: $border-color-disabled,

        $padding: $padding,
        $text-padding: $text-padding,

        $background-color: $background-color,
        $background-color-over: $background-color-over,
        $background-color-focus: $background-color-focus,
        $background-color-pressed: $background-color-pressed,
        $background-color-focus-over: $background-color-focus-over,
        $background-color-focus-pressed: $background-color-focus-pressed,
        $background-color-disabled: $background-color-disabled,

        $background-gradient: $background-gradient,
        $background-gradient-over: $background-gradient-over,
        $background-gradient-focus: $background-gradient-focus,
        $background-gradient-pressed: $background-gradient-pressed,
        $background-gradient-focus-over: $background-gradient-focus-over,
        $background-gradient-focus-pressed: $background-gradient-focus-pressed,
        $background-gradient-disabled: $background-gradient-disabled,

        $color: $color,
        $color-over: $color-over,
        $color-focus: $color-focus,
        $color-pressed: $color-pressed,
        $color-focus-over: $color-focus-over,
        $color-focus-pressed: $color-focus-pressed,
        $color-disabled: $color-disabled,

        $inner-border-width: $inner-border-width,
        $inner-border-width-over: $inner-border-width-over,
        $inner-border-width-focus: $inner-border-width-focus,
        $inner-border-width-pressed: $inner-border-width-pressed,
        $inner-border-width-focus-over: $inner-border-width-focus-over,
        $inner-border-width-focus-pressed: $inner-border-width-focus-pressed,
        $inner-border-width-disabled: $inner-border-width-disabled,

        $inner-border-color: $inner-border-color,
        $inner-border-color-over: $inner-border-color-over,
        $inner-border-color-focus: $inner-border-color-focus,
        $inner-border-color-pressed: $inner-border-color-pressed,
        $inner-border-color-focus-over: $inner-border-color-focus-over,
        $inner-border-color-focus-pressed: $inner-border-color-focus-pressed,
        $inner-border-color-disabled: $inner-border-color-disabled,

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

        $font-size: $font-size,
        $font-size-over: $font-size-over,
        $font-size-focus: $font-size-focus,
        $font-size-pressed: $font-size-pressed,
        $font-size-focus-over: $font-size-focus-over,
        $font-size-focus-pressed: $font-size-focus-pressed,
        $font-size-disabled: $font-size-disabled,

        $font-weight: $font-weight,
        $font-weight-over: $font-weight-over,
        $font-weight-focus: $font-weight-focus,
        $font-weight-pressed: $font-weight-pressed,
        $font-weight-focus-over: $font-weight-focus-over,
        $font-weight-focus-pressed: $font-weight-focus-pressed,
        $font-weight-disabled: $font-weight-disabled,

        $font-family: $font-family,
        $font-family-over: $font-family-over,
        $font-family-focus: $font-family-focus,
        $font-family-pressed: $font-family-pressed,
        $font-family-focus-over: $font-family-focus-over,
        $font-family-focus-pressed: $font-family-focus-pressed,
        $font-family-disabled: $font-family-disabled,

        $line-height: $line-height,
        $icon-size: $icon-size,
        $glyph-font-size: $glyph-font-size,
        $icon-spacing: $icon-spacing,
        $glyph-color: $glyph-color,
        $glyph-opacity: $glyph-opacity,
        $arrow-width: $arrow-width,
        $arrow-height: $arrow-height,
        $arrow-glyph: $arrow-glyph,
        $arrow-glyph-color: $arrow-glyph-color,
        $split-width: $split-width,
        $split-height: $split-height,
        $split-line-width: $split-line-width,
        $split-line-color: $split-line-color,
        $include-ui-menu-arrows:  $include-ui-menu-arrows,
        $include-ui-split-arrows: $include-ui-split-arrows,
        $include-split-noline-arrows: $include-split-noline-arrows,
        $include-split-over-arrows: $include-split-over-arrows,
        $opacity-disabled: $opacity-disabled,
        $inner-opacity-disabled: $inner-opacity-disabled
    );
}

/**
 * Creates a visual theme for a {@link #scale small} toolbar Button.
 *
 * @param {string} $ui
 * The name of the UI being created. Can not included spaces or special punctuation
 * (used in CSS class names).
 *
 * @param {number} [$border-radius=$button-small-border-radius]
 * The border-radius of the button
 *
 * @param {number} [$border-width=$button-small-border-width]
 * The border-width of the button
 *
 * @param {color} [$border-color=$button-toolbar-border-color]
 * The border-color of the button
 *
 * @param {color} [$border-color-over=$button-toolbar-border-color-over]
 * The border-color of the button when the cursor is over the button
 *
 * @param {color} [$border-color-focus=$button-toolbar-border-color-focus]
 * The border-color of the button when focused
 *
 * @param {color} [$border-color-pressed=$button-toolbar-border-color-pressed]
 * The border-color of the button when pressed
 *
 * @param {color} [$border-color-focus-over=$button-toolbar-border-color-focus-over]
 * The border-color of the button when the button is focused and the cursor is over the
 * button
 *
 * @param {color} [$border-color-focus-pressed=$button-toolbar-border-color-focus-pressed]
 * The border-color of the button when focused and pressed
 *
 * @param {color} [$border-color-disabled=$button-toolbar-border-color-disabled]
 * The border-color of the button when disabled
 *
 * @param {number} [$padding=$button-small-padding]
 * The amount of padding inside the border of the button on all sides
 *
 * @param {number} [$text-padding=$button-small-text-padding]
 * The amount of horizontal space to add to the left and right of the button text
 *
 * @param {color} [$background-color=$button-toolbar-background-color]
 * The background-color of the button
 *
 * @param {color} [$background-color-over=$button-toolbar-background-color-over]
 * The background-color of the button when the cursor is over the button
 *
 * @param {color} [$background-color-focus=$button-toolbar-background-color-focus]
 * The background-color of the button when focused
 *
 * @param {color} [$background-color-pressed=$button-toolbar-background-color-pressed]
 * The background-color of the button when pressed
 *
 * @param {color} [$background-color-focus-over=$button-toolbar-background-color-focus-over]
 * The background-color of the button when the button is focused and the cursor is over
 * the button
 *
 * @param {color} [$background-color-focus-pressed=$button-toolbar-background-color-focus-pressed]
 * The background-color of the button when focused and pressed
 *
 * @param {color} [$background-color-disabled=$button-toolbar-background-color-disabled]
 * The background-color of the button when disabled
 *
 * @param {string/list} [$background-gradient=$button-toolbar-background-gradient]
 * The background-gradient for the button.  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} [$background-gradient-over=$button-toolbar-background-gradient-over]
 * The background-gradient to use when the cursor is over the button. 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} [$background-gradient-focus=$button-toolbar-background-gradient-focus]
 * The background-gradient to use when the the button is 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} [$background-gradient-pressed=$button-toolbar-background-gradient-pressed]
 * The background-gradient to use when the the button is pressed. 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} [$background-gradient-focus-over=$button-toolbar-background-gradient-focus-over]
 * The background-gradient to use when the the button is focused and the cursor is over
 * the button. 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} [$background-gradient-focus-pressed=$button-toolbar-background-gradient-focus-pressed]
 * The background-gradient to use when the the button is focused and pressed. 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} [$background-gradient-disabled=$button-toolbar-background-gradient-disabled]
 * The background-gradient to use when the the button is disabled. Can be either the name
 * of a predefined gradient or a list of color stops. Used as the `$type` parameter for
 * {@link Global_CSS#background-gradient}.
 *
 * @param {color} [$color=$button-toolbar-color]
 * The text color of the button
 *
 * @param {color} [$color-over=$button-toolbar-color-over]
 * The text color of the button when the cursor is over the button
 *
 * @param {color} [$color-focus=$button-toolbar-color-focus]
 * The text color of the button when the button is focused
 *
 * @param {color} [$color-pressed=$button-toolbar-color-pressed]
 * The text color of the button when the button is pressed
 *
 * @param {color} [$color-focus-over=$button-toolbar-color-focus-over]
 * The text color of the button when the button is focused and the cursor is over the button
 *
 * @param {color} [$color-focus-pressed=$button-toolbar-color-focus-pressed]
 * The text color of the button when the button is focused and pressed
 *
 * @param {color} [$color-disabled=$button-toolbar-color-disabled]
 * The text color of the button when the button is disabled
 *
 * @param {number/list} [$inner-border-width=$button-toolbar-inner-border-width]
 * The inner border-width of the button
 *
 * @param {number/list} [$inner-border-width-over=$button-toolbar-inner-border-width-over]
 * The inner border-width of the button when the cursor is over the button
 *
 * @param {number/list} [$inner-border-width-focus=$button-toolbar-inner-border-width-focus]
 * The inner border-width of the button when focused
 *
 * @param {number/list} [$inner-border-width-pressed=$button-toolbar-inner-border-width-pressed]
 * The inner border-width of the button when pressed
 *
 * @param {number/list} [$inner-border-width-focus-over=$button-toolbar-inner-border-width-focus-over]
 * The inner border-width of the button when the button is focused and the cursor is over
 * the button
 *
 * @param {number/list} [$inner-border-width-focus-pressed=$button-toolbar-inner-border-width-focus-pressed]
 * The inner border-width of the button when focused and pressed
 *
 * @param {number/list} [$inner-border-width-disabled=$button-toolbar-inner-border-width-disabled]
 * The inner border-width of the button when disabled
 *
 * @param {color} [$inner-border-color=$button-toolbar-inner-border-color]
 * The inner border-color of the button
 *
 * @param {color} [$inner-border-color-over=$button-toolbar-inner-border-color-over]
 * The inner border-color of the button when the cursor is over the button
 *
 * @param {color} [$inner-border-color-focus=$button-toolbar-inner-border-color-focus]
 * The inner border-color of the button when focused
 *
 * @param {color} [$inner-border-color-pressed=$button-toolbar-inner-border-color-pressed]
 * The inner border-color of the button when pressed
 *
 * @param {color} [$inner-border-color-focus-over=$button-toolbar-inner-border-color-focus-over]
 * The inner border-color of the button when the button is focused and the cursor is over
 * the button
 *
 * @param {color} [$inner-border-color-focus-pressed=$button-toolbar-inner-border-color-focus-pressed]
 * The inner border-color of the button when focused and pressed
 *
 * @param {color} [$inner-border-color-disabled=$button-toolbar-inner-border-color-disabled]
 * The inner border-color of the button when disabled
 *
 * @param {number} [$body-outline-width-focus=$button-toolbar-body-outline-width-focus]
 * The body outline width of the button when focused
 *
 * @param {number} [$body-outline-style-focus=$button-toolbar-body-outline-style-focus]
 * The body outline-style of the button when focused
 *
 * @param {number} [$body-outline-color-focus=$button-toolbar-body-outline-color-focus]
 * The body outline color of the button when focused
 *
 * @param {number} [$font-size=$button-small-font-size]
 * The font-size of the button
 *
 * @param {number} [$font-size-over=$button-small-font-size-over]
 * The font-size of the button when the cursor is over the button
 *
 * @param {number} [$font-size-focus=$button-small-font-size-focus]
 * The font-size of the button when the button is focused
 *
 * @param {number} [$font-size-pressed=$button-small-font-size-pressed]
 * The font-size of the button when the button is pressed
 *
 * @param {number} [$font-size-focus-over=$button-small-font-size-focus-over]
 * The font-size of the button when the button is focused and the cursor is over the
 * button
 *
 * @param {number} [$font-size-focus-pressed=$button-small-font-size-focus-pressed]
 * The font-size of the button when the button is focused and pressed
 *
 * @param {number} [$font-size-disabled=$button-small-font-size-disabled]
 * The font-size of the button when the button is disabled
 *
 * @param {string} [$font-weight=$button-small-font-weight]
 * The font-weight of the button
 *
 * @param {string} [$font-weight-over=$button-small-font-weight-over]
 * The font-weight of the button when the cursor is over the button
 *
 * @param {string} [$font-weight-focus=$button-small-font-weight-focus]
 * The font-weight of the button when the button is focused
 *
 * @param {string} [$font-weight-pressed=$button-small-font-weight-pressed]
 * The font-weight of the button when the button is pressed
 *
 * @param {string} [$font-weight-focus-over=$button-small-font-weight-focus-over]
 * The font-weight of the button when the button is focused and the cursor is over the
 * button
 *
 * @param {string} [$font-weight-focus-pressed=$button-small-font-weight-focus-pressed]
 * The font-weight of the button when the button is focused and pressed
 *
 * @param {string} [$font-weight-disabled=$button-small-font-weight-disabled]
 * The font-weight of the button when the button is disabled
 *
 * @param {string} [$font-family=$button-small-font-family]
 * The font-family of the button
 *
 * @param {string} [$font-family-over=$button-small-font-family-over]
 * The font-family of the button when the cursor is over the button
 *
 * @param {string} [$font-family-focus=$button-small-font-family-focus]
 * The font-family of the button when the button is focused
 *
 * @param {string} [$font-family-pressed=$button-small-font-family-pressed]
 * The font-family of the button when the button is pressed
 *
 * @param {string} [$font-family-focus-over=$button-small-font-family-focus-over]
 * The font-family of the button when the button is focused and the cursor is over the
 * button
 *
 * @param {string} [$font-family-focus-pressed=$button-small-font-family-focus-pressed]
 * The font-family of the button when the button is focused and pressed
 *
 * @param {string} [$font-family-disabled=$button-small-font-family-disabled]
 * The font-family of the button when the button is disabled
 *
 * @param {number} [$line-height=$button-small-line-height]
 * The line-height of the button text
 *
 * @param {number} [$icon-size=$button-small-icon-size]
 * The size of the button icon
 *
 * @param {number} [$glyph-font-size=$button-small-glyph-font-size]
 * The font-size for the button glyph
 *
 * @param {number} [$icon-spacing=$button-small-icon-spacing]
 * The space between the button's icon and text
 *
 * @param {color} [$glyph-color=$button-toolbar-glyph-color]
 * The color of the button's {@link #glyph} icon
 *
 * @param {number} [$glyph-opacity=$button-toolbar-glyph-opacity]
 * The opacity of the button's {@link #glyph} icon
 *
 * @param {number} [$arrow-width=$button-small-arrow-width]
 * The width of the button's {@link #cfg-menu} arrow
 *
 * @param {number} [$arrow-height=$button-small-arrow-height]
 * The height of the button's {@link #cfg-menu} arrow
 *
 * @param {string/list} [$arrow-glyph=$button-small-arrow-glyph]
 * Glyph for the button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {string/list} [$arrow-glyph-color=$button-toolbar-arrow-glyph-color]
 * Glyph color for the button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {number} [$split-width=$button-small-split-width]
 * The width of a {@link Ext.button.Split Split Button}'s arrow
 *
 * @param {number} [$split-height=$button-small-split-height]
 * The height of a {@link Ext.button.Split Split Button}'s arrow
 *
 * @param {number} [$split-line-width=$button-small-split-line-width]
 * The default width for a {@link Ext.button.Split Split Button}'s line.
 * Themes that include the line in the arrow background image should set this to 0
 *
 * @param {color} [$split-line-color=$button-toolbar-split-line-color]
 * The color for a {@link Ext.button.Split Split Button}'s line.
 * Only applicable when `$split-line-width` is greater than 0.
 *
 * @param {boolean} [$include-ui-menu-arrows=$button-include-ui-menu-arrows]
 * True to include the UI name in the file name of the {@link #cfg-menu}
 * arrow icon. Set this to false to share the same arrow bewteen multiple UIs.
 *
 * @param {boolean} [$include-ui-split-arrows=$button-include-ui-split-arrows]
 * True to include the UI name in the file name of the {@link Ext.button.Split Split Button}'s
 * arrow icon. Set this to false to share the same arrow bewteen multiple UIs.
 *
 * @param {boolean} [$include-split-noline-arrows=$button-toolbar-include-split-noline-arrows]
 * True to add a "-noline" suffix to the file name of the {@link Ext.button.Split Split Button}'s 
 * arrow icon.  Used for hiding the split line when toolbar buttons are in their default
 * state.
 *
 * @param {boolean} [$include-split-over-arrows=$button-include-split-over-arrows]
 * True to use a separate icon for {@link Ext.button.Split Split Button}s when the cursor
 * is over the button.  The over icon file name will have a "-o" suffix
 *
 * @param {number} [$opacity-disabled=$button-toolbar-opacity-disabled]
 * The opacity of the button when it is disabled
 *
 * @param {number} [$inner-opacity-disabled=$button-toolbar-inner-opacity-disabled]
 * The opacity of the button's text and icon elements when when the button is disabled
 * 
 * @member Ext.button.Button
 */
@mixin extjs-button-toolbar-small-ui(
    $ui,

    $border-radius: $button-small-border-radius,
    $border-width: $button-small-border-width,

    $border-color: null,
    $border-color-over: null,
    $border-color-focus: null,
    $border-color-pressed: null,
    $border-color-focus-over: null,
    $border-color-focus-pressed: null,
    $border-color-disabled: null,

    $padding: $button-small-padding,
    $text-padding: $button-small-text-padding,

    $background-color: null,
    $background-color-over: null,
    $background-color-focus: null,
    $background-color-pressed: null,
    $background-color-focus-over: null,
    $background-color-focus-pressed: null,
    $background-color-disabled: null,

    $background-gradient: $button-toolbar-background-gradient,
    $background-gradient-over: $button-toolbar-background-gradient-over,
    $background-gradient-focus: $button-toolbar-background-gradient-focus,
    $background-gradient-pressed: $button-toolbar-background-gradient-pressed,
    $background-gradient-focus-over: $button-toolbar-background-gradient-focus-over,
    $background-gradient-focus-pressed: $button-toolbar-background-gradient-focus-pressed,
    $background-gradient-disabled: $button-toolbar-background-gradient-disabled,

    $color: null,
    $color-over: null,
    $color-focus: null,
    $color-pressed: null,
    $color-focus-over: null,
    $color-focus-pressed: null,
    $color-disabled: null,

    $inner-border-width: null,
    $inner-border-width-over: null,
    $inner-border-width-focus: null,
    $inner-border-width-pressed: null,
    $inner-border-width-focus-over: null,
    $inner-border-width-focus-pressed: null,
    $inner-border-width-disabled: null,

    $inner-border-color: null,
    $inner-border-color-over: null,
    $inner-border-color-focus: null,
    $inner-border-color-pressed: null,
    $inner-border-color-focus-over: null,
    $inner-border-color-focus-pressed: null,
    $inner-border-color-disabled: null,

    $body-outline-width-focus: $button-toolbar-body-outline-width-focus,
    $body-outline-style-focus: $button-toolbar-body-outline-style-focus,
    $body-outline-color-focus: $button-toolbar-body-outline-color-focus,

    $font-size: null,
    $font-size-over: null,
    $font-size-focus: null,
    $font-size-pressed: null,
    $font-size-focus-over: null,
    $font-size-focus-pressed: null,
    $font-size-disabled: null,

    $font-weight: null,
    $font-weight-over: null,
    $font-weight-focus: null,
    $font-weight-pressed: null,
    $font-weight-focus-over: null,
    $font-weight-focus-pressed: null,
    $font-weight-disabled: null,

    $font-family: null,
    $font-family-over: null,
    $font-family-focus: null,
    $font-family-pressed: null,
    $font-family-focus-over: null,
    $font-family-focus-pressed: null,
    $font-family-disabled: null,

    $line-height: $button-small-line-height,
    $icon-size: $button-small-icon-size,
    $glyph-font-size: $button-small-glyph-font-size,
    $icon-spacing: $button-small-icon-spacing,
    $glyph-color: $button-toolbar-glyph-color,
    $glyph-opacity: $button-toolbar-glyph-opacity,
    $arrow-width: $button-small-arrow-width,
    $arrow-height: $button-small-arrow-height,
    $arrow-glyph: $button-small-arrow-glyph,
    $arrow-glyph-color: $button-toolbar-arrow-glyph-color,
    $split-width: $button-small-split-width,
    $split-height: $button-small-split-height,
    $split-line-width: $button-small-split-line-width,
    $split-line-color: $button-toolbar-split-line-color,
    $include-ui-menu-arrows:  $button-include-ui-menu-arrows,
    $include-ui-split-arrows: $button-include-ui-split-arrows,
    $include-split-noline-arrows: $button-toolbar-include-split-noline-arrows,
    $include-split-over-arrows: $button-include-split-over-arrows,
    $opacity-disabled: $button-toolbar-opacity-disabled,
    $inner-opacity-disabled: $button-toolbar-inner-opacity-disabled
) {
    @if $border-color == null {
        $border-color: $button-toolbar-border-color;

        @if $border-color-over == null {
            $border-color-over: $button-toolbar-border-color-over;
        }

        @if $border-color-focus == null {
            $border-color-focus: $button-toolbar-border-color-focus;
        }

        @if $border-color-pressed == null {
            $border-color-pressed: $button-toolbar-border-color-pressed;
        }

        @if $border-color-focus-over == null {
            $border-color-focus-over: $button-toolbar-border-color-focus-over;
        }

        @if $border-color-focus-pressed == null {
            $border-color-focus-pressed: $button-toolbar-border-color-focus-pressed;
        }

        @if $border-color-disabled == null {
            $border-color-disabled: $button-toolbar-border-color-disabled;
        }
    } @else {
        @if $border-color-over == null {
            $border-color-over: button-toolbar-border-color-over($border-color);
        }

        @if $border-color-focus == null {
            $border-color-focus: button-toolbar-border-color-focus($border-color);
        }

        @if $border-color-pressed == null {
            $border-color-pressed: button-toolbar-border-color-pressed($border-color);
        }

        @if $border-color-focus-over == null {
            $border-color-focus-over: $border-color-over;
        }

        @if $border-color-focus-pressed == null {
            $border-color-focus-pressed: $border-color-pressed;
        }

        @if $border-color-disabled == null {
            $border-color-disabled: button-toolbar-border-color-disabled($border-color);
        }
    }

    @if $background-color == null {
        $background-color: $button-toolbar-background-color;

        @if $background-color-over == null {
            $background-color-over: $button-toolbar-background-color-over;
        }

        @if $background-color-focus == null {
            $background-color-focus: $button-toolbar-background-color-focus;
        }

        @if $background-color-pressed == null {
            $background-color-pressed: $button-toolbar-background-color-pressed;
        }

        @if $background-color-focus-over == null {
            $background-color-focus-over: $button-toolbar-background-color-focus-over;
        }

        @if $background-color-focus-pressed == null {
            $background-color-focus-pressed: $button-toolbar-background-color-focus-pressed;
        }

        @if $background-color-disabled == null {
            $background-color-disabled: $button-toolbar-background-color-disabled;
        }
    } @else {
        @if $background-color-over == null {
            $background-color-over: button-toolbar-background-color-over($background-color);
        }

        @if $background-color-focus == null {
            $background-color-focus: button-toolbar-background-color-focus($background-color);
        }

        @if $background-color-pressed == null {
            $background-color-pressed: button-toolbar-background-color-pressed($background-color);
        }

        @if $background-color-focus-over == null {
            $background-color-focus-over: $background-color-over;
        }

        @if $background-color-focus-pressed == null {
            $background-color-focus-pressed: $background-color-pressed;
        }

        @if $background-color-disabled == null {
            $background-color-disabled: button-toolbar-background-color-disabled($background-color);
        }
    }

    @if $color == null {
        $color: $button-toolbar-color;

        @if $color-over == null {
            $color-over: $button-toolbar-color-over;
        }

        @if $color-focus == null {
            $color-focus: $button-toolbar-color-focus;
        }

        @if $color-pressed == null {
            $color-pressed: $button-toolbar-color-pressed;
        }

        @if $color-focus-over == null {
            $color-focus-over: $button-toolbar-color-focus-over;
        }

        @if $color-focus-pressed == null {
            $color-focus-pressed: $button-toolbar-color-focus-pressed;
        }

        @if $color-disabled == null {
            $color-disabled: $button-toolbar-color-disabled;
        }
    } @else {
        @if $color-over == null {
            $color-over: button-toolbar-color-over($color);
        }

        @if $color-focus == null {
            $color-focus: button-toolbar-color-focus($color);
        }

        @if $color-pressed == null {
            $color-pressed: button-toolbar-color-pressed($color);
        }

        @if $color-focus-over == null {
            $color-focus-over: $color-over;
        }

        @if $color-focus-pressed == null {
            $color-focus-pressed: $color-pressed;
        }

        @if $color-disabled == null {
            $color-disabled: button-toolbar-color-disabled($color);
        }
    }

    @if $inner-border-width == null {
        $inner-border-width: $button-toolbar-inner-border-width;

        @if $inner-border-width-over == null {
            $inner-border-width-over: $button-toolbar-inner-border-width-over;
        }

        @if $inner-border-width-focus == null {
            $inner-border-width-focus: $button-toolbar-inner-border-width-focus;
        }

        @if $inner-border-width-pressed == null {
            $inner-border-width-pressed: $button-toolbar-inner-border-width-pressed;
        }

        @if $inner-border-width-focus-over == null {
            $inner-border-width-focus-over: $button-toolbar-inner-border-width-focus-over;
        }

        @if $inner-border-width-focus-pressed == null {
            $inner-border-width-focus-pressed: $button-toolbar-inner-border-width-focus-pressed;
        }

        @if $inner-border-width-disabled == null {
            $inner-border-width-disabled: $button-toolbar-inner-border-width-disabled;
        }
    } @else {
        @if $inner-border-width-over == null {
            $inner-border-width-over: $inner-border-width;
        }

        @if $inner-border-width-focus == null {
            $inner-border-width-focus: $inner-border-width;
        }

        @if $inner-border-width-pressed == null {
            $inner-border-width-pressed: $inner-border-width;
        }

        @if $inner-border-width-focus-over == null {
            $inner-border-width-focus-over: $inner-border-width-over;
        }

        @if $inner-border-width-focus-pressed == null {
            $inner-border-width-focus-pressed: $inner-border-width-pressed;
        }

        @if $inner-border-width-disabled == null {
            $inner-border-width-disabled: $inner-border-width;
        }
    }

    @if $inner-border-color == null {
        $inner-border-color: $button-toolbar-inner-border-color;

        @if $inner-border-color-over == null {
            $inner-border-color-over: $button-toolbar-inner-border-color-over;
        }

        @if $inner-border-color-focus == null {
            $inner-border-color-focus: $button-toolbar-inner-border-color-focus;
        }

        @if $inner-border-color-pressed == null {
            $inner-border-color-pressed: $button-toolbar-inner-border-color-pressed;
        }

        @if $inner-border-color-focus-over == null {
            $inner-border-color-focus-over: $button-toolbar-inner-border-color-focus-over;
        }

        @if $inner-border-color-focus-pressed == null {
            $inner-border-color-focus-pressed: $button-toolbar-inner-border-color-focus-pressed;
        }

        @if $inner-border-color-disabled == null {
            $inner-border-color-disabled: $button-toolbar-inner-border-color-disabled;
        }
    } @else {
        @if $inner-border-color-over == null {
            $inner-border-color-over: button-toolbar-inner-border-color-over($background-color-over, $color-over);
        }

        @if $inner-border-color-focus == null {
            $inner-border-color-focus: button-toolbar-inner-border-color-focus($background-color-focus, $color-focus);
        }

        @if $inner-border-color-pressed == null {
            $inner-border-color-pressed: button-toolbar-inner-border-color-pressed($background-color-pressed, $color-pressed);
        }

        @if $inner-border-color-focus-over == null {
            $inner-border-color-focus-over: button-toolbar-inner-border-color-focus-over($background-color-focus-over, $color-focus-over);
        }

        @if $inner-border-color-focus-pressed == null {
            $inner-border-color-focus-pressed: button-toolbar-inner-border-color-focus-pressed($background-color-focus-pressed, $color-focus-pressed)
        }

        @if $inner-border-color-disabled == null {
            $inner-border-color-disabled: button-toolbar-inner-border-color-disabled($background-color-disabled, $color-disabled);
        }
    }

    @if $font-size == null {
        $font-size: $button-small-font-size;

        @if $font-size-over == null {
            $font-size-over: $button-small-font-size-over;
        }

        @if $font-size-focus == null {
            $font-size-focus: $button-small-font-size-focus;
        }

        @if $font-size-pressed == null {
            $font-size-pressed: $button-small-font-size-pressed;
        }

        @if $font-size-focus-over == null {
            $font-size-focus-over: $button-small-font-size-focus-over;
        }

        @if $font-size-focus-pressed == null {
            $font-size-focus-pressed: $button-small-font-size-focus-pressed;
        }

        @if $font-size-disabled == null {
            $font-size-disabled: $button-small-font-size-disabled;
        }
    } @else {
        @if $font-size-over == null {
            $font-size-over: $font-size;
        }

        @if $font-size-focus == null {
            $font-size-focus: $font-size;
        }

        @if $font-size-pressed == null {
            $font-size-pressed: $font-size;
        }

        @if $font-size-focus-over == null {
            $font-size-focus-over: $font-size-over;
        }

        @if $font-size-focus-pressed == null {
            $font-size-focus-pressed: $font-size-pressed;
        }

        @if $font-size-disabled == null {
            $font-size-disabled: $font-size;
        }
    }

    @if $font-weight == null {
        $font-weight: $button-small-font-weight;

        @if $font-weight-over == null {
            $font-weight-over: $button-small-font-weight-over;
        }

        @if $font-weight-focus == null {
            $font-weight-focus: $button-small-font-weight-focus;
        }

        @if $font-weight-pressed == null {
            $font-weight-pressed: $button-small-font-weight-pressed;
        }

        @if $font-weight-focus-over == null {
            $font-weight-focus-over: $button-small-font-weight-focus-over;
        }

        @if $font-weight-focus-pressed == null {
            $font-weight-focus-pressed: $button-small-font-weight-focus-pressed;
        }

        @if $font-weight-disabled == null {
            $font-weight-disabled: $button-small-font-weight-disabled;
        }
    } @else {
        @if $font-weight-over == null {
            $font-weight-over: $font-weight;
        }

        @if $font-weight-focus == null {
            $font-weight-focus: $font-weight;
        }

        @if $font-weight-pressed == null {
            $font-weight-pressed: $font-weight;
        }

        @if $font-weight-focus-over == null {
            $font-weight-focus-over: $font-weight-over;
        }

        @if $font-weight-focus-pressed == null {
            $font-weight-focus-pressed: $font-weight-pressed;
        }

        @if $font-weight-disabled == null {
            $font-weight-disabled: $font-weight;
        }
    }

    @if $font-family == null {
        $font-family: $button-small-font-family;

        @if $font-family-over == null {
            $font-family-over: $button-small-font-family-over;
        }

        @if $font-family-focus == null {
            $font-family-focus: $button-small-font-family-focus;
        }

        @if $font-family-pressed == null {
            $font-family-pressed: $button-small-font-family-pressed;
        }

        @if $font-family-focus-over == null {
            $font-family-focus-over: $button-small-font-family-focus-over;
        }

        @if $font-family-focus-pressed == null {
            $font-family-focus-pressed: $button-small-font-family-focus-pressed;
        }

        @if $font-family-disabled == null {
            $font-family-disabled: $button-small-font-family-disabled;
        }
    } @else {
        @if $font-family-over == null {
            $font-family-over: $font-family;
        }

        @if $font-family-focus == null {
            $font-family-focus: $font-family;
        }

        @if $font-family-pressed == null {
            $font-family-pressed: $font-family;
        }

        @if $font-family-focus-over == null {
            $font-family-focus-over: $font-family-over;
        }

        @if $font-family-focus-pressed == null {
            $font-family-focus-pressed: $font-family-pressed;
        }

        @if $font-family-disabled == null {
            $font-family-disabled: $font-family;
        }
    }

    @include extjs-button-ui(
        $ui: '#{$ui}-toolbar-small',

        $border-radius: $border-radius,
        $border-width: $border-width,

        $border-color: $border-color,
        $border-color-over: $border-color-over,
        $border-color-focus: $border-color-focus,
        $border-color-pressed: $border-color-pressed,
        $border-color-focus-over: $border-color-focus-over,
        $border-color-focus-pressed: $border-color-focus-pressed,
        $border-color-disabled: $border-color-disabled,

        $padding: $padding,
        $text-padding: $text-padding,

        $background-color: $background-color,
        $background-color-over: $background-color-over,
        $background-color-focus: $background-color-focus,
        $background-color-pressed: $background-color-pressed,
        $background-color-focus-over: $background-color-focus-over,
        $background-color-focus-pressed: $background-color-focus-pressed,
        $background-color-disabled: $background-color-disabled,

        $background-gradient: $background-gradient,
        $background-gradient-over: $background-gradient-over,
        $background-gradient-focus: $background-gradient-focus,
        $background-gradient-pressed: $background-gradient-pressed,
        $background-gradient-focus-over: $background-gradient-focus-over,
        $background-gradient-focus-pressed: $background-gradient-focus-pressed,
        $background-gradient-disabled: $background-gradient-disabled,

        $color: $color,
        $color-over: $color-over,
        $color-focus: $color-focus,
        $color-pressed: $color-pressed,
        $color-focus-over: $color-focus-over,
        $color-focus-pressed: $color-focus-pressed,
        $color-disabled: $color-disabled,

        $inner-border-width: $inner-border-width,
        $inner-border-width-over: $inner-border-width-over,
        $inner-border-width-focus: $inner-border-width-focus,
        $inner-border-width-pressed: $inner-border-width-pressed,
        $inner-border-width-focus-over: $inner-border-width-focus-over,
        $inner-border-width-focus-pressed: $inner-border-width-focus-pressed,
        $inner-border-width-disabled: $inner-border-width-disabled,

        $inner-border-color: $inner-border-color,
        $inner-border-color-over: $inner-border-color-over,
        $inner-border-color-focus: $inner-border-color-focus,
        $inner-border-color-pressed: $inner-border-color-pressed,
        $inner-border-color-focus-over: $inner-border-color-focus-over,
        $inner-border-color-focus-pressed: $inner-border-color-focus-pressed,
        $inner-border-color-disabled: $inner-border-color-disabled,

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

        $font-size: $font-size,
        $font-size-over: $font-size-over,
        $font-size-focus: $font-size-focus,
        $font-size-pressed: $font-size-pressed,
        $font-size-focus-over: $font-size-focus-over,
        $font-size-focus-pressed: $font-size-focus-pressed,
        $font-size-disabled: $font-size-disabled,

        $font-weight: $font-weight,
        $font-weight-over: $font-weight-over,
        $font-weight-focus: $font-weight-focus,
        $font-weight-pressed: $font-weight-pressed,
        $font-weight-focus-over: $font-weight-focus-over,
        $font-weight-focus-pressed: $font-weight-focus-pressed,
        $font-weight-disabled: $font-weight-disabled,

        $font-family: $font-family,
        $font-family-over: $font-family-over,
        $font-family-focus: $font-family-focus,
        $font-family-pressed: $font-family-pressed,
        $font-family-focus-over: $font-family-focus-over,
        $font-family-focus-pressed: $font-family-focus-pressed,
        $font-family-disabled: $font-family-disabled,

        $line-height: $line-height,
        $icon-size: $icon-size,
        $glyph-font-size: $glyph-font-size,
        $icon-spacing: $icon-spacing,
        $glyph-color: $glyph-color,
        $glyph-opacity: $glyph-opacity,
        $arrow-width: $arrow-width,
        $arrow-height: $arrow-height,
        $arrow-glyph: $arrow-glyph,
        $arrow-glyph-color: $arrow-glyph-color,
        $split-width: $split-width,
        $split-height: $split-height,
        $split-line-width: $split-line-width,
        $split-line-color: $split-line-color,
        $include-ui-menu-arrows:  $include-ui-menu-arrows,
        $include-ui-split-arrows: $include-ui-split-arrows,
        $include-split-noline-arrows: $include-split-noline-arrows,
        $include-split-over-arrows: $include-split-over-arrows,
        $opacity-disabled: $opacity-disabled,
        $inner-opacity-disabled: $inner-opacity-disabled
    );
}

/**
 * Creates a visual theme for a {@link #scale medium} Button.
 *
 * @param {string} $ui
 * The name of the UI being created. Can not included spaces or special punctuation
 * (used in CSS class names).
 *
 * @param {number} [$border-radius=$button-medium-border-radius]
 * The border-radius of the button
 *
 * @param {number} [$border-width=$button-medium-border-width]
 * The border-width of the button
 *
 * @param {color} [$border-color=$button-default-border-color]
 * The border-color of the button
 *
 * @param {color} [$border-color-over=$button-default-border-color-over]
 * The border-color of the button when the cursor is over the button
 *
 * @param {color} [$border-color-focus=$button-default-border-color-focus]
 * The border-color of the button when focused
 *
 * @param {color} [$border-color-pressed=$button-default-border-color-pressed]
 * The border-color of the button when pressed
 *
 * @param {color} [$border-color-focus-over=$button-default-border-color-focus-over]
 * The border-color of the button when the button is focused and the cursor is over the
 * button
 *
 * @param {color} [$border-color-focus-pressed=$button-default-border-color-focus-pressed]
 * The border-color of the button when focused and pressed
 *
 * @param {color} [$border-color-disabled=$button-default-border-color-disabled]
 * The border-color of the button when disabled
 *
 * @param {number} [$padding=$button-medium-padding]
 * The amount of padding inside the border of the button on all sides
 *
 * @param {number} [$text-padding=$button-medium-text-padding]
 * The amount of horizontal space to add to the left and right of the button text
 *
 * @param {color} [$background-color=$button-default-background-color]
 * The background-color of the button
 *
 * @param {color} [$background-color-over=$button-default-background-color-over]
 * The background-color of the button when the cursor is over the button
 *
 * @param {color} [$background-color-focus=$button-default-background-color-focus]
 * The background-color of the button when focused
 *
 * @param {color} [$background-color-pressed=$button-default-background-color-pressed]
 * The background-color of the button when pressed
 *
 * @param {color} [$background-color-focus-over=$button-default-background-color-focus-over]
 * The background-color of the button when the button is focused and the cursor is over
 * the button
 *
 * @param {color} [$background-color-focus-pressed=$button-default-background-color-focus-pressed]
 * The background-color of the button when focused and pressed
 *
 * @param {color} [$background-color-disabled=$button-default-background-color-disabled]
 * The background-color of the button when disabled
 *
 * @param {string/list} [$background-gradient=$button-default-background-gradient]
 * The background-gradient for the button.  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} [$background-gradient-over=$button-default-background-gradient-over]
 * The background-gradient to use when the cursor is over the button. 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} [$background-gradient-focus=$button-default-background-gradient-focus]
 * The background-gradient to use when the the button is 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} [$background-gradient-pressed=$button-default-background-gradient-pressed]
 * The background-gradient to use when the the button is pressed. 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} [$background-gradient-focus-over=$button-default-background-gradient-focus-over]
 * The background-gradient to use when the the button is focused and the cursor is over
 * the button. 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} [$background-gradient-focus-pressed=$button-default-background-gradient-focus-pressed]
 * The background-gradient to use when the the button is focused and pressed. 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} [$background-gradient-disabled=$button-default-background-gradient-disabled]
 * The background-gradient to use when the the button is disabled. Can be either the name
 * of a predefined gradient or a list of color stops. Used as the `$type` parameter for
 * {@link Global_CSS#background-gradient}.
 *
 * @param {color} [$color=$button-default-color]
 * The text color of the button
 *
 * @param {color} [$color-over=$button-default-color-over]
 * The text color of the button when the cursor is over the button
 *
 * @param {color} [$color-focus=$button-default-color-focus]
 * The text color of the button when the button is focused
 *
 * @param {color} [$color-pressed=$button-default-color-pressed]
 * The text color of the button when the button is pressed
 *
 * @param {color} [$color-focus-over=$button-default-color-focus-over]
 * The text color of the button when the button is focused and the cursor is over the button
 *
 * @param {color} [$color-focus-pressed=$button-default-color-focus-pressed]
 * The text color of the button when the button is focused and pressed
 *
 * @param {color} [$color-disabled=$button-default-color-disabled]
 * The text color of the button when the button is disabled
 *
 * @param {number/list} [$inner-border-width=$button-default-inner-border-width]
 * The inner border-width of the button
 *
 * @param {number/list} [$inner-border-width-over=$button-default-inner-border-width-over]
 * The inner border-width of the button when the cursor is over the button
 *
 * @param {number/list} [$inner-border-width-focus=$button-default-inner-border-width-focus]
 * The inner border-width of the button when focused
 *
 * @param {number/list} [$inner-border-width-pressed=$button-default-inner-border-width-pressed]
 * The inner border-width of the button when pressed
 *
 * @param {number/list} [$inner-border-width-focus-over=$button-default-inner-border-width-focus-over]
 * The inner border-width of the button when the button is focused and the cursor is over
 * the button
 *
 * @param {number/list} [$inner-border-width-focus-pressed=$button-default-inner-border-width-focus-pressed]
 * The inner border-width of the button when focused and pressed
 *
 * @param {number/list} [$inner-border-width-disabled=$button-default-inner-border-width-disabled]
 * The inner border-width of the button when disabled
 *
 * @param {color} [$inner-border-color=$button-default-inner-border-color]
 * The inner border-color of the button
 *
 * @param {color} [$inner-border-color-over=$button-default-inner-border-color-over]
 * The inner border-color of the button when the cursor is over the button
 *
 * @param {color} [$inner-border-color-focus=$button-default-inner-border-color-focus]
 * The inner border-color of the button when focused
 *
 * @param {color} [$inner-border-color-pressed=$button-default-inner-border-color-pressed]
 * The inner border-color of the button when pressed
 *
 * @param {color} [$inner-border-color-focus-over=$button-default-inner-border-color-focus-over]
 * The inner border-color of the button when the button is focused and the cursor is over
 * the button
 *
 * @param {color} [$inner-border-color-focus-pressed=$button-default-inner-border-color-focus-pressed]
 * The inner border-color of the button when focused and pressed
 *
 * @param {color} [$inner-border-color-disabled=$button-default-inner-border-color-disabled]
 * The inner border-color of the button when disabled
 *
 * @param {number} [$body-outline-width-focus=$button-default-body-outline-width-focus]
 * The body outline width of the button when focused
 *
 * @param {number} [$body-outline-style-focus=$button-default-body-outline-style-focus]
 * The body outline-style of the button when focused
 *
 * @param {number} [$body-outline-color-focus=$button-default-body-outline-color-focus]
 * The body outline color of the button when focused
 *
 * @param {number} [$font-size=$button-medium-font-size]
 * The font-size of the button
 *
 * @param {number} [$font-size-over=$button-medium-font-size-over]
 * The font-size of the button when the cursor is over the button
 *
 * @param {number} [$font-size-focus=$button-medium-font-size-focus]
 * The font-size of the button when the button is focused
 *
 * @param {number} [$font-size-pressed=$button-medium-font-size-pressed]
 * The font-size of the button when the button is pressed
 *
 * @param {number} [$font-size-focus-over=$button-medium-font-size-focus-over]
 * The font-size of the button when the button is focused and the cursor is over the
 * button
 *
 * @param {number} [$font-size-focus-pressed=$button-medium-font-size-focus-pressed]
 * The font-size of the button when the button is focused and pressed
 *
 * @param {number} [$font-size-disabled=$button-medium-font-size-disabled]
 * The font-size of the button when the button is disabled
 *
 * @param {string} [$font-weight=$button-medium-font-weight]
 * The font-weight of the button
 *
 * @param {string} [$font-weight-over=$button-medium-font-weight-over]
 * The font-weight of the button when the cursor is over the button
 *
 * @param {string} [$font-weight-focus=$button-medium-font-weight-focus]
 * The font-weight of the button when the button is focused
 *
 * @param {string} [$font-weight-pressed=$button-medium-font-weight-pressed]
 * The font-weight of the button when the button is pressed
 *
 * @param {string} [$font-weight-focus-over=$button-medium-font-weight-focus-over]
 * The font-weight of the button when the button is focused and the cursor is over the
 * button
 *
 * @param {string} [$font-weight-focus-pressed=$button-medium-font-weight-focus-pressed]
 * The font-weight of the button when the button is focused and pressed
 *
 * @param {string} [$font-weight-disabled=$button-medium-font-weight-disabled]
 * The font-weight of the button when the button is disabled
 *
 * @param {string} [$font-family=$button-medium-font-family]
 * The font-family of the button
 *
 * @param {string} [$font-family-over=$button-medium-font-family-over]
 * The font-family of the button when the cursor is over the button
 *
 * @param {string} [$font-family-focus=$button-medium-font-family-focus]
 * The font-family of the button when the button is focused
 *
 * @param {string} [$font-family-pressed=$button-medium-font-family-pressed]
 * The font-family of the button when the button is pressed
 *
 * @param {string} [$font-family-focus-over=$button-medium-font-family-focus-over]
 * The font-family of the button when the button is focused and the cursor is over the
 * button
 *
 * @param {string} [$font-family-focus-pressed=$button-medium-font-family-focus-pressed]
 * The font-family of the button when the button is focused and pressed
 *
 * @param {string} [$font-family-disabled=$button-medium-font-family-disabled]
 * The font-family of the button when the button is disabled
 *
 * @param {number} [$line-height=$button-medium-line-height]
 * The line-height of the button text
 *
 * @param {number} [$icon-size=$button-medium-icon-size]
 * The size of the button icon
 *
 * @param {number} [$glyph-font-size=$button-medium-glyph-font-size]
 * The font-size for the button glyph
 *
 * @param {number} [$icon-spacing=$button-medium-icon-spacing]
 * The space between the button's icon and text
 *
 * @param {color} [$glyph-color=$button-default-glyph-color]
 * The color of the button's {@link #glyph} icon
 *
 * @param {number} [$glyph-opacity=$button-default-glyph-opacity]
 * The opacity of the button's {@link #glyph} icon
 *
 * @param {number} [$arrow-width=$button-medium-arrow-width]
 * The width of the button's {@link #cfg-menu} arrow
 *
 * @param {number} [$arrow-height=$button-medium-arrow-height]
 * The height of the button's {@link #cfg-menu} arrow
 *
 * @param {string/list} [$arrow-glyph=$button-medium-arrow-glyph]
 * Glyph for the button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {string/list} [$arrow-glyph-color=$button-default-arrow-glyph-color]
 * Glyph color for the button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {number} [$split-width=$button-medium-split-width]
 * The width of a {@link Ext.button.Split Split Button}'s arrow
 *
 * @param {number} [$split-height=$button-medium-split-height]
 * The height of a {@link Ext.button.Split Split Button}'s arrow
 *
 * @param {number} [$split-line-width=$button-medium-split-line-width]
 * The default width for a {@link Ext.button.Split Split Button}'s line.
 * Themes that include the line in the arrow background image should set this to 0
 *
 * @param {color} [$split-line-color=$button-default-split-line-color]
 * The color for a {@link Ext.button.Split Split Button}'s line.
 * Only applicable when `$split-line-width` is greater than 0.
 *
 * @param {boolean} [$include-ui-menu-arrows=$button-include-ui-menu-arrows]
 * True to include the UI name in the file name of the {@link #cfg-menu}
 * arrow icon. Set this to false to share the same arrow bewteen multiple UIs.
 *
 * @param {boolean} [$include-ui-split-arrows=$button-include-ui-split-arrows]
 * True to include the UI name in the file name of the {@link Ext.button.Split Split Button}'s
 * arrow icon. Set this to false to share the same arrow bewteen multiple UIs.
 *
 * @param {boolean} [$include-split-noline-arrows=$button-include-split-noline-arrows]
 * True to add a "-noline" suffix to the file name of the {@link Ext.button.Split Split Button}'s 
 * arrow icon.  Used for hiding the split line when toolbar buttons are in their default
 * state.
 *
 * @param {boolean} [$include-split-over-arrows=$button-include-split-over-arrows]
 * True to use a separate icon for {@link Ext.button.Split Split Button}s when the cursor
 * is over the button.  The over icon file name will have a "-o" suffix
 *
 * @param {number} [$opacity-disabled=$button-opacity-disabled]
 * The opacity of the button when it is disabled
 *
 * @param {number} [$inner-opacity-disabled=$button-inner-opacity-disabled]
 * The opacity of the button's text and icon elements when when the button is disabled
 * 
 * @member Ext.button.Button
 */
@mixin extjs-button-medium-ui(
    $ui,

    $border-radius: $button-medium-border-radius,
    $border-width: $button-medium-border-width,

    $border-color: null,
    $border-color-over: null,
    $border-color-focus: null,
    $border-color-pressed: null,
    $border-color-focus-over: null,
    $border-color-focus-pressed: null,
    $border-color-disabled: null,

    $padding: $button-medium-padding,
    $text-padding: $button-medium-text-padding,

    $background-color: null,
    $background-color-over: null,
    $background-color-focus: null,
    $background-color-pressed: null,
    $background-color-focus-over: null,
    $background-color-focus-pressed: null,
    $background-color-disabled: null,

    $background-gradient: $button-default-background-gradient,
    $background-gradient-over: $button-default-background-gradient-over,
    $background-gradient-focus: $button-default-background-gradient-focus,
    $background-gradient-pressed: $button-default-background-gradient-pressed,
    $background-gradient-focus-over: $button-default-background-gradient-focus-over,
    $background-gradient-focus-pressed: $button-default-background-gradient-focus-pressed,
    $background-gradient-disabled: $button-default-background-gradient-disabled,

    $color: null,
    $color-over: null,
    $color-focus: null,
    $color-pressed: null,
    $color-focus-over: null,
    $color-focus-pressed: null,
    $color-disabled: null,

    $inner-border-width: null,
    $inner-border-width-over: null,
    $inner-border-width-focus: null,
    $inner-border-width-pressed: null,
    $inner-border-width-focus-over: null,
    $inner-border-width-focus-pressed: null,
    $inner-border-width-disabled: null,

    $inner-border-color: null,
    $inner-border-color-over: null,
    $inner-border-color-focus: null,
    $inner-border-color-pressed: null,
    $inner-border-color-focus-over: null,
    $inner-border-color-focus-pressed: null,
    $inner-border-color-disabled: null,

    $body-outline-width-focus: $button-default-body-outline-width-focus,
    $body-outline-style-focus: $button-default-body-outline-style-focus,
    $body-outline-color-focus: $button-default-body-outline-color-focus,

    $font-size: null,
    $font-size-over: null,
    $font-size-focus: null,
    $font-size-pressed: null,
    $font-size-focus-over: null,
    $font-size-focus-pressed: null,
    $font-size-disabled: null,

    $font-weight: null,
    $font-weight-over: null,
    $font-weight-focus: null,
    $font-weight-pressed: null,
    $font-weight-focus-over: null,
    $font-weight-focus-pressed: null,
    $font-weight-disabled: null,

    $font-family: null,
    $font-family-over: null,
    $font-family-focus: null,
    $font-family-pressed: null,
    $font-family-focus-over: null,
    $font-family-focus-pressed: null,
    $font-family-disabled: null,

    $line-height: $button-medium-line-height,
    $icon-size: $button-medium-icon-size,
    $glyph-font-size: $button-medium-glyph-font-size,
    $icon-spacing: $button-medium-icon-spacing,
    $glyph-color: $button-default-glyph-color,
    $glyph-opacity: $button-default-glyph-opacity,
    $arrow-width: $button-medium-arrow-width,
    $arrow-height: $button-medium-arrow-height,
    $arrow-glyph: $button-medium-arrow-glyph,
    $arrow-glyph-color: $button-default-arrow-glyph-color,
    $split-width: $button-medium-split-width,
    $split-height: $button-medium-split-height,
    $split-line-width: $button-medium-split-line-width,
    $split-line-color: $button-default-split-line-color,
    $include-ui-menu-arrows:  $button-include-ui-menu-arrows,
    $include-ui-split-arrows: $button-include-ui-split-arrows,
    $include-split-noline-arrows: $button-include-split-noline-arrows,
    $include-split-over-arrows: $button-include-split-over-arrows,
    $opacity-disabled: $button-opacity-disabled,
    $inner-opacity-disabled: $button-inner-opacity-disabled
) {
    @if $border-color == null {
        $border-color: $button-default-border-color;

        @if $border-color-over == null {
            $border-color-over: $button-default-border-color-over;
        }

        @if $border-color-focus == null {
            $border-color-focus: $button-default-border-color-focus;
        }

        @if $border-color-pressed == null {
            $border-color-pressed: $button-default-border-color-pressed;
        }

        @if $border-color-focus-over == null {
            $border-color-focus-over: $button-default-border-color-focus-over;
        }

        @if $border-color-focus-pressed == null {
            $border-color-focus-pressed: $button-default-border-color-focus-pressed;
        }

        @if $border-color-disabled == null {
            $border-color-disabled: $button-default-border-color-disabled;
        }
    } @else {
        @if $border-color-over == null {
            $border-color-over: button-default-border-color-over($border-color);
        }

        @if $border-color-focus == null {
            $border-color-focus: button-default-border-color-focus($border-color);
        }

        @if $border-color-pressed == null {
            $border-color-pressed: button-default-border-color-pressed($border-color);
        }

        @if $border-color-focus-over == null {
            $border-color-focus-over: $border-color-over;
        }

        @if $border-color-focus-pressed == null {
            $border-color-focus-pressed: $border-color-pressed;
        }

        @if $border-color-disabled == null {
            $border-color-disabled: button-default-border-color-disabled($border-color);
        }
    }

    @if $background-color == null {
        $background-color: $button-default-background-color;

        @if $background-color-over == null {
            $background-color-over: $button-default-background-color-over;
        }

        @if $background-color-focus == null {
            $background-color-focus: $button-default-background-color-focus;
        }

        @if $background-color-pressed == null {
            $background-color-pressed: $button-default-background-color-pressed;
        }

        @if $background-color-focus-over == null {
            $background-color-focus-over: $button-default-background-color-focus-over;
        }

        @if $background-color-focus-pressed == null {
            $background-color-focus-pressed: $button-default-background-color-focus-pressed;
        }

        @if $background-color-disabled == null {
            $background-color-disabled: $button-default-background-color-disabled;
        }
    } @else {
        @if $background-color-over == null {
            $background-color-over: button-default-background-color-over($background-color);
        }

        @if $background-color-focus == null {
            $background-color-focus: button-default-background-color-focus($background-color);
        }

        @if $background-color-pressed == null {
            $background-color-pressed: button-default-background-color-pressed($background-color);
        }

        @if $background-color-focus-over == null {
            $background-color-focus-over: $background-color-over;
        }

        @if $background-color-focus-pressed == null {
            $background-color-focus-pressed: $background-color-pressed;
        }

        @if $background-color-disabled == null {
            $background-color-disabled: button-default-background-color-disabled($background-color);
        }
    }

    @if $color == null {
        $color: $button-default-color;

        @if $color-over == null {
            $color-over: $button-default-color-over;
        }

        @if $color-focus == null {
            $color-focus: $button-default-color-focus;
        }

        @if $color-pressed == null {
            $color-pressed: $button-default-color-pressed;
        }

        @if $color-focus-over == null {
            $color-focus-over: $button-default-color-focus-over;
        }

        @if $color-focus-pressed == null {
            $color-focus-pressed: $button-default-color-focus-pressed;
        }

        @if $color-disabled == null {
            $color-disabled: $button-default-color-disabled;
        }
    } @else {
        @if $color-over == null {
            $color-over: button-default-color-over($color);
        }

        @if $color-focus == null {
            $color-focus: button-default-color-focus($color);
        }

        @if $color-pressed == null {
            $color-pressed: button-default-color-pressed($color);
        }

        @if $color-focus-over == null {
            $color-focus-over: $color-over;
        }

        @if $color-focus-pressed == null {
            $color-focus-pressed: $color-pressed;
        }

        @if $color-disabled == null {
            $color-disabled: button-default-color-disabled($color);
        }
    }

    @if $inner-border-width == null {
        $inner-border-width: $button-default-inner-border-width;

        @if $inner-border-width-over == null {
            $inner-border-width-over: $button-default-inner-border-width-over;
        }

        @if $inner-border-width-focus == null {
            $inner-border-width-focus: $button-default-inner-border-width-focus;
        }

        @if $inner-border-width-pressed == null {
            $inner-border-width-pressed: $button-default-inner-border-width-pressed;
        }

        @if $inner-border-width-focus-over == null {
            $inner-border-width-focus-over: $button-default-inner-border-width-focus-over;
        }

        @if $inner-border-width-focus-pressed == null {
            $inner-border-width-focus-pressed: $button-default-inner-border-width-focus-pressed;
        }

        @if $inner-border-width-disabled == null {
            $inner-border-width-disabled: $button-default-inner-border-width-disabled;
        }
    } @else {
        @if $inner-border-width-over == null {
            $inner-border-width-over: $inner-border-width;
        }

        @if $inner-border-width-focus == null {
            $inner-border-width-focus: $inner-border-width;
        }

        @if $inner-border-width-pressed == null {
            $inner-border-width-pressed: $inner-border-width;
        }

        @if $inner-border-width-focus-over == null {
            $inner-border-width-focus-over: $inner-border-width-over;
        }

        @if $inner-border-width-focus-pressed == null {
            $inner-border-width-focus-pressed: $inner-border-width-pressed;
        }

        @if $inner-border-width-disabled == null {
            $inner-border-width-disabled: $inner-border-width;
        }
    }

    @if $inner-border-color == null {
        $inner-border-color: $button-default-inner-border-color;

        @if $inner-border-color-over == null {
            $inner-border-color-over: $button-default-inner-border-color-over;
        }

        @if $inner-border-color-focus == null {
            $inner-border-color-focus: $button-default-inner-border-color-focus;
        }

        @if $inner-border-color-pressed == null {
            $inner-border-color-pressed: $button-default-inner-border-color-pressed;
        }

        @if $inner-border-color-focus-over == null {
            $inner-border-color-focus-over: $button-default-inner-border-color-focus-over;
        }

        @if $inner-border-color-focus-pressed == null {
            $inner-border-color-focus-pressed: $button-default-inner-border-color-focus-pressed;
        }

        @if $inner-border-color-disabled == null {
            $inner-border-color-disabled: $button-default-inner-border-color-disabled;
        }
    } @else {
        @if $inner-border-color-over == null {
            $inner-border-color-over: button-default-inner-border-color-over($background-color-over, $color-over);
        }

        @if $inner-border-color-focus == null {
            $inner-border-color-focus: button-default-inner-border-color-focus($background-color-focus, $color-focus);
        }

        @if $inner-border-color-pressed == null {
            $inner-border-color-pressed: button-default-inner-border-color-pressed($background-color-pressed, $color-pressed);
        }

        @if $inner-border-color-focus-over == null {
            $inner-border-color-focus-over: button-default-inner-border-color-focus-over($background-color-focus-over, $color-focus-over);
        }

        @if $inner-border-color-focus-pressed == null {
            $inner-border-color-focus-pressed: button-default-inner-border-color-focus-pressed($background-color-focus-pressed, $color-focus-pressed);
        }

        @if $inner-border-color-disabled == null {
            $inner-border-color-disabled: button-default-inner-border-color-disabled($background-color-disabled, $color-disabled);
        }
    }

    @if $font-size == null {
        $font-size: $button-medium-font-size;

        @if $font-size-over == null {
            $font-size-over: $button-medium-font-size-over;
        }

        @if $font-size-focus == null {
            $font-size-focus: $button-medium-font-size-focus;
        }

        @if $font-size-pressed == null {
            $font-size-pressed: $button-medium-font-size-pressed;
        }

        @if $font-size-focus-over == null {
            $font-size-focus-over: $button-medium-font-size-focus-over;
        }

        @if $font-size-focus-pressed == null {
            $font-size-focus-pressed: $button-medium-font-size-focus-pressed;
        }

        @if $font-size-disabled == null {
            $font-size-disabled: $button-medium-font-size-disabled;
        }
    } @else {
        @if $font-size-over == null {
            $font-size-over: $font-size;
        }

        @if $font-size-focus == null {
            $font-size-focus: $font-size;
        }

        @if $font-size-pressed == null {
            $font-size-pressed: $font-size;
        }

        @if $font-size-focus-over == null {
            $font-size-focus-over: $font-size-over;
        }

        @if $font-size-focus-pressed == null {
            $font-size-focus-pressed: $font-size-pressed;
        }

        @if $font-size-disabled == null {
            $font-size-disabled: $font-size;
        }
    }

    @if $font-weight == null {
        $font-weight: $button-medium-font-weight;

        @if $font-weight-over == null {
            $font-weight-over: $button-medium-font-weight-over;
        }

        @if $font-weight-focus == null {
            $font-weight-focus: $button-medium-font-weight-focus;
        }

        @if $font-weight-pressed == null {
            $font-weight-pressed: $button-medium-font-weight-pressed;
        }

        @if $font-weight-focus-over == null {
            $font-weight-focus-over: $button-medium-font-weight-focus-over;
        }

        @if $font-weight-focus-pressed == null {
            $font-weight-focus-pressed: $button-medium-font-weight-focus-pressed;
        }

        @if $font-weight-disabled == null {
            $font-weight-disabled: $button-medium-font-weight-disabled;
        }
    } @else {
        @if $font-weight-over == null {
            $font-weight-over: $font-weight;
        }

        @if $font-weight-focus == null {
            $font-weight-focus: $font-weight;
        }

        @if $font-weight-pressed == null {
            $font-weight-pressed: $font-weight;
        }

        @if $font-weight-focus-over == null {
            $font-weight-focus-over: $font-weight-over;
        }

        @if $font-weight-focus-pressed == null {
            $font-weight-focus-pressed: $font-weight-pressed;
        }

        @if $font-weight-disabled == null {
            $font-weight-disabled: $font-weight;
        }
    }

    @if $font-family == null {
        $font-family: $button-medium-font-family;

        @if $font-family-over == null {
            $font-family-over: $button-medium-font-family-over;
        }

        @if $font-family-focus == null {
            $font-family-focus: $button-medium-font-family-focus;
        }

        @if $font-family-pressed == null {
            $font-family-pressed: $button-medium-font-family-pressed;
        }

        @if $font-family-focus-over == null {
            $font-family-focus-over: $button-medium-font-family-focus-over;
        }

        @if $font-family-focus-pressed == null {
            $font-family-focus-pressed: $button-medium-font-family-focus-pressed;
        }

        @if $font-family-disabled == null {
            $font-family-disabled: $button-medium-font-family-disabled;
        }
    } @else {
        @if $font-family-over == null {
            $font-family-over: $font-family;
        }

        @if $font-family-focus == null {
            $font-family-focus: $font-family;
        }

        @if $font-family-pressed == null {
            $font-family-pressed: $font-family;
        }

        @if $font-family-focus-over == null {
            $font-family-focus-over: $font-family-over;
        }

        @if $font-family-focus-pressed == null {
            $font-family-focus-pressed: $font-family-pressed;
        }

        @if $font-family-disabled == null {
            $font-family-disabled: $font-family;
        }
    }

    @include extjs-button-ui(
        $ui: '#{$ui}-medium',

        $border-radius: $border-radius,
        $border-width: $border-width,

        $border-color: $border-color,
        $border-color-over: $border-color-over,
        $border-color-focus: $border-color-focus,
        $border-color-pressed: $border-color-pressed,
        $border-color-focus-over: $border-color-focus-over,
        $border-color-focus-pressed: $border-color-focus-pressed,
        $border-color-disabled: $border-color-disabled,

        $padding: $padding,
        $text-padding: $text-padding,

        $background-color: $background-color,
        $background-color-over: $background-color-over,
        $background-color-focus: $background-color-focus,
        $background-color-pressed: $background-color-pressed,
        $background-color-focus-over: $background-color-focus-over,
        $background-color-focus-pressed: $background-color-focus-pressed,
        $background-color-disabled: $background-color-disabled,

        $background-gradient: $background-gradient,
        $background-gradient-over: $background-gradient-over,
        $background-gradient-focus: $background-gradient-focus,
        $background-gradient-pressed: $background-gradient-pressed,
        $background-gradient-focus-over: $background-gradient-focus-over,
        $background-gradient-focus-pressed: $background-gradient-focus-pressed,
        $background-gradient-disabled: $background-gradient-disabled,

        $color: $color,
        $color-over: $color-over,
        $color-focus: $color-focus,
        $color-pressed: $color-pressed,
        $color-focus-over: $color-focus-over,
        $color-focus-pressed: $color-focus-pressed,
        $color-disabled: $color-disabled,

        $inner-border-width: $inner-border-width,
        $inner-border-width-over: $inner-border-width-over,
        $inner-border-width-focus: $inner-border-width-focus,
        $inner-border-width-pressed: $inner-border-width-pressed,
        $inner-border-width-focus-over: $inner-border-width-focus-over,
        $inner-border-width-focus-pressed: $inner-border-width-focus-pressed,
        $inner-border-width-disabled: $inner-border-width-disabled,

        $inner-border-color: $inner-border-color,
        $inner-border-color-over: $inner-border-color-over,
        $inner-border-color-focus: $inner-border-color-focus,
        $inner-border-color-pressed: $inner-border-color-pressed,
        $inner-border-color-focus-over: $inner-border-color-focus-over,
        $inner-border-color-focus-pressed: $inner-border-color-focus-pressed,
        $inner-border-color-disabled: $inner-border-color-disabled,

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

        $font-size: $font-size,
        $font-size-over: $font-size-over,
        $font-size-focus: $font-size-focus,
        $font-size-pressed: $font-size-pressed,
        $font-size-focus-over: $font-size-focus-over,
        $font-size-focus-pressed: $font-size-focus-pressed,
        $font-size-disabled: $font-size-disabled,

        $font-weight: $font-weight,
        $font-weight-over: $font-weight-over,
        $font-weight-focus: $font-weight-focus,
        $font-weight-pressed: $font-weight-pressed,
        $font-weight-focus-over: $font-weight-focus-over,
        $font-weight-focus-pressed: $font-weight-focus-pressed,
        $font-weight-disabled: $font-weight-disabled,

        $font-family: $font-family,
        $font-family-over: $font-family-over,
        $font-family-focus: $font-family-focus,
        $font-family-pressed: $font-family-pressed,
        $font-family-focus-over: $font-family-focus-over,
        $font-family-focus-pressed: $font-family-focus-pressed,
        $font-family-disabled: $font-family-disabled,

        $line-height: $line-height,
        $icon-size: $icon-size,
        $glyph-font-size: $glyph-font-size,
        $icon-spacing: $icon-spacing,
        $glyph-color: $glyph-color,
        $glyph-opacity: $glyph-opacity,
        $arrow-width: $arrow-width,
        $arrow-height: $arrow-height,
        $arrow-glyph: $arrow-glyph,
        $arrow-glyph-color: $arrow-glyph-color,
        $split-width: $split-width,
        $split-height: $split-height,
        $split-line-width: $split-line-width,
        $split-line-color: $split-line-color,
        $include-ui-menu-arrows:  $include-ui-menu-arrows,
        $include-ui-split-arrows: $include-ui-split-arrows,
        $include-split-noline-arrows: $include-split-noline-arrows,
        $include-split-over-arrows: $include-split-over-arrows,
        $opacity-disabled: $opacity-disabled,
        $inner-opacity-disabled: $inner-opacity-disabled
    );
}

/**
 * Creates a visual theme for a {@link #scale medium} toolbar Button.
 *
 * @param {string} $ui
 * The name of the UI being created. Can not included spaces or special punctuation
 * (used in CSS class names).
 *
 * @param {number} [$border-radius=$button-medium-border-radius]
 * The border-radius of the button
 *
 * @param {number} [$border-width=$button-medium-border-width]
 * The border-width of the button
 *
 * @param {color} [$border-color=$button-toolbar-border-color]
 * The border-color of the button
 *
 * @param {color} [$border-color-over=$button-toolbar-border-color-over]
 * The border-color of the button when the cursor is over the button
 *
 * @param {color} [$border-color-focus=$button-toolbar-border-color-focus]
 * The border-color of the button when focused
 *
 * @param {color} [$border-color-pressed=$button-toolbar-border-color-pressed]
 * The border-color of the button when pressed
 *
 * @param {color} [$border-color-focus-over=$button-toolbar-border-color-focus-over]
 * The border-color of the button when the button is focused and the cursor is over the
 * button
 *
 * @param {color} [$border-color-focus-pressed=$button-toolbar-border-color-focus-pressed]
 * The border-color of the button when focused and pressed
 *
 * @param {color} [$border-color-disabled=$button-toolbar-border-color-disabled]
 * The border-color of the button when disabled
 *
 * @param {number} [$padding=$button-medium-padding]
 * The amount of padding inside the border of the button on all sides
 *
 * @param {number} [$text-padding=$button-medium-text-padding]
 * The amount of horizontal space to add to the left and right of the button text
 *
 * @param {color} [$background-color=$button-toolbar-background-color]
 * The background-color of the button
 *
 * @param {color} [$background-color-over=$button-toolbar-background-color-over]
 * The background-color of the button when the cursor is over the button
 *
 * @param {color} [$background-color-focus=$button-toolbar-background-color-focus]
 * The background-color of the button when focused
 *
 * @param {color} [$background-color-pressed=$button-toolbar-background-color-pressed]
 * The background-color of the button when pressed
 *
 * @param {color} [$background-color-focus-over=$button-toolbar-background-color-focus-over]
 * The background-color of the button when the button is focused and the cursor is over
 * the button
 *
 * @param {color} [$background-color-focus-pressed=$button-toolbar-background-color-focus-pressed]
 * The background-color of the button when focused and pressed
 *
 * @param {color} [$background-color-disabled=$button-toolbar-background-color-disabled]
 * The background-color of the button when disabled
 *
 * @param {string/list} [$background-gradient=$button-toolbar-background-gradient]
 * The background-gradient for the button.  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} [$background-gradient-over=$button-toolbar-background-gradient-over]
 * The background-gradient to use when the cursor is over the button. 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} [$background-gradient-focus=$button-toolbar-background-gradient-focus]
 * The background-gradient to use when the the button is 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} [$background-gradient-pressed=$button-toolbar-background-gradient-pressed]
 * The background-gradient to use when the the button is pressed. 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} [$background-gradient-focus-over=$button-toolbar-background-gradient-focus-over]
 * The background-gradient to use when the the button is focused and the cursor is over
 * the button. 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} [$background-gradient-focus-pressed=$button-toolbar-background-gradient-focus-pressed]
 * The background-gradient to use when the the button is focused and pressed. 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} [$background-gradient-disabled=$button-toolbar-background-gradient-disabled]
 * The background-gradient to use when the the button is disabled. Can be either the name
 * of a predefined gradient or a list of color stops. Used as the `$type` parameter for
 * {@link Global_CSS#background-gradient}.
 *
 * @param {color} [$color=$button-toolbar-color]
 * The text color of the button
 *
 * @param {color} [$color-over=$button-toolbar-color-over]
 * The text color of the button when the cursor is over the button
 *
 * @param {color} [$color-focus=$button-toolbar-color-focus]
 * The text color of the button when the button is focused
 *
 * @param {color} [$color-pressed=$button-toolbar-color-pressed]
 * The text color of the button when the button is pressed
 *
 * @param {color} [$color-focus-over=$button-toolbar-color-focus-over]
 * The text color of the button when the button is focused and the cursor is over the button
 *
 * @param {color} [$color-focus-pressed=$button-toolbar-color-focus-pressed]
 * The text color of the button when the button is focused and pressed
 *
 * @param {color} [$color-disabled=$button-toolbar-color-disabled]
 * The text color of the button when the button is disabled
 *
 * @param {number/list} [$inner-border-width=$button-toolbar-inner-border-width]
 * The inner border-width of the button
 *
 * @param {number/list} [$inner-border-width-over=$button-toolbar-inner-border-width-over]
 * The inner border-width of the button when the cursor is over the button
 *
 * @param {number/list} [$inner-border-width-focus=$button-toolbar-inner-border-width-focus]
 * The inner border-width of the button when focused
 *
 * @param {number/list} [$inner-border-width-pressed=$button-toolbar-inner-border-width-pressed]
 * The inner border-width of the button when pressed
 *
 * @param {number/list} [$inner-border-width-focus-over=$button-toolbar-inner-border-width-focus-over]
 * The inner border-width of the button when the button is focused and the cursor is over
 * the button
 *
 * @param {number/list} [$inner-border-width-focus-pressed=$button-toolbar-inner-border-width-focus-pressed]
 * The inner border-width of the button when focused and pressed
 *
 * @param {number/list} [$inner-border-width-disabled=$button-toolbar-inner-border-width-disabled]
 * The inner border-width of the button when disabled
 *
 * @param {color} [$inner-border-color=$button-toolbar-inner-border-color]
 * The inner border-color of the button
 *
 * @param {color} [$inner-border-color-over=$button-toolbar-inner-border-color-over]
 * The inner border-color of the button when the cursor is over the button
 *
 * @param {color} [$inner-border-color-focus=$button-toolbar-inner-border-color-focus]
 * The inner border-color of the button when focused
 *
 * @param {color} [$inner-border-color-pressed=$button-toolbar-inner-border-color-pressed]
 * The inner border-color of the button when pressed
 *
 * @param {color} [$inner-border-color-focus-over=$button-toolbar-inner-border-color-focus-over]
 * The inner border-color of the button when the button is focused and the cursor is over
 * the button
 *
 * @param {color} [$inner-border-color-focus-pressed=$button-toolbar-inner-border-color-focus-pressed]
 * The inner border-color of the button when focused and pressed
 *
 * @param {color} [$inner-border-color-disabled=$button-toolbar-inner-border-color-disabled]
 * The inner border-color of the button when disabled
 *
 * @param {number} [$body-outline-width-focus=$button-toolbar-body-outline-width-focus]
 * The body outline width of the button when focused
 *
 * @param {number} [$body-outline-style-focus=$button-toolbar-body-outline-style-focus]
 * The body outline-style of the button when focused
 *
 * @param {number} [$body-outline-color-focus=$button-toolbar-body-outline-color-focus]
 * The body outline color of the button when focused
 *
 * @param {number} [$font-size=$button-medium-font-size]
 * The font-size of the button
 *
 * @param {number} [$font-size-over=$button-medium-font-size-over]
 * The font-size of the button when the cursor is over the button
 *
 * @param {number} [$font-size-focus=$button-medium-font-size-focus]
 * The font-size of the button when the button is focused
 *
 * @param {number} [$font-size-pressed=$button-medium-font-size-pressed]
 * The font-size of the button when the button is pressed
 *
 * @param {number} [$font-size-focus-over=$button-medium-font-size-focus-over]
 * The font-size of the button when the button is focused and the cursor is over the
 * button
 *
 * @param {number} [$font-size-focus-pressed=$button-medium-font-size-focus-pressed]
 * The font-size of the button when the button is focused and pressed
 *
 * @param {number} [$font-size-disabled=$button-medium-font-size-disabled]
 * The font-size of the button when the button is disabled
 *
 * @param {string} [$font-weight=$button-medium-font-weight]
 * The font-weight of the button
 *
 * @param {string} [$font-weight-over=$button-medium-font-weight-over]
 * The font-weight of the button when the cursor is over the button
 *
 * @param {string} [$font-weight-focus=$button-medium-font-weight-focus]
 * The font-weight of the button when the button is focused
 *
 * @param {string} [$font-weight-pressed=$button-medium-font-weight-pressed]
 * The font-weight of the button when the button is pressed
 *
 * @param {string} [$font-weight-focus-over=$button-medium-font-weight-focus-over]
 * The font-weight of the button when the button is focused and the cursor is over the
 * button
 *
 * @param {string} [$font-weight-focus-pressed=$button-medium-font-weight-focus-pressed]
 * The font-weight of the button when the button is focused and pressed
 *
 * @param {string} [$font-weight-disabled=$button-medium-font-weight-disabled]
 * The font-weight of the button when the button is disabled
 *
 * @param {string} [$font-family=$button-medium-font-family]
 * The font-family of the button
 *
 * @param {string} [$font-family-over=$button-medium-font-family-over]
 * The font-family of the button when the cursor is over the button
 *
 * @param {string} [$font-family-focus=$button-medium-font-family-focus]
 * The font-family of the button when the button is focused
 *
 * @param {string} [$font-family-pressed=$button-medium-font-family-pressed]
 * The font-family of the button when the button is pressed
 *
 * @param {string} [$font-family-focus-over=$button-medium-font-family-focus-over]
 * The font-family of the button when the button is focused and the cursor is over the
 * button
 *
 * @param {string} [$font-family-focus-pressed=$button-medium-font-family-focus-pressed]
 * The font-family of the button when the button is focused and pressed
 *
 * @param {string} [$font-family-disabled=$button-medium-font-family-disabled]
 * The font-family of the button when the button is disabled
 *
 * @param {number} [$line-height=$button-medium-line-height]
 * The line-height of the button text
 *
 * @param {number} [$icon-size=$button-medium-icon-size]
 * The size of the button icon
 *
 * @param {number} [$glyph-font-size=$button-medium-glyph-font-size]
 * The font-size for the button glyph
 *
 * @param {number} [$icon-spacing=$button-medium-icon-spacing]
 * The space between the button's icon and text
 *
 * @param {color} [$glyph-color=$button-toolbar-glyph-color]
 * The color of the button's {@link #glyph} icon
 *
 * @param {number} [$glyph-opacity=$button-toolbar-glyph-opacity]
 * The opacity of the button's {@link #glyph} icon
 *
 * @param {number} [$arrow-width=$button-medium-arrow-width]
 * The width of the button's {@link #cfg-menu} arrow
 *
 * @param {number} [$arrow-height=$button-medium-arrow-height]
 * The height of the button's {@link #cfg-menu} arrow
 *
 * @param {string/list} [$arrow-glyph=$button-medium-arrow-glyph]
 * Glyph for the button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {string/list} [$arrow-glyph-color=$button-toolbar-arrow-glyph-color]
 * Glyph color for the button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {number} [$split-width=$button-medium-split-width]
 * The width of a {@link Ext.button.Split Split Button}'s arrow
 *
 * @param {number} [$split-height=$button-medium-split-height]
 * The height of a {@link Ext.button.Split Split Button}'s arrow
 *
 * @param {number} [$split-line-width=$button-medium-split-line-width]
 * The default width for a {@link Ext.button.Split Split Button}'s line.
 * Themes that include the line in the arrow background image should set this to 0
 *
 * @param {color} [$split-line-color=$button-toolbar-split-line-color]
 * The color for a {@link Ext.button.Split Split Button}'s line.
 * Only applicable when `$split-line-width` is greater than 0.
 *
 * @param {boolean} [$include-ui-menu-arrows=$button-include-ui-menu-arrows]
 * True to include the UI name in the file name of the {@link #cfg-menu}
 * arrow icon. Set this to false to share the same arrow bewteen multiple UIs.
 *
 * @param {boolean} [$include-ui-split-arrows=$button-include-ui-split-arrows]
 * True to include the UI name in the file name of the {@link Ext.button.Split Split Button}'s
 * arrow icon. Set this to false to share the same arrow bewteen multiple UIs.
 *
 * @param {boolean} [$include-split-noline-arrows=$button-toolbar-include-split-noline-arrows]
 * True to add a "-noline" suffix to the file name of the {@link Ext.button.Split Split Button}'s 
 * arrow icon.  Used for hiding the split line when toolbar buttons are in their default
 * state.
 *
 * @param {boolean} [$include-split-over-arrows=$button-include-split-over-arrows]
 * True to use a separate icon for {@link Ext.button.Split Split Button}s when the cursor
 * is over the button.  The over icon file name will have a "-o" suffix
 *
 * @param {number} [$opacity-disabled=$button-toolbar-opacity-disabled]
 * The opacity of the button when it is disabled
 *
 * @param {number} [$inner-opacity-disabled=$button-toolbar-inner-opacity-disabled]
 * The opacity of the button's text and icon elements when when the button is disabled
 * 
 * @member Ext.button.Button
 */
@mixin extjs-button-toolbar-medium-ui(
    $ui,

    $border-radius: $button-medium-border-radius,
    $border-width: $button-medium-border-width,

    $border-color: null,
    $border-color-over: null,
    $border-color-focus: null,
    $border-color-pressed: null,
    $border-color-focus-over: null,
    $border-color-focus-pressed: null,
    $border-color-disabled: null,

    $padding: $button-medium-padding,
    $text-padding: $button-medium-text-padding,

    $background-color: null,
    $background-color-over: null,
    $background-color-focus: null,
    $background-color-pressed: null,
    $background-color-focus-over: null,
    $background-color-focus-pressed: null,
    $background-color-disabled: null,

    $background-gradient: $button-toolbar-background-gradient,
    $background-gradient-over: $button-toolbar-background-gradient-over,
    $background-gradient-focus: $button-toolbar-background-gradient-focus,
    $background-gradient-pressed: $button-toolbar-background-gradient-pressed,
    $background-gradient-focus-over: $button-toolbar-background-gradient-focus-over,
    $background-gradient-focus-pressed: $button-toolbar-background-gradient-focus-pressed,
    $background-gradient-disabled: $button-toolbar-background-gradient-disabled,

    $color: null,
    $color-over: null,
    $color-focus: null,
    $color-pressed: null,
    $color-focus-over: null,
    $color-focus-pressed: null,
    $color-disabled: null,

    $inner-border-width: null,
    $inner-border-width-over: null,
    $inner-border-width-focus: null,
    $inner-border-width-pressed: null,
    $inner-border-width-focus-over: null,
    $inner-border-width-focus-pressed: null,
    $inner-border-width-disabled: null,

    $inner-border-color: null,
    $inner-border-color-over: null,
    $inner-border-color-focus: null,
    $inner-border-color-pressed: null,
    $inner-border-color-focus-over: null,
    $inner-border-color-focus-pressed: null,
    $inner-border-color-disabled: null,

    $body-outline-width-focus: $button-toolbar-body-outline-width-focus,
    $body-outline-style-focus: $button-toolbar-body-outline-style-focus,
    $body-outline-color-focus: $button-toolbar-body-outline-color-focus,

    $font-size: null,
    $font-size-over: null,
    $font-size-focus: null,
    $font-size-pressed: null,
    $font-size-focus-over: null,
    $font-size-focus-pressed: null,
    $font-size-disabled: null,

    $font-weight: null,
    $font-weight-over: null,
    $font-weight-focus: null,
    $font-weight-pressed: null,
    $font-weight-focus-over: null,
    $font-weight-focus-pressed: null,
    $font-weight-disabled: null,

    $font-family: null,
    $font-family-over: null,
    $font-family-focus: null,
    $font-family-pressed: null,
    $font-family-focus-over: null,
    $font-family-focus-pressed: null,
    $font-family-disabled: null,

    $line-height: $button-medium-line-height,
    $icon-size: $button-medium-icon-size,
    $glyph-font-size: $button-medium-glyph-font-size,
    $icon-spacing: $button-medium-icon-spacing,
    $glyph-color: $button-toolbar-glyph-color,
    $glyph-opacity: $button-toolbar-glyph-opacity,
    $arrow-width: $button-medium-arrow-width,
    $arrow-height: $button-medium-arrow-height,
    $arrow-glyph: $button-medium-arrow-glyph,
    $arrow-glyph-color: $button-toolbar-arrow-glyph-color,
    $split-width: $button-medium-split-width,
    $split-height: $button-medium-split-height,
    $split-line-width: $button-medium-split-line-width,
    $split-line-color: $button-toolbar-split-line-color,
    $include-ui-menu-arrows:  $button-include-ui-menu-arrows,
    $include-ui-split-arrows: $button-include-ui-split-arrows,
    $include-split-noline-arrows: $button-toolbar-include-split-noline-arrows,
    $include-split-over-arrows: $button-include-split-over-arrows,
    $opacity-disabled: $button-toolbar-opacity-disabled,
    $inner-opacity-disabled: $button-toolbar-inner-opacity-disabled
) {
    @if $border-color == null {
        $border-color: $button-toolbar-border-color;

        @if $border-color-over == null {
            $border-color-over: $button-toolbar-border-color-over;
        }

        @if $border-color-focus == null {
            $border-color-focus: $button-toolbar-border-color-focus;
        }

        @if $border-color-pressed == null {
            $border-color-pressed: $button-toolbar-border-color-pressed;
        }

        @if $border-color-focus-over == null {
            $border-color-focus-over: $button-toolbar-border-color-focus-over;
        }

        @if $border-color-focus-pressed == null {
            $border-color-focus-pressed: $button-toolbar-border-color-focus-pressed;
        }

        @if $border-color-disabled == null {
            $border-color-disabled: $button-toolbar-border-color-disabled;
        }
    } @else {
        @if $border-color-over == null {
            $border-color-over: button-toolbar-border-color-over($border-color);
        }

        @if $border-color-focus == null {
            $border-color-focus: button-toolbar-border-color-focus($border-color);
        }

        @if $border-color-pressed == null {
            $border-color-pressed: button-toolbar-border-color-pressed($border-color);
        }

        @if $border-color-focus-over == null {
            $border-color-focus-over: $border-color-over;
        }

        @if $border-color-focus-pressed == null {
            $border-color-focus-pressed: $border-color-pressed;
        }

        @if $border-color-disabled == null {
            $border-color-disabled: button-toolbar-border-color-disabled($border-color);
        }
    }

    @if $background-color == null {
        $background-color: $button-toolbar-background-color;

        @if $background-color-over == null {
            $background-color-over: $button-toolbar-background-color-over;
        }

        @if $background-color-focus == null {
            $background-color-focus: $button-toolbar-background-color-focus;
        }

        @if $background-color-pressed == null {
            $background-color-pressed: $button-toolbar-background-color-pressed;
        }

        @if $background-color-focus-over == null {
            $background-color-focus-over: $button-toolbar-background-color-focus-over;
        }

        @if $background-color-focus-pressed == null {
            $background-color-focus-pressed: $button-toolbar-background-color-focus-pressed;
        }

        @if $background-color-disabled == null {
            $background-color-disabled: $button-toolbar-background-color-disabled;
        }
    } @else {
        @if $background-color-over == null {
            $background-color-over: button-toolbar-background-color-over($background-color);
        }

        @if $background-color-focus == null {
            $background-color-focus: button-toolbar-background-color-focus($background-color);
        }

        @if $background-color-pressed == null {
            $background-color-pressed: button-toolbar-background-color-pressed($background-color);
        }

        @if $background-color-focus-over == null {
            $background-color-focus-over: $background-color-over;
        }

        @if $background-color-focus-pressed == null {
            $background-color-focus-pressed: $background-color-pressed;
        }

        @if $background-color-disabled == null {
            $background-color-disabled: button-toolbar-background-color-disabled($background-color);
        }
    }

    @if $color == null {
        $color: $button-toolbar-color;

        @if $color-over == null {
            $color-over: $button-toolbar-color-over;
        }

        @if $color-focus == null {
            $color-focus: $button-toolbar-color-focus;
        }

        @if $color-pressed == null {
            $color-pressed: $button-toolbar-color-pressed;
        }

        @if $color-focus-over == null {
            $color-focus-over: $button-toolbar-color-focus-over;
        }

        @if $color-focus-pressed == null {
            $color-focus-pressed: $button-toolbar-color-focus-pressed;
        }

        @if $color-disabled == null {
            $color-disabled: $button-toolbar-color-disabled;
        }
    } @else {
        @if $color-over == null {
            $color-over: button-toolbar-color-over($color);
        }

        @if $color-focus == null {
            $color-focus: button-toolbar-color-focus($color);
        }

        @if $color-pressed == null {
            $color-pressed: button-toolbar-color-pressed($color);
        }

        @if $color-focus-over == null {
            $color-focus-over: $color-over;
        }

        @if $color-focus-pressed == null {
            $color-focus-pressed: $color-pressed;
        }

        @if $color-disabled == null {
            $color-disabled: button-toolbar-color-disabled($color);
        }
    }

    @if $inner-border-width == null {
        $inner-border-width: $button-toolbar-inner-border-width;

        @if $inner-border-width-over == null {
            $inner-border-width-over: $button-toolbar-inner-border-width-over;
        }

        @if $inner-border-width-focus == null {
            $inner-border-width-focus: $button-toolbar-inner-border-width-focus;
        }

        @if $inner-border-width-pressed == null {
            $inner-border-width-pressed: $button-toolbar-inner-border-width-pressed;
        }

        @if $inner-border-width-focus-over == null {
            $inner-border-width-focus-over: $button-toolbar-inner-border-width-focus-over;
        }

        @if $inner-border-width-focus-pressed == null {
            $inner-border-width-focus-pressed: $button-toolbar-inner-border-width-focus-pressed;
        }

        @if $inner-border-width-disabled == null {
            $inner-border-width-disabled: $button-toolbar-inner-border-width-disabled;
        }
    } @else {
        @if $inner-border-width-over == null {
            $inner-border-width-over: $inner-border-width;
        }

        @if $inner-border-width-focus == null {
            $inner-border-width-focus: $inner-border-width;
        }

        @if $inner-border-width-pressed == null {
            $inner-border-width-pressed: $inner-border-width;
        }

        @if $inner-border-width-focus-over == null {
            $inner-border-width-focus-over: $inner-border-width-over;
        }

        @if $inner-border-width-focus-pressed == null {
            $inner-border-width-focus-pressed: $inner-border-width-pressed;
        }

        @if $inner-border-width-disabled == null {
            $inner-border-width-disabled: $inner-border-width;
        }
    }

    @if $inner-border-color == null {
        $inner-border-color: $button-toolbar-inner-border-color;

        @if $inner-border-color-over == null {
            $inner-border-color-over: $button-toolbar-inner-border-color-over;
        }

        @if $inner-border-color-focus == null {
            $inner-border-color-focus: $button-toolbar-inner-border-color-focus;
        }

        @if $inner-border-color-pressed == null {
            $inner-border-color-pressed: $button-toolbar-inner-border-color-pressed;
        }

        @if $inner-border-color-focus-over == null {
            $inner-border-color-focus-over: $button-toolbar-inner-border-color-focus-over;
        }

        @if $inner-border-color-focus-pressed == null {
            $inner-border-color-focus-pressed: $button-toolbar-inner-border-color-focus-pressed;
        }

        @if $inner-border-color-disabled == null {
            $inner-border-color-disabled: $button-toolbar-inner-border-color-disabled;
        }
    } @else {
        @if $inner-border-color-over == null {
            $inner-border-color-over: button-toolbar-inner-border-color-over($background-color-over, $color-over);
        }

        @if $inner-border-color-focus == null {
            $inner-border-color-focus: button-toolbar-inner-border-color-focus($background-color-focus, $color-focus);
        }

        @if $inner-border-color-pressed == null {
            $inner-border-color-pressed: button-toolbar-inner-border-color-pressed($background-color-pressed, $color-pressed);
        }

        @if $inner-border-color-focus-over == null {
            $inner-border-color-focus-over: button-toolbar-inner-border-color-focus-over($background-color-focus-over, $color-focus-over);
        }

        @if $inner-border-color-focus-pressed == null {
            $inner-border-color-focus-pressed: button-toolbar-inner-border-color-focus-pressed($background-color-focus-pressed, $color-focus-pressed)
        }

        @if $inner-border-color-disabled == null {
            $inner-border-color-disabled: button-toolbar-inner-border-color-disabled($background-color-disabled, $color-disabled);
        }
    }

    @if $font-size == null {
        $font-size: $button-medium-font-size;

        @if $font-size-over == null {
            $font-size-over: $button-medium-font-size-over;
        }

        @if $font-size-focus == null {
            $font-size-focus: $button-medium-font-size-focus;
        }

        @if $font-size-pressed == null {
            $font-size-pressed: $button-medium-font-size-pressed;
        }

        @if $font-size-focus-over == null {
            $font-size-focus-over: $button-medium-font-size-focus-over;
        }

        @if $font-size-focus-pressed == null {
            $font-size-focus-pressed: $button-medium-font-size-focus-pressed;
        }

        @if $font-size-disabled == null {
            $font-size-disabled: $button-medium-font-size-disabled;
        }
    } @else {
        @if $font-size-over == null {
            $font-size-over: $font-size;
        }

        @if $font-size-focus == null {
            $font-size-focus: $font-size;
        }

        @if $font-size-pressed == null {
            $font-size-pressed: $font-size;
        }

        @if $font-size-focus-over == null {
            $font-size-focus-over: $font-size-over;
        }

        @if $font-size-focus-pressed == null {
            $font-size-focus-pressed: $font-size-pressed;
        }

        @if $font-size-disabled == null {
            $font-size-disabled: $font-size;
        }
    }

    @if $font-weight == null {
        $font-weight: $button-medium-font-weight;

        @if $font-weight-over == null {
            $font-weight-over: $button-medium-font-weight-over;
        }

        @if $font-weight-focus == null {
            $font-weight-focus: $button-medium-font-weight-focus;
        }

        @if $font-weight-pressed == null {
            $font-weight-pressed: $button-medium-font-weight-pressed;
        }

        @if $font-weight-focus-over == null {
            $font-weight-focus-over: $button-medium-font-weight-focus-over;
        }

        @if $font-weight-focus-pressed == null {
            $font-weight-focus-pressed: $button-medium-font-weight-focus-pressed;
        }

        @if $font-weight-disabled == null {
            $font-weight-disabled: $button-medium-font-weight-disabled;
        }
    } @else {
        @if $font-weight-over == null {
            $font-weight-over: $font-weight;
        }

        @if $font-weight-focus == null {
            $font-weight-focus: $font-weight;
        }

        @if $font-weight-pressed == null {
            $font-weight-pressed: $font-weight;
        }

        @if $font-weight-focus-over == null {
            $font-weight-focus-over: $font-weight-over;
        }

        @if $font-weight-focus-pressed == null {
            $font-weight-focus-pressed: $font-weight-pressed;
        }

        @if $font-weight-disabled == null {
            $font-weight-disabled: $font-weight;
        }
    }

    @if $font-family == null {
        $font-family: $button-medium-font-family;

        @if $font-family-over == null {
            $font-family-over: $button-medium-font-family-over;
        }

        @if $font-family-focus == null {
            $font-family-focus: $button-medium-font-family-focus;
        }

        @if $font-family-pressed == null {
            $font-family-pressed: $button-medium-font-family-pressed;
        }

        @if $font-family-focus-over == null {
            $font-family-focus-over: $button-medium-font-family-focus-over;
        }

        @if $font-family-focus-pressed == null {
            $font-family-focus-pressed: $button-medium-font-family-focus-pressed;
        }

        @if $font-family-disabled == null {
            $font-family-disabled: $button-medium-font-family-disabled;
        }
    } @else {
        @if $font-family-over == null {
            $font-family-over: $font-family;
        }

        @if $font-family-focus == null {
            $font-family-focus: $font-family;
        }

        @if $font-family-pressed == null {
            $font-family-pressed: $font-family;
        }

        @if $font-family-focus-over == null {
            $font-family-focus-over: $font-family-over;
        }

        @if $font-family-focus-pressed == null {
            $font-family-focus-pressed: $font-family-pressed;
        }

        @if $font-family-disabled == null {
            $font-family-disabled: $font-family;
        }
    }

    @include extjs-button-ui(
        $ui: '#{$ui}-toolbar-medium',

        $border-radius: $border-radius,
        $border-width: $border-width,

        $border-color: $border-color,
        $border-color-over: $border-color-over,
        $border-color-focus: $border-color-focus,
        $border-color-pressed: $border-color-pressed,
        $border-color-focus-over: $border-color-focus-over,
        $border-color-focus-pressed: $border-color-focus-pressed,
        $border-color-disabled: $border-color-disabled,

        $padding: $padding,
        $text-padding: $text-padding,

        $background-color: $background-color,
        $background-color-over: $background-color-over,
        $background-color-focus: $background-color-focus,
        $background-color-pressed: $background-color-pressed,
        $background-color-focus-over: $background-color-focus-over,
        $background-color-focus-pressed: $background-color-focus-pressed,
        $background-color-disabled: $background-color-disabled,

        $background-gradient: $background-gradient,
        $background-gradient-over: $background-gradient-over,
        $background-gradient-focus: $background-gradient-focus,
        $background-gradient-pressed: $background-gradient-pressed,
        $background-gradient-focus-over: $background-gradient-focus-over,
        $background-gradient-focus-pressed: $background-gradient-focus-pressed,
        $background-gradient-disabled: $background-gradient-disabled,

        $color: $color,
        $color-over: $color-over,
        $color-focus: $color-focus,
        $color-pressed: $color-pressed,
        $color-focus-over: $color-focus-over,
        $color-focus-pressed: $color-focus-pressed,
        $color-disabled: $color-disabled,

        $inner-border-width: $inner-border-width,
        $inner-border-width-over: $inner-border-width-over,
        $inner-border-width-focus: $inner-border-width-focus,
        $inner-border-width-pressed: $inner-border-width-pressed,
        $inner-border-width-focus-over: $inner-border-width-focus-over,
        $inner-border-width-focus-pressed: $inner-border-width-focus-pressed,
        $inner-border-width-disabled: $inner-border-width-disabled,

        $inner-border-color: $inner-border-color,
        $inner-border-color-over: $inner-border-color-over,
        $inner-border-color-focus: $inner-border-color-focus,
        $inner-border-color-pressed: $inner-border-color-pressed,
        $inner-border-color-focus-over: $inner-border-color-focus-over,
        $inner-border-color-focus-pressed: $inner-border-color-focus-pressed,
        $inner-border-color-disabled: $inner-border-color-disabled,

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

        $font-size: $font-size,
        $font-size-over: $font-size-over,
        $font-size-focus: $font-size-focus,
        $font-size-pressed: $font-size-pressed,
        $font-size-focus-over: $font-size-focus-over,
        $font-size-focus-pressed: $font-size-focus-pressed,
        $font-size-disabled: $font-size-disabled,

        $font-weight: $font-weight,
        $font-weight-over: $font-weight-over,
        $font-weight-focus: $font-weight-focus,
        $font-weight-pressed: $font-weight-pressed,
        $font-weight-focus-over: $font-weight-focus-over,
        $font-weight-focus-pressed: $font-weight-focus-pressed,
        $font-weight-disabled: $font-weight-disabled,

        $font-family: $font-family,
        $font-family-over: $font-family-over,
        $font-family-focus: $font-family-focus,
        $font-family-pressed: $font-family-pressed,
        $font-family-focus-over: $font-family-focus-over,
        $font-family-focus-pressed: $font-family-focus-pressed,
        $font-family-disabled: $font-family-disabled,

        $line-height: $line-height,
        $icon-size: $icon-size,
        $glyph-font-size: $glyph-font-size,
        $icon-spacing: $icon-spacing,
        $glyph-color: $glyph-color,
        $glyph-opacity: $glyph-opacity,
        $arrow-width: $arrow-width,
        $arrow-height: $arrow-height,
        $arrow-glyph: $arrow-glyph,
        $arrow-glyph-color: $arrow-glyph-color,
        $split-width: $split-width,
        $split-height: $split-height,
        $split-line-width: $split-line-width,
        $split-line-color: $split-line-color,
        $include-ui-menu-arrows:  $include-ui-menu-arrows,
        $include-ui-split-arrows: $include-ui-split-arrows,
        $include-split-noline-arrows: $include-split-noline-arrows,
        $include-split-over-arrows: $include-split-over-arrows,
        $opacity-disabled: $opacity-disabled,
        $inner-opacity-disabled: $inner-opacity-disabled
    );
}

/**
 * Creates a visual theme for a {@link #scale large} toolbar Button.
 *
 * @param {string} $ui
 * The name of the UI being created. Can not included spaces or special punctuation
 * (used in CSS class names).
 *
 * @param {number} [$border-radius=$button-large-border-radius]
 * The border-radius of the button
 *
 * @param {number} [$border-width=$button-large-border-width]
 * The border-width of the button
 *
 * @param {color} [$border-color=$button-toolbar-border-color]
 * The border-color of the button
 *
 * @param {color} [$border-color-over=$button-toolbar-border-color-over]
 * The border-color of the button when the cursor is over the button
 *
 * @param {color} [$border-color-focus=$button-toolbar-border-color-focus]
 * The border-color of the button when focused
 *
 * @param {color} [$border-color-pressed=$button-toolbar-border-color-pressed]
 * The border-color of the button when pressed
 *
 * @param {color} [$border-color-focus-over=$button-toolbar-border-color-focus-over]
 * The border-color of the button when the button is focused and the cursor is over the
 * button
 *
 * @param {color} [$border-color-focus-pressed=$button-toolbar-border-color-focus-pressed]
 * The border-color of the button when focused and pressed
 *
 * @param {color} [$border-color-disabled=$button-toolbar-border-color-disabled]
 * The border-color of the button when disabled
 *
 * @param {number} [$padding=$button-large-padding]
 * The amount of padding inside the border of the button on all sides
 *
 * @param {number} [$text-padding=$button-large-text-padding]
 * The amount of horizontal space to add to the left and right of the button text
 *
 * @param {color} [$background-color=$button-toolbar-background-color]
 * The background-color of the button
 *
 * @param {color} [$background-color-over=$button-toolbar-background-color-over]
 * The background-color of the button when the cursor is over the button
 *
 * @param {color} [$background-color-focus=$button-toolbar-background-color-focus]
 * The background-color of the button when focused
 *
 * @param {color} [$background-color-pressed=$button-toolbar-background-color-pressed]
 * The background-color of the button when pressed
 *
 * @param {color} [$background-color-focus-over=$button-toolbar-background-color-focus-over]
 * The background-color of the button when the button is focused and the cursor is over
 * the button
 *
 * @param {color} [$background-color-focus-pressed=$button-toolbar-background-color-focus-pressed]
 * The background-color of the button when focused and pressed
 *
 * @param {color} [$background-color-disabled=$button-toolbar-background-color-disabled]
 * The background-color of the button when disabled
 *
 * @param {string/list} [$background-gradient=$button-toolbar-background-gradient]
 * The background-gradient for the button.  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} [$background-gradient-over=$button-toolbar-background-gradient-over]
 * The background-gradient to use when the cursor is over the button. 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} [$background-gradient-focus=$button-toolbar-background-gradient-focus]
 * The background-gradient to use when the the button is 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} [$background-gradient-pressed=$button-toolbar-background-gradient-pressed]
 * The background-gradient to use when the the button is pressed. 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} [$background-gradient-focus-over=$button-toolbar-background-gradient-focus-over]
 * The background-gradient to use when the the button is focused and the cursor is over
 * the button. 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} [$background-gradient-focus-pressed=$button-toolbar-background-gradient-focus-pressed]
 * The background-gradient to use when the the button is focused and pressed. 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} [$background-gradient-disabled=$button-toolbar-background-gradient-disabled]
 * The background-gradient to use when the the button is disabled. Can be either the name
 * of a predefined gradient or a list of color stops. Used as the `$type` parameter for
 * {@link Global_CSS#background-gradient}.
 *
 * @param {color} [$color=$button-toolbar-color]
 * The text color of the button
 *
 * @param {color} [$color-over=$button-toolbar-color-over]
 * The text color of the button when the cursor is over the button
 *
 * @param {color} [$color-focus=$button-toolbar-color-focus]
 * The text color of the button when the button is focused
 *
 * @param {color} [$color-pressed=$button-toolbar-color-pressed]
 * The text color of the button when the button is pressed
 *
 * @param {color} [$color-focus-over=$button-toolbar-color-focus-over]
 * The text color of the button when the button is focused and the cursor is over the button
 *
 * @param {color} [$color-focus-pressed=$button-toolbar-color-focus-pressed]
 * The text color of the button when the button is focused and pressed
 *
 * @param {color} [$color-disabled=$button-toolbar-color-disabled]
 * The text color of the button when the button is disabled
 *
 * @param {number/list} [$inner-border-width=$button-toolbar-inner-border-width]
 * The inner border-width of the button
 *
 * @param {number/list} [$inner-border-width-over=$button-toolbar-inner-border-width-over]
 * The inner border-width of the button when the cursor is over the button
 *
 * @param {number/list} [$inner-border-width-focus=$button-toolbar-inner-border-width-focus]
 * The inner border-width of the button when focused
 *
 * @param {number/list} [$inner-border-width-pressed=$button-toolbar-inner-border-width-pressed]
 * The inner border-width of the button when pressed
 *
 * @param {number/list} [$inner-border-width-focus-over=$button-toolbar-inner-border-width-focus-over]
 * The inner border-width of the button when the button is focused and the cursor is over
 * the button
 *
 * @param {number/list} [$inner-border-width-focus-pressed=$button-toolbar-inner-border-width-focus-pressed]
 * The inner border-width of the button when focused and pressed
 *
 * @param {number/list} [$inner-border-width-disabled=$button-toolbar-inner-border-width-disabled]
 * The inner border-width of the button when disabled
 *
 * @param {color} [$inner-border-color=$button-toolbar-inner-border-color]
 * The inner border-color of the button
 *
 * @param {color} [$inner-border-color-over=$button-toolbar-inner-border-color-over]
 * The inner border-color of the button when the cursor is over the button
 *
 * @param {color} [$inner-border-color-focus=$button-toolbar-inner-border-color-focus]
 * The inner border-color of the button when focused
 *
 * @param {color} [$inner-border-color-pressed=$button-toolbar-inner-border-color-pressed]
 * The inner border-color of the button when pressed
 *
 * @param {color} [$inner-border-color-focus-over=$button-toolbar-inner-border-color-focus-over]
 * The inner border-color of the button when the button is focused and the cursor is over
 * the button
 *
 * @param {color} [$inner-border-color-focus-pressed=$button-toolbar-inner-border-color-focus-pressed]
 * The inner border-color of the button when focused and pressed
 *
 * @param {color} [$inner-border-color-disabled=$button-toolbar-inner-border-color-disabled]
 * The inner border-color of the button when disabled
 *
 * @param {number} [$body-outline-width-focus=$button-toolbar-body-outline-width-focus]
 * The body outline width of the button when focused
 *
 * @param {number} [$body-outline-style-focus=$button-toolbar-body-outline-style-focus]
 * The body outline-style of the button when focused
 *
 * @param {number} [$body-outline-color-focus=$button-toolbar-body-outline-color-focus]
 * The body outline color of the button when focused
 *
 * @param {number} [$font-size=$button-large-font-size]
 * The font-size of the button
 *
 * @param {number} [$font-size-over=$button-large-font-size-over]
 * The font-size of the button when the cursor is over the button
 *
 * @param {number} [$font-size-focus=$button-large-font-size-focus]
 * The font-size of the button when the button is focused
 *
 * @param {number} [$font-size-pressed=$button-large-font-size-pressed]
 * The font-size of the button when the button is pressed
 *
 * @param {number} [$font-size-focus-over=$button-large-font-size-focus-over]
 * The font-size of the button when the button is focused and the cursor is over the
 * button
 *
 * @param {number} [$font-size-focus-pressed=$button-large-font-size-focus-pressed]
 * The font-size of the button when the button is focused and pressed
 *
 * @param {number} [$font-size-disabled=$button-large-font-size-disabled]
 * The font-size of the button when the button is disabled
 *
 * @param {string} [$font-weight=$button-large-font-weight]
 * The font-weight of the button
 *
 * @param {string} [$font-weight-over=$button-large-font-weight-over]
 * The font-weight of the button when the cursor is over the button
 *
 * @param {string} [$font-weight-focus=$button-large-font-weight-focus]
 * The font-weight of the button when the button is focused
 *
 * @param {string} [$font-weight-pressed=$button-large-font-weight-pressed]
 * The font-weight of the button when the button is pressed
 *
 * @param {string} [$font-weight-focus-over=$button-large-font-weight-focus-over]
 * The font-weight of the button when the button is focused and the cursor is over the
 * button
 *
 * @param {string} [$font-weight-focus-pressed=$button-large-font-weight-focus-pressed]
 * The font-weight of the button when the button is focused and pressed
 *
 * @param {string} [$font-weight-disabled=$button-large-font-weight-disabled]
 * The font-weight of the button when the button is disabled
 *
 * @param {string} [$font-family=$button-large-font-family]
 * The font-family of the button
 *
 * @param {string} [$font-family-over=$button-large-font-family-over]
 * The font-family of the button when the cursor is over the button
 *
 * @param {string} [$font-family-focus=$button-large-font-family-focus]
 * The font-family of the button when the button is focused
 *
 * @param {string} [$font-family-pressed=$button-large-font-family-pressed]
 * The font-family of the button when the button is pressed
 *
 * @param {string} [$font-family-focus-over=$button-large-font-family-focus-over]
 * The font-family of the button when the button is focused and the cursor is over the
 * button
 *
 * @param {string} [$font-family-focus-pressed=$button-large-font-family-focus-pressed]
 * The font-family of the button when the button is focused and pressed
 *
 * @param {string} [$font-family-disabled=$button-large-font-family-disabled]
 * The font-family of the button when the button is disabled
 *
 * @param {number} [$line-height=$button-large-line-height]
 * The line-height of the button text
 *
 * @param {number} [$icon-size=$button-large-icon-size]
 * The size of the button icon
 *
 * @param {number} [$glyph-font-size=$button-large-glyph-font-size]
 * The font-size for the button glyph
 *
 * @param {number} [$icon-spacing=$button-large-icon-spacing]
 * The space between the button's icon and text
 *
 * @param {color} [$glyph-color=$button-toolbar-glyph-color]
 * The color of the button's {@link #glyph} icon
 *
 * @param {number} [$glyph-opacity=$button-toolbar-glyph-opacity]
 * The opacity of the button's {@link #glyph} icon
 *
 * @param {number} [$arrow-width=$button-large-arrow-width]
 * The width of the button's {@link #cfg-menu} arrow
 *
 * @param {number} [$arrow-height=$button-large-arrow-height]
 * The height of the button's {@link #cfg-menu} arrow
 *
 * @param {string/list} [$arrow-glyph=$button-large-arrow-glyph]
 * Glyph for the button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {string/list} [$arrow-glyph-color=$button-toolbar-arrow-glyph-color]
 * Glyph color for the button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {number} [$split-width=$button-large-split-width]
 * The width of a {@link Ext.button.Split Split Button}'s arrow
 *
 * @param {number} [$split-height=$button-large-split-height]
 * The height of a {@link Ext.button.Split Split Button}'s arrow
 *
 * @param {number} [$split-line-width=$button-large-split-line-width]
 * The default width for a {@link Ext.button.Split Split Button}'s line.
 * Themes that include the line in the arrow background image should set this to 0
 *
 * @param {color} [$split-line-color=$button-toolbar-split-line-color]
 * The color for a {@link Ext.button.Split Split Button}'s line.
 * Only applicable when `$split-line-width` is greater than 0.
 *
 * @param {boolean} [$include-ui-menu-arrows=$button-include-ui-menu-arrows]
 * True to include the UI name in the file name of the {@link #cfg-menu}
 * arrow icon. Set this to false to share the same arrow bewteen multiple UIs.
 *
 * @param {boolean} [$include-ui-split-arrows=$button-include-ui-split-arrows]
 * True to include the UI name in the file name of the {@link Ext.button.Split Split Button}'s
 * arrow icon. Set this to false to share the same arrow bewteen multiple UIs.
 *
 * @param {boolean} [$include-split-noline-arrows=$button-toolbar-include-split-noline-arrows]
 * True to add a "-noline" suffix to the file name of the {@link Ext.button.Split Split Button}'s 
 * arrow icon.  Used for hiding the split line when toolbar buttons are in their default
 * state.
 *
 * @param {boolean} [$include-split-over-arrows=$button-include-split-over-arrows]
 * True to use a separate icon for {@link Ext.button.Split Split Button}s when the cursor
 * is over the button.  The over icon file name will have a "-o" suffix
 *
 * @param {number} [$opacity-disabled=$button-toolbar-opacity-disabled]
 * The opacity of the button when it is disabled
 *
 * @param {number} [$inner-opacity-disabled=$button-toolbar-inner-opacity-disabled]
 * The opacity of the button's text and icon elements when when the button is disabled
 * 
 * @member Ext.button.Button
 */
@mixin extjs-button-toolbar-large-ui(
    $ui,

    $border-radius: $button-large-border-radius,
    $border-width: $button-large-border-width,

    $border-color: null,
    $border-color-over: null,
    $border-color-focus: null,
    $border-color-pressed: null,
    $border-color-focus-over: null,
    $border-color-focus-pressed: null,
    $border-color-disabled: null,

    $padding: $button-large-padding,
    $text-padding: $button-large-text-padding,

    $background-color: null,
    $background-color-over: null,
    $background-color-focus: null,
    $background-color-pressed: null,
    $background-color-focus-over: null,
    $background-color-focus-pressed: null,
    $background-color-disabled: null,

    $background-gradient: $button-toolbar-background-gradient,
    $background-gradient-over: $button-toolbar-background-gradient-over,
    $background-gradient-focus: $button-toolbar-background-gradient-focus,
    $background-gradient-pressed: $button-toolbar-background-gradient-pressed,
    $background-gradient-focus-over: $button-toolbar-background-gradient-focus-over,
    $background-gradient-focus-pressed: $button-toolbar-background-gradient-focus-pressed,
    $background-gradient-disabled: $button-toolbar-background-gradient-disabled,

    $color: null,
    $color-over: null,
    $color-focus: null,
    $color-pressed: null,
    $color-focus-over: null,
    $color-focus-pressed: null,
    $color-disabled: null,

    $inner-border-width: null,
    $inner-border-width-over: null,
    $inner-border-width-focus: null,
    $inner-border-width-pressed: null,
    $inner-border-width-focus-over: null,
    $inner-border-width-focus-pressed: null,
    $inner-border-width-disabled: null,

    $inner-border-color: null,
    $inner-border-color-over: null,
    $inner-border-color-focus: null,
    $inner-border-color-pressed: null,
    $inner-border-color-focus-over: null,
    $inner-border-color-focus-pressed: null,
    $inner-border-color-disabled: null,

    $body-outline-width-focus: $button-toolbar-body-outline-width-focus,
    $body-outline-style-focus: $button-toolbar-body-outline-style-focus,
    $body-outline-color-focus: $button-toolbar-body-outline-color-focus,

    $font-size: null,
    $font-size-over: null,
    $font-size-focus: null,
    $font-size-pressed: null,
    $font-size-focus-over: null,
    $font-size-focus-pressed: null,
    $font-size-disabled: null,

    $font-weight: null,
    $font-weight-over: null,
    $font-weight-focus: null,
    $font-weight-pressed: null,
    $font-weight-focus-over: null,
    $font-weight-focus-pressed: null,
    $font-weight-disabled: null,

    $font-family: null,
    $font-family-over: null,
    $font-family-focus: null,
    $font-family-pressed: null,
    $font-family-focus-over: null,
    $font-family-focus-pressed: null,
    $font-family-disabled: null,

    $line-height: $button-large-line-height,
    $icon-size: $button-large-icon-size,
    $glyph-font-size: $button-large-glyph-font-size,
    $icon-spacing: $button-large-icon-spacing,
    $glyph-color: $button-toolbar-glyph-color,
    $glyph-opacity: $button-toolbar-glyph-opacity,
    $arrow-width: $button-large-arrow-width,
    $arrow-height: $button-large-arrow-height,
    $arrow-glyph: $button-large-arrow-glyph,
    $arrow-glyph-color: $button-toolbar-arrow-glyph-color,
    $split-width: $button-large-split-width,
    $split-height: $button-large-split-height,
    $split-line-width: $button-large-split-line-width,
    $split-line-color: $button-toolbar-split-line-color,
    $include-ui-menu-arrows:  $button-include-ui-menu-arrows,
    $include-ui-split-arrows: $button-include-ui-split-arrows,
    $include-split-noline-arrows: $button-toolbar-include-split-noline-arrows,
    $include-split-over-arrows: $button-include-split-over-arrows,
    $opacity-disabled: $button-toolbar-opacity-disabled,
    $inner-opacity-disabled: $button-toolbar-inner-opacity-disabled
) {
    @if $border-color == null {
        $border-color: $button-toolbar-border-color;

        @if $border-color-over == null {
            $border-color-over: $button-toolbar-border-color-over;
        }

        @if $border-color-focus == null {
            $border-color-focus: $button-toolbar-border-color-focus;
        }

        @if $border-color-pressed == null {
            $border-color-pressed: $button-toolbar-border-color-pressed;
        }

        @if $border-color-focus-over == null {
            $border-color-focus-over: $button-toolbar-border-color-focus-over;
        }

        @if $border-color-focus-pressed == null {
            $border-color-focus-pressed: $button-toolbar-border-color-focus-pressed;
        }

        @if $border-color-disabled == null {
            $border-color-disabled: $button-toolbar-border-color-disabled;
        }
    } @else {
        @if $border-color-over == null {
            $border-color-over: button-toolbar-border-color-over($border-color);
        }

        @if $border-color-focus == null {
            $border-color-focus: button-toolbar-border-color-focus($border-color);
        }

        @if $border-color-pressed == null {
            $border-color-pressed: button-toolbar-border-color-pressed($border-color);
        }

        @if $border-color-focus-over == null {
            $border-color-focus-over: $border-color-over;
        }

        @if $border-color-focus-pressed == null {
            $border-color-focus-pressed: $border-color-pressed;
        }

        @if $border-color-disabled == null {
            $border-color-disabled: button-toolbar-border-color-disabled($border-color);
        }
    }

    @if $background-color == null {
        $background-color: $button-toolbar-background-color;

        @if $background-color-over == null {
            $background-color-over: $button-toolbar-background-color-over;
        }

        @if $background-color-focus == null {
            $background-color-focus: $button-toolbar-background-color-focus;
        }

        @if $background-color-pressed == null {
            $background-color-pressed: $button-toolbar-background-color-pressed;
        }

        @if $background-color-focus-over == null {
            $background-color-focus-over: $button-toolbar-background-color-focus-over;
        }

        @if $background-color-focus-pressed == null {
            $background-color-focus-pressed: $button-toolbar-background-color-focus-pressed;
        }

        @if $background-color-disabled == null {
            $background-color-disabled: $button-toolbar-background-color-disabled;
        }
    } @else {
        @if $background-color-over == null {
            $background-color-over: button-toolbar-background-color-over($background-color);
        }

        @if $background-color-focus == null {
            $background-color-focus: button-toolbar-background-color-focus($background-color);
        }

        @if $background-color-pressed == null {
            $background-color-pressed: button-toolbar-background-color-pressed($background-color);
        }

        @if $background-color-focus-over == null {
            $background-color-focus-over: $background-color-over;
        }

        @if $background-color-focus-pressed == null {
            $background-color-focus-pressed: $background-color-pressed;
        }

        @if $background-color-disabled == null {
            $background-color-disabled: button-toolbar-background-color-disabled($background-color);
        }
    }

    @if $color == null {
        $color: $button-toolbar-color;

        @if $color-over == null {
            $color-over: $button-toolbar-color-over;
        }

        @if $color-focus == null {
            $color-focus: $button-toolbar-color-focus;
        }

        @if $color-pressed == null {
            $color-pressed: $button-toolbar-color-pressed;
        }

        @if $color-focus-over == null {
            $color-focus-over: $button-toolbar-color-focus-over;
        }

        @if $color-focus-pressed == null {
            $color-focus-pressed: $button-toolbar-color-focus-pressed;
        }

        @if $color-disabled == null {
            $color-disabled: $button-toolbar-color-disabled;
        }
    } @else {
        @if $color-over == null {
            $color-over: button-toolbar-color-over($color);
        }

        @if $color-focus == null {
            $color-focus: button-toolbar-color-focus($color);
        }

        @if $color-pressed == null {
            $color-pressed: button-toolbar-color-pressed($color);
        }

        @if $color-focus-over == null {
            $color-focus-over: $color-over;
        }

        @if $color-focus-pressed == null {
            $color-focus-pressed: $color-pressed;
        }

        @if $color-disabled == null {
            $color-disabled: button-toolbar-color-disabled($color);
        }
    }

    @if $inner-border-width == null {
        $inner-border-width: $button-toolbar-inner-border-width;

        @if $inner-border-width-over == null {
            $inner-border-width-over: $button-toolbar-inner-border-width-over;
        }

        @if $inner-border-width-focus == null {
            $inner-border-width-focus: $button-toolbar-inner-border-width-focus;
        }

        @if $inner-border-width-pressed == null {
            $inner-border-width-pressed: $button-toolbar-inner-border-width-pressed;
        }

        @if $inner-border-width-focus-over == null {
            $inner-border-width-focus-over: $button-toolbar-inner-border-width-focus-over;
        }

        @if $inner-border-width-focus-pressed == null {
            $inner-border-width-focus-pressed: $button-toolbar-inner-border-width-focus-pressed;
        }

        @if $inner-border-width-disabled == null {
            $inner-border-width-disabled: $button-toolbar-inner-border-width-disabled;
        }
    } @else {
        @if $inner-border-width-over == null {
            $inner-border-width-over: $inner-border-width;
        }

        @if $inner-border-width-focus == null {
            $inner-border-width-focus: $inner-border-width;
        }

        @if $inner-border-width-pressed == null {
            $inner-border-width-pressed: $inner-border-width;
        }

        @if $inner-border-width-focus-over == null {
            $inner-border-width-focus-over: $inner-border-width-over;
        }

        @if $inner-border-width-focus-pressed == null {
            $inner-border-width-focus-pressed: $inner-border-width-pressed;
        }

        @if $inner-border-width-disabled == null {
            $inner-border-width-disabled: $inner-border-width;
        }
    }

    @if $inner-border-color == null {
        $inner-border-color: $button-toolbar-inner-border-color;

        @if $inner-border-color-over == null {
            $inner-border-color-over: $button-toolbar-inner-border-color-over;
        }

        @if $inner-border-color-focus == null {
            $inner-border-color-focus: $button-toolbar-inner-border-color-focus;
        }

        @if $inner-border-color-pressed == null {
            $inner-border-color-pressed: $button-toolbar-inner-border-color-pressed;
        }

        @if $inner-border-color-focus-over == null {
            $inner-border-color-focus-over: $button-toolbar-inner-border-color-focus-over;
        }

        @if $inner-border-color-focus-pressed == null {
            $inner-border-color-focus-pressed: $button-toolbar-inner-border-color-focus-pressed;
        }

        @if $inner-border-color-disabled == null {
            $inner-border-color-disabled: $button-toolbar-inner-border-color-disabled;
        }
    } @else {
        @if $inner-border-color-over == null {
            $inner-border-color-over: button-toolbar-inner-border-color-over($background-color-over, $color-over);
        }

        @if $inner-border-color-focus == null {
            $inner-border-color-focus: button-toolbar-inner-border-color-focus($background-color-focus, $color-focus);
        }

        @if $inner-border-color-pressed == null {
            $inner-border-color-pressed: button-toolbar-inner-border-color-pressed($background-color-pressed, $color-pressed);
        }

        @if $inner-border-color-focus-over == null {
            $inner-border-color-focus-over: button-toolbar-inner-border-color-focus-over($background-color-focus-over, $color-focus-over);
        }

        @if $inner-border-color-focus-pressed == null {
            $inner-border-color-focus-pressed: button-toolbar-inner-border-color-focus-pressed($background-color-focus-pressed, $color-focus-pressed)
        }

        @if $inner-border-color-disabled == null {
            $inner-border-color-disabled: button-toolbar-inner-border-color-disabled($background-color-disabled, $color-disabled);
        }
    }

    @if $font-size == null {
        $font-size: $button-large-font-size;

        @if $font-size-over == null {
            $font-size-over: $button-large-font-size-over;
        }

        @if $font-size-focus == null {
            $font-size-focus: $button-large-font-size-focus;
        }

        @if $font-size-pressed == null {
            $font-size-pressed: $button-large-font-size-pressed;
        }

        @if $font-size-focus-over == null {
            $font-size-focus-over: $button-large-font-size-focus-over;
        }

        @if $font-size-focus-pressed == null {
            $font-size-focus-pressed: $button-large-font-size-focus-pressed;
        }

        @if $font-size-disabled == null {
            $font-size-disabled: $button-large-font-size-disabled;
        }
    } @else {
        @if $font-size-over == null {
            $font-size-over: $font-size;
        }

        @if $font-size-focus == null {
            $font-size-focus: $font-size;
        }

        @if $font-size-pressed == null {
            $font-size-pressed: $font-size;
        }

        @if $font-size-focus-over == null {
            $font-size-focus-over: $font-size-over;
        }

        @if $font-size-focus-pressed == null {
            $font-size-focus-pressed: $font-size-pressed;
        }

        @if $font-size-disabled == null {
            $font-size-disabled: $font-size;
        }
    }

    @if $font-weight == null {
        $font-weight: $button-large-font-weight;

        @if $font-weight-over == null {
            $font-weight-over: $button-large-font-weight-over;
        }

        @if $font-weight-focus == null {
            $font-weight-focus: $button-large-font-weight-focus;
        }

        @if $font-weight-pressed == null {
            $font-weight-pressed: $button-large-font-weight-pressed;
        }

        @if $font-weight-focus-over == null {
            $font-weight-focus-over: $button-large-font-weight-focus-over;
        }

        @if $font-weight-focus-pressed == null {
            $font-weight-focus-pressed: $button-large-font-weight-focus-pressed;
        }

        @if $font-weight-disabled == null {
            $font-weight-disabled: $button-large-font-weight-disabled;
        }
    } @else {
        @if $font-weight-over == null {
            $font-weight-over: $font-weight;
        }

        @if $font-weight-focus == null {
            $font-weight-focus: $font-weight;
        }

        @if $font-weight-pressed == null {
            $font-weight-pressed: $font-weight;
        }

        @if $font-weight-focus-over == null {
            $font-weight-focus-over: $font-weight-over;
        }

        @if $font-weight-focus-pressed == null {
            $font-weight-focus-pressed: $font-weight-pressed;
        }

        @if $font-weight-disabled == null {
            $font-weight-disabled: $font-weight;
        }
    }

    @if $font-family == null {
        $font-family: $button-large-font-family;

        @if $font-family-over == null {
            $font-family-over: $button-large-font-family-over;
        }

        @if $font-family-focus == null {
            $font-family-focus: $button-large-font-family-focus;
        }

        @if $font-family-pressed == null {
            $font-family-pressed: $button-large-font-family-pressed;
        }

        @if $font-family-focus-over == null {
            $font-family-focus-over: $button-large-font-family-focus-over;
        }

        @if $font-family-focus-pressed == null {
            $font-family-focus-pressed: $button-large-font-family-focus-pressed;
        }

        @if $font-family-disabled == null {
            $font-family-disabled: $button-large-font-family-disabled;
        }
    } @else {
        @if $font-family-over == null {
            $font-family-over: $font-family;
        }

        @if $font-family-focus == null {
            $font-family-focus: $font-family;
        }

        @if $font-family-pressed == null {
            $font-family-pressed: $font-family;
        }

        @if $font-family-focus-over == null {
            $font-family-focus-over: $font-family-over;
        }

        @if $font-family-focus-pressed == null {
            $font-family-focus-pressed: $font-family-pressed;
        }

        @if $font-family-disabled == null {
            $font-family-disabled: $font-family;
        }
    }

    @include extjs-button-ui(
        $ui: '#{$ui}-toolbar-large',

        $border-radius: $border-radius,
        $border-width: $border-width,

        $border-color: $border-color,
        $border-color-over: $border-color-over,
        $border-color-focus: $border-color-focus,
        $border-color-pressed: $border-color-pressed,
        $border-color-focus-over: $border-color-focus-over,
        $border-color-focus-pressed: $border-color-focus-pressed,
        $border-color-disabled: $border-color-disabled,

        $padding: $padding,
        $text-padding: $text-padding,

        $background-color: $background-color,
        $background-color-over: $background-color-over,
        $background-color-focus: $background-color-focus,
        $background-color-pressed: $background-color-pressed,
        $background-color-focus-over: $background-color-focus-over,
        $background-color-focus-pressed: $background-color-focus-pressed,
        $background-color-disabled: $background-color-disabled,

        $background-gradient: $background-gradient,
        $background-gradient-over: $background-gradient-over,
        $background-gradient-focus: $background-gradient-focus,
        $background-gradient-pressed: $background-gradient-pressed,
        $background-gradient-focus-over: $background-gradient-focus-over,
        $background-gradient-focus-pressed: $background-gradient-focus-pressed,
        $background-gradient-disabled: $background-gradient-disabled,

        $color: $color,
        $color-over: $color-over,
        $color-focus: $color-focus,
        $color-pressed: $color-pressed,
        $color-focus-over: $color-focus-over,
        $color-focus-pressed: $color-focus-pressed,
        $color-disabled: $color-disabled,

        $inner-border-width: $inner-border-width,
        $inner-border-width-over: $inner-border-width-over,
        $inner-border-width-focus: $inner-border-width-focus,
        $inner-border-width-pressed: $inner-border-width-pressed,
        $inner-border-width-focus-over: $inner-border-width-focus-over,
        $inner-border-width-focus-pressed: $inner-border-width-focus-pressed,
        $inner-border-width-disabled: $inner-border-width-disabled,

        $inner-border-color: $inner-border-color,
        $inner-border-color-over: $inner-border-color-over,
        $inner-border-color-focus: $inner-border-color-focus,
        $inner-border-color-pressed: $inner-border-color-pressed,
        $inner-border-color-focus-over: $inner-border-color-focus-over,
        $inner-border-color-focus-pressed: $inner-border-color-focus-pressed,
        $inner-border-color-disabled: $inner-border-color-disabled,

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

        $font-size: $font-size,
        $font-size-over: $font-size-over,
        $font-size-focus: $font-size-focus,
        $font-size-pressed: $font-size-pressed,
        $font-size-focus-over: $font-size-focus-over,
        $font-size-focus-pressed: $font-size-focus-pressed,
        $font-size-disabled: $font-size-disabled,

        $font-weight: $font-weight,
        $font-weight-over: $font-weight-over,
        $font-weight-focus: $font-weight-focus,
        $font-weight-pressed: $font-weight-pressed,
        $font-weight-focus-over: $font-weight-focus-over,
        $font-weight-focus-pressed: $font-weight-focus-pressed,
        $font-weight-disabled: $font-weight-disabled,

        $font-family: $font-family,
        $font-family-over: $font-family-over,
        $font-family-focus: $font-family-focus,
        $font-family-pressed: $font-family-pressed,
        $font-family-focus-over: $font-family-focus-over,
        $font-family-focus-pressed: $font-family-focus-pressed,
        $font-family-disabled: $font-family-disabled,

        $line-height: $line-height,
        $icon-size: $icon-size,
        $glyph-font-size: $glyph-font-size,
        $icon-spacing: $icon-spacing,
        $glyph-color: $glyph-color,
        $glyph-opacity: $glyph-opacity,
        $arrow-width: $arrow-width,
        $arrow-height: $arrow-height,
        $arrow-glyph: $arrow-glyph,
        $arrow-glyph-color: $arrow-glyph-color,
        $split-width: $split-width,
        $split-height: $split-height,
        $split-line-width: $split-line-width,
        $split-line-color: $split-line-color,
        $include-ui-menu-arrows:  $include-ui-menu-arrows,
        $include-ui-split-arrows: $include-ui-split-arrows,
        $include-split-noline-arrows: $include-split-noline-arrows,
        $include-split-over-arrows: $include-split-over-arrows,
        $opacity-disabled: $opacity-disabled,
        $inner-opacity-disabled: $inner-opacity-disabled
    );
}