table {
  width: 100%;
  border-collapse: collapse;
  background: white;
}

table.left-align {
    text-align: left;
}

table.top-align th,
table.top-align td {
  vertical-align: top;
}

table.no-wrap {
  white-space: nowrap;
}

th,
td {
  padding: var(--gutter);
  border: 1px solid var(--border-color-light);
}

table.table-dense th,
table.table-dense td {
  padding: calc(var(--gutter) / 2);
}

table.separated-cells {
  border-collapse: separate;
  border-spacing: var(--gutter);
}

/*
TABLE WRAPPER
---
Enables horizontal scrolling for wide tables.

<div class="table-wrapper">
  <table>
    ...
  </table>
</div>
*/

.table-wrapper {
  overflow-x: auto;
  margin-left: calc(var(--gutter) * -1);
  margin-right: calc(var(--gutter) * -1);
  margin-bottom: var(--block-bottom);
}

.table-wrapper table {
  margin-bottom: 0;
}

@media (min-width: 800px) {
  .table-wrapper {
    margin-left: 0;
    margin-right: 0;
  }
}