.Tree-wrapper{
  .Tree-wrapper(
                @h-indentation:65px,
                @node-height:55px,
                @node-width:150px,
                @branch-offset:40px,
                @branch-color: rgba(0,0,0,0.3),
                @sibling-vertical-margin: 25px,
                @tree-font-size: @font-size-base
              );

  @media @onlyScreen and @smallmobile, @mobile {
    .Tree-wrapper(
                @h-indentation:50px,
                @node-height:35px,
                @node-width:120px,
                @branch-offset:20px,
                @branch-color: rgba(0,0,0,0.3),
                @sibling-vertical-margin: 10px,
                @tree-font-size: @font-size-small
    );
  }
}


.Tree-wrapper(
                @h-indentation,
                @node-height,
                @node-width,
                @branch-offset,
                @branch-color,
                @sibling-vertical-margin,
                @tree-font-size
              ){

  @horizontal-branch-top-margin: (@node-height)/2;
  background-image: @app-background-texture;
  background-color: @app-background-texture-color;
  margin-left: 0 - (@h-indentation - @branch-offset);

  font-size: @tree-font-size;


  .Tree-root{
    list-style:none;
    margin:0;
    padding:0;

    & ul{
      list-style:none;
      margin:0px;
      padding:0px;
      margin-left:@h-indentation;
      position:relative;
      padding-top: 1px;

      &:before{
        content:"";
        display:block;
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        border-left:1px @branch-color solid;
      }
    }

    li {
      position:relative;

      &:before {
        content:"";
        display:block;
        width: @h-indentation - @branch-offset;
        border-top:1px @branch-color solid;
        position:absolute;
        top:@horizontal-branch-top-margin;
        left:0;
      }

      &:last-child:before {
        background-image: @app-background-texture;
        background-color: @app-background-texture-color;
        height:auto;
        top:@horizontal-branch-top-margin;
        bottom:0;
      }

      .Tree-node{
        width:@node-width;
        height: @node-height;
        border:solid 1px rgba(0,0,0,0.3);

        border-radius:6px;
        margin-top: @sibling-vertical-margin;
        margin-left: @h-indentation - @branch-offset;
        position: relative;

        &:hover{
          cursor:pointer;
          background-color: rgba(0,0,0,0.1);
        }
      }

    }
  }

}