@use 'sass:map';
@use '../variables' as variables;
@use '../functions' as functions;
@use '../mixins/breakpoints-mixins' as mixins;

.table {
  --table-accent-bg: #{variables.$table-accent-bg};
  --table-active-bg: #{variables.$table-active-bg};
  --table-bg: #{variables.$table-bg};
  --table-border-color: #{variables.$table-border-color};
  --table-border-width: #{variables.$table-border-width};
  --table-caption-color: #{variables.$table-caption-color};
  --table-cell-padding: #{variables.$table-cell-padding};
  --table-cell-padding-sm: #{variables.$table-cell-padding-sm};
  --table-cell-vertical-align: #{variables.$table-cell-vertical-align};
  --table-color: #{variables.$table-color};
  --table-dark-accent-bg: #{variables.$table-dark-accent-bg};
  --table-dark-bg: #{variables.$table-dark-bg};
  --table-dark-border-color: #{variables.$table-dark-border-color};
  --table-dark-color: #{variables.$table-dark-color};
  --table-dark-hover-bg: #{variables.$table-dark-hover-bg};
  --table-dark-hover-color: #{variables.$table-dark-hover-color};
  --table-head-bg: #{variables.$table-head-bg};
  --table-head-border-color: #{variables.$table-head-border-color};
  --table-head-color: #{variables.$table-head-color};
  --table-hover-bg: #{variables.$table-hover-bg};
  --table-hover-color: #{variables.$table-hover-color};

  border-color: var(--table-border-color);
  vertical-align: var(--table-cell-vertical-align);
  width: 100%;

  > tbody {
    vertical-align: inherit;
  }

  > thead {
    vertical-align: bottom;

    > tr > th {
      border-bottom: calc(2 * var(--table-border-width)) solid var(--table-border-color);
    }
  }

  > :not(caption) > * > * {
    border: var(--table-border-width) solid var(--table-border-color);
    padding: var(--table-cell-padding);
  }
}

.table-sm {
  > :not(caption) > * > * {
    padding: var(--table-cell-padding-sm);
  }
}

// Responsive tables
//
// Generate series of `.table-responsive-*` classes for configuring the screen
// size of where your table will overflow.

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

  @include mixins.media-breakpoint-down($breakpoint) {
    .table-responsive#{$infix} {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      width: 100%;
    }
  }
}