@use 'element-plus/theme-chalk/src/common/var.scss' as *;
@use 'element-plus/theme-chalk/src/mixins/config.scss' as *;
@use 'element-plus/theme-chalk/src/mixins/mixins.scss' as *;
@use './common/var.scss' as *;

@include b(line-tree) {
  @include set-component-css-var('line-tree', $line-tree);

  .#{$namespace}-tree-node {
    position: relative;
    // 竖线
    &:after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: calc(getCssVar('line-tree-collapse-width') / -2 - 1px);
      border-left: 1px solid getCssVar('line-tree-line-color');
    }
  }
  // 折线
  .#{$namespace}-tree-node__content {
    min-height: 32px;
    height: auto;
    position: relative;
    padding-left: 0px !important;
    align-items: center;
    &:before {
      content: '';
      position: absolute;
      top: 0px;
      bottom: calc(100% - getCssVar('line-tree-collapse-height'));
      width: calc(getCssVar('line-tree-collapse-width') / 2);
      left: calc(getCssVar('line-tree-collapse-width') / -2 - 1px);
      border-left: 1px solid getCssVar('line-tree-line-color');
      border-bottom: 1px solid getCssVar('line-tree-line-color');
      border-bottom-left-radius: getCssVar('line-tree-line-radius');
    }
  }
  .#{$namespace}-tree-node:has([level='1']) {
    & > .#{$namespace}-tree-node__content {
      &:before {
        content: none;
      }
    }
    &:after {
      content: none;
    }
  }
  .#{$namespace}-tree-node__children {
    position: relative;
    padding-left: getCssVar('line-tree-collapse-width');
    .#{$namespace}-tree-node:last-child {
      &:after {
        content: none;
      }
    }
  }

  // el-tree-node__content下的子内容(箭头展开收起，复选，loading)
  .#{$namespace}-tree-node__content {
    // 箭头展开收起
    & > .#{$namespace}-tree-node__expand-icon {
      display: none;
      order: 5;
    }
    // 复选
    & > label {
      order: 2;
      margin-left: 8px;
      margin-right: 0px;
    }
    // 加载
    & > .#{$namespace}-tree-node__loading-icon {
      order: 3;
      margin-left: 8px;
      margin-right: 0px;
    }
  }

  // node 移入或聚焦背景色去掉
  .#{$namespace}-tree-node:focus > .#{$namespace}-tree-node__content,
  .#{$namespace}-tree-node__content:hover,
  .#{$namespace}-tree-node:focus {
    background-color: transparent;
  }

  // 折叠
  &-node__collapse {
    order: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: none;
    margin: 6px 0;
    cursor: pointer;
    user-select: none;
    & .is-leaf {
      color: transparent;
      cursor: default;
      display: none;
    }
  }

  // 自定义内容
  &-node__content {
    order: 4;
    margin: 0px 8px;
    width: 100%;
    flex: 1;
    line-height: 16px;
    user-select: none;
  }
  &-node--content-line {
    &:before {
      content: '';
      position: absolute;
      top: calc(getCssVar('line-tree-collapse-height'));
      bottom: 0px;
      left: calc(getCssVar('line-tree-collapse-width') / 2 - 1px);
      border-left: 1px solid getCssVar('line-tree-line-color');
    }
  }
  .#{$namespace}-tree-node__content:has(.is-leaf) {
    & > .#{$namespace}-line-tree-node--content-line {
      &::before {
        content: none;
      }
    }
  }
  .#{$namespace}-tree-node__content:has(
      .#{$namespace}-line-tree-node--content-line
    ) {
    align-items: flex-start;
  }
}