.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} > 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;
}

// --- Header sort styling ---

@function str-replace($string, $search, $replace: "") {
  $index: str-index($string, $search);
  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace +
      str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }
  @return $string;
}

// SVG background image escape function
@function bv-escape-svg($string) {
  @if str-index($string, "data:image/svg+xml") {
    $escaped-characters: (("<", "%3c"), (">", "%3e"), ("#", "%23"));
    @each $char, $encoded in $escaped-characters {
      $string: str-replace($string, $char, $encoded);
    }
  }
  @return $string;
}

// Sort icon variables - increased size for better visibility
$b-table-sort-icon-bg-width: 1.5em !default;
$b-table-sort-icon-bg-height: 1.5em !default;

// Sort icon SVGs (arrows matching the current SortIcon component)
// Light mode icons - dark fill
$b-table-sort-icon-bg-not-sorted: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23212529' viewBox='0 0 16 16'><path fill-rule='evenodd' opacity='0.4' d='M8 12a.5.5 0 0 0 .5-.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 .5.5z'/></svg>") !default;
$b-table-sort-icon-bg-ascending: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23212529' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M8 12a.5.5 0 0 0 .5-.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 .5.5z'/></svg>") !default;
$b-table-sort-icon-bg-descending: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23212529' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4z'/></svg>") !default;

// Dark mode icons - light fill
$b-table-sort-icon-bg-not-sorted-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23dee2e6' viewBox='0 0 16 16'><path fill-rule='evenodd' opacity='0.4' d='M8 12a.5.5 0 0 0 .5-.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 .5.5z'/></svg>") !default;
$b-table-sort-icon-bg-ascending-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23dee2e6' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M8 12a.5.5 0 0 0 .5-.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 .5.5z'/></svg>") !default;
$b-table-sort-icon-bg-descending-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23dee2e6' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4z'/></svg>") !default;

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

// Dark mode icon mixin - inner content (without thead/tfoot wrapper)
@mixin table-sort-icons-dark-inner {
  > tr {
    > [aria-sort="none"] {
      background-image: var(
        --bvn-sort-icon-none,
        bv-escape-svg($b-table-sort-icon-bg-not-sorted-dark)
      );
    }

    > [aria-sort="ascending"] {
      background-image: var(
        --bvn-sort-icon-asc,
        bv-escape-svg($b-table-sort-icon-bg-ascending-dark)
      );
    }

    > [aria-sort="descending"] {
      background-image: var(
        --bvn-sort-icon-desc,
        bv-escape-svg($b-table-sort-icon-bg-descending-dark)
      );
    }
  }
}

// Dark mode icon mixin to avoid duplication
@mixin table-sort-icons-dark {
  > thead,
  > tfoot {
    @include table-sort-icons-dark-inner;
  }
}

.table.b-table:not(.b-table-no-sort-icon) {
  > thead,
  > tfoot {
    > tr {
      > [aria-sort] {
        cursor: pointer;
        background-image: none;
        background-repeat: no-repeat;
        background-size: $b-table-sort-icon-bg-width $b-table-sort-icon-bg-height;

        &:not(.b-table-sort-icon-left) {
          // Default is icon on the right edge of the cell
          background-position: right calc(#{$table-cell-padding-x} / 2) center;
          padding-right: calc(#{$table-cell-padding-x} + #{$b-table-sort-icon-bg-width});
        }

        &.b-table-sort-icon-left {
          // Left aligned sort icon (at left edge of cell)
          background-position: left calc(#{$table-cell-padding-x} / 2) center;
          padding-left: calc(#{$table-cell-padding-x} + #{$b-table-sort-icon-bg-width});
        }
      }

      > [aria-sort="none"] {
        background-image: var(
          --bvn-sort-icon-none,
          bv-escape-svg($b-table-sort-icon-bg-not-sorted)
        );
      }

      > [aria-sort="ascending"] {
        background-image: var(--bvn-sort-icon-asc, bv-escape-svg($b-table-sort-icon-bg-ascending));
      }

      > [aria-sort="descending"] {
        background-image: var(
          --bvn-sort-icon-desc,
          bv-escape-svg($b-table-sort-icon-bg-descending)
        );
      }
    }
  }

  // Apply dark mode icons via media query
  @media (prefers-color-scheme: dark) {
    @include table-sort-icons-dark;
  }

  // Apply dark mode icons when thead/tfoot explicitly has table-dark class
  > thead.table-dark,
  > tfoot.table-dark {
    @include table-sort-icons-dark-inner;
  }
}

// Apply dark mode icons when entire table has table-dark class
.table.b-table.table-dark:not(.b-table-no-sort-icon) {
  @include table-sort-icons-dark;
}

.table.b-table:not(.b-table-no-sort-icon) {
  // Padding adjustment for small tables
  &.table-sm {
    > thead,
    > tfoot {
      > tr > [aria-sort] {
        &:not(.b-table-sort-icon-left) {
          // Default is icon on the right edge of the cell
          background-position: right calc(#{$table-cell-padding-x-sm} / 2) center;
          padding-right: calc(#{$table-cell-padding-x-sm} + #{$b-table-sort-icon-bg-width});
        }

        &.b-table-sort-icon-left {
          // Left aligned sort icon (at left edge of cell)
          background-position: left calc(#{$table-cell-padding-x-sm} / 2) center;
          padding-left: calc(#{$table-cell-padding-x-sm} + #{$b-table-sort-icon-bg-width});
        }
      }
    }
  }
}

// Dark mode icon overrides for explicit [data-bs-theme="dark"]
[data-bs-theme="dark"] {
  .table.b-table:not(.b-table-no-sort-icon) {
    @include table-sort-icons-dark;
  }
}

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

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

  &.b-table-fixed {
    table-layout: fixed;
  }

  &.b-table-no-border-collapse {
    border-collapse: separate;
    border-spacing: 0;
  }
}