@charset "UTF-8";
@import "./common/var.css";

@component-namespace el {
  @b tree {
    cursor: default;
    background: var(--color-white);
    border: 1px solid var(--tree-border-color);

    @e empty-block {
      position: relative;
      min-height: 60px;
      text-align: center;
      width: 100%;
      height: 100%;
    }

    @e empty-text {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      color: color(var(--color-primary) s(16%) l(44%));
    }

    /*风格：连接线*/
    @e line {
      .el-tree-node{
        padding-left:20px;
        position: relative;
      }
      .el-tree-node__children{
        overflow:inherit !important;
      }
      .el-tree-node__children .el-tree-node{
         &:before,
         &:after{
           content: ' ';
           display: block;
           position: absolute;
           z-index: 1;
         }
         &:first-child:before{
           top: -10px;
         }
         &:last-child:before{
           bottom: auto;
           height: 23px;
         }
         &:before{
           top: -12px;
           bottom: 12px;
           left: -12px;
           width: auto;
           height: auto;
           background: 0;
           border-left: 1px dotted var(--tree-node-icon-border-color);
         }
         &:after{
           top: 12px;
           left: -12px;
           width: 26px;
           border-top: 1px dotted var(--tree-node-icon-border-color);
         }
        }
        .el-tree-node__content{
          height:24px;
          line-height:24px;
        }
        /*折叠图标*/
        .el-tree-node__toggle-icon {
          font-family: 'element-icons' !important;
          speak: none;
          font-style: normal;
          font-weight: normal;
          font-variant: normal;
          text-transform: none;
          line-height: 1;
          vertical-align: baseline;
          display: inline-block;
          font-size:12px;
          /* Better Font Rendering =========== */
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          position:absolute;
          left:3px;
          top:5px;
          border:1px solid var(--tree-node-icon-border-color);
          color: var(--tree-node-icon-border-color);
          z-index: 2;
          background-color:#fff;
          &:before,
          &:after{
             -webkit-transform: scale(0.5);
             -moz-transform: scale(0.5);
             display: inline-block;
           }
          &:before {
             content: "\E61C";
           }
          &.expanded:before {
             content: "\E619";
           }
          &.is-leaf{
             display: none;
           }
          &:hover{
             border-color: var(--color-primary);
             color: var(--color-primary);
           }
        }
      /*折叠图标*/
    }
    /*/end风格：连接线*/
  }

  @b tree-node {
    white-space: nowrap;

    @e content {
      line-height: var(--tree-node-content-height);
      height:  var(--tree-node-content-height);
      cursor: pointer;

      & > .el-checkbox,
      & > .el-tree-node__expand-icon {
        margin-right: 8px;
      }
      & > .el-checkbox {
        vertical-align: middle;
      }
      &:hover {
        background: var(--tree-hover-background);
      }
    }

    @e expand-icon {
      display:inline-block;
      height:var(--tree-node-content-height);
      vertical-align: top;
      padding: 0 8px;
      margin-left: 0;
      width: auto;
      margin-right:0 !important;
      border: 0 !important;
    &:before {
       content: '';
       display: inline-block;
       width: 0;
       height: 0;
       vertical-align: middle;
       border: 6px solid transparent;
       border-right-width: 0;
       border-left-color: var(--tree-node-icon-border-color);
       border-left-width: 7px;

       transform: rotate(0deg);
       transition: transform 0.3s ease-in-out;
     }
     &:hover:before {
       border-left-color: var(--tree-node-icon-hover-border-color);
        transform: rotate(0deg);
     }

    &.expanded:before {
       transform: rotate(90deg);
     }
    &.is-leaf:before {
       border-color: transparent;
       cursor: default;
     }
    }

    @e label {
      font-size: var(--tree-node-label-font-size);
      vertical-align: middle;
      display: inline-block;
      @when disabled {
        color: var(--disabled-color-base);
      }
    }

    @e loading-icon {
      display: inline-block;
      vertical-align: middle;
      margin-right: 4px;
      font-size: var(--font-size-base);
      color: var(--color-light-silver);
    }
    & > .el-tree-node__children {
      overflow: hidden;
      background-color: transparent;
    }

    &.is-expanded > .el-tree-node__children {
      display: block;
    }
  }
}

.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background-color: var(--tree-current-background);
}
.el-tree-line {

}