text: //
  // Basic Bootstrap table
  //
  
  .table {
    width: 100%;
    margin-bottom: $spacer;
    background-color: $table-bg; // Reset for nesting within parents with `background-color`.
  
    th,
    td {
      padding: $table-cell-padding;
      vertical-align: top;
      border-top: $table-border-width solid $table-border-color;
    }
  
    thead th {
      vertical-align: bottom;
      border-bottom: (2 * $table-border-width) solid $table-border-color;
    }
  
    tbody + tbody {
      border-top: (2 * $table-border-width) solid $table-border-color;
    }
  
    .table {
      background-color: $body-bg;
    }
  }
  
  
  //
  // Condensed table w/ half padding
  //
  
  .table-sm {
    th,
    td {
      padding: $table-cell-padding-sm;
    }
  }
  
  
  // Border versions
  //
  // Add or remove borders all around the table and between all the columns.
  
  .table-bordered {
    border: $table-border-width solid $table-border-color;
  
    th,
    td {
      border: $table-border-width solid $table-border-color;
    }
  
    thead {
      th,
      td {
        border-bottom-width: 2 * $table-border-width;
      }
    }
  }
  
  .table-borderless {
    th,
    td,
    thead th,
    tbody + tbody {
      border: 0;
    }
  }
  
  // Zebra-striping
  //
  // Default zebra-stripe styles (alternating gray and transparent backgrounds)
  
  .table-striped {
    tbody tr:nth-of-type(#{$table-striped-order}) {
      background-color: $table-accent-bg;
    }
  }
  
  
  // Hover effect
  //
  // Placed here since it has to come after the potential zebra striping
  
  .table-hover {
    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, $table-bg-level), theme-color-level($color, $table-border-level));
  }
  
  @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
  .table {
    .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-bordered {
      border: 0;
    }
  
    &.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;
        }
      }
    }
  }
  
  
  // Responsive tables
  //
  // Generate series of `.table-responsive-*` classes for configuring the screen
  // size of where your table will overflow.
  
  .table-responsive {
    @each $breakpoint in map-keys($grid-breakpoints) {
      $next: breakpoint-next($breakpoint, $grid-breakpoints);
      $infix: breakpoint-infix($next, $grid-breakpoints);
  
      &#{$infix} {
        @include media-breakpoint-down($breakpoint) {
          display: block;
          width: 100%;
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
          -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
  
          // Prevent double border on horizontal scroll due to use of `display: block;`
          > .table-bordered {
            border: 0;
          }
        }
      }
    }
  }
  