/**
 * @class Ext.grid.cell.Tree
 */
 
/**
 * @var {color}
 * Tree Cell text color
 */
$treecell-color: dynamic(null);
 
/**
 * @var {color}
 * Tree Cell text color when hovered
 */
$treecell-hovered-color: dynamic(null);
 
/**
 * @var {color}
 * Tree Cell text color when selected
 */
$treecell-selected-color: dynamic(null);
 
/**
 * @var {color}
 * Tree Cell text color when pressed
 */
$treecell-pressed-color: dynamic(null);
 
/**
 * @var {color}
 * Tree Cell background-color
 */
$treecell-background-color: dynamic(null);
 
/**
 * @var {color}
 * Tree Cell background-color when hovered
 */
$treecell-hovered-background-color: dynamic(null);
 
/**
 * @var {color}
 * Tree Cell background-color when selected
 */
$treecell-selected-background-color: dynamic(null);
 
/**
 * @var {color}
 * Tree Cell background-color when pressed
 */
$treecell-pressed-background-color: dynamic(null);
 
/**
 * @var {number}
 * Tree Cell {@link Ext.grid.Grid#columnLines column} border-width
 */
$treecell-column-border-width: dynamic(null);
 
/**
 * @var {string}
 * Tree Cell {@link Ext.grid.Grid#columnLines column} border-style
 */
$treecell-column-border-style: dynamic(null);
 
/**
 * @var {color}
 * Tree Cell {@link Ext.grid.Grid#columnLines column} border-color
 */
$treecell-column-border-color: dynamic(null);
 
/**
 * @var {number}
 * Tree Cell outline-width when focused
 */
$treecell-focused-outline-width: dynamic(null);
 
/**
 * @var {string}
 * Tree Cell outline-style when focused
 */
$treecell-focused-outline-style: dynamic(null);
 
/**
 * @var {color}
 * Tree Cell outline-color when focused
 */
$treecell-focused-outline-color: dynamic(null);
 
/**
 * @var {number}
 * Tree Cell outline-offset when focused
 */
$treecell-focused-outline-offset: dynamic(null);
 
/**
 * @var {string/number}
 * Tree Cell font-weight
 */
$treecell-font-weight: dynamic(null);
 
/**
 * @var {number}
 * Tree Cell font-size
 */
$treecell-font-size: dynamic(null);
 
/**
 * @var {number}
 * Tree Cell font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$treecell-font-size-big: dynamic(null);
 
/**
 * @var {number}
 * Tree Cell line-height
 */
$treecell-line-height: dynamic(null);
 
/**
 * @var {number}
 * Tree Cell line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$treecell-line-height-big: dynamic(null);
 
/**
 * @var {string}
 * Tree Cell font-family
 */
$treecell-font-family: dynamic(null);
 
/**
 * @var {number/list}
 * Tree Cell padding
 */
$treecell-padding: dynamic($gridcell-padding);
 
/**
 * @var {number/list}
 * Tree Cell padding in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$treecell-padding-big: dynamic($gridcell-padding-big);
 
/**
 * @var {color}
 * Tree Cell icon color
 */
$treecell-icon-color: dynamic($neutral-dark-color);
 
/**
 * @var {number}
 * Tree Cell icon size
 */
$treecell-icon-size: dynamic(16px);
 
/**
 * @var {number}
 * Tree Cell icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$treecell-icon-size-big: dynamic(18px);
 
/**
 * @var {number}
 * Tree Cell icon font-size
 */
$treecell-icon-font-size: dynamic(null);
 
/**
 * @var {number}
 * Tree Cell icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$treecell-icon-font-size-big: dynamic(null);
 
/**
 * @var {number}
 * Tree Cell icon margin
 */
$treecell-icon-margin: dynamic(0 5px);
 
/**
 * @var {number}
 * Tree Cell icon margin in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$treecell-icon-margin-big: dynamic(0 8px);
 
/**
 * @var {string}
 * Tree Cell branch node icon when collapsed
 */
