@use "../variables.scss" as *;

$tree: "#{$rootNamespace}-tree";

.#{$tree} {
  // @include set-vac-component-css-var($tree, $vac-tree);
  --vac-tree-line-width: 1px;
  --vac-tree-line-color: #cfcfcf;
  --vac-tree-line-style: solid;
  --vac-tree-node-border: var(--vac-tree-line-width) var(--vac-tree-line-style)
    var(--vac-tree-line-color);
  .el-tree-node__expand-icon {
    font-size: 18px;
  }
  .el-tree-node__expand-icon.expanded {
    transform: none;
  }
  .el-tree-node__expand-icon.is-leaf {
    visibility: visible;
  }

  &-node-icon {
    img {
      width: 18px;
      height: 18px;
    }
  }
  // 添加 el-tree-node__conten 默认没有的 position
  &.el-tree .el-tree-node__content {
    position: relative;
  }

  &-node-label-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
  }
  &-node-line-var {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-left: var(--vac-tree-node-border);
    &.last-node-isLeaf-line {
      height: 50%;
    }
  }
  &-node-line-hor {
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    height: 0;
    border-bottom: var(--vac-tree-node-border);
  }
  &-node-label-line {
    flex: 1;
    border-top: var(--vac-tree-node-border);
    align-self: center;
    margin: 0 10px;
  }
  // .#{$tree}-node__content {
  //   display: flex;
  // }
  // .#{$tree}-node__line {
  //   position: relative;
  //   display: inline-block;
  //   &::after {
  //     content: "";
  //     position: absolute;
  //     height: 100%;
  //     background: #cfcfcf;
  //     top: 0px;
  //     z-index: 10;
  //     width: 1px;
  //   }
  //   &.across::before {
  //     content: "";
  //     position: absolute;
  //     height: 1px;
  //     width: 8px;
  //     background: #cfcfcf;
  //     top: 50%;
  //     transform: translateY(-50%);
  //     z-index: 10;
  //   }
  //   &.last-leaf::after {
  //     height: 50%;
  //     display: block !important;
  //   }
  //   &.last::after {
  //     display: none;
  //   }
  // }
}