@use 'sass:math';

@use 'common/var' as *;
@use 'mixins/mixins' as *;
@use 'mixins/_col' as *;

@include b(form-base) {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;

  &-head {
    display: flex;
    background: #ffffff;
    padding: 12px 12px 0 12px;
    box-sizing: border-box;
    margin-bottom: 4px;
    margin-left: 0px !important;
    margin-right: 0px !important;
  }

  &-inline-box {
    flex: 1 1 0%;

    .el-form-item {
      margin-right: 10px !important;
      margin-bottom: 10px !important;
    }
  }

  &-inline-operation {
    padding-bottom: 0px;
    margin-bottom: 10px;
  }

  &-body {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #ffffff;
  }

  &-operation {
    display: flex;
    padding: 12px;
    box-sizing: border-box;

    &-operation-left {
      flex: 1;
    }

    &-operation-right {
      display: flex;
      align-items: center;
    }
  }

  &-main {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
  }

  &-table {
    overflow: hidden;
    height: 100vh;
  }

  &-pagination {
    display: flex;
    flex: 1 1 0%;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    align-items: center;
  }

  &-pagination-left {
    flex: 1 1 0%;
  }

  &-pagination-right {
    flex: 1 1 0%;
    display: flex;
    justify-content: flex-end;
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .el-form-base-expand-btn {
    .el-icon {
      transform: rotate(90deg);
    }
  }

  .el-form-base-fold-btn {
    .el-icon {
      transform: rotate(270deg);
    }
  }

  .form-base__link__text {
    overflow: hidden;
    color: var(--el-color-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
  }

  .el-tabs-Line {
    padding-left: 15px;
  }

  .vxe-table--render-default .vxe-tree--node-btn {
    color: rgb(96, 98, 102);
    font-size: 11px;
  }
}

.form-base-search {
  min-height: 480px;
  max-height: 480px;
  overflow: auto;
  .form-base-search-item {
    .form-base-search-item-top {
      display: flex;
      align-items: center;
      &:hover {
        background: #eee;
      }
      &.form-base-search-item-top-checkbox {
        .form-base-search-item-label1 {
          color: #409eff;
        }
        .form-base-search-item-label2 {
          color: #333;
        }
        .form-base-search-item-label3 {
          color: #409eff;
        }
        .form-base-search-item-label6 {
          color: #333;
        }
      }
    }
    .form-base-search-item-label1 {
      margin: 0 10px;
      color: #999;
      cursor: pointer;
      &:hover {
        text-decoration: underline;
      }
    }
    .form-base-search-item-label2 {
      cursor: pointer;
      color: #999;
      &:hover {
        text-decoration: underline;
      }
    }
    .form-base-search-item-label3 {
      margin-left: 10px;
      cursor: pointer;
      color: #999;
      &:hover {
        text-decoration: underline;
      }
    }
    .form-base-search-item-label6 {
      color: #999;
    }
    .form-base-search-item-btn {
      cursor: pointer;
      width: 20px;
      height: 16px;
      position: relative;
      background: #b1b1b1;
      margin-left: 10px;
      color: #fff;
      line-height: 14px;
      text-align: center;
      border-radius: 2px;
      span {
        &:first-child {
          font-size: 10px;
          position: absolute;
          left: 3px;
          top: -2px;
        }
        &:last-child {
          font-size: 10px;
          position: absolute;
          right: 2px;
          bottom: 1px;
        }
      }
    }
  }
}

.form-base-search-state {
  height: 300px;
  overflow: auto;
  > div {
    line-height: 24px;
  }
}