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

@component-namespace el {
  @b multi {
    cursor: default;
    background-color: transparent;
    position: relative;
    @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%));
    }
  }

  @b multi-node {
   display:inline-block;
    /* 新增 */
    & .el-breadcrumb__item{
        cursor:pointer;
      }
  & .el-badge{
      margin-left:5px;
    }
    & .el-badge__content{
        vertical-align: middle;
      }
    & .el-multi-node__children{
        width:100%;
        position: absolute;
        top:36px;
        left:0;
      }
    &.el-multi-node-1{
       width:25%;
     }
  /* 新增 */
    @e content {
      line-height: var(--multi-node-height);
      height: var(--multi-node-height);
    /*  cursor: pointer;*/
      & > .el-checkbox {
        margin-right: 8px;
      }
    & > .el-multi-node__expand-icon {
          padding-right: 5px;
        }
      & > .el-checkbox {
        vertical-align: middle;
      }
      &:hover {
      color:var(--color-primary);
      }
    }
    @e expand-icon {
      display: inline-block;
      cursor: pointer;
      vertical-align: middle;
      padding-left: 5px;
      transform: rotate(0deg);
      transition: transform 0.3s ease-in-out;
      font-size: var(--multi-icon-font-size);

      &:hover {
        border-left-color: #999;
      }

      &.expanded {
        transform: rotate(180deg);
      }

      &.is-leaf {
        cursor: default;
       display: none;
      }
    }

    @e label {
      font-size: var(--multi-node-label-font-size);
      vertical-align: middle;
      display: inline-block;
      overflow: hidden;
      height: 100%;
      white-space:nowrap;
      text-overflow:ellipsis;
      @when disabled {
        color: var(--disabled-color-base);
      }
    }

    @e loading-icon {
      display: inline-block;
      vertical-align: middle;
      margin-right: 5px;
      font-size: var(--multi-icon-font-size);
      color: var(--color-light-silver);
    }
    @e breadcrumb{
      padding-top:10px;
      padding-bottom:10px;
      font-size: var(--multi-node-breadcrumb-font-size);
    }
    @e lastleaf-item{
      display: inline-block;
      line-height: var(--multi-node-height);
      height: var(--multi-node-height);
      font-size: var(--multi-node-label-font-size);
      position: relative;
    @utils-ellipsis;
    }

    @e lastleaf-mark{
      display: none;
      position: absolute;
      top:50%;
      left:5px;
      -ms-transform: translate(0,-50%);
      transform: translate(0,-50%);
      font-size: 12px;
      color: var(--color-primary);
      border: 1px solid var(--multi-content-before-border-bottom-color);
      background:var(--color-white);
      padding: 2px;
      line-height: 1;
    }
    @e lastleaf-icon{
      vertical-align:middle;
      font-size:12px;
      margin-left:5px;
      cursor: pointer;
      color: var(--color-primary);
      @when clicked{
        color: var(--multi-node-font-color);
      }
    }

    @e lastleaf-back{
      height:var(--multi-node-height);
      & .text {
        padding-left:30px;
        line-height: var(--multi-node-height);
        font-size:14px;
      }
      & .el-multi-node__expand-icon{
         padding-right:5px;
      }
    }
    @e lastleaf-value{
      /*margin-left: 30px;*/
      margin-left: 15px;
    }

    & > .el-multi-node__children {
      overflow: hidden;
      background-color: var(--multi-children-background-color);
      & > .el-multi-select-all{
            line-height: var(--multi-node-height);
            height: var(--multi-node-height);
            box-sizing: border-box;
            display: inline-block;
            & .el-badge__content{
                  margin-top: var(--multi-select-all-badge-margin);
              }
            }
    }
    &.is-expanded > .el-multi-node__children {
      display: block;
    }
  }
},
.el-multi-node-1.is-expanded >.el-multi-node__content{
  color:var(--color-primary);
}
.el-multi-node-1 > .el-multi-node__children{
  border: 1px solid var(--multi-children-border-color);
  box-sizing: border-box;
}

.el-multi-node-1.is-expanded > .el-multi-node__content{
  position: relative;
}
.el-multi-node-1.is-expanded > .el-multi-node__content:before,
.el-multi-node-1.is-expanded > .el-multi-node__content:after{
  content: '';
  position: absolute;
  display: inline-block;
}
.el-multi-node-1.is-expanded > .el-multi-node__content:before{
  z-index: 99;
  top: 28px;
  left: 15px;
  display: inline-block;
  border: 7px solid transparent;
  border-top-width: 0;
  border-bottom-color: var(--multi-content-before-border-bottom-color);
  border-bottom-width: 9px;
}
.el-multi-node-1.is-expanded > .el-multi-node__content:after{
  z-index: 100;
  top: 30px;
  left: 16px;
  border: 6px solid transparent;
  border-top-width: 0;
  border-bottom-color: var(--multi-content-after-border-bottom-color);
  border-bottom-width: 7px;
}
.el-multi-node  .el-multi-node__label{
  max-width:70%;
}
.el-multi-node.el-multi-node-1 >.el-multi-node__content> .el-multi-node__label{
  max-width:50%;
}