$treecell-collapsed-icon: dynamic($fa-var-folder);
 
/**
 * @var {string}
 * Tree cell branch node icon when expanded
 */
$treecell-expanded-icon: dynamic($fa-var-folder-open);
 
/**
 * @var {string}
 * Tree Cell leaf node icon
 */
$treecell-leaf-icon: dynamic($fa-var-file);
 
/**
 * @var {string}
 * Tree Cell expander icon when collapsed
 */
$treecell-expander-icon: dynamic($fa-var-caret-right);
 
/**
 * @var {string}
 * Tree Cell expander icon when expanded
 */
$treecell-expander-expanded-icon: dynamic($fa-var-caret-down);
 
/**
 * @var {color}
 * Tree Cell expander icon color
 */
$treecell-expander-color: dynamic($treecell-icon-color);
 
/**
 * @var {number}
 * Tree Cell expander icon size
 */
$treecell-expander-size: dynamic($treecell-icon-size);
 
/**
 * @var {number}
 * Tree Cell expander icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$treecell-expander-size-big: dynamic($treecell-icon-size-big);
 
/**
 * @var {number}
 * Tree Cell expander icon font-size
 */
$treecell-expander-font-size: dynamic(null);
 
/**
 * @var {number}
 * Tree Cell expander icon font-size in the {@link Global_CSS#$enable-big big} sizing schem
 */
$treecell-expander-font-size-big: dynamic(null);
 
/**
 * @var {string/list}
 * Tree Cell checkbox icon when checked
 */
$treecell-checked-checkbox-icon: dynamic($checkboxfield-checked-checkbox-icon);
 
/**
 * @var {string/list}
 * Tree Cell checkbox icon
 */
$treecell-checkbox-icon: dynamic($checkboxfield-checkbox-icon);
 
/**
 * @var {string/list}
 * Tree Cell checkbox tri-state icon
 */
$treecell-tri-state-checkbox-icon: dynamic($checkboxfield-intermediate-checkbox-icon);
 
/**
 * @var {color}
 * tree Cell checkbox color when checked
 */
$treecell-checked-checkbox-color: dynamic($checkboxfield-checked-checkbox-color);
 
/**
 * @var {color}
 * tree Cell checkbox color when checked
 */
$treecell-checkbox-color: dynamic($checkboxfield-checkbox-color);
 
// To do - Need to remove this variable once we get tri state icon 
/**
 * @var {number}
 * tree Cell checkbox size
 */
$treecell-checkbox-size: dynamic(18px);
 
/**
 * @var {number}
 * tree Cell checkbox size
 */
$treecell-horizonal-spacing: dynamic(0 5px);
 
/**
 * @var {number}
 * Tree Cell checkbox icon left padding
 */
$treecell-checkbox-padding: dynamic(5px);
 
