/*------------------------------------*\
  $TABLES
\*------------------------------------*/

$table-th-background-color: #f5f5f5;
$table-th-text-color: $dark-grey;
$table-border-color: $light-grey;

table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  border: 1px solid $table-border-color;
}

th,
td {
  padding: 20px;
  text-align: left;
  font: {
    family: $body-font;
    weight: 300;
    size: font-size(15);
  }
  border-bottom: 1px solid $table-border-color;
}

th {
  font: {
    family: $heading-font;
    weight: 600;
    size: font-size(15);
  }
  background: {
    color: $table-th-background-color;
  }
  color: $table-th-text-color;
}

td,
tr {
  background-color: #fff;
}

.table-container {
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 0;
  overflow-y: scroll;

  table {
    width: 600px;
    margin: {
      right: auto;
      left: auto;
    }

    &,
    tr,
    th,
    td {
      text-align: center;
    }

    @include mq(mq768) {
      width: 100%;
    }
  }
}