@import "~styles/themes/colors";
@import "~styles/themes/typography";
@import "~styles/themes/elements";

.tableContainer {
  flex: 1 0 auto;
  flex-direction: column;
  height: 100%;
}

.columnSelector {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  display: flex;
  align-content: center;
  justify-content: center;

  .plusIcon {
    flex: 1 0 auto;
    width: 14px;
    fill: $gray-medium;
    vertical-align: center;

    &:hover {
      fill: $primary;
    }
  }
}

.cell {
  @include font-body-xs;

  color: $black;
  font-weight: $font-weight-semibold;
  text-align: center;
  overflow: hidden;
}

.row {
  &:global(.ReactVirtualized__Table__headerRow) {
    border-bottom: 3px solid $gray-lightest;

    &:hover {
      .dragHandleIcon {
        background: $gray-light;
        width: $space-xxxxs;
        height: $space-m;

        &:hover {
          width: $space-xxxs;
        }
      }
    }
  }

  &:global(.ReactVirtualized__Table__row) {
    border-bottom: 1px solid $gray-lightest;

    &:hover {
      background-color: $primary-off-white;
    }

    &:focus {
      outline: none;
    }

    &.clickable {
      cursor: pointer;
    }
  }

  .header {
    @include font-body-s;

    color: $gray-dark;
    font-weight: $font-weight-semibold;
    outline: 0;
    text-transform: none;

    align-self: center;
    align-items: center;
    justify-content: center;
    text-align: center;

    &.draggableHeader {
      height: 100%;
      display: flex;
      flex-direction: row;
      padding: 0;
      justify-content: space-between !important;

      .draggableArea {
        height: inherit;
        width: $space-xxs;
        // Increase the clickable area
        padding: 25px 0px;

        display: flex;
        align-items: center;
        justify-content: center;

        .ruler {
          position: fixed;
          background-color: $primary-light;
          width: $space-xxxs;
          z-index: 1;
        }

        &:hover {
          cursor: ew-resize;
        }
      }
    }

    .sortableHeader {
      max-width: 100%;
      display: flex;
      flex: 1 0 auto;
      align-items: inherit;
      justify-content: inherit;

      .label {
        // Shrink once you're at the maximum width (e.g. don't overflow). Do not grow unless needed.
        flex: 0 1 auto;
        min-width: 0;

        &:hover {
          color: $black;
          cursor: pointer;
        }
      }

      .sortIcon {
        // Make the sort icon slightly bigger than the text.
        margin-left: 4px;
        fill: currentColor;
        width: 12px;

        &.active {
          display: flex;
        }
      }
      // Display sortIcon when sortableHeader label is hovered over
      .label:hover + .sortIcon {
        display: flex;
      }
    }

    .label {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      max-width: 100%;
      display: inline-block;
      vertical-align: middle;

      &:hover {
        color: $black;
        cursor: default;
      }
    }
  }
}

.grid {
  outline: none;

  &::-webkit-scrollbar {
    display: none;
  }

  &:hover::-webkit-scrollbar {
    display: block;
  }
}
