/**
 * @class Ext.grid.cell.Base
 */
 
/**
 * @var {color}
 * Grid Cell text color
 */
$gridcell-color: dynamic(null);
 
/**
 * @var {color}
 * Grid Cell text color when hovered
 */
$gridcell-hovered-color: dynamic($gridrow-hovered-color or $listitem-hovered-color);
 
/**
 * @var {color}
 * Grid Cell text color when selected
 */
$gridcell-selected-color: dynamic($gridrow-selected-color or $listitem-selected-color);
 
/**
 * @var {color}
 * Grid Cell text color when pressed
 */
$gridcell-pressed-color: dynamic($gridrow-pressed-color or $listitem-pressed-color);
 
/**
 * @var {color}
 * Grid Cell background-color
 */
$gridcell-background-color: dynamic(null);
 
/**
 * @var {color}
 * Grid Cell background-color when hovered
 */
$gridcell-hovered-background-color: dynamic($gridrow-hovered-background-color or $listitem-hovered-background-color);
 
/**
 * @var {color}
 * Grid Cell background-color when selected
 */
$gridcell-selected-background-color: dynamic($gridrow-selected-background-color or $listitem-selected-background-color);
 
/**
 * @var {color}
 * Grid Cell background-color when pressed
 */
$gridcell-pressed-background-color: dynamic($gridrow-pressed-background-color or $listitem-pressed-background-color);
 
/**
 * @var {number}
 * Grid Cell {@link Ext.grid.Grid#columnLines column} border-width
 */
$gridcell-column-border-width: dynamic(1px);
 
/**
 * @var {string}
 * Grid Cell {@link Ext.grid.Grid#columnLines column} border-style
 */
$gridcell-column-border-style: dynamic($gridrow-border-style or $listitem-border-style);
 
/**
 * @var {color}
 * Grid Cell {@link Ext.grid.Grid#columnLines column} border-color
 */
$gridcell-column-border-color: dynamic($gridrow-border-color or $listitem-border-color);
 
/**
 * @var {number}
 * Grid Cell outline-width when focused
 */
$gridcell-focused-outline-width: dynamic($listitem-focused-outline-width);
 
/**
 * @var {string}
 * Grid Cell outline-style when focused
 */
$gridcell-focused-outline-style: dynamic($listitem-focused-outline-style);
 
/**
 * @var {color}
 * Grid Cell outline-color when focused
 */
$gridcell-focused-outline-color: dynamic($listitem-focused-outline-color);
 
/**
 * @var {number}
 * Grid Cell outline-offset when focused
 */
$gridcell-focused-outline-offset: dynamic($listitem-focused-outline-offset);
 
//# fashion replaces $grid-cell-font-weight 
/**
 * @var {string/number}
 * Grid Cell font-weight
 */
$gridcell-font-weight: dynamic($listitem-font-weight);
 
//# fashion replaces $grid-cell-font-size 
/**
 * @var {number}
 * Grid Cell font-size
 */
$gridcell-font-size: dynamic($listitem-font-size);
 
//# fashion replaces $grid-cell-font-size-big 
/**
 * @var {number}
 * Grid Cell font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$gridcell-font-size-big: dynamic($listitem-font-size-big);
 
//# fashion replaces $grid-cell-line-height 
/**
 * @var {number}
 * Grid Cell line-height
 */
$gridcell-line-height: dynamic($listitem-line-height);
 
//# fashion replaces $grid-cell-line-height-big 
/**
 * @var {number}
 * Grid Cell line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$gridcell-line-height-big: dynamic($listitem-line-height-big);
 
//# fashion replaces $grid-cell-font-family 
/**
 * @var {string}
 * Grid Cell font-family
 */
$gridcell-font-family: dynamic($listitem-font-family);
 
//# fashion replaces $grid-cell-padding 
/**
 * @var {number/list}
 * Grid Cell padding
 */
$gridcell-padding: dynamic($listitem-padding);
 
//# fashion replaces $grid-cell-padding-big 
/**
 * @var {number/list}
 * Grid Cell padding in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$gridcell-padding-big: dynamic($listitem-padding-big);
 
/**
 * @var {string/list}
 * Grid Cell {@link Ext.grid.Grid#markDirty dirty} icon
 */
$gridcell-dirty-icon: dynamic($ext-var-dirty ExtJS);
 
/**
 * @var {color}
 * Grid Cell {@link Ext.grid.Grid#markDirty dirty} icon color
 */
$gridcell-dirty-icon-color: dynamic($alert-color);
 
/**
 * @var {number}
 * Grid Cell {@link Ext.grid.Grid#markDirty dirty} icon size
 */
$gridcell-dirty-icon-size: dynamic(14px);
 
/**
 * @var {number}
 * Grid Cell {@link Ext.grid.Grid#markDirty dirty} icon size in the
 * {@link Global_CSS#$enable-big big} sizing scheme
 */
$gridcell-dirty-icon-size-big: dynamic(18px);
 
/**
 * @var {number}
 * Grid Cell {@link Ext.grid.Grid#markDirty dirty} icon font-size
 */
$gridcell-dirty-icon-font-size: dynamic(null);
 
/**
 * @var {number}
 * Grid Cell {@link Ext.grid.Grid#markDirty dirty} icon font-size in the
 * {@link Global_CSS#$enable-big big} sizing scheme
 */
$gridcell-dirty-icon-font-size-big: dynamic(null);
 
/**
 * @var {Map}
 * Parameters for the `summary` gridcell UI used for cells in a summary row
 * @ui gridcell-ui
 */
$gridcell-summary-ui: dynamic((
    font-weight: $font-weight-bold 
));
 
