/* ==========================================================================
 * TABLE OBJECT
 * ========================================================================== */

/**
 * A simple object for manipulating the structure of HTML `table`s.
 */
.o-table {
  width: 100%;
}




/* 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
 * ========================================================================== */

.o-table--fixed {
  table-layout: fixed;
}




/* Size Variants
 * ========================================================================== */

@each $spacingName, $spacingFactor in $globalSpacingFactors {
  .o-table--#{$spacingName} {
    th,
    td {
      padding: ($globalSpacing * $spacingFactor);
    }
  }
}