/** @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);