$offsetpx: 0.062rem;

.table {
  thead {
    th {
      text-transform: uppercase;
      border-color: $table-thead-border-color;
      font-weight: $table-thead-font-weight;
    }

    th {
      border-bottom-width: $table-border-width;
    }
  }

  tbody td {
    &:not(:first-child) {
      border-left: none;
    }
    &:not(:last-child) {
      border-right: none;
    }
  }

  tbody > tr {
    > td, th {
      border-top: none;
    }
  }

  th, td {
    vertical-align: middle;
  }
}

.table-sortable {
  th, td {
    &.th-asc {
      @include chevron('up');
      &::after { top: 0.25rem; }
    }
    &.th-desc {
      @include chevron('down');
      &::after { top: 0; }
    }

    &.th-asc, &.th-desc {
      position: relative;
      cursor: pointer;
      &::after {
        left: 50%;
        bottom: auto;
      }
    }
  }
}

table {
  .cell-clickable,
  .row-clickable {
    &:hover {
      background-color: $th-sortable-hover-bg;
    }
    &:active {
      background-color: $th-sortable-active-bg;
    }
  }

  .cell-highlight {
    position: relative;
    background-color: $cell-highlight-bg;
    border-top-color: $cell-highlight-border-color;

    &::before {
      display: block;
      position: absolute;
      height: 0.125rem;
      top: -$offsetpx;
      left: -$offsetpx;
      right: -$offsetpx;
      background-color: $cell-highlight-border-color;
      content: '';
    }
  }

  tr > td:first-of-type.cell-highlight {
    &::after {
      display: none;
    }
  }
}

.table-dark thead,
.thead-dark {
  > tr > th {
    border-bottom: none;
    background-color: $table-dark-thead-bg;
  }
}