// htree extends and overrides parts of wc.tree.scss
[role='tree'].wc_htree {
  @include border;
  overflow: auto;

  [role='group'] {
    @include max-content;
    // the right border of each level in a tree: helps to see where the
    // levels occur.
    @include border($pos: left, $width: $wc-gap-small);
    left: 100%;
    min-height: 100%;
    padding-left: 0;
    position: absolute;
    top: 0;

    &.wc_tree_root {
      @include border($pos: left, $width: 0);
      display: table;
      left: 0;
      position: relative;
    }
  }

  [role='treeitem'] {
    padding-right: $wc-gap-normal;
  }

  [aria-expanded='true'] > [role='group'] {
    display: table-cell;
  }

  [aria-expanded] > .wc_leaf {
    @include flex($align-items: baseline);
    width: 100%; // override .wc_leaf_vopener + button from wc.tree.scss

    > .wc_leaf_hopener {
      @include flex-grow(1);
      // Only show hopener when we are in a branch opener.
      display: inline-block;
      padding: $wc-tree-item-pad-t $wc-tree-item-pad-r $wc-tree-item-pad-b 0;
    }
  }

  .wc_branch_resizer {
    display: block; // override default from wc.tree.scss
  }

  .wc_leaf_vopener {
    display: none;
  }

  .wc_leaf_img {
    padding-left: $wc-tree-item-pad-l;
  }

  .wc_leaf_name {
    padding: $wc-tree-item-pad-t $wc-tree-item-pad-r $wc-tree-item-pad-b $wc-tree-item-pad-l;
  }
}

// container for the resize handle.
.wc_branch_resizer {
  @include border-box;
  display: none;
  // allow size for the absolutely positioned iconic button.
  height: $wc-icon-normal;
  width: 100%;
}

// htree resize handles.
.wc_branch_resize_handle {
  @include content-box;
  height: 100%;
  position: absolute;
  right: -#{$wc-gap-normal};
  top: 0;
  width: $wc-gap-large;

  &.wc_resize {
    cursor: ew-resize;
  }
}


@import 'wc.htree.color';
