/**
 * YcLineTree 树形连接线组件样式
 * 支持暗黑模式，使用 CSS 变量适配主题
 */

@use './mixins/mixins' as *;

// 虚线样式变量定义
$--yc-tree-line-color: var(--el-border-color-light, #dcdfe6) !default;
$--yc-tree-line-style: dashed !default;
$--yc-tree-line-width: 1px !default;

/* 添加 el-tree-node__content 默认没有的 position */
.el-tree .el-tree-node__content {
  position: relative;
}

/* el-tree-v2 虚拟树的节点也需要添加 position */
.el-tree-v2 [role='treeitem'] > .el-tree-node__content {
  position: relative;
}

/* 节点标签容器 */
.yc-tree-node-label-wrapper {
  display: flex;
  flex: 1;
  align-items: center;
}

/* 节点标签 */
.yc-tree-node-label {
  font-size: 12px;
}

/* 垂直连接线 */
.yc-tree-node-line-ver {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: 100%;
  border-left: $--yc-tree-line-width $--yc-tree-line-style $--yc-tree-line-color;

  /* 非最后一个节点但当前节点是最后一个时，隐藏垂直线 */
  &.last-node-line {
    border-left: $--yc-tree-line-width $--yc-tree-line-style transparent;
  }

  /* 最后一个叶子节点，垂直线只显示到节点中间 */
  &.last-node-isLeaf-line {
    height: 50%;
  }
}

/* 水平连接线 */
.yc-tree-node-line-hor {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  height: 0;
  border-bottom: $--yc-tree-line-width $--yc-tree-line-style $--yc-tree-line-color;
}