/**
 * Creates a visual theme for a Tree 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
 * Tree Cell text color
 *
 * @param {color} $hovered-color
 * Tree Cell text color when hovered
 *
 * @param {color} $selected-color
 * Tree Cell text color when selected
 *
 * @param {color} $pressed-color
 * Tree Cell text color when pressed
 *
 * @param {color} $background-color
 * Tree Cell background-color
 *
 * @param {color} $hovered-background-color
 * Tree Cell background-color when hovered
 *
 * @param {color} $selected-background-color
 * Tree Cell background-color when selected
 *
 * @param {color} $pressed-background-color
 * Tree Cell background-color when pressed
 *
 * @param {number} $column-border-width
 * Tree Cell {@link Ext.grid.Grid#columnLines column} border-width
 *
 * @param {string} $column-border-style
 * Tree Cell {@link Ext.grid.Grid#columnLines column} border-style
 *
 * @param {color} $column-border-color
 * Tree Cell {@link Ext.grid.Grid#columnLines column} border-color
 *
 * @param {number} $focused-outline-width
 * Tree Cell outline-width when focused
 *
 * @param {string} $focused-outline-style
 * Tree Cell outline-style when focused
 *
 * @param {color} $focused-outline-color
 * Tree Cell outline-color when focused
 *
 * @param {number} $focused-outline-offset
 * Tree Cell outline-offset when focused
 *
 * @param {string/number} $font-weight
 * Tree Cell font-weight
 *
 * @param {number} $font-size
 * Tree Cell font-size
 *
 * @param {number} $font-size-big
 * Tree Cell font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $line-height
 * Tree Cell line-height
 *
 * @param {number} $line-height-big
 * Tree Cell line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string} $font-family
 * Tree Cell font-family
 *
 * @param {number/list} $padding
 * Tree Cell padding
 *
 * @param {number/list} $padding-big
 * Tree Cell padding in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {color} $icon-color
 * Tree Cell icon color
 *
 * @param {number} $icon-size
 * Tree Cell icon size
 *
 * @param {number} $icon-size-big
 * Tree Cell icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $icon-font-size
 * Tree Cell icon font-size
 *
 * @param {number} $icon-font-size-big
 * Tree Cell icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $icon-margin
 * Tree Cell icon margin
 *
 * @param {number} $icon-margin-big
 * Tree Cell icon margin in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string} $collapsed-icon
 * Tree Cell branch node icon when collapsed
 *
 * @param {string} $expanded-icon
 * Tree cell branch node icon when expanded
 *
 * @param {string} $leaf-icon
 * Tree Cell leaf node icon
 *
 * @param {string} $expander-icon
 * Tree Cell expander icon when collapsed
 *
 * @param {string} $expander-expanded-icon
 * Tree Cell expander icon when expanded
 *
 * @param {color} $expander-color
 * Tree Cell expander icon color
 *
 * @param {number} $expander-size
 * Tree Cell expander icon size
 *
 * @param {number} $expander-size-big
 * Tree Cell expander icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $expander-font-size
 * Tree Cell expander icon font-size
 *
 * @param {number} $expander-font-size-big
 * Tree Cell expander icon font-size in the {@link Global_CSS#$enable-big big} sizing schem
 *
 * @param {string} $checkbox-checked-icon
 * Tree Cell checkbox icon when it is checked
 *
 * @param {string} $checkbox-unchecked-icon
 * Tree Cell checkbox icon when it is unchecked
 *
 * @param {color} $checkbox-checked-icon-color
 * Tree Cell checkbox icon color when it is checked
 *
 * @param {color} $checkbox-unchecked-icon-color
 * Tree Cell checkbox icon color when it is unchecked
 *
 * @param {number} $checkbox-size
 * Tree Cell checkbox icon size
 *
 * @param {number} $checkbox-font-size
 * Tree Cell checkbox icon font-size
 */
