@import "../config/index.scss";

// * @define Grid
// * Borrowed from SUITCSS: https://github.com/suitcss/components-grid

$Grid-gutter: $su-medium;

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

.Grid {
  box-sizing: border-box;
  display: flex; // 1
  flex-flow: row wrap;
  margin: 0; // 1
  padding: 0; // 1
  width: 100%;
}


// * Modifier: center align all grid cells

.Grid--alignCenter {
  justify-content: center;
}


// * Modifier: middle-align grid cells

.Grid--alignMiddle {
  align-items: center;
}


// * Modifier: allow cells to equal distribute width
// *
// * 1. Provide all values to avoid IE10 bug with shorthand flex
// *    http://git.io/vllC7
// *
// *    Use `0%` to avoid bug in IE10/11 with unitless flex basis
// *    http://git.io/vllWx


.Grid--fit > .Grid-cell {
  flex: 1 1 0%; // 1
}


// * Modifier: all cells match height of tallest cell in a row

.Grid--equalHeight > .Grid-cell {
  display: flex;
}


// * Modifier: gutters

.Grid--withGutter {
  margin: 0 (-0.5 * $Grid-gutter);
  width: calc(100% + #{$Grid-gutter})
}

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

// * ------------------------------------------------------------ * //
// * Grid cell
// * ------------------------------------------------------------ * //


// * No explicit width by default. Rely on combining `Grid-cell` with a
// * size utility or a component class that extends 'Grid'.
// *
// * 1. Set flex items to full width by default
// * 2. Fix issue where elements with overflow extend past the
// *    `Grid-cell` container - https://git.io/vw5oF


.Grid-cell {
  box-sizing: inherit;
  flex-basis: 100%; // 1
  min-width: 0; // 2
}


// * 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 {
  margin: 0 auto;
}