/**
 * ITP Table
 * Responsive tables and table layout helpers
 */
.l-Table > thead {
  display: none; /* hide header on mobile */
}

.l-Table > tbody > tr > th { /* stylelint-disable-line */
  display: block;
  width: 100%;
}

.l-Table > tbody > tr > td { /* stylelint-disable-line */
  display: block; /* stack cells */
}

.l-Table::before {
  content: attr(headers) ": "; /* move header title contents next to cell content */
}

@media (--bp2) {
  .l-Table > thead {
    display: table-header-group; /* default table layout */
  }

  /* stylelint-disable */
  .l-Table > tbody > tr > td,
  .l-Table > tbody > tr > th {
    /* stylelint-enable */
    display: table-cell; /* default table layout */
  }

  .l-Table > tbody > tr > th { /* stylelint-disable-line */
    width: initial; /* reset back to initial width */
  }

  .l-Table > tbody > tr > td::before { /* stylelint-disable-line */
    display: none; /* hide header title contents */
  }
}

/**
 * Equal-width table cells
 * `table-layout: fixed` forces all cells within a table to occupy the same
 * width as each other. This also has performance benefits: because the browser
 * does not need to (re)calculate cell dimensions based on content it discovers,
 * the table can be rendered very quickly. Further reading:
 * https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#Values
 */
.l-Table--fixed {
  table-layout: fixed;
}