components/sass/table.scss

table {
  width: 100%;
  position: relative;

  tr {
    height: 5rem;
  }

  th,
  td {
    overflow: hidden;

    &:first-of-type {
      padding-left: var(--spacing-l);
    }

    &:last-of-type {
      padding-right: var(--spacing-l);
    }
  }

  thead {
    cursor: default;
    position: relative;

    th {
      border-bottom: 2px solid var(--color-border);
      text-align: left;
    }
  }

  tr {
    &:not(:last-of-type) {
      td {
        border-bottom: 1px solid var(--color-border);
      }
    }

    &:nth-child(2n) {
      background-color: var(--color-white-alt);
    }
  }

  th,
  td {
    padding: 0.5rem 1rem;
  }
}

.table__item-label {
  font-size: var(--font-multiplier-small);
  font-weight: 300;
  color: var(--color-subtitle);
}

.table__item--align-right {
  text-align: right;
}

.table__item--actionable {
  vertical-align: middle;

  .button {
    vertical-align: top;
    height: 2rem;
    top: -0.2rem;
    padding: var(--spacing-s);
    margin-left: var(--spacing-m);
  }
}