/**
 * @class Ext.list.TreeItem
 * This file contains the base variables for styling a treelist.
 */

/**
 * @var {color}
 * The tree background color
 */
$treelist-background-color: dynamic(null);

/**
 * @var {color}
 * The background color of the tool strip
 */
$treelist-toolstrip-background-color: dynamic(#f8f8f8);

/**
 * @var {color}
 * The color of text in the tree
 */
$treelist-color: dynamic(null);

/**
 * @var {string}
 * The padding for tree items
 */
$treelist-padding: dynamic(0 8px);

//--------------------------------------------------------------------------

/**
 * @var {number}
 * The line height for tree items
 */
$treelist-item-line-height: dynamic(36px);

/**
 * @var {number}
 * The line height for tree items in the {@link Global_CSS#css_var-S-$enable-big big} sizing scheme
 */
$treelist-item-line-height-big: dynamic(null);

/**
 * @var {color}
 * The tree item text color
 */
$treelist-item-color: dynamic($treelist-color);

//--------------------------------------------------------------------------

/**
 * @var {color}
 * The color of the tool float indicator.
 */
$treelist-tool-float-indicator-color: dynamic(null);

/**
 * @var {number}
 * The width for the tool float indicator.
 */
$treelist-tool-float-indicator-width: dynamic(null);

/**
 * @var {color}
 * The tool color when a tree item is selected
 */
$treelist-tool-selected-color: dynamic(null);

/**
 * @var {color}
 * The tool background color when a tree item is selected
 */
$treelist-tool-selected-background-color: dynamic(null);

/**
 * @var {color}
 * The tool indicator color when a tree item is selected
 */
$treelist-tool-indicator-selected-color: dynamic(null);

/**
 * @var {number}
 * The tool indicator width when a tree item is selected
 */
$treelist-tool-indicator-selected-width: dynamic(null);

//--------------------------------------------------------------------------

/**
 * @var {color}
 * The text color of tree items
 */
$treelist-item-text-color: dynamic($treelist-color);

/**
 * @var {number}
 * The gap between icon and text in tree items
 */
$treelist-item-text-icon-gap: dynamic(4px);

/**
 * @var {color}
 * The text color when hovering over a tree item
 */
$treelist-item-text-over-color: dynamic($treelist-item-text-color);

/**
 * @var {number}
 * The size of the font
 */
$treelist-item-text-font-size: dynamic(null);

/**
 * @var
 * The CSS overflow setting for tree items
 */
$treelist-item-text-overflow: dynamic(ellipsis);

//--------------------------------------------------------------------------

/**
 * @var {color}
 * The color of the expander icon
 */
$treelist-item-expander-color: dynamic($treelist-color);

/**
 * @var {color}
 * The color of the expander icon on hover
 */
$treelist-item-expander-over-color: dynamic($treelist-item-expander-color);

/**
 * @var {string}
 * The font icon to use for the expander when collapsed
 */
$treelist-item-expander-glyph: dynamic($fa-var-angle-right $font-icon-font-family);

/**
 * @var {string}
 * The font icon to use for the expander when expanded
 */
$treelist-item-expander-expanded-glyph: dynamic($fa-var-angle-down $font-icon-font-family);

/**
 * @var {number}
 * The width of the expander icon
 */
$treelist-item-expander-width: dynamic(18px);

/**
 * @var {number}
 * The width of the expander icon in the {@link Global_CSS#css_var-S-$enable-big big} sizing scheme
 */
$treelist-item-expander-width-big: dynamic(null);

/**
 * @var {number}
 * The size of the expander icon font
 */
$treelist-item-expander-font-size: dynamic(16px);

/**
 * @var {number}
 * The size of the expander icon font in the {@link Global_CSS#css_var-S-$enable-big big} sizing scheme
 */
$treelist-item-expander-font-size-big: dynamic(null);

//--------------------------------------------------------------------------

/**
 * @var {color}
 * The color of the item icon
 */
$treelist-item-icon-color: dynamic($treelist-color);

/**
 * @var {color}
 * The color of the item icon on hover
 */
$treelist-item-icon-over-color: dynamic($treelist-item-icon-color);

/**
 * @var {number}
 * The width of the item icon
 */
$treelist-item-icon-width: dynamic(22px);

/**
 * @var {number}
 * The width of the item icon in the {@link Global_CSS#css_var-S-$enable-big big} sizing scheme
 */
$treelist-item-icon-width-big: dynamic(null);

/**
 * @var {number}
 * The size of the item icon font
 */
$treelist-item-icon-font-size: dynamic(18px);

/**
 * @var {number}
 * The size of the item icon font in the {@link Global_CSS#css_var-S-$enable-big big} sizing scheme
 */
$treelist-item-icon-font-size-big: dynamic(null);

//--------------------------------------------------------------------------

$item-icon-over-transition: color 0.5s;
$item-text-over-transition: color 0.5s;
$item-expander-over-transition: color 0.5s;

//--------------------------------------------------------------------------

/**
 * @var {color}
 * The background color of expanded items
 */
$treelist-item-expanded-background-color: dynamic(null);

/**
 * @var {color}
 * The background color of child items
 */
$treelist-item-expanded-child-background-color: dynamic(null);

//--------------------------------------------------------------------------

/**
 * @var {color}
 * The color of the row indicator when selected
 */
$treelist-row-indicator-selected-color: dynamic(null);

/**
 * @var {color}
 * The color of the row indicator on hover when selected
 */
$treelist-row-indicator-selected-over-color: dynamic(null);

/**
 * @var {color}
 * The color of the row indicator on hover
 */
$treelist-row-indicator-over-color: dynamic(null);

/**
 * @var {number}
 * The width of the row indicator
 */
$treelist-row-indicator-width: dynamic(null);

/**
 * @var {color}
 * The background color of a row when selected
 */
$treelist-row-selected-background-color: dynamic(null);

/**
 * @var {color}
 * The background color of a row on hover when selected
 */
$treelist-row-selected-over-background-color: dynamic(null);

/**
 * @var {color}
 * The background color of a row on hover
 */
$treelist-row-over-background-color: dynamic(null);

$treelist-row-over-transition: dynamic(null);

/**
 * @var {Map} $treelist-nav-ui
 * This map holds the treelist mixin parameters used to produce the nav UI for treelist.
 */
$treelist-nav-ui: dynamic((
    padding: 0 10px,
    background-color: #32404e,
    toolstrip-background-color: #32404e,
    tool-selected-color: #f0f0f0,
    tool-selected-background-color: #5fa2dd,
    tool-float-indicator-width: 4px,
    tool-float-indicator-color: #5fa2dd,
    item-expanded-background-color: #2c3845,
    item-line-height: 44px,
    item-icon-color: #ADB3B8,
    item-expander-color: #ADB3B8,
    item-text-color: #ADB3B8,
    row-over-background-color: #4f606f,
    item-icon-over-color: #fff,
    item-expander-over-color: #fff,
    item-text-over-color: #fff,
    row-indicator-width: 6px,
    row-indicator-selected-color: $base-color,
    row-indicator-selected-over-color: lighten($base-color, 10%),
    row-indicator-over-color: lighten($base-color, 10%),
    item-text-font-size: 16px,
    item-icon-font-size: 18px,
    item-icon-width: 24px,
    item-expander-font-size: 16px,
    item-expander-width: 24px,
    row-selected-background-color: #3f505f
));