@import "../utilities/mixins.sass"
@import "../utilities/variables.sass"

$table: $text-strong !default
$table-background: $white !default
$table-border: $border !default

$table-head: $text-light !default

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

.table
  background-color: $table-background
  color: $table
  margin-bottom: 20px
  width: 100%
  td,
  th
    border: 1px solid $table-border
    border-width: 0 0 1px
    padding: 8px 10px
    vertical-align: top
    // Modifiers
    &.is-icon
      padding: 5px
      text-align: center
      white-space: nowrap
      width: 1%
      .fa
        +fa(21px, 24px)
      &.is-link
        padding: 0
        & > a
          padding: 5px
    &.is-link
      padding: 0
      & > a
        display: block
        padding: 8px 10px
        &:hover
          background-color: $link
          color: $link-invert
    &.is-narrow
      white-space: nowrap
      width: 1%
  th
    color: $text-strong
    text-align: left
  tr
    &:hover
      background-color: $table-row-hover-background
  thead
    td,
    th
      border-width: 0 0 2px
      color: $table-head
  tbody
    tr
      &:last-child
        td,
        th
          border-bottom-width: 0
  tfoot
    td,
    th
      border-width: 2px 0 0
      color: $table-head
  // Modifiers
  &.is-bordered
    td,
    th
      border-width: 1px
    tr
      &:last-child
        td,
        th
          border-bottom-width: 1px
  &.is-narrow
    td,
    th
      padding: 5px 10px
      // Modifiers
      &.is-icon
        padding: 2px
        &.is-link
          padding: 0
          & > a
            padding: 2px
      &.is-link
        padding: 0
        & > a
          padding: 5px 10px
  &.is-striped
    tbody
      tr
        &:nth-child(even)
          background-color: $table-row-even-background
          &:hover
            background-color: $table-row-hover-background