.table.b-table {
  // --- General styling ---

  // Table fixed header width layout
  &.b-table-fixed {
    // Fixed width columns
    table-layout: fixed;
  }

  // Table busy styling
  &[aria-busy="true"] {
    opacity: $b-table-busy-opacity;
  }

  // Details row styling
  > tbody > tr.b-table-details > td {
    border-top: none !important;
  }

  // Caption positioning
  > caption {
    caption-side: bottom;

    &.b-table-caption-top {
      caption-side: top !important;
    }
  }

  // Make cells relatively position for thinks like tooltips, etc.
  > thead,
  > tfoot {
    > tr {
      > th,
      > td {
        // So dropdowns, tooltips, sorting, etc., will position properly
        position: relative;
      }
    }
  }

  // --- Header sort styling ---
  > thead,
  > tfoot {
    > tr {
      > th {
        &[aria-sort] {
          // `&.sorting`
          position: relative;
          padding-right: 1.125em;
          cursor: pointer;

          // Up/down sort=null indicator
          &::after {
            position: absolute;
            display: block;
            bottom: 0;
            right: 0.35em;
            padding-bottom: inherit;
            font-size: inherit;
            line-height: inherit;
            opacity: 0.4;
            content: $b-table-sort-icon-null; // Up/down arrow
            speak: none;
          }

          // Ascending indicator
          &[aria-sort="ascending"]::after {
            // `&.sorting_asc::after.sorting_asc`
            opacity: 1;
            content: $b-table-sort-icon-ascending; // Down arrow
          }

          // Descending indicator
          &[aria-sort="descending"]::after {
            // `&.sorting_desc::after`
            opacity: 1;
            content: $b-table-sort-icon-descending; // Up arrow
          }
        }
      }
    }
  }

  // --- Stacked tables ---
  &.b-table-stacked {
    @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%;

          // Convert to blocks when stacked
          > caption,
          > tbody,
          > tbody > tr,
          > tbody > tr > td,
          > tbody > tr > td {
            display: block;
          }

          // Hide when stacked
          > thead,
          > tfoot {
            display: none;

            > tr.b-table-top-row,
            > tr.b-table-bottom-row {
              display: none;
            }
          }

          // Caption positioning
          > caption {
            caption-side: top !important;
          }

          > tbody {
            > tr {
              // Turn cells with labels into micro-grids
              > [data-label] {
                // Convert <td>/<th> contents to "cells"
                // Caveat: child elements become cells!
                display: grid;
                grid-template-columns: 40% auto;
                grid-gap: 0.25rem 1rem;

                // Add the cell header label pseudo element
                &::before {
                  content: attr(data-label);
                  display: inline;
                  text-align: right;
                  overflow-wrap: break-word;
                  font-weight: bold;
                  font-style: normal;
                }
              }

              // Dont show the fixed top/bottom rows
              &.top-row,
              &.bottom-row {
                display: none;
              }

              // Give the top of each "row" a heavy border
              > :first-child {
                border-top-width: (3 * $table-border-width);
              }
            }
          }
        }
      }
    }
  }

  // --- Selectable rows ---
  &.b-table-selectable {
    & > tbody > tr {
      cursor: pointer;
    }

    &.b-table-selecting {
      // Disabled text-selection when in range mode when
      // at least one row selected
      &.b-table-select-range > tbody > tr {
        user-select: none;
      }
    }
  }
}