@mixin table-scroll-x() {
  position: relative;
  width: 100%;
  overflow-x: auto;
  border: 1px solid $table-border-colour;
  border-bottom: 0;

  .table__th {
    border-top: 0;
  }
}

.table-scroll-x {
  @include table-scroll-x();
}

.table {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
  font-size: 0.9em;
  line-height: 1.7em;
}

tbody .table__tr:hover {
  background-color: $colour-grey-xlight;
}

.table__th,
.table__td {
  padding: 0.8em;
  border-bottom: 1px solid $table-border-colour;

  &--boxed {
    border: 1px solid $table-border-colour;
  }
}

.table__th {
  text-transform: uppercase;
  font-weight: $font-weight-semibold;
}