$--selectDepartment-base-font-size: 12px !default;
$--selectDepartment-title-font-size: 14px !default;
$--selectDepartment-base-font-weight: bold !default;
$--selectDepartment-split-line-color: #dcdfe6 !default;
$--selectDepartment-notice-font-color: #b2b2b2 !default;
$--selectDepartment-primary-font-color: #027aff !default;
$--selectDepartment-box-hover-bgColor: #f5f7fa !default;
$--selectDepartment-box-active-bgColor: #e6f2ff !default;
$--selectDepartment-box-border-radius: 2px !default;
$--selectDepartment-box-border-color: #ebeef5 !default;
$--selectDepartment-expend-icon-color: #dcdfe6 !default;
$--selectDepartment-sign-primary-bgColor: #027aff !default;
$--selectDepartment-sign-orange-bgColor: #f5a623 !default;
$--selectDepartment-input-border-color: #e4e7ed !default;
$--selectDepartment-input-hover-border-color: #c0c4cc !default;
$--selectDepartment-base-height: 32px !default;
$--selectDepartment-notice-color: #b2b2b2;
$--selectDepartment-hover-color: #f5f7fa;
$--selectDepartment-base-font-size: 12px;


@mixin circleShape($width) {
  width: $width;
  height: $width;
  min-width: $width;
  min-height: $width;
  border-radius: 50%;
}

.x-department-modal {
  .header {
    display: flex;
    align-items: center;
    .header-title {
      flex: 0 0 72px;
      width: 72px;
      margin-right: 12px;
      font-size: $--selectDepartment-title-font-size;
      font-weight: $--selectDepartment-base-font-weight;
      border-right: 1px solid $--selectDepartment-split-line-color;
    }
  }
  .main {
    margin-top: -12px;
    margin-bottom: -12px;
    // height: 378px;
    overflow: auto;
    .el-tabs__nav-scroll {
      display: flex;
      justify-content: center;
      .el-tabs__item {
        min-width: 80px;
        text-align: center;
        box-sizing: content-box;
      }
    }
    .el-tabs__nav-wrap::after {
      height: 1px;
      background-color: $--selectDepartment-box-border-color;
    }
    .loading > img {
      width: 460px;
      height: 460px;
    }
    .department-tree {
      position: relative;
      height: calc(100vh - 524px);
      max-height: 458px;
      min-height: 288px;
      overflow: auto;
      .empty-box {
        right: 0;
        left: 0;
        display: flex;
        height: 100%;
        justify-content: center;
        align-items: center;
      }
      .tree-loading {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        display: flex;
        height: 100%;
        justify-content: center;
        // top: 56px;
        // .x-loading {
        //   height: 100%;
        //   >img {
        //     object-fit: cover;
        //     width: 440px;
        //     height: 90%;
        //   }
        // }
      }
      .tree-node {
        position: relative;
        display: flex;
        width: 100%;
        margin-left: -12px;
        font-size: $--selectDepartment-base-font-size;
        align-items: center;
        .arrow-icon {
          position: absolute;
          right: 16px;
        }
        .more-op {
          position: absolute;
          top: 10px;
          right: 38px;
          display: none;
        }
        .tree-node-text {
          width: 60%;
          margin-left: 13px;
          white-space: normal;
        }
        .tree-radio {
          margin-left: 12px;
          .x-svg-icon {
            color: #b2b2b2;
          }
          .radio-active {
            color: $--selectDepartment-primary-font-color;
          }
        }
      }
      .el-tree-node__expand-icon {
        padding: 0 6px;
        font-size: $--selectDepartment-title-font-size;
        color: $--selectDepartment-expend-icon-color;
        &.is-leaf {
          color: transparent !important;
        }
      }
      .el-tree-node__loading-icon {
        display: none;
      }
    }
  }
  .selected-block {
    display: flex;
    width: 100%;
    height: 120px;
    padding: 16px 0;
    margin: 0 -6px;
    overflow-y: auto;
    border-top: 1px solid $--selectDepartment-box-border-color;
    box-sizing: border-box;
    flex-wrap: wrap;
    .dep-tag {
      margin: 0 6px 12px;
    }
  }
  .footer {
    display: flex;
    .footer-notice {
      display: flex;
      align-items: center;
      justify-items: flex-start;
      flex: 1;
      .footer-notice-text {
        font-size: $--selectDepartment-base-font-size;
        color: $--selectDepartment-notice-font-color;
      }
    }
  }
  .modal-search-input {
    .el-input__inner {
      padding-left: 30px !important;
      border: 0;
    }
    .el-input__prefix {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .x-svg-icon .svg-icon {
      width: 18px !important;
      height: 18px !important;
    }
  }
}