$table-accent-bg:  theme-color('light-secondary');
$table-hover-bg: var(--custom-theme-primary-lighter, theme-color('primary-lighter'));


.table-responsive {
  box-shadow: $box-shadow;
  background-color: theme-color("white");
  border-radius: $card-border-radius;
  max-height: 78vh;
  width: 100%;
  border-radius: 0.5rem;
  @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%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
    }
  }
}



.table {
  display: table;
  table-layout: fixed;
  border-collapse: collapse;
  margin-bottom: 0;
  width: 100%;
  border: 0;
  box-shadow: none;
  background-color: theme-color("white");
  border-radius: $card-border-radius;
  min-width: 51rem;

  .th,
  .td {
    padding: $table-cell-padding;
    vertical-align: middle;
  }

  // Width
  .td--date   { width: 8rem; }
  .td--desc   { width: 16rem; }
  .td--num    { min-width: 6rem; }
  .td--action { width: 7rem; text-align: center; }
  .td--transaction { width: 9rem; text-align: right; padding-right: 1rem}



  .td--num:not(.thead) {
    text-align: right;
    border-right: 1px solid $border-color;
  }

  .thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
    font-weight: 500;
  }

  .tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;

    .tr:not(.tr--total) {
      border-bottom: 1px solid $border-color;
    }

    .td {
      border-top: $table-border-width solid $table-border-color;
    }
  }



  .th,
  .tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
  }

  .td {
    display: table-cell;
  }

  .thead {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }

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


// Zebra-striping
//
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
.tbody .tr:nth-of-type(#{$table-striped-order}) {
  background-color: $table-accent-bg;
}


.tbody .tr--total {
  // @extend %bg-primary-transparent,
  //         %text-primary;
  color: var(--custom-theme-primary, theme-color('primary')) !important;
  background-color: var(--custom-theme-primary-transparent), theme-color('primary-transparent') !important;
  font-weight: $font-weight-bold;
}

// Hover effect
//
// Placed here since it has to come after the potential zebra striping
.tbody .tr {
  @include hover() {
    color: $table-hover-color;
    background-color: $table-hover-bg;
  }
}


// Table backgrounds
//
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables
@each $color, $value in $theme-colors {
  @include table-row-variant($color, theme-color-level($color, $table-bg-level), theme-color-level($color, $table-border-level));
}
@include table-row-variant(active, $table-active-bg);

.tr--total {
  // position: absolute;
  // bottom: 1rem;
  width: 100%;
  // @extend %bg-primary-lighter,
  //         %text-primary;
  color: var(--custom-theme-primary, theme-color('primary')) !important;
  background-color: var(--custom-theme-primary-lighter), theme-color('primary-lighter') !important;
  font-weight: $font-weight-bold;
}

.table {
  .text-primary {
    color: var(--custom-theme-primary, theme-color('primary')) !important;
  }
}