@mixin table---alter() {
}

@mixin table() {
  width: 100%;
  max-width: 100%;
  margin-bottom: $table-margin-bottom;
  background-color: $table-bg;
  th,
  td {
    padding: $table-cell-padding;
    vertical-align: top;
    &.empty {
      padding: 0;
    }
  }
  td {
    border-top: $table-border-width solid $table-border-color;
    &.empty {
      padding: 0;
      border-top: none;
    }
  }
  thead th {
    font-family: $table-head-font-family;
    font-weight: $table-head-font-weight;
    font-size: $table-head-font-size;
    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;
  }
  .table {
    background-color: $body-bg;
  }
  @include table---alter;
}

@mixin table--sm---alter() {
}

@mixin table--sm() {
  th,
  td {
    padding: $table-cell-padding-sm;
  }
  @include table--sm---alter();
}

@mixin table--bordered---alter() {
}

@mixin table--bordered() {
  border: $table-border-width solid $table-border-color;
  th,
  td {
    border: $table-border-width solid $table-border-color;
  }
  thead {
    th,
    td {
      border-bottom-width: (2 * $table-border-width);
    }
  }
  @include table--bordered---alter;
}

@mixin table--bordered-dark---alter() {
}

@mixin table--bordered-dark() {
  border: 0;
  @include table--bordered-dark---alter;
}

@mixin table--striped---alter() {
}

@mixin table--striped() {
  tbody tr:nth-of-type(odd) {
    background-color: $table-accent-bg;
  }
  @include table--striped---alter;
}

@mixin table--striped-dark---alter() {
}

@mixin table--striped-dark() {
  tbody tr:nth-of-type(odd) {
    background-color: $table-dark-accent-bg;
  }
  @include table--striped-dark---alter;
}

@mixin table--hover---alter() {
}

@mixin table--hover() {
  tbody tr {
    &:hover,
    &:focus {
      background-color: $table-hover-bg;
    }
  }
  @include table--hover---alter;
}

@mixin table--hover-dark---alter() {
}

@mixin table--hover-dark() {
  tbody tr {
    &:hover,
    &:focus {
      background-color: $table-dark-hover-bg;
    }
  }
  @include table--hover-dark---alter;
}

@mixin table--align---alter($value: top) {
}

@mixin table--align($value: top) {
  th,
  td,
  thead th {
    vertical-align: $value;
  }
  @include table--align---alter($value);
}

@mixin table--text-align---alter($value: top) {
}

@mixin table--text-align($value: left) {
  th,
  td,
  thead th {
    text-align: $value;
  }
  @include table--text-align---alter($value);
}

@mixin table--dark---alter() {
}

@mixin table--dark() {
  color: $table-dark-color;
  background-color: $table-dark-bg;
  th,
  td,
  thead th {
    border-color: $table-dark-border-color;
  }
  @include table--dark---alter;
}

@mixin table-responsive---alter() {
}

@mixin table-responsive() {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  @include table-responsive---alter;
}

@mixin table-responsive__table---alter() {
}

@mixin table-responsive__table() {
  border: 0;
  @include table-responsive__table---alter();
}

@mixin table--mobile---alter() {
}

@mixin table--mobile($hidden-element-selector: '.table__hidden-mobile') {
  display: block;
  border: none;
  width: 100%;
  thead,
  #{$hidden-element-selector} {
    display: none !important;
  }
  tbody,
  tfoot {
    display: block;
    & > tr {
      display: flex;
      flex-wrap: wrap;
      & + tr {
        margin-top: 15px;
      }
      & > td {
        flex: 0 0 100%;
        max-width: 100%;
        display: flex;
        align-items: center;
        white-space: normal;
        border: 1px solid $table-border-color;
        & + td {
          border-top: none;
        }
        &[data-mobile-label] {
          &::before {
            display: block;
            content: attr(data-mobile-label) ":";
            font-weight: bolder;
            margin-right: 10px;
            white-space: normal;
            text-align: left;
          }
          & > * {
            white-space: normal;
          }
        }
        img {
          width: 100% !important;
          height: auto !important;
        }
      }
    }
  }
  tfoot {
    margin-top: 20px;
    border-top: 1px solid $table-border-color;
    tr {
      & + tr {
        margin-top: 0;
      }
    }
  }
  @include table--mobile---alter;
}

@mixin table__hidden-mobile---alter() {
}

@mixin table__hidden-mobile() {
  display: none !important;
  @include table__hidden-mobile---alter;
}