@mixin treecell-ui(
    $ui: null,
    $xtype: treecell,
    $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,
    $icon-color: null,
    $icon-size: null,
    $icon-size-big: null,
    $icon-font-size: null,
    $icon-font-size-big: null,
    $icon-margin: null,
    $icon-margin-big: null,
    $collapsed-icon: null,
    $expanded-icon: null,
    $leaf-icon: null,
    $expander-icon: null,
    $expander-expanded-icon: null,
    $expander-color: null,
    $expander-size: null,
    $expander-size-big: null,
    $expander-font-size: null,
    $expander-font-size-big: null,
    $checkbox-checked-icon: null,
    $checkbox-unchecked-icon: null,
    $checkbox-checked-icon-color: null,
    $checkbox-unchecked-icon-color: null,
    $checkbox-font-size:null
) {
    $ui-suffix: ui-suffix($ui);
 
    $arguments: intersect-arguments(treecell-ui, gridcell-ui);
 
    $arguments: map-merge($arguments, (
        // Padding has special handling in the treecell-ui mixin.  Null out any padding 
        // values to prevent gridcell-ui mixin from generating padding styles 
        padding: null, 
        padding-big: null
    ));
 
    @include gridcell-ui($arguments...);
 
    .#{$prefix}#{$xtype}#{$ui-suffix} {
        padding: box(0 right($padding) 0 left($padding));
 
        @if $enable-big {
            .#{$prefix}big & {
                padding: box(0 right($padding-big) 0 left($padding-big));
            }
        }
 
        .#{$prefix}expander-el {
            @include icon( 
                $icon: $expander-icon, 
                $color: $expander-color, 
                $size: $expander-size, 
                $size-big: $expander-size-big, 
                $font-size: $expander-font-size, 
                $font-size-big: $expander-font-size-big 
            );
        }
 
        &.#{$prefix}expanded .#{$prefix}expander-el {
            @include icon($expander-expanded-icon);
        }
 
        .#{$prefix}icon-el {
            @include icon( 
                $color: $icon-color, 
                $size: $icon-size, 
                $size-big: $icon-size-big, 
                $font-size: $icon-font-size, 
                $font-size-big: $icon-font-size-big 
            );
 
            margin: $icon-margin;
 
            @if $enable-big {
                .#{$prefix}big & {
                    margin: $icon-margin-big;
                }
            }
        }
 
        // When no iconCls present, use folders 
        &.#{$prefix}no-icon {
            .#{$prefix}icon-el {
                @include icon($collapsed-icon);
            }
 
            &.#{$prefix}expanded .#{$prefix}icon-el {
                @include icon($expanded-icon);
            }
 
            &.#{$prefix}leaf .#{$prefix}icon-el {
                @include icon($leaf-icon);
            }
        }
 
        &.#{$prefix}treecell-checkable {
            .#{$prefix}check-el {
                font-size: $treecell-checkbox-size;
                height: $treecell-checkbox-size;
                margin: $treecell-horizonal-spacing;
                font-family: $checkboxfield-box-font-family;
            }
 
            &.#{$prefix}treecell-checked {
                .#{$prefix}check-el {
                    @include icon( 
                        $icon: $checkbox-checked-icon, 
                        $color: $checkbox-checked-icon-color, 
                        $font-size: $checkbox-font-size 
                    );
                }   
            }
 
            &.#{$prefix}treecell-trimode {
                .#{$prefix}check-el {
                    @include icon( 
                        $icon: $treecell-tri-state-checkbox-icon, 
                        $color: $checkbox-checked-icon-color, 
                        $font-size: $checkbox-font-size 
                    );
                }
            }
 
            &.#{$prefix}treecell-unchecked {
                .#{$prefix}check-el {
                    @include icon(   
                        $icon: $checkbox-unchecked-icon, 
                        $color: $checkbox-unchecked-icon-color, 
                        $font-size: $checkbox-font-size 
                    );
                }
            }
        }
 
 
        &.#{$prefix}leaf .#{$prefix}expander-el + .#{$prefix}check-el:before {
           padding-left: $treecell-checkbox-padding;
        }
 
        // The indentation quantum for tree node levels is passed into a readable style. 
        // Some browsers (FF, IE) don't support reading background-position-x 
        background-position: ($expander-size + (left($icon-margin) or 0)) 0%;
 
        @if $enable-big {
            .x-big & {
                background-position: ($expander-size-big + (left($icon-margin-big) or 0)) 0%;
            }
        }
    }
 
    .#{$prefix}#{$xtype}#{$ui-suffix}-body-el,
    .#{$prefix}#{$xtype}#{$ui-suffix}-tool-dock > .#{$prefix}body-el {
        padding: box(top($padding) 0 bottom($padding) 0);
 
        @if $enable-big {
            .#{$prefix}big & {
                padding: box(top($padding-big) 0 bottom($padding-big) 0);
            }
        }
    }
}