bs-table {
  display: block;
  overflow-x: auto;
  border: $table-border-width solid $table-border-color;

  //
  // Basic Bootstrap table
  //

  .tr {
    display: flex;
  }

  .td-select {
    padding: $table-cell-padding;
    vertical-align: top;
    display: flex;
    align-items: center;
    border-top: $table-border-width solid $table-border-color;
  }

  .th,
  .td {
    padding: $table-cell-padding;
    vertical-align: top;
    border-top: $table-border-width solid $table-border-color;
    width: 100%;
    max-width: 100%;
    flex-basis: 0;
    flex-grow: 1;
    display: flex;
    overflow-x: auto;
  }

  .thead {
    //position: fixed;
    background-color: $table-head-bg;

   .th {
     vertical-align: bottom;
     border-bottom: (2 * $table-border-width) solid $table-border-color;
   }
  }

  .tbody {
    flex-grow: 1;
    overflow-y: auto;
  }

  .tbody + .tbody {
    border-top: (2 * $table-border-width) solid $table-border-color;
  }


  //
  // Condensed table w/ half padding
  //

  &.table-sm {
    .th,
    .td {
      padding: $table-cell-padding-sm;
    }
  }

  // Add borders all around the table and between all the columns.

  .th,
  .td {
    border: $table-border-width solid $table-border-color;
  }

  .thead {
    .th,
    .td {
      border-bottom-width: (2 * $table-border-width);
    }
  }

  .tbody .tr:nth-of-type(odd) {
    background-color: $table-accent-bg;
  }

  // Hover effect
  //
  // Placed here since it has to come after the potential zebra striping

  .tbody .tr {
    @include hover {
      background-color: $table-hover-bg;
    }
  }

  /*

  // Table backgrounds
  //
  // Exact selectors below required to override `.table-striped` and prevent
  // inheritance to nested tables.

  @each $color, $value in $theme-colors {
    @include table-row-variant($color, theme-color-level($color, -9));
  }

  @include table-row-variant(active, $table-active-bg);

  */

  // Dark styles
  //
  // Same table markup, but inverted color scheme: dark background and light text.

  // stylelint-disable-next-line no-duplicate-selectors
  &.thead-dark {
    .th {
      color: $table-dark-color;
      background-color: $table-dark-bg;
      border-color: $table-dark-border-color;
    }
  }

  &.thead-light {
    .th {
      color: $table-head-color;
      background-color: $table-head-bg;
      border-color: $table-border-color;
    }
  }

  &.table-dark {
    color: $table-dark-color;
    background-color: $table-dark-bg;

    .th,
    .td,
    .thead .th {
      border-color: $table-dark-border-color;
    }

    &.table-striped {
      .tbody .tr:nth-of-type(odd) {
        background-color: $table-dark-accent-bg;
      }
    }

    &.table-hover {
      .tbody .tr {
        @include hover {
          background-color: $table-dark-hover-bg;
        }
      }
    }
  }
}