.bixi-mind-tree {
  display: flex;
  width: 100%;
  height: 100%;
  margin: auto;
  padding: 12px;
  cursor: grab;
}

.bixi-mind-tree-horizontal {
  align-items: center;
}

.bixi-mind-tree-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

// ****************************************************************************
// ****************************************************************************
// *********************  通用样式文件  *****************************************
// ****************************************************************************
// ****************************************************************************
.bixi-mind-horizontal,
.bixi-mind-vertical,
.bixi-mind-branch-left,
.bixi-mind-branch-right,
.bixi-mind-branch-tp,
.bixi-mind-branch-bottom {
  display: flex;

  .bixi-mind-tree-node-trigger-item {
    min-width: 16px;
    height: 16px;
    color: #273849;
    line-height: 15px;
    text-align: center;
    background: #fff;
    border: 1px solid #273849;
    border-radius: 8px;
  }

  .bixi-mind-tree-branch {
    position: relative;
    display: flex;
    align-items: center;
  }

  .bixi-mind-tree-node-link-line,
  .bixi-mind-tree-node-link-parent-line {
    display: inline-block;
    background: @bixi-mind-tree-line-color;
  }

  .arrow {
    // height: 0;
    // width: 0;
    // border-style: solid;
    // display: inline-block;
    z-index: 9999999; // max
    margin: -4px;
    font-size: 13px;
  }

  .bixi-mind-tree-node-link-line-before {
    width: 12px;
  }

  .bixi-mind-tree-node-link-line-after {
    width: 23px;
  }

  .bixi-mind-tree-node-link-line-extend {
    width: 20px;
  }

  .bixi-mind-tree-node-link-line {
    height: 1px;
    margin-left: -1px;
  }

  .bixi-mind-tree-node-link-parent-line {
    width: 1px;
  }

  .bixi-mind-tree-node-trigger-icon {
    position: absolute;
    z-index: 99;
    font-size: 13px;
    cursor: pointer;

    span {
      opacity: 0;
    }
  }
}

.bixi-mind-tree-branch {
  &:hover {
    .bixi-mind-tree-node-link > .bixi-mind-tree-node-trigger-icon {
      span {
        background: #fff;
        opacity: 1;

        &:hover {
          opacity: 1;
        }
      }

      .bixi-mind-tree-node-trigger-item {
        background: #e9ecf2;
      }
    }
  }
}

.bixi-mind-horizontal {
  .bixi-mind-tree-node-link-line {
    height: 1px;
    margin-left: -1px;
    background: @bixi-mind-tree-line-color;
  }

  .bixi-mind-tree-node-link-line-active {
    background-color: @bixi-mind-tree-active-line-color;
  }

  .bixi-mind-tree-node-link-parent-line {
    width: 1px;
    height: 100%;
    background: @bixi-mind-tree-line-color;
  }

  .bixi-mind-tree-node-link-parent-line-last,
  .bixi-mind-tree-node-link-parent-line-first {
    height: calc(50% + 1px);
  }

  .bixi-mind-tree-node-link-parent-line-last {
    transform: translateY(-50%);
  }

  .bixi-mind-tree-node-link-parent-line-first {
    transform: translateY(50%);
  }
}

.bixi-mind-branch-children,
.bixi-mind-branch-right {
  // .arrow {
  //   border-left-width: 6px;
  //   border-top-width: 2.5px;
  //   border-bottom-width: 2.5px;
  //   border-color: transparent transparent transparent @bixi-mind-tree-active-line-color;
  //   margin: 0 -3px;
  // }
  .bixi-mind-tree-node-trigger-icon {
    right: -7px;
  }
}

.bixi-mind-branch-left {
  flex-direction: row-reverse;

  .bixi-mind-tree-node-link {
    flex-direction: row-reverse;
    margin-right: -1px;
  }

  .bixi-mind-tree-node-link-line {
    margin-right: -1px;
  }

  .bixi-mind-tree-node-link-line-after {
    margin-right: 0;
  }

  .bixi-mind-tree-branch {
    flex-direction: row-reverse;
  }

  .bixi-mind-tree-node-trigger-icon {
    left: -8px;
  }
}

