//
// Basic Bootstrap table
//

.table
  width: 100%
  max-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
    +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
  +table-row-variant($color, theme-color-level($color, -9))

+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
      +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}
      +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