@if $css-variable-enabled {
  $primary-transition: var(--primary-transition);
  $table-cell-border-width: var(--table-cell-border-width);
  $table-cell-padding: var(--table-cell-padding);
}

.#{$prefix}table {
  border-collapse: collapse;

  thead {
    background-color: var(--table-header-bg-color);
    color: var(--table-header-text-color);
  }

  tfoot {
    background-color: var(--table-footer-bg-color);
    color: var(--table-footer-text-color);
  }

  td, th {
    padding: $table-cell-padding;
  }

  tr, td, th, thead, tfoot {
    transition: border-color $primary-transition, background-color $primary-transition;
  }

  &.#{$prefix}striped tbody {
    tr:nth-child(odd) {
      background-color: var(--table-bg-color);
    }
  }

  &.#{$prefix}hoverable tbody tr {
    &:hover, &.#{$prefix}hovered {
      background-color: var(--table-hovered-bg-color);
    }
  }

  &.#{$prefix}bottom-bordered tr {
    border-style: solid;
    border-width: 0;
    border-color: var(--table-border-color);
    border-bottom-width: $table-cell-border-width;
  }

  &.#{$prefix}bordered {
    td, th {
      border-style: solid;
      border-color: var(--table-border-color);
      border-width: $table-cell-border-width;
    }
  }
}

.#{$prefix}table-container {
  overflow-x: auto;

  .#{$prefix}table {
    display: block;
  }
}