//
// Basic Bootstrap table
//

.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 1.375rem;

  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-sm-cell-padding;
  }
}


// Bordered version
//
// Add 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);
    }
  }
}


// Zebra-striping
//
// Default zebra-stripe styles (alternating gray and transparent backgrounds)

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


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

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

// Responsive tables
//
// Add `.table-responsive` to `.table`s and we'll make them mobile friendly by
// enabling horizontal scrolling. Only applies <768px. Everything above that
// will display normally.

.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  // sass-lint:disable no-vendor-prefixes
  -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;
  }
}

// Table time
.time-table {
  font-size: .875rem;
  td {
    border: none;
    letter-spacing: .1em;
    padding: .125rem 0;
    &:first-child {
      font-weight: bold;
      padding-right: .75rem;
      white-space: nowrap;
      width: 1%;
      &:before {
        content: "";
        display: inline-block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: .25rem 0 .25rem .3125rem;
        border-color: transparent transparent transparent currentColor;
        transform: translateY(-25%);
        margin-right: .625rem;
        @include media-breakpoint-down(sm) {
          transform: none;
        }
      }
    }
  }
  @include media-breakpoint-down(xs) {
    font-size: .75rem;
  }
}