/**
 * @class Ext.grid.cell.Expander
 */
 
/**
 * @var {number/list}
 * Expander cell padding
 */
$expandercell-padding: dynamic(0);
 
/**
 * @var {number/list}
 * Expander cell padding in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$expandercell-padding-big: dynamic(0);
 
/**
 * @var {number}
 * Expander cell icon size
 */
$expandercell-icon-size: dynamic(14px);
 
/**
 * @var {number}
 * Expander cell icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$expandercell-icon-size-big: dynamic(18px);
 
/**
 * @var {number}
 * Expander cell icon font-size
 */
$expandercell-icon-font-size: dynamic(null);
 
/**
 * @var {number}
 * Expander cell icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$expandercell-icon-font-size-big: dynamic(null);
 
/**
 * @var {string/list}
 * Expander cell expand icon
 */
$expandercell-expand-icon: dynamic($fa-var-plus-square);
 
/**
 * @var {string/list}
 * Expander cell collapse icon
 */
$expandercell-collapse-icon: dynamic($fa-var-minus-square);
 
/**
 * @var {color}
 * Expander cell icon color
 */
$expandercell-icon-color: dynamic($neutral-dark-color);
 
/**
 * Creates a visual theme for an expander cell.
 *
 * @var {string} $ui
 * The name of the UI being created. Can not included spaces or special punctuation
 * (used in CSS class names).
 *
 * @var {String} [$xtype=expandercell] (protected) The {@link Ext.Class#xtype} to use
 * in CSS selectors.  For use by UI mixins of derived classes.
 *
 * @var {number/list} $padding
 * Expander cell padding
 *
 * @var {number/list} $padding-big
 * Expander cell padding in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @var {number} $icon-size
 * Expander cell icon size
 *
 * @var {number} $icon-size-big
 * Expander cell icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @var {number} $icon-font-size
 * Expander cell icon font-size
 *
 * @var {number} $icon-font-size-big
 * Expander cell icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @var {string/list} $expand-icon
 * Expander cell expand icon
 *
 * @var {string/list} $collapse-icon
 * Expander cell collapse icon
 *
 * @var {color} $icon-color
 * Expander cell icon color
 */
@mixin expandercell-ui(
    $ui: null,
    $xtype: 'expandercell',
    $padding: null,
    $padding-big: null,
    $icon-size: null,
    $icon-size-big: null,
    $icon-font-size: null,
    $icon-font-size-big: null,
    $expand-icon: null,
    $collapse-icon: null,
    $icon-color: null
) {
    $ui-suffix: ui-suffix($ui);
 
    $arguments: intersect-arguments(expandercell-ui, gridcell-ui);
 
    @include gridcell-ui($arguments...);
 
    .#{$prefix}#{$xtype}#{$ui-suffix} {
        .#{$prefix}icon-el {
            @include icon( 
                $icon: $expand-icon, 
                $color: $icon-color, 
                $size: $icon-size, 
                $size-big: $icon-size-big, 
                $font-size: $icon-font-size, 
                $font-size-big: $icon-font-size-big 
            );
        }
 
        &.#{$prefix}expanded .#{$prefix}icon-el {
            @include icon($collapse-icon);
        }
    }
}