.table {
  margin-bottom: $spacer-xs;
  border-bottom: 3px solid $table-border-color;
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  text-align: left;

  caption {
    @extend %heading-font-regular;

    margin-top: $spacer-xxs;
    caption-side: bottom;
    font-size: $font-size-xs;
  }

  thead,
  tfoot {
    @extend %heading-font-bold;

    background-color: $table-header-background-color;
    color: $table-header-text-color;
    font-size: $font-size-base;

    th {
      padding: $spacer-sm $spacer-xs;
      text-align: left;
    }
  }

  tbody {
    tr {
      border-bottom: 1px solid $table-row-border-color;

      &:nth-child(odd) {
        background-color: $table-row-color-dark;
      }
    }
  }

  td {
    @extend %heading-font-regular;

    padding: $spacer-xs;
    vertical-align: top;

    font-size: $font-size-xs;
  }
}

@media screen and (min-width: $grid-breakpoint-md) {
  .table {
    margin-bottom: $spacer-sm;
  }
}

// Responsive tables code taken from BS4
// sass-lint:disable no-vendor-prefixes
@media screen and (max-width: $grid-breakpoint-sm) {
  .table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
}