@dark_bg_color: #222d32;
@dark_color: #8aa4af;

@dark_hover_color: #fff;
@dark_expand_color: #fafafa;

@dark_root_color: #b8c7ce;
@dark_root_active_bg_color: #1e282c;

@light_bg_color: #fff;
@light_color: rgba(0, 0, 0, .65);
@light_active_color: rgba(0, 0, 0, .85);

.nav-tree {
  //layout

  .z-tree {
    .items > .item { // root
      padding-left: 0;
    }

    .item {
      margin-left: 0;
      padding-left: 1em;

      .node {
        cursor: pointer;
        display: block;

        .in {
          cursor: pointer;
          background-color: transparent;
        }

        .expand {
          float: right;
          padding: 0.3em;
        }
      }
    }
  }

  .fa {
    margin-right: 0.5em;
  }

  .children .fa {
    font-size: smaller;
  }
}

.nav-tree.dark {
  .z-tree {
    background-color: @dark_bg_color;

    .items > .item { //root
      color: @dark_root_color;

      &:hover, &.selected {
        background: darken(@dark_bg_color, 3%);
      }
    }

    .item {
      color: @dark_color;

      &.expanded {
        color: @dark_expand_color;
        background: darken(@dark_bg_color, 3%);
      }

      .children {
        background-color: lighten(@dark_bg_color, 5%);
      }

      &:hover {
        color: @dark_hover_color;
      }
    }
  }
}

.nav-tree.light {
  .z-tree {
    background-color: @light_bg_color;

    .item {
      > .node {
        color: @light_color;

        &:hover {
          color: @light_active_color;
        }

        .in {
          &:hover {
            background: none;
          }
        }
      }

      &.selected {
        > .node {
          font-weight: bolder;
          color: @light_active_color;

          .in {
            background: none;
            color: @light_active_color;
          }
        }
      }
    }
  }
}