/**
 * @class Ext.grid.header.Container
 */

/**
 * @var {color}
 * The background-color of grid headers
 */
$grid-header-background-color: dynamic(#ddd);

/**
 * @var {string/list}
 * The background-gradient of grid headers.  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}.
 */
$grid-header-background-gradient: dynamic('grid-header');

/**
 * @var {color}
 * The border-color of grid headers
 */
$grid-header-border-color: dynamic(#333);

/**
 * @var {number}
 * The border-width of grid headers
 */
$grid-header-border-width: dynamic(1px);

/**
 * @var {string}
 * The border-style of grid headers
 */
$grid-header-border-style: dynamic(solid);

/**
 * @var {color}
 * The background-color of grid headers when the cursor is over the header
 */
$grid-header-over-background-color: dynamic(#eee);

/**
 * @var {string/list}
 * The background-gradient of grid headers when the cursor is over the header.  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}.
 */
$grid-header-over-background-gradient: dynamic('grid-header-over');

/**
 * @var {color}
 * The background-color of grid headers when sorted
 */
$grid-header-sorted-background-color: dynamic($grid-header-over-background-color);

/**
 * @var {string/list}
 * The background-gradient of grid headers when sorted.  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}.
 */
$grid-header-sorted-background-gradient: dynamic($grid-header-over-background-gradient);

/**
 * @var {color}
 * The background-color of a grid header when its menu is open
 */
$grid-header-open-background-color: dynamic(transparent);

/**
 * @var {number/list}
 * The padding to apply to grid headers
 */
$grid-header-padding: dynamic(5px);

/**
 * @var {number}
 * The height of grid header triggers
 */
$grid-header-trigger-height: dynamic(22px);

/**
 * @var {number}
 * The width of grid header triggers
 */
$grid-header-trigger-width: dynamic(14px);

/**
 * @var {string}
 * The background-image of grid header triggers
 */
$grid-header-trigger-background-image: dynamic('grid/hd-pop');

/**
 * @var {string/list}
 * Glyph for the grid header trigger icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$grid-header-trigger-glyph-font-size: dynamic(16px);

/**
 * @var {string/list}
 * Glyph for the grid header trigger icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$grid-header-trigger-glyph: dynamic($fa-var-caret-down $grid-header-trigger-glyph-font-size $font-icon-font-family);

/**
 * @var {color}
 * The color to use for the grid header trigger icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$grid-header-trigger-glyph-color: dynamic($color);

/**
 * @var {number}
 * The width of the grid header sort icon
 */
$grid-header-sort-icon-width: dynamic(9px);

/**
 * @var {string}
 * The type of cursor to display when the cursor is over a grid header trigger
 */
$grid-header-trigger-cursor: dynamic(pointer);

/**
 * @var {number}
 * The amount of space between the header trigger and text
 */
$grid-header-trigger-spacing: dynamic(1px);

/**
 * @var {list}
 * The background-position of the header trigger
 */
$grid-header-trigger-background-position: dynamic(0 center);

/**
 * @var {color}
 * The background-color of the header trigger
 */
$grid-header-trigger-background-color: dynamic(transparent);

/**
 * @var {color}
 * The background-color of the header trigger when the menu is open
 */
$grid-header-trigger-background-color-open: dynamic(transparent);

/**
 * @var {number}
 * The space between the grid header sort icon and the grid header text
 */
$grid-header-sort-icon-spacing: dynamic(3px);

// private
$grid-header-sort-icon-position: dynamic(right center);

/**
 * @var {string/list}
 * Glyph for the grid header sort icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$grid-header-sort-glyph-font-size: dynamic(14px);

/**
 * @var {color}
 * The color to use for the grid header sort icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$grid-header-sort-glyph-color: dynamic($color);

/**
 * @var {string/list}
 * Glyph for the grid header "sort ascending" icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$grid-header-sort-asc-glyph: dynamic($fa-var-long-arrow-up $grid-header-sort-glyph-font-size $font-icon-font-family);

/**
 * @var {string/list}
 * Glyph for the grid header "sort descending" icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$grid-header-sort-desc-glyph: dynamic($fa-var-long-arrow-down $grid-header-sort-glyph-font-size $font-icon-font-family);

/**
 * @var {string/list}
 * Glyph for the grid header menu icons when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$grid-header-menu-glyph-font-size: dynamic(16px);

/**
 * @var {color}
 * The color to use for the grid header menu icons when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$grid-header-menu-glyph-color: dynamic($menu-glyph-color);

/**
 * @var {string/list}
 * Glyph for the grid header menu "sort ascending" icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$grid-header-menu-sort-asc-glyph: dynamic($ext-var-sort-up $grid-header-menu-glyph-font-size ExtJS);

/**
 * @var {string/list}
 * Glyph for the grid header menu "sort descending" icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$grid-header-menu-sort-desc-glyph: dynamic($ext-var-sort-down $grid-header-menu-glyph-font-size ExtJS);

/**
 * @var {string/list}
 * Glyph for the grid header menu "columns" icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$grid-header-menu-columns-glyph: dynamic($ext-var-columns $grid-header-menu-glyph-font-size ExtJS);