@import "mixins/mixins";
@import "common/var";
@import "./tree";

@include b(multi) {
  cursor: default;
  background-color: transparent;
  position: relative;

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

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

@include 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%;
  }
  /* 新增 */
  @include e(content) {
    line-height: $--multi-node-height;
    height: $--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:$--color-primary;
    }
  }

  @include 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: $--multi-icon-font-size;

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

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

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

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

  @include e(loading-icon) {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    font-size: $--multi-icon-font-size;
    color: #f00;
  }

  @include e(breadcrumb) {
    padding-top:10px;
    padding-bottom:10px;
    font-size: $--multi-node-breadcrumb-font-size;
  }

  @include e(lastleaf-item) {
    display: inline-block;
    line-height: $--multi-node-height;
    height: $--multi-node-height;
    font-size: $--multi-node-label-font-size;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  @include e(lastleaf-mark) {
    display: none;
    position: absolute;
    top:50%;
    left:5px;
    -ms-transform: translate(0,-50%);
    transform: translate(0,-50%);
    font-size: 12px;
    color: $--color-primary;
    border: 1px solid $--multi-content-before-border-bottom-color;
    background:$--color-white;
    padding: 2px;
    line-height: 1;
  }

  @include e(lastleaf-icon) {
    vertical-align:middle;
    font-size:12px;
    margin-left:5px;
    cursor: pointer;
    color: $--color-primary;
    &.is-clicked{
      color: $--multi-node-font-color;
    }
  }

  @include e(lastleaf-back) {
    height:$--multi-node-height;
    & .text {
      padding-left:30px;
      line-height: $--multi-node-height;
      font-size:14px;
    }
    & .el-multi-node__expand-icon{
      padding-right:5px;
    }
  }

  @include e(lastleaf-value) {
    /*margin-left: 30px;*/
    margin-left: 15px;
  }
  & > .el-multi-node__children {
    overflow: hidden;
    background-color: $--multi-children-background-color;
    & > .el-multi-select-all{
      line-height: $--multi-node-height;
      height: $--multi-node-height;
      box-sizing: border-box;
      display: inline-block;
      & .el-badge__content{
        margin-top: $--multi-select-all-badge-margin;
      }
    }
  }
  &.is-expanded > .el-multi-node__children {
    display: block;
  }
}

.el-multi-node-1.is-expanded >.el-multi-node__content{
  color:$--color-primary;
}
.el-multi-node-1 > .el-multi-node__children{
  border: 1px solid $--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: $--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: $--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%;
}