$table-color: $grey-darker !default $table-background-color: $white !default

$table-cell-border: 1px solid $grey-lighter !default $table-cell-border-width: 0 0 1px !default $table-cell-padding: 0.5em 0.75em !default $table-cell-heading-color: $text-strong !default

$table-head-cell-border-width: 0 0 2px !default $table-head-cell-color: $text-strong !default $table-foot-cell-border-width: 2px 0 0 !default $table-foot-cell-color: $text-strong !default

$table-head-background-color: transparent !default $table-body-background-color: transparent !default $table-foot-background-color: transparent !default

$table-row-hover-background-color: $white-bis !default

$table-row-active-background-color: $primary !default $table-row-active-color: $primary-invert !default

$table-striped-row-even-background-color: $white-bis !default $table-striped-row-even-hover-background-color: $white-ter !default

.table

@extend %block
background-color: $table-background-color
color: $table-color
td,
th
  border: $table-cell-border
  border-width: $table-cell-border-width
  padding: $table-cell-padding
  vertical-align: top
  // 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
  // Modifiers
  &.is-narrow
    white-space: nowrap
    width: 1%
  &.is-selected
    background-color: $table-row-active-background-color
    color: $table-row-active-color
    a,
    strong
      color: currentColor
th
  color: $table-cell-heading-color
  text-align: left
tr
  &.is-selected
    background-color: $table-row-active-background-color
    color: $table-row-active-color
    a,
    strong
      color: currentColor
    td,
    th
      border-color: $table-row-active-color
      color: currentColor
thead
  background-color: $table-head-background-color
  td,
  th
    border-width: $table-head-cell-border-width
    color: $table-head-cell-color
tfoot
  background-color: $table-foot-background-color
  td,
  th
    border-width: $table-foot-cell-border-width
    color: $table-foot-cell-color
tbody
  background-color: $table-body-background-color
  tr
    &:last-child
      td,
      th
        border-bottom-width: 0
// Modifiers
&.is-bordered
  td,
  th
    border-width: 1px
  tr
    &:last-child
      td,
      th
        border-bottom-width: 1px
&.is-fullwidth
  width: 100%
&.is-hoverable
  tbody
    tr:not(.is-selected)
      &:hover
        background-color: $table-row-hover-background-color
  &.is-striped
    tbody
      tr:not(.is-selected)
        &:hover
          background-color: $table-row-hover-background-color
          &:nth-child(even)
            background-color: $table-striped-row-even-hover-background-color
&.is-narrow
  td,
  th
    padding: 0.25em 0.5em
&.is-striped
  tbody
    tr:not(.is-selected)
      &:nth-child(even)
        background-color: $table-striped-row-even-background-color

.table-container

@extend %block
+overflow-touch
overflow: auto
overflow-y: hidden
max-width: 100%