@select-prefix-cls: ~"@{fishd-prefix}-treeselect";
@select-tree-prefix-cls: ~"@{fishd-prefix}-treeselect-tree";

@tree-default-open-icon: "\e691"; // fishdicon-down-fill
@tree-showline-open-icon: "\e621";
@tree-showline-close-icon: "\e645";
@tree-doc-icon: "\e664";
@treeselect-title-height: 28px;
@treeselect-item-selected-bg: #d9e7ff;

.fishdTreeSwitcherIcon(@type: "tree-default-open-icon") {
  color: @text-9;

  &:after {
    .iconfont-size-under-12px(8px);
    display: inline-block;
    .iconfont-font(@@type);
    font-weight: bold;
    transition: transform 0.3s;
  }
}

.fishdCheckboxFn(@checkbox-prefix-cls: ~"@{fishd-prefix}-treeselect-tree-checkbox");

.@{select-tree-prefix-cls}-spinning {
  line-height: 1;
  margin-right: 7px;
}

.@{select-tree-prefix-cls} {
  .reset-component;
  margin: 0;
  padding: 0 12px;

  li {
    padding: 0;
    list-style: none;
    white-space: nowrap;
    outline: 0;
    &.filter-node {
      > span {
        font-weight: 500;
      }
    }
    ul {
      margin: 0;
      padding: 0 0 0 18px;
    }
    .@{select-tree-prefix-cls}-node-content-wrapper {
      display: inline-flex;
      height: @treeselect-title-height;
      align-items: center;
      padding: 0 4px;
      vertical-align: top;
      border-radius: @border-radius-base;
      margin: 2px 0;
      cursor: pointer;
      text-decoration: none;
      color: @text-color;
      transition: all 0.3s;
      width: ~"calc(100% - 24px)";
      &:hover {
        background-color: @item-hover-bg;
      }
      // 文本超长时显示省略号
      .@{select-tree-prefix-cls}-title {
        display: inline-block;
        width: 100%;
        line-height: @treeselect-title-height;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        vertical-align: top;
      }
      &.@{select-tree-prefix-cls}-node-selected {
        // color: @primary-color;
        background-color: @treeselect-item-selected-bg;
      }
    }
    .@{select-tree-prefix-cls}-iconCtner {
      display: inline-flex;
      align-items: center;
    }
  }

  li span {
    &.@{select-tree-prefix-cls}-checkbox {
      margin: 2px 4px;
      display: inline-flex;
      align-items: center;
      height: @treeselect-title-height;
      line-height: @treeselect-title-height;
      top: auto;

      + .@{select-tree-prefix-cls}-node-content-wrapper {
        width: ~"calc(100% - 46px)";
      }
    }
    &.@{select-tree-prefix-cls}-switcher,
    &.@{select-tree-prefix-cls}-iconEle {
      margin: 2px 8px 2px 0;
      width: 14px;
      height: @treeselect-title-height;
      line-height: @treeselect-title-height;
      display: inline-flex;
      align-items: center;
      vertical-align: top;
      border: 0 none;
      cursor: pointer;
      outline: none;
      text-align: center;
    }
    &.@{select-tree-prefix-cls}-icon_loading {
      &:after {
        display: inline-block;
        .iconfont-font("\e6ae");
        animation: loadingCircle 1s infinite linear;
        color: @primary-color;
      }
    }
    &.@{select-tree-prefix-cls}-switcher {
      position: relative;
      width: 12px;

      &.@{select-tree-prefix-cls}-switcher-noop {
        cursor: auto;
      }
      &.@{select-tree-prefix-cls}-switcher_open {
        .fishdTreeSwitcherIcon();
      }
      &.@{select-tree-prefix-cls}-switcher_close {
        .fishdTreeSwitcherIcon();
      }
      &.@{select-tree-prefix-cls}-switcher_close:after {
        transform: rotate(270deg) scale(0.666);
      }
    }
  }

  &-child-tree {
    display: none;
    &-open {
      display: block;
    }
  }
  li&-treenode-disabled {
    > span:not(.@{select-tree-prefix-cls}-switcher),
    > .@{select-tree-prefix-cls}-node-content-wrapper,
    > .@{select-tree-prefix-cls}-node-content-wrapper span {
      color: @disabled-color;
      cursor: not-allowed;
    }
    > .@{select-tree-prefix-cls}-node-content-wrapper:hover {
      background: transparent;
    }
  }
  &-icon__open {
    margin-right: 2px;
    vertical-align: top;
  }
  &-icon__close {
    margin-right: 2px;
    vertical-align: top;
  }
}

.@{select-prefix-cls}-tree-dropdown {
  .reset-component;
  .@{select-prefix-cls}-dropdown-search {
    display: block;
    padding: 10px 12px 4px 12px;
    .@{select-prefix-cls}-search__field__wrap {
      width: 100%;
    }
    .@{select-prefix-cls}-search__field {
      padding: 4px 7px;
      width: 100%;
      box-sizing: border-box;
      border: @border-width-base @border-style-base @border-color-base;
      border-radius: @border-radius-base;
      outline: none;
    }
    &.@{select-prefix-cls}-search--hide {
      display: none;
    }
  }
  .@{select-prefix-cls}-not-found {
    cursor: not-allowed;
    color: @disabled-color;
    padding: 7px 10px;
    display: block;
  }

  &:hover {
    cursor: pointer;
  }
}