/*列表table通用样式*/
.list-page {
  height: 100%;
  width: 100%;
  background-color: var(--el-bg-color-page);
  $border-color: var(--el-color-info-light-7);
  $border-radius: 2px;
  $color-white: var(--el-color-white);

  .main-list {
    background-color: var(--el-fill-color-blank);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    z-index: 0;
  }

  .main-container {
    padding: 0;
    height: 100%;

    & > div {
      background-color: var(--el-fill-color-blank);
    }
  }

  .main-list.main-list-with-sub {
    height: 50%;
  }

  .main-modal {
    position: absolute;
    height: 100%;
    width: 100%;
    display: none;
    z-index: 100;
  }

  .top-tools {
    display: flex;
    align-items: center;
    position: relative;
    justify-content: space-between;
    padding: 12px 20px;

    &.top-tools--sub {
      align-items: center;
      padding: 0 70px 0 15px;
      height: 44px;
      background-color: var(--el-fill-color-blank);
      border: 1px solid var(--el-border-color-light);
    }

    .top-tool-search {
      .top-tool-btn {
        border-left: none;
      }

      .top-tool-btn--search {
        width: 28px !important;
        height: 28px !important;
        padding: unset !important;
        display: flex;
        align-items: center;
        justify-content: center;

        i {
          font-size: 14px;
          color: var(--el-text-color-regular);
          margin-right: unset !important;
        }
      }

      .top-tool-btn--search:hover {
        border-left: none !important;
      }

      .top-tool-btn--search:focus {
        border-left: none !important;
      }

      .el-input--small .el-input__wrapper {
        height: 28px !important;
        border-radius: 2px 0 0 2px !important;
      }

      .el-input--small {
        width: 214px !important;
        line-height: 27px;
      }

      .el-input--small .el-input__inner {
        height: 28px;
        border-radius: 2px 0 0 2px;
      }
    }

    .top-tool-right {
      display: flex;
    }

    .top-tool-left {
      display: flex;
    }

    .top-tool-btn-group {
      display: flex;

      .top-tool-btn:not(:last-of-type):not(:first-of-type) {
        border-left: none;
        border-radius: 0;
      }

      .top-tool-btn:first-of-type:not(:last-of-type) {
        border-radius: $border-radius 0 0 $border-radius;
      }

      .top-tool-btn:last-of-type:not(:first-of-type) {
        border-radius: 0 $border-radius $border-radius 0;
        border-left: none;
      }
    }

    .top-tool-btn {
      cursor: pointer;
      height: 28px;
      width: 72px;
      border: 1px solid $border-color;
      outline: none;
      border-radius: 2px;
      background-color: var(--el-fill-color-lighter);
      transition: background-color linear .1s;
      font-size: 12px;
      font-weight: 500;

      i {
        font-size: 14px;
        color: var(--el-text-color-regular);
        margin-right: 4px;
      }
    }

    .top-tool-btn:disabled {
      cursor: not-allowed;
      opacity: 0.66;

      i {

      }
    }

    .top-tool-btn.top-tool-btn--text {
      padding: 0 8px;
      width: unset;
      color: var(--el-text-color-regular);
    }

    .top-tool-btn:hover:not(.cn-btn-disabled) {
      border: 1px solid $border-color;
      background-color: var(--cn-bg-color-light);
    }

    .top-tool-btn:focus:not(.cn-btn-disabled), .top-tool-btn.is-focus {
      background-color: $--button-gray-active-background-color;
      border: 1px solid $border-color;

      i {
        color: var(--el-text-color-regular);
      }
    }

    .top-tool-btn--create {
      background-color: var(--el-color-business) !important;
      border-color: #2E88A6 !important; // 涉及到表格样式，后续修改
      color: $color-white;

      i {
        color: $color-white;
      }
    }

    .top-tool-btn--create:hover {
      background-color: #57B8D9 !important;
      border-color: #2E88A6 !important;
      color: $color-white;

      i {
        color: $color-white;
      }
    }

    .top-tool-btn--create:focus {
      background-color: #31A5CD !important;
      border-color: #2E88A6 !important;
      color: $color-white !important;

      i {
        color: $color-white !important;
      }
    }

    .top-tool-btn--create:disabled {
      opacity: 0.66;
      background-color: var(--el-color-business) !important;
      border-color: #2E88A6 !important;
      color: $color-white;

      i {
        color: $color-white;
      }
    }

    .btn-customize {
      color: #2E88A6;
      font-size: 12px;

      .icon-gear {
        color: #2E88A6;
        width: 12px;
        height: 12px;
        margin-right: 2px;
        font-size: 12px;
      }
    }

    .btn-customize:hover {
      cursor: pointer;
    }

    .top-tool-btn--dropdown {
      position: relative;
      width: auto;
      min-width: 36px;
    }
  }

  .cn-table {
    padding: 0 20px;
    height: calc(100% - 48px);

    .el-table:not(.chart-table) {
      height: calc(100% - 58px);
      width: calc(100% - 2px); // 防止出现横向滚动条
      border: 1px solid var(--el-table-border-color);
      border-bottom: none;

      thead {
        color: var(--el-text-color-primary);
      }

      .el-switch {
        height: auto;
      }
    }
  }

  /* end--覆盖el-table边框、gutter等样式 */
  .cn-pagination {
    position: absolute;
    bottom: 8px;
    height: 48px;
    width: calc(100% - 20px);
  }
}

.el-table {
  // 令no data垂直居中
  .el-scrollbar__view {
    height: 100%;
  }

  // 令no data出现时table底部不出现滚动条
  .el-table__empty-block {
    width: calc(100% - 8px) !important;
  }
}

/*.operation-dropdown-text {
  display: inline-block;
  font-size: 13px;
}

.search-box {
  padding: 0 20px 20px;
}
.click-search-dropdown {
  width: calc(100% - 300px) !important;
  left: 270px !important;
  margin-top: -3px !important;
  box-shadow: none;

  border-radius: 0;
  border-color: #c7c7c7;

  .popper__arrow {
    display: none;
  }
  .el-cascader-menu__list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-height: 120px;
  }
}
.el-popper.el-cascader__dropdown.click-search-dropdown::after {
  content: '';
  position: absolute;
  top: -1px;
  height: 1px;
  background-color: white;
}*/
.col-resize-area {
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
  cursor: col-resize;
}

.margin-r-10 {
  margin-right: 10px;
}

.margin-r-20 {
  margin-right: 20px;
}

.margin-l-10 {
  margin-left: 10px;
}

.margin-t-20 {
  margin-top: 20px;
}

.margin-r-3 {
  margin-right: 3px;
}

.margin-r-30 {
  margin-right: 30px;
}

.margin-l-6 {
  margin-left: 6px;
}

.tooltip-column-name {
  color: #aeb0b9;
  height: 40px;
}