/**
 * Creates a visual theme for a Grid Cell.
 *
 * @param {string} $ui
 * The name of the UI being created. Can not included spaces or special punctuation
 * (used in CSS class names).
 *
 * @param {String} [$xtype=gridcell] (protected) The {@link Ext.Class#xtype} to use
 * in CSS selectors.  For use by UI mixins of derived classes.
 *
 * @param {color} $color
 * Grid Cell text color
 *
 * @param {color} $hovered-color
 * Grid Cell text color when hovered
 *
 * @param {color} $selected-color
 * Grid Cell text color when selected
 *
 * @param {color} $pressed-color
 * Grid Cell text color when pressed
 *
 * @param {color} $background-color
 * Grid Cell background-color
 *
 * @param {color} $hovered-background-color
 * Grid Cell background-color when hovered
 *
 * @param {color} $selected-background-color
 * Grid Cell background-color when selected
 *
 * @param {color} $pressed-background-color
 * Grid Cell background-color when pressed
 *
 * @param {number} $column-border-width
 * Grid Cell {@link Ext.grid.Grid#columnLines column} border-width
 *
 * @param {string} $column-border-style
 * Grid Cell {@link Ext.grid.Grid#columnLines column} border-style
 *
 * @param {color} $column-border-color
 * Grid Cell {@link Ext.grid.Grid#columnLines column} border-color
 *
 * @param {number} $focused-outline-width
 * Grid Cell outline-width when focused
 *
 * @param {string} $focused-outline-style
 * Grid Cell outline-style when focused
 *
 * @param {color} $focused-outline-color
 * Grid Cell outline-color when focused
 *
 * @param {number} $focused-outline-offset
 * Grid Cell outline-offset when focused
 *
 * @param {string/number} $font-weight
 * Grid Cell font-weight
 *
 * @param {number} $font-size
 * Grid Cell font-size
 *
 * @param {number} $font-size-big
 * Grid Cell font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $line-height
 * Grid Cell line-height
 *
 * @param {number} $line-height-big
 * Grid Cell line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string} $font-family
 * Grid Cell font-family
 *
 * @param {number/list} $padding
 * Grid Cell padding
 *
 * @param {number/list} $padding-big
 * Grid Cell padding in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string/list} $dirty-icon
 * Grid Cell {@link Ext.grid.Grid#markDirty dirty} icon
 *
 * @param {color} $dirty-icon-color
 * Grid Cell {@link Ext.grid.Grid#markDirty dirty} icon color
 *
 * @param {number} $dirty-icon-size
 * Grid Cell {@link Ext.grid.Grid#markDirty dirty} icon size
 *
 * @param {number} $dirty-icon-size-big
 * Grid Cell {@link Ext.grid.Grid#markDirty dirty} icon size in the
 * {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $dirty-icon-font-size
 * Grid Cell {@link Ext.grid.Grid#markDirty dirty} icon font-size
 *
 * @param {number} $dirty-icon-font-size-big
 * Grid Cell {@link Ext.grid.Grid#markDirty dirty} icon font-size in the
 * {@link Global_CSS#$enable-big big} sizing scheme
 */
@mixin gridcell-ui(
    $ui: null,
    $xtype: gridcell,
    $color: null,
    $hovered-color: null,
    $selected-color: null,
    $pressed-color: null,
    $background-color: null,
    $hovered-background-color: null,
    $selected-background-color: null,
    $pressed-background-color: null,
    $column-border-width: null,
    $column-border-style: null,
    $column-border-color: null,
    $focused-outline-width: null,
    $focused-outline-style: null,
    $focused-outline-color: null,
    $focused-outline-offset: null,
    $font-weight: null,
    $font-size: null,
    $font-size-big: null,
    $line-height: null,
    $line-height-big: null,
    $font-family: null,
    $padding: null,
    $padding-big: null,
    $dirty-icon: null,
    $dirty-icon-color: null,
    $dirty-icon-size: null,
    $dirty-icon-size-big: null,
    $dirty-icon-font-size: null,
    $dirty-icon-font-size-big: null
) {
    $ui-suffix: ui-suffix($ui);
 
    .#{$prefix}#{$xtype}#{$ui-suffix} {
        @include font($font-weight, $font-size, $line-height, $font-family);
 
        @if $enable-big {
            .#{$prefix}big & {
                font-size: $font-size-big;
                line-height: $line-height-big;
            }
        }
 
        color: $color;
        background-color: $background-color;
 
        .#{$prefix}column-lines & {
            @include border-right($column-border-width, $column-border-style, $column-border-color);
        }
 
        &.#{$prefix}hovered {
            background-color: $hovered-background-color;
            color: $hovered-color;
        }
 
        &.#{$prefix}selected {
            background-color: $selected-background-color;
            color: $selected-color;
        }
 
        &.#{$prefix}pressed {
            background-color: $pressed-background-color;
            color: $pressed-color;
        }
 
        .#{$prefix}keyboard-mode &.#{$prefix}focused {
            @include outline($focused-outline-width, $focused-outline-style, $focused-outline-color, $focused-outline-offset);
        }
 
        .#{$prefix}mark-dirty > * > &.#{$prefix}dirty {
            @include icon( 
                $icon: $dirty-icon, 
                $color: $dirty-icon-color, 
                $size: $dirty-icon-size, 
                $size-big: $dirty-icon-size-big, 
                $font-size: $dirty-icon-font-size, 
                $font-size-big: $dirty-icon-font-size-big, 
                $style-pseudo: true 
            );
        }
    }
 
    @include toolable-ui( 
        $ui: $ui, 
        $xtype: $xtype, 
        $padding: $padding, 
        $padding-big: $padding-big 
    );
}