// Tree 
// 
// Styling Tree mostly means styling the TreeRow (dijitTreeRow)
// There are 4 basic states to style:
// 
// Tree Row:
// 1. tree row (default styling): 
//    .dijitTreeRow - styles for each row of the tree
//
// 2. hovered tree row (mouse hover on a tree row)
//    .dijitTreeRowHover - styles when mouse over on one row
// 
// 3. active tree row (mouse down on a tree row)
//    .dijitTreeRowActive - styles when mouse down on one row
// 
// 4. selected tree row
//    dijitTreeRowSelected - style when the row has been selected
// 
// Tree Expando:
//      dijitTreeExpando - the expando at the left of the text of each tree row
// 
// Drag and Drop on TreeNodes: (insert line on dijitTreeContent node so it'll aligned w/ target element)
//    .dijitTreeNode .dojoDndItemBefore/.dojoDndItemAfter - use border style simulate a separate line
//
.#{$theme-name} {
  .dijitTreeIsRoot {
    background-color: $tree-bg;
  }
  .dijitTreeRow {
    padding: $padding-base-vertical $padding-base-horizontal;
    background-color: $tree-row-bg;
    border: 1px solid $tree-row-border;
    line-height: $line-height-base;
    @include button-variant($btn-default-color, $btn-default-bg);
  }
  .dijitTreeRowSelected,
  .dijitTreeRowHover.dijitTreeRowSelected,
  .dijitTreeRowActive.dijitTreeRowSelected {
    @include button-variant-default-active;
    color: inherit;
  }
  .dijitTreeExpando {
    @include dijit-icons;
    font-size: $icon-size-small;
    text-align: center;
    cursor: pointer;
    width: $icon-size-large;
    height: $icon-size-large;
    padding: ($icon-size-large - $icon-size-small) * 0.5;
  }
  .dijitTreeExpandoOpened:before {
    @include icon-get-content(esri-icon-down-arrow);
  }
  .dijitTreeExpandoClosed:before {
    @include icon-get-content(esri-icon-right-triangle-arrow);
  }
  .dijitTreeExpandoLoading {
    background-image: url($image-loading-circular);
    background-repeat: no-repeat;
    background-position: center center;
  }
  .dijitTreeLabel {
    margin: 0 $padding-base-horizontal;
  }
  // DND
  // CHeck dijit/Common.scss for default styles on DND
  .dojoDndItemOver {
    color: $btn-default-color;
    background-color: $Calcite_Highlight_Blue_100;
  }
  .dijitTreeNode .dojoDndItemBefore {
    border-top: 1px solid $dnd-drop-indicator-color;
  }
  .dijitTreeNode .dojoDndItemAfter {
    border-bottom: 1px solid $dnd-drop-indicator-color;
  }
}

