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