/**
 * @class Ext.tree.View
 */

/**
 * @var {number} $tree-elbow-width
 * The width of the tree elbow/arrow icons
 */
$tree-elbow-width: dynamic(16px);

/**
 * @var {number} $tree-icon-width
 * The width of the tree folder/leaf icons
 */
$tree-icon-width: dynamic(16px);

/**
 * @var {number} $tree-elbow-spacing
 * The amount of spacing between the tree elbows or arrows, and the checkbox or icon.
 */
$tree-elbow-spacing: dynamic(0);

/**
 * @var {number} $tree-checkbox-spacing
 * The amount of space (in pixels) between the tree checkbox and the folder/leaf icon
 */
$tree-checkbox-spacing: dynamic(3px);

/**
 * @var {number} $tree-icon-spacing
 * The amount of space (in pixels) between the folder/leaf icons and the text
 */
$tree-icon-spacing: dynamic(3px);

/**
 * @var {string} $tree-expander-cursor
 * The type of cursor to display when the mouse is over a tree expander (+, - or arrow icon)
 */
$tree-expander-cursor: dynamic(pointer);

/**
 * @var {number/list}
 * The amount of padding to apply to the tree cell's inner div element
 */
$tree-cell-inner-padding: dynamic(
    top($grid-cell-inner-padding)
    right($grid-cell-inner-padding)
    bottom($grid-cell-inner-padding)
    0
);

/**
 * @var {number}
 * The font size to use for tree icons when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$tree-glyph-font-size: dynamic(16px);

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

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

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

/**
 * @var {string/list}
 * Glyph for the "open folder" tree icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$tree-folder-open-glyph: dynamic($fa-var-folder-open $tree-glyph-font-size $font-icon-font-family);

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

/**
 * @var {string/list}
 * Glyph for the "leaf" tree icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$tree-leaf-glyph: dynamic($fa-var-file $tree-glyph-font-size $font-icon-font-family);

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

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

/**
 * @var {string/list}
 * Glyph for the RTL "arrow" tree icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$tree-arrow-glyph-rtl: dynamic($fa-var-caret-left $tree-glyph-font-size $font-icon-font-family);

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

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

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

/**
 * @var {string/list}
 * Glyph for the "expand" tree icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$tree-expand-glyph: dynamic($fa-var-plus-square 14px $font-icon-font-family);

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

/**
 * @var {string/list}
 * Glyph for the "collapse" tree icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$tree-collapse-glyph: dynamic($fa-var-minus-square 14px $font-icon-font-family);

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

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

/**
 * @var {string/list}
 * The glyph for the Tree checkbox when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$tree-checkbox-glyph: dynamic($form-checkbox-glyph);

/**
 * @var {string/list}
 * The glyph for the Tree checkbox in "checked" state when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$tree-checkbox-checked-glyph: dynamic($form-checkbox-checked-glyph);

/**
 * @var {string/list}
 * Glyph for the tree's "ok" drag/drop icon when {@link Global_CSS#$enable-font-icons} is `true`.
 */
$tree-statusproxy-ok-glyph: dynamic($fa-var-plus-circle $statusproxy-glyph-font-size $font-icon-font-family);