$table-min-width: 500px;
$table-header-background: $gray;
$table-header-border-radius: 12px;
$table-header-padding: 10px 12px;
$table-header-font-size: 0.8rem;
$table-footer-background: $table-header-background;
$table-footer-border-radius: $table-header-border-radius;
$table-cell-padding: $table-header-padding;
$table-cell-font-size: $table-header-font-size;
$bordered-table-border-style: dashed;
$striped-table-odd-background: $white;
$striped-table-even-background: $table-header-background;
$hoverable-table-row-background: $lightGray;

.table {
  border-collapse: collapse;
  border-spacing: 0;
  text-align: left;
  width: 100%;
  min-width: $table-min-width;

  @each $color, $value in $colors {
    &.#{$color} {
      thead,
      tfoot {
        background-color: $value;
        color: get-contrast($value);
      }

      &.flat {
        :not(thead, tfoot) {
          tr {
            background-color: tint($value, 85%) !important;

            &:nth-child(2n) {
              background-color: tint($value, 78%) !important;
            }
          }
        }
      }
    }
  }

  thead {
    background-color: $table-header-background;

    tr {
      th:first-child {
        border-top-left-radius: $table-header-border-radius;
      }

      th:last-child {
        border-top-right-radius: $table-header-border-radius;
      }
    }
  }

  tfoot {
    background-color: $table-footer-background;

    tr {
      th:first-child {
        border-bottom-left-radius: $table-footer-border-radius;
      }

      th:last-child {
        border-bottom-right-radius: $table-footer-border-radius;
      }
    }
  }

  th {
    padding: $table-header-padding;
    font-size: $table-header-font-size;
  }

  td {
    padding: $table-cell-padding;
    font-size: $table-cell-font-size;
  }

  &.striped {
    tbody {
      tr:nth-child(2n - 1) {
        background-color: $striped-table-odd-background;
      }
      
      tr:nth-child(2n) {
        background-color: $striped-table-even-background;
      }
    }
  }

  &.hoverable {
    tbody {
      tr:hover {
        background-color: $hoverable-table-row-background;
      }
    }
  }

  &.bordered {
    tr {
      td {
        border: 1px $bordered-table-border-style $lightGray;
      }
    }
  }

  &.square {
    tr:last-of-type td:first-of-type {
      border-bottom-left-radius: 0;
    }

    tr:last-of-type td:last-of-type {
      border-bottom-right-radius: 0;
    }

    tr {
      th:first-child {
        border-radius: 0;
      }

      th:last-child {
        border-radius: 0;
      }
    }
  }
}

.has-table {
  overflow-y: auto;
  width: 100%;
}