.b-table-stacked-label {
  display: none;
  font-weight: bold;
}

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

  @include media-breakpoint-down($breakpoint, $grid-breakpoints) {
    .table.b-table.b-table-stacked#{$infix} {
      display: block;
      width: 100%;
    }

    .table.b-table.b-table-stacked#{$infix} > tfoot,
    .table.b-table.b-table-stacked#{$infix} > tfoot > tr.b-table-bottom-row,
    .table.b-table.b-table-stacked#{$infix} > tfoot > tr.b-table-top-row,
    .table.b-table.b-table-stacked#{$infix} > thead,
    .table.b-table.b-table-stacked#{$infix} > thead > tr.b-table-bottom-row,
    .table.b-table.b-table-stacked#{$infix} > thead > tr.b-table-top-row {
      display: none;
    }

    .table.b-table.b-table-stacked#{$infix} > caption,
    .table.b-table.b-table-stacked#{$infix} > tbody,
    .table.b-table.b-table-stacked#{$infix} > tbody > tr,
    .table.b-table.b-table-stacked#{$infix} > tbody > tr > td,
    .table.b-table.b-table-stacked#{$infix} > tbody > tr > td > .b-table-stacked-label,
    .table.b-table.b-table-stacked#{$infix} > tbody > tr > th {
      display: block;
    }

    .table.b-table.b-table-stacked#{$infix} > tbody > tr > :first-child,
    .table.b-table.b-table-stacked#{$infix} > tbody > tr > [rowspan] + td,
    .table.b-table.b-table-stacked#{$infix} > tbody > tr > [rowspan] + th {
      border-top-width: 3px;
    }

    .table.b-table.b-table-stacked#{$infix} > tbody > tr > [data-label]::before {
      content: attr(data-label);
      width: 40%;
      float: left;
      text-align: right;
      word-wrap: break-word;
      font-weight: 700;
      font-style: normal;
      padding: 0 0.5rem 0 0;
      margin: 0;
    }

    .table.b-table.b-table-stacked#{$infix} > tbody > tr > [data-label]::after {
      display: block;
      clear: both;
      content: "";
    }

    .table.b-table.b-table-stacked#{$infix} > tbody > tr > [data-label] > div {
      display: inline-block;
      width: 60%;
      padding: 0 0 0 0.5rem;
      margin: 0;
    }
  }
}

.b-table-sticky-header,
.table-responsive,
[class*="table-responsive-"] {
  // Move the table bottom margin to the wrapper
  margin-bottom: $spacer;

  > .table {
    // Reset `margin-bottom` to we don't get a space after
    // the table inside the scroll area
    margin-bottom: 0;
  }
}

.b-table-sticky-header {
  overflow-y: auto;
  // Annoyingly, when overflow-y is set, browsers convert
  // 'overflow-x: visible' to 'overflow-x: auto' - so it becomes
  // responsive in the x axis automatically
  // Default `max-height` before a scrollbar will show
  // We don't use `height` as table could be shorter than this value
}

@media print {
  // Override any styles (including inline styles)
  // when printing
  .b-table-sticky-header {
    overflow-y: visible !important;
    max-height: none !important;
  }
}

.table.b-table[aria-busy="true"] {
  opacity: 0.55;
}

@supports (position: sticky) {
  // Positioning of sticky headers
  .b-table-sticky-header > .table.b-table > thead > tr > th {
    // Header cells need to be sticky on top
    position: sticky;
    top: 0;
    z-index: 2;
  }

  // Positioning of sticky columns
  // Sticky columns only work when table has sticky
  // headers and/or is responsive
  .b-table-sticky-header,
  .table-responsive,
  [class*="table-responsive-"] {
    > .table.b-table {
      > thead,
      > tbody,
      > tfoot {
        > tr > .b-table-sticky-column {
          position: sticky;
          left: 0;
        }
      }

      > thead {
        > tr > .b-table-sticky-column {
          // z-index needs to be higher than sticky columns and
          // sticky headers for correct layering
          z-index: 5;
        }
      }

      > tbody,
      > tfoot {
        > tr > .b-table-sticky-column {
          // z-index needs to be lower than sticky header that
          // is also a sticky column
          z-index: 2;
        }
      }
    }
  }
}

.table.b-table > tbody > tr > .table-b-table-default,
.table.b-table > tfoot > tr > .table-b-table-default,
.table.b-table > thead > tr > .table-b-table-default {
  color: #212529;
  background-color: #fff;
}

.table th {
  &.b-table-sortable-column {
    cursor: pointer;
  }
}

.b-table {
  &.b-table-selectable {
    td {
      cursor: pointer;
    }
  }

  &.b-table-busy {
    .b-table-busy-slot {
      & > td {
        border: none;
        padding: 0;
      }
    }
  }
}