@tree-prefix: ~"@{prefix}tree";
.@{tree-prefix} {

  .@{prefix}search{
    margin-bottom: 5px;
  }
  &-li {
    &-opened {
      >.@{tree-prefix} {
        &-ul {
          max-height: 10000px;
          transition: max-height 2s ease-in-out;
        }
        &-show {
          .@{tree-prefix}-show-expand {
            .h-icon-right {
              transform: rotate(90deg);
            }
          }
        }
      }
    }
  }
  &-show {
    padding: 3px 0;
    &-expand {
      width: 14px;
      color: @gray-color;
      display: inline-block;
      padding: 0 2px 0 0;
      .text-hover();
      .h-icon-right,
      .h-icon-loading {
        font-size: 12px;
        line-height: @font-size;
        vertical-align: middle;
      }
    }
    
    &-desc {
      display: inline-block;
      font-size: @font-size-mini;
      padding: 2px 5px;
      margin-left: -4px;
      cursor: pointer;
      border-radius: @border-radius;
      .@{tree-prefix}-single &{
        &:hover {
          background-color: @hover-background-color;
        }
        &.selected {
          background-color: @primary-color;
          color: @white-color;
        }
      }
      .@{tree-prefix}-multiple &{
        &:hover, &.selected {
          color: @primary-color;
        }
      }
    }

    &-icon{
      margin-right: 5px;
    }

    &-disabled &-desc{
      // cursor: default;
      color: @disabled-color;
      &:hover {
        background-color: transparent;
      }
    }
  }
  &-ul {
    transition: max-height 0.2s cubic-bezier(0, 1, 0, 1);
    max-height: 0;
    overflow: hidden;
    margin-left: 20px;
  }
}