/* ===================================================
/* TABLES
/* ===================================================

// ====================================
// MIXINS
// ====================================
=create-table
  display: flex
  flex-wrap: wrap
  width: $table-width
  padding: $table-padding
  background: $table-color-background
  border: 1px solid darken($table-color-background, ($darken / 2))
  border:
    collapse: collapse
    spacing: none
    radius: $table-border-radius
  // Pseudo
  &:not(:last-child)
    margin-bottom: $spacing
  // Elements
  caption,
  &-caption
    display: flex
    flex:
      grow: 0
      shrink: 0
      basis: $table-width
    max-width: $table-width
    padding: $table-caption-padding
    font:
      size: $table-caption-font-size
      weight: $table-caption-font-weight
    color: $table-caption-font-color
  thead,
  tbody,
  tfoot,
  tr,
  &-header,
  &-body,
  &-footer,
  &-row
    display: flex
    flex:
      grow: 0
      shrink: 0
      basis: $table-width
      wrap: wrap
    align-items: stretch
    max-width: $table-width
  thead,
  &-header
    border-bottom: 2px solid rgba($table-color-border, $opacity-muted)
  tfoot,
  &-footer
    border-top: 2px solid rgba($table-color-border, $opacity-muted)
  th,
  td,
  &-header .table-cell,
  &-footer .table-cell,
  &-cell
    display: flex
    flex: 1
    align-items: center
    margin: $table-padding
    text-align: left
    overflow: auto
  th,
  thead td,
  tfoot td,
  &-header .table-cell,
  &-footer .table-cell
    font:
      size: $table-header-font-size
      weight: $table-header-font-weight
  tr,
  &-row
    // Modifiers
    &.make-selected
      color: $table-row-font-color-selected
      background: $table-row-background-color-selected
  td,
  &-cell
    font:
      size: $table-cell-font-size
      weight: $table-cell-font-weight
    // Modifiers
    &.make-centered
      justify-content: center
    &.make-right
      justify-content: flex-end
  // Modifiers
  &.make-default
    tbody tr:not(:last-child),
    .table-body .table-row:not(:last-child)
      border-bottom: 1px solid $table-color-stripe
  &.make-striped
    tbody tr:nth-child(odd),
    .table-body .table-row:nth-child(odd)
      background: lighten($table-color-stripe, $lighten)
    tbody tr.make-selected:nth-child(odd),
    .table-body .table-row.make-selected:nth-child(odd)
      background: darken($table-row-background-color-selected, $darken)
  &.make-hoverable
    tbody tr:hover,
    .table-body .table-row:hover
      background: lighten($table-color-stripe, ($lighten / 2))
      cursor: pointer
    tbody tr.make-selected:hover,
    .table-body .table-row.make-selected:hover
      background: darken($table-row-background-color-selected, $darken)

// ====================================
// TABLE
// ====================================
.table
  +create-table