@import 'common/var.scss';
.qf-table {
  position: relative;
  /*overflow: hidden;*/
  box-sizing: border-box;
  flex: 1;
  width: 100%;
  max-width: 100%;
  font-size: 14px;
  background-color: #fff;
  border-bottom: 1px solid $--color-border-light-2;
  .is-hidden {
    visibility: hidden;
  }
  .qf-table-hidden {
    display: none;
  }
  .qf-table-selection {
    text-align: left;
  }
  .qf-table-column-resize {
    position: absolute;
    left: 200px;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px solid #ebeef5;
    z-index: 10;
  }
  .qf-table-fixed,
  .qf-table-fixed-right {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
  }
  &.qf-table-scrollable-x .qf-table-body-wrapper {
    overflow-x: auto;
  }
  &.qf-table-scrollable-y .qf-table-body-wrapper {
    overflow-y: auto;
  }
  .qf-table-body-wrapper {
    /*overflow: hidden;*/
    position: relative;
  }
  .qf-table-footer-wrapper, .qf-table-header-wrapper {
    overflow: hidden;
  }
  .qf-table-fixed-header-wrapper,
  .qf-table-fixed-body-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
  }
  .qf-table-fixed-footer-wrapper {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;
  }
  .qf-table-fixed-right {
    top: 0;
    left: auto;
    right: 0;
    .qf-table-fixed-header-wrapper,
    .qf-table-fixed-body-wrapper,
    .qf-table-fixed-footer-wrapper {
      left: auto;
      right: 0;
    }
  }
  .qf-table-empty-block {
    position: relative;
    min-height: 60px;
    text-align: center;
    width: 100%;
    height: 100%
  }
  .qf-table-empty-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #909399
  }
  &.qf-table-enable-row-hover {
    tr:hover {
      background-color: $--color-focus-light-3;
    }
  }
  tr {
    height: 44px;
    border-top: 1px solid $--color-border-light-2;
    box-sizing: border-box;
    background-color: #fff;
    &.current-row {
      background-color: $--color-bg-light;
    }
    &.hover-row {
      background-color: $--color-focus-light-3;
    }
  }
  .cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
  }
  th {
    white-space: nowrap;
    overflow: hidden;
    user-select: none;
    text-align: left;
    background-color: $--color-bg;
    font-weight: bold;
  }
  th,
  td {
    padding: 0 6px;
    &.is-center {
      text-align: center
    }
    &.is-left {
      text-align: left;
    }
    &.is-right {
      text-align: right;
    }
  }
}

// -----
.qf-table-body {
  table-layout: fixed;
  border-collapse: separate;
  .table-expand-icon {
    position: relative;
    cursor: pointer;
    color: #666;
    font-size: 12px;
    transition: transform .2s ease-in-out;
    height: 20px;
  }
}

//-----
.qf-table-footer {
  table-layout: fixed;
  border-collapse: separate;
}

//-----
.qf-table-header {
  table-layout: fixed;
  border-collapse: separate;
  th.is-sortable {
    cursor: pointer;
  }
  .descending .sort-caret.descending {
    border-top-color: #409eff;
  }
  .ascending .sort-caret.ascending {
    border-bottom-color: #409eff;
  }
  .caret-wrapper {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    height: 34px;
    width: 24px;
    vertical-align: middle;
    cursor: pointer;
    overflow: initial;
    position: relative;
  }
  .sort-caret {
    width: 0;
    height: 0;
    border: 5px solid transparent;
    position: absolute;
    left: 7px;
    &.descending {
      border-top-color: #c0c4cc;
      bottom: 7px;
    }
    &.ascending {
      border-bottom-color: #c0c4cc;
      top: 5px;
    }
  }
}