@sm: 15px;
@primary: #3F7CFB;
@borderRadius: 4px;
@generalColor: #606266;
@primaryColor: #303133;

.appTree {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: @sm;
  border-radius: @borderRadius;
  box-shadow: rgb(0 21 41 / 8%) 0px 1px 4px;
  overflow: auto;

  &::-webkit-scrollbar {
    background: rgba(0, 0, 0, 0);

    &:vertical {
      width: 6px;
    }

    &:horizontal {
      height: 6px;
    }
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0);

    &:hover {
      background-color: rgba(0, 0, 0, 0.2);
    }
  }


  .ant-tree-iconEle {
    >.anticon {
      position: relative;
      svg {
        width: 1em;
        height: 1em;
        fill: currentColor;
        position: relative;
      }
    }
  }

  .arrowButtom {
    font-size: 14px;

    .icon {
      // position: absolute;
      // top: 15px;
      // left: 15px;
      // width: 10px;
      // color: #606266;
      // transform: translateY(-50%) rotate(-90deg);
      transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

      &:after {
        transform: rotate(45deg) translate(-2.5px);
        position: absolute;
        width: 6px;
        height: 1.5px;
        background-color: currentColor;
        border-radius: 2px;
        transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
          transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
          color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        content: "";
      }

      &:before {
        transform: rotate(-45deg) translate(2.5px);
        position: absolute;
        width: 6px;
        height: 1.5px;
        background-color: currentColor;
        border-radius: 2px;
        transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
          transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
          color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        content: "";
      }
    }
  }

  .contact {
    >.addNode {
      display: flex;
      justify-content: center;

      &:hover {
        background-color: #f5f5f5;

        button {
          transform: scale(1);
        }
      }

      >button {
        transform: scale(0);
        transition: transform 0.2s;
        padding: 0;
        height: auto;
      }
    }

    .ant-tree-treenode {
      color: #606266;
      padding: 6px 0 10px 0;
      align-items: center;

      &:hover {
        .ant-tree-title {
          >.treeNode {
            >div {
              &:nth-of-type(2) {
                >span {
                  transform: scale(1) !important;
                }
              }
            }
          }
        }
      }

      .ant-tree-switcher {
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .activeArrow {
          transform: rotate(90deg);
          transition: transform 0.2s;
        }
      }

      // .ant-tree-icon__customize {
      //   color: $primary;
      // }

      .ant-tree-switcher_close {
        .arrowButtom {
          transform: rotate(90deg);
          // color: $primary;
        }
      }

      .arrowButtom {
        transition: transform .2s;
        color: @generalColor;
      }
    }

    .ant-tree-treenode-selected {
      .buttom-icon {
        color: @primary  !important;
      }
    }

    .ant-tree-node-content-wrapper {
      display: flex;

      .ant-tree-title {
        flex: 1 1;

        >.treeNode {
          display: flex;

          >div {

            // white-space: nowrap;
            &:nth-of-type(1) {
              flex: 1 1;
            }

            &:nth-of-type(2) {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 20px;

              >span {
                transition: transform 0.3s;
                transform: scale(0);
              }
            }
          }
        }
      }
    }
  }

  .treeTitle {
    display: flex;
    align-items: center;
    width: 72px;
    height: 25px;
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
    color: @primaryColor;
    opacity: 1;

    >span {
      display: inline-flex;
      flex: 1 1;

      &:nth-of-type(1) {
        flex: 2 1;
      }

      &:nth-of-type(2) {
        flex: 1 1;
        justify-content: end;
      }
    }

    button {
      padding: 0;
      height: auto;
      text-align: right;
      font-size: 12px;
      color: #606266;
      padding: 0px 2px 0px 2px;

      &:hover {
        background: #ebeef5;
      }
    }
  }

  .hasTitle {
    padding: 0 12px;
    margin-bottom: 15px;
    width: 100% !important;
  }

  .folder {
    font-size: 16px;
  }

  .ant-tree.ant-tree-directory .ant-tree-treenode-selected:hover::before,
  .ant-tree.ant-tree-directory .ant-tree-treenode-selected::before {
    background: rgba(63, 124, 251, .08);
  }

  .ant-tree-node-selected {
    color: @primary  !important;
  }
}

.tree-resize {

  // overflow: initial !important;
  .resize-line {
    &::after {
      margin-left: 7px;
    }
  }
}

.site-tree-search-value {
  color: #f50;
}

.treeDropdown {
  z-index: 998;
}

.treeMenu {
  >ul {
    li {
      >span {
        line-height: 1;
      }
      button {
        height: auto;
        padding: 0;
      }
    }
  }
}