@import '../src/less/variables.less';
@import '../src/less/mixins.less';
@import '../src/less/custom.less';
@import '../src/css/variables.less';
@import './cell.less';

.gm-react-table.ReactTable {
  .rt-resizer {
    width: 1rem;
    right: -0.5rem;
  }

  .rt-th,
  .rt-td {
    padding: 8px;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
    // 覆盖react-table的overflow: hidden
    // 因为hidden会影响react-gm部分组件的ui，例如Select的选择列表就没有用Popover，没有飘出去
    overflow: visible;

    a {
      cursor: pointer;
    }
  }

  .rt-th:first-child,
  .rt-td:first-child {
    padding-left: 15px;
  }

  .rt-tbody {
    // todo overflow: visible造成不能固定表头。观察用回react-table自带的overflow： auto会怎样
    // overflow: visible;

    .rt-th,
    .rt-td {
      border-right: none;
    }

    .rt-tr {
      min-height: 60px;
      .rt-td {
        align-items: center;
        display: flex;
        .gm-react-table-td-content {
          width: 100%;
        }
      }
    }
  }

  .rt-thead {
    user-select: inherit;
    box-shadow: none;

    // 排序样式
    .gm-react-table-sort-header {
      position: relative;

      &::before {
        content: '';
        position: absolute;
        right: -8px;
        bottom: 8px;
        width: 0;
        height: 0;
        border-top: 3px solid transparent;
        border-right: 3px solid transparent;
        border-bottom: 5px solid #ccc;
        border-left: 3px solid transparent;
      }

      &::after {
        content: '';
        position: absolute;
        right: -8px;
        bottom: -1px;
        width: 0;
        height: 0;
        border-top: 5px solid #ccc;
        border-right: 3px solid transparent;
        border-bottom: 3px solid transparent;
        border-left: 3px solid transparent;
      }

      &.gm-react-table-sort-header-asc {
        &::before {
          border-bottom: 5px solid #999;
        }
      }

      &.gm-react-table-sort-header-desc {
        &::after {
          border-top: 5px solid #999;
        }
      }
    }

    .rt-th {
      &.-sort-asc {
        // 去掉原生排序样式
        box-shadow: none;

        .gm-react-table-sort-header {
          &::before {
            border-bottom: 5px solid #999;
          }
        }
      }

      &.-sort-desc {
        // 去掉原生排序样式
        box-shadow: none;

        .gm-react-table-sort-header {
          &::after {
            border-top: 5px solid #999;
          }
        }
      }
    }

    .rt-tr {
      min-height: 40px;
    }

    .rt-th,
    .rt-td {
      &:focus {
        outline: none;
      }

      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .rt-tr .rt-th {
      background: #f2f3f8;
    }

    // 调整后不会溢出，所以不做 overflow，排序按钮就不会被 hidden 了
    .rt-resizable-header-content {
      overflow: initial;
    }

    &.-header {
      .rt-tr {
        text-align: left;
      }

      .rt-th,
      .rt-td {
        border-right: none;
      }
    }

    &.-headerGroups {
      .rt-th,
      .rt-td {
        text-align: center;
      }
    }
  }

  .rt-noData {
    color: inherit;
    background: transparent;
    bottom: 0;
    top: auto;
    transform: translate(-50%);
  }

  &.-striped {
    .rt-tr.-odd .rt-td {
      background-color: white;
    }

    .rt-tr.-even .rt-td {
      background-color: #f5f5f7;
    }
  }

  &.-highlight {
    .rt-tbody {
      .rt-tr:hover .rt-td {
        background-color: @table-bg-hover;
      }
    }
  }
}

.gm-react-table-select {
  position: relative;

  .gm-react-table-select-all-tip {
    z-index: 1;
    position: absolute;
    top: -19px;
    white-space: nowrap;
    left: 6px;
    background: white;
    padding: 4px 10px;

    &-arrow {
      position: absolute;
      border: 5px solid transparent;
      bottom: -5px;
      border-bottom-width: 0;
      border-top-color: hsla(0, 0%, 85%, 0.7);

      &::after {
        bottom: 1px;
        content: ' ';
        position: absolute;
        margin-left: -4px;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid white;
      }
    }
  }
}

.gm-react-table-diy {
  position: relative;

  .gm-react-table-diy-selector {
    position: absolute;
    width: 340px;
    padding: 10px;
    top: 1px;
    right: 1px;
    background: #fff;
    z-index: 20;
  }
}

.gm-react-table-sticky {
  .rt-thead {
    position: sticky;
    top: 0;
    z-index: 3;
  }

  .rt-tbody {
    overflow: visible;
    flex: 1 0 auto;
  }

  &-th-fixed,
  &-td-fixed {
    position: sticky !important;
    z-index: 1;

    &.-odd {
      background-color: white;
    }

    &.-even {
      background-color: #f5f5f7;
    }

    &-left {
      left: 0;
    }

    &-right {
      right: 0;
    }
  }

  &-td-fixed-left {
    border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
  }

  &-td-fixed-right {
    border-left: 1px solid rgba(0, 0, 0, 0.05) !important;
  }
}

.gm-react-edit-table.ReactTable {
  &.-striped .rt-tbody {
    .rt-tr {
      background-color: white;

      .rt-td {
        .gm-react-edit-table-cell-padding();

        &:first-child,
        &:first-child {
          padding-left: 15px;
        }

        .gm-input {
          .gm-react-edit-table-common-input();
        }

        .gm-input-number {
          .gm-react-edit-table-common-input();
        }

        .gm-more-select {
          .gm-more-select-selected {
            .gm-react-edit-table-common-input();

            padding-top: 0;
            padding-bottom: 0;

            .gm-more-select-clear-btn {
              padding: 0;
              right: 5px;
            }
          }
        }

        .gm-select {
          display: block;

          .gm-selection-selected {
            .gm-react-edit-table-common-input();

            line-height: 22px;
            padding-right: 32px;
          }
        }

        .gm-selected {
          input {
            .gm-react-edit-table-common-input();

            padding-right: 32px;
          }
        }

        .gm-selection {
          input {
            .gm-react-edit-table-common-input();

            padding-right: 32px;
          }
        }
      }
    }
  }

  // action
  .gm-react-edit-table-action-add {
    width: 20px;
    height: 20px;
    color: rgba(106, 170, 70, 0.3);
    margin-right: 18px;

    &:hover {
      color: rgba(106, 170, 70, 1);
      cursor: pointer;
    }

    &.disabled:hover {
      color: rgba(106, 170, 70, 0.3);
      cursor: default;
    }
  }

  .gm-react-edit-table-action-delete {
    width: 20px;
    height: 20px;
    color: rgba(219, 0, 0, 0.3);

    &:hover {
      color: rgba(219, 0, 0, 1);
      cursor: pointer;
    }

    &.disabled:hover {
      color: rgba(219, 0, 0, 0.3);
      cursor: default;
    }
  }
}

// 性能相关
// stylelint-disable-next-line
.gm-react-table.ReactTable {
  // stylelint-disable-next-line
  .rt-tr {
    transform: translateZ(0);
  }
}