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

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

table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;

  .actions {
    padding: {
      top: 20px;
      bottom: 20px;
    }
    margin: 0;

    .btn {
      margin: {
        top: 5px;
        bottom: 5px;
      }
    }
  }

  img {
    margin: {
      bottom: 0;
    }
  }
}

th,
td {
  padding: 20px;
  text-align: left;
  font: {
    family: $body-font;
    weight: 300;
    size: font-size(15);
  }
  vertical-align: middle;

  @include mq(mq600) {
    padding: 25px;
  }

  @include mq(mq960) {
    padding: 30px;
  }

  p {
    margin: 0;
  }
}

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: #EDEDED;
}

tr:nth-child(even) {
  &,
  td {
    background-color: mix(#EDEDED, $white, 50%);
  }
}

.table-container {
  overflow-y: scroll;
  width: 100%;
  border-radius: 6px;

  .widget & {
    position: relative;
  }

  table {
    width: 100%;
    min-width: 600px;

    .widget & {
      position: absolute;
    }
  }
}