$table-cell-heading-bg-color: $grey-lighter !default;
$table-cell-heading-font-weight: $weight-bold !default;
$table-cell-heading-border-width: 0 0 1px !default;

$table-cell-heading-color: $darker-grey;
$table-cell-color: $black;

$table-head-cell-border-width: 0 0 1px !default;
$table-head-cell-color: $darker-grey !default;
$table-foot-cell-border-width: 1px 0 0 !default;
$table-foot-cell-color: $darker-grey !default;

$table-cell-border: 1px solid rgb(223, 227, 230) !default;
$table-cell-border-width: 0 0 1px !default;
$table-cell-padding: 1.125em 1em !default;

$table-cell-secondary-text-font-size: .875em !default;
$table-cell-secondary-text-color: rgb(90, 104, 114) !default;

//  Variants
$table-striped-row-even-background-color: rgb(249, 252, 255) !default;
$table-row-hover-background-color: $grey-lighter !default;

%table {
  @extend %block;

  td,
  th {
    border: $table-cell-border;
    border-width: $table-cell-border-width;
    padding: $table-cell-padding;
    vertical-align: top;
    color: $table-cell-color;

    // Colors
    @each $name, $pair in $colors {
      $color: nth($pair, 1);
      $color-invert: nth($pair, 2);

      &.is-#{$name} {
        background-color: $color;
        border-color: $color;
        color: $color-invert;
      }
    }

    small,
    .is-secondary {
      display: block;
      font-size: $table-cell-secondary-text-font-size;
      color: $table-cell-secondary-text-color;
    }
  }

  thead {
    td,
    th {
      border-width: $table-head-cell-border-width;
      color: $table-head-cell-color;
    }
  }

  tfoot {
    td,
    th {
      border-width: $table-foot-cell-border-width;
      color: $table-foot-cell-color;
    }
  }

  thead th,
  tfoot th {
    background-color: $table-cell-heading-bg-color;
  }

  tbody {
    tr {
      &:last-child {
        td,
        th {
          border-bottom-width: 0;
        }
      }
    }
  }

  //  Modifiers
  &.is-fullwidth {
    width: 100%
  }

  &.is-bordered {
    td,
    th {
      border-width: 1px;
    }

    tr {
      &:last-child {
        td,
        th {
          border-bottom-width: 1px;
        }
      }
    }
  }

  &.is-narrow {
    td,
    th {
      padding: 0.25em 0.5em
    }
  }

  &.is-hoverable {
    tbody {
      tr:not(.is-selected) {
        &:hover {
          background-color: $table-row-hover-background-color;
        }
      }
    }
  }

  &.is-striped {
    tbody {
      tr:nth-child(even) {
        background-color: $table-striped-row-even-background-color;
      }
    }
  }
}

.table {
  @extend %table;
}

  .table-container {
  @extend %block;

  @include overflow-touch;

  overflow: auto;
  overflow-y: hidden;
  max-width: 100%;
}