/**
 * Use tables to display tabular data.
 *
 * @section Tables
 */

/**
 * Apply standard table styling.
 *
 * @memberof Tables
 * @example
 *
 * <table class='table'>
 *   <thead>
 *     <tr>
 *       <th>Malesuada Tristique Commodo</th>
 *       <th>Nibh Commodo</th>
 *     </tr>
 *   </thead>
 *   <tbody>
 *     <tr>
 *       <td>item</td>
 *       <td>item</td>
 *     </tr>
 *     <tr>
 *       <td>item</td>
 *       <td>item</td>
 *     </tr>
 *   </tbody>
 * </table>
 *
 */
.table,
.prose table:not(.unprose) {
  width: 100%;
  background-color: transparent;
  border-spacing: 0;
  border-collapse: separate;
  border: 1px solid var(--gray-light);
  border-radius: var(--border-radius);
}

/* To achieve rounded corners, we cannot use border-collapse: collapse,
and need an outer border on the whole table. The borders of cells must then
be adjusted based on their position. */

.prose table:not(.unprose) {
  margin-bottom: 18px;
}

.table th,
.table td,
.prose table th:not(.unprose),
.prose table td:not(.unprose) {
  text-align: left;
  vertical-align: top;
  padding: 12px;
  border-style: solid;
  border-color: var(--gray-light);
  border-left-width: 1px;
  border-bottom-width: 1px;
}

.table th:first-child,
.table td:first-child,
.prose table th:first-child:not(.unprose),
.prose table td:first-child:not(.unprose) {
  border-left-width: 0;
}

.table :not(thead) tr:last-of-type th,
.table :not(thead) tr:last-of-type td,
.prose table :not(thead) tr:last-of-type th:not(.unprose),
.prose table :not(thead) tr:last-of-type td:not(.unprose) {
  border-bottom-width: 0;
}

/**
 * Invert a table's colors so it is legible against a dark background.
 *
 * @example
 * <div class='bg-darken75 px12 py12'>
 *   <table class='table table--dark'>
 *     <thead>
 *       <tr>
 *         <th>Malesuada Tristique Commodo</th>
 *         <th>Nibh Commodo</th>
 *       </tr>
 *     </thead>
 *     <tbody>
 *       <tr>
 *         <td>item</td>
 *         <td>item</td>
 *       </tr>
 *       <tr>
 *         <td>item</td>
 *         <td>item</td>
 *       </tr>
 *     </table>
 *   </tbody>
 * </div>
 *
 * @memberof Tables
 *
 */
.table--dark,
.prose--dark table:not(.unprose) {
  background: transparent;
  border-color: var(--white);
  color: var(--white);
}

.table--dark th,
.table--dark td,
.prose--dark th:not(.unprose),
.prose--dark td:not(.unprose) {
  border-bottom-color: var(--white);
}

.table--dark th + td {
  border-left-color: var(--white);
}

/**
 * Force the width of all columns in a table to be determined by any *designated* widths of columns in the first row, independent of each cell's content.
 * Any columns whose widths are *not* specified (by their top cells) will be equally distributed across the available space.
 *
 * @memberof Tables
 * @example
 * <table class='table table--fixed'>
 *   <thead>
 *     <tr>
 *       <th>Malesuada Tristique Commodo</th>
 *       <th>Nibh Commodo</th>
 *       <th class='w240'>Fusce</th>
 *     </tr>
 *   </thead>
 *   <tbody>
 *     <tr>
 *       <td>Fusce</td>
 *       <td>Curabitur blandit tempus porttitor.</td>
 *       <td>Aenean Adipiscing</td>
 *     </tr>
 *     <tr>
 *       <td>Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum.</td>
 *       <td>Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo.</td>
 *       <td>Cras Inceptos Purus</td>
 *     </tr>
 *   </tbody>
 * </table>
 */
.table--fixed {
  table-layout: fixed;
}