/** @define Grid; use strict */

:root {
  --Grid-font-size: 1rem;
  --Grid-gutter-size: 20px;
}

/**
 * Core grid component
 *
 * DO NOT apply dimension or offset utilities to the `Grid` element. All cell
 * widths and offsets should be applied to child grid cells.
 */

/* Grid container
   ========================================================================== */

/**
 * All content must be contained within child `Grid-cell` elements.
 *
 * 1. Account for browser defaults of elements that might be the root node of
 *    the component.
 * 2. Remove inter-cell whitespace that appears between `inline-block` child
 *    elements.
 * 3. Ensure consistent default alignment.
 */

.Grid {
  display: block; /* 1 */
  font-size: 0; /* 2 */
  margin: 0; /* 1 */
  padding: 0; /* 1 */
  text-align: left; /* 3 */
}

/**
 * Modifier: center align all grid cells
 */

.Grid--alignCenter {
  text-align: center;
}

/**
 * Modifier: right align all grid cells
 */

.Grid--alignRight {
  text-align: right;
}

/**
 * Modifier: middle-align grid cells
 */

.Grid--alignMiddle > .Grid-cell {
  vertical-align: middle;
}

/**
 * Modifier: bottom-align grid cells
 */

.Grid--alignBottom > .Grid-cell {
  vertical-align: bottom;
}

/**
 * Modifier: gutters
 *
 * NOTE: this can trigger a horizontal scrollbar if the component is as wide as
 * the viewport. Use padding on a container, or `overflow-x:hidden` to protect
 * against it.
 */

.Grid--withGutter {
  margin: 0 calc(-0.5 * var(--Grid-gutter-size));
}

.Grid--withGutter > .Grid-cell {
  padding: 0 calc(0.5 * var(--Grid-gutter-size));
}

/* Grid cell
   ========================================================================== */

/**
 * No explicit width by default. Rely on combining `Grid-cell` with a dimension
 * utility or a component class that extends 'grid'.
 *
 * 1. Fundamentals of the non-float grid layout.
 * 2. Reset font size change made in `Grid`.
 * 3. Keeps content correctly aligned with the grid direction.
 * 4. Controls vertical positioning of units.
 * 5. Make cells full-width by default.
 */

.Grid-cell {
  box-sizing: border-box;
  display: inline-block; /* 1 */
  font-size: var(--Grid-font-size); /* 2 */
  margin: 0;
  padding: 0;
  text-align: left; /* 3 */
  vertical-align: top; /* 4 */
  width: 100%; /* 5 */
}

/**
 * Modifier: horizontally center one unit
 * Set a specific unit to be horizontally centered. Doesn't affect
 * any other units. Can still contain a child `Grid` object.
 */

.Grid-cell--center {
  display: block;
  margin: 0 auto;
}