/* ==========================================================================
   #GRID
   ---
   NOTICE: Adapted from https://github.com/Dietr/inuitcss-plugin-flexlayout
   ========================================================================== */

/**
 * Grid-like layout system.
 *
 * The layout object provides us with a column-style layout system. This file
 * contains the basic structural elements, but classes should be complemented
 * with width utilities, for example:
 *
 *   <div class="au-o-grid">
 *     <div class="au-o-grid__item au-u-1-2">
 *     </div>
 *     <div class="au-o-grid__item au-u-1-2">
 *     </div>
 *   </div>
 *
 * The above will create a two-column structure in which each column will
 * fluidly fill half of the width of the parent. We can have more complex
 * systems:
 *
 *   <div class="au-o-grid">
 *     <div class="au-o-grid__item au-u-1-1 au-u-1-3@medium">
 *     </div>
 *     <div class="au-o-grid__item au-u-1-2 au-u-1-3@medium">
 *     </div>
 *     <div class="au-o-grid__item au-u-1-2 au-u-1-3@medium">
 *     </div>
 *   </div>
 *
 * The above will create a system in which the first item will be 100% width
 * until we enter our medium breakpoint, when it will become 33.333% width. The
 * second and third items will be 50% of their parent, until they also become
 * 33.333% width at the medium breakpoint.
 *
 * We can also manipulate entire layout systems by adding a series of modifiers
 * to the `.au-o-grid` block. For example:
 *
 *   <div class="au-o-grid au-o-grid--reverse">
 *
 * This will reverse the displayed order of the system so that it runs in the
 * opposite order to our source, effectively flipping the system over.
 *
 *   <div class="au-o-grid au-o-grid--[right|center]">
 *
 * This will cause the system to fill up from either the centre or the right
 * hand side. Default behaviour is to fill up the layout system from the left.
 *
 * There are plenty more options available to us: explore them below.
 */

/* Default/mandatory classes.
   ========================================================================== */

/**
 * 1. Allows us to use the layout object on any type of element.
 * 2. We need to defensively reset any box-model properties.
 * 3. Define flexbox settings to allow grid-like behaviour
 * 4. Use the negative margin trick for multi-row grids:
 */

.au-o-grid {
  display: flex; /* [3] */
  align-items: stretch; /* [3] */
  flex-wrap: wrap; /* [3] */
  padding: 0; /* [2] */
  list-style: none; /* [1] */
  margin: -$au-unit; /* [4] */
}

/**
  * 1. By default, all grid items are full-width (mobile first).
  * 2. Gutters provided by padding:
  */

.au-o-grid__item {
  width: 100%; /* [1] */
  padding: $au-unit;
}

/* Gutter size modifiers.
   ========================================================================== */

.au-o-grid--tiny {
  margin: -$au-unit-tiny;

  > .au-o-grid__item {
    padding: $au-unit-tiny;
  }
}

.au-o-grid--small {
  margin: -$au-unit-small;

  > .au-o-grid__item {
    padding: $au-unit-small;
  }
}

.au-o-grid--large {
  margin: -$au-unit-large;

  > .au-o-grid__item {
    padding: $au-unit-large;
  }
}

.au-o-grid--huge {
  margin: -$au-unit-huge;

  > .au-o-grid__item {
    padding: $au-unit-huge;
  }
}

.au-o-grid--flush {
  margin: 0;

  > .au-o-grid__item {
    padding: 0;
  }
}

/* Vertical alignment modifiers.
   ========================================================================== */

/**
 * Align all grid items to the middles of each other.
 */

.au-o-grid--middle {
  > .au-o-grid__item {
    align-self: center;
  }
}

/**
 * Align all grid items to the bottoms of each other.
 */

.au-o-grid--bottom {
  > .au-o-grid__item {
    align-self: flex-end;
  }
}

/* Fill order modifiers.
   ========================================================================== */

/**
 * Fill up the grid system from the centre.
 */

.au-o-grid--center {
  justify-content: center;
}

/**
 * Fill up the grid system from the right-hand side.
 */

.au-o-grid--right {
  justify-content: flex-end;
}

/**
 * Reverse the rendered order of the grid system.
 */

.au-o-grid--reverse {
  flex-direction: row-reverse;
}

/**
 * Stretch the grid in the available space
 */
.au-o-grid--stretch {
  height: 100%;
}

/**
 * Fix the grid in the available space
 */
.au-o-grid--fixed {
  height: 100%;
  overflow: hidden;

  > .au-o-grid__item {
    height: 100%;
  }
}