.bixi-mind-tree-left-branch {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

// ****************************************************************************
// ****************************************************************************
// ********************* vertical style sheet *********************************
// ****************************************************************************
// ****************************************************************************

.bixi-mind-vertical,
.bixi-mind-branch-top,
.bixi-mind-branch-bottom {
  .bixi-mind-tree-node-link-parent-line {
    width: 100%;
    height: 1px;
    background: @bixi-mind-tree-line-color;
  }

  .bixi-mind-tree-node-link-line {
    width: 1px;
    height: 30px;
    height: 1px;
    margin-top: -1px;
    background: @bixi-mind-tree-line-color;
    outline: 1px solid @bixi-mind-tree-active-line-color;
  }

  .bixi-mind-tree-right-branch {
    display: flex;
    margin-top: -1px;
  }

  .bixi-mind-tree-node-link-parent-line-last,
  .bixi-mind-tree-node-link-parent-line-first {
    width: calc(50% + 1px);
  }

  .bixi-mind-tree-node-link-parent-line-last {
    transform: translateX(-50%);
  }

  .bixi-mind-tree-node-link-parent-line-first {
    transform: translateX(50%);
  }
}

.bixi-mind-branch-bottom {
  .bixi-mind-tree-node-trigger-icon {
    bottom: -8px;
  }

  .bixi-mind-tree-branch {
    flex-direction: column;
  }
}

.bixi-mind-branch-top {
  display: flex;
  flex-direction: column-reverse;

  .bixi-mind-tree-branch {
    flex-direction: column-reverse;
  }

  .bixi-mind-tree-node-trigger-icon {
    top: -8px;
  }
}

// ****************************************************************************
// ****************************************************************************
// ********************* base style sheet *************************************
// ****************************************************************************
// ****************************************************************************
.bixi-mind-tree-node-link {
  display: flex;
  align-items: center;

  .bixi-mind-tree-node-link-desc {
    padding: 0 2px;
    color: #273849;
    font-weight: 400;
    border: 1px solid transparent;
    cursor: pointer;

    &-content {
      display: box;
      max-width: 50px;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
  }

  .bixi-mind-tree-node-link-desc-active {
    background: #e2ecff;
    border: 1px solid @bixi-mind-tree-active-line-color;
  }

  // line hover style
  // &:hover {
  //   .bixi-mind-tree-node-link-line-after,
  //   .bixi-mind-tree-node-link-line-extend{
  //     background:  @bixi-mind-tree-active-line-color;
  //     outline: 1px solid @bixi-mind-tree-active-line-color;
  //   }

  //   .bixi-mind-tree-node-trigger-icon, .bixi-mind-tree-node-link-desc  {
  //     color: @bixi-mind-tree-active-line-color;
  //   }
  // }
}

.bixi-mind-tree-node-container {
  padding: 4px 0;
}

// hack dropdown
.bixi-mind-tree-node-dropdown {
  .ant-dropdown-menu {
    background: #0d0f12;

    .ant-dropdown-menu-item {
      padding: 5px 16px;
      color: #fff;

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

.bixi-mind-tree-node {
  position: relative;
  display: flex;
  align-items: center;
  text-align: center;
  border: solid 1px transparent;
  border-radius: 2px;
  cursor: pointer;

  &-text {
    width: 100%;
    max-width: 100px;
    height: 100%;
    margin: 4px 7.5px;
    text-align: left;
  }
}

.bixi-mind-tree-node:hover {
  background: @bixi-mind-tree-node-hover-bg;
  border: 1px solid transparent !important;
  outline: 2px solid @bixi-mind-tree-node-hover-border-color;
}

.bixi-mind-tree-active-node {
  border: 1px solid transparent !important;
  outline: 2px solid @bixi-mind-tree-node-hover-border-color;
}

.bixi-mind-tree-node-root {
  color: #fff;
  background: #3f7ffc;

  &:hover {
    background: #3f7ffc;
    border: none;
    outline: none;
  }
}