/*!
 * Flexgrid.css by axiomzen.co - github.com/axiomzen/flexgrid.css
 * License - MIT
 */

$flexgrid-breakpoints: (
  xs: 320px,
  sm: 480px,
  md: 640px,
  lg: 760px,
  xl: 1020px,
  xx: 1200px
);

$flexgrid-columns: 12;

$flexgrid-gutters: (
  xs: 0.2rem,
  sm: 0.32rem,
  md: 0.52rem,
  lg: 0.84rem,
  xl: 1.36rem,
  xx: 2.2rem
);

@mixin flexgrid-break($size) {
  @media (min-width: map-get($flexgrid-breakpoints, $size)) {
    @content;
  }
}

/**
 * Grid
 *
 * This is the root element of a grid object. In it, we exhibit a few main
 * behaviours. The modifiers also help with certain behaviours.
 *
 * [0]  Safety net box sizing reset
 * [1]  All Grids are flex containers
 * [2]  By default, they wrap cells to a new line for responsiveness
 * [3]  Grids can be applied to lists as well, thus the list resets
 * [4]  Changes the layout direction to columnar
 * [5]  Aligns flex items to the start of the flex line
 * [6]  Aligns flex items to the end of the flex line
 * [7]  Aligns flex items to the center of the flex line
 * [8]  Packs flex items around the center of the main axis
 * [9]  Packs flex items towards the end of the main axis
 * [10] Distributes space evenly on the main axis between flex items
 * [11] Distributes space evenly on the main axis around flex items
 *
 * Example HTML:
 *
 * <div class="Grid"></div>
 * <ul class="Grid"></ul>
 * <ol class="Grid"></ol>
 */

.Grid {
  box-sizing: border-box; /* 0 */
  display: flex; /* 1 */
  flex-flow: row wrap; /* 2 */
  list-style: none; /* 3 */
  margin: 0; /* 3 */
  padding: 0; /* 3 */
}

.Grid--column {
  flex-direction: column; /* 4 */
}

.Grid--alignStart {
  align-items: flex-start; /* 5 */
}

.Grid--alignEnd {
  align-items: flex-end; /*  6 */
}

.Grid--alignCenter {
  align-items: center; /* 7 */
}

.Grid--justifyCenter {
  justify-content: center; /* 8 */
}

.Grid--justifyEnd {
  justify-content: flex-end; /* 9 */
}

.Grid--spaceBetween {
  justify-content: space-between; /* 10 */
}

.Grid--spaceAround {
  justify-content: space-around; /* 11 */
}

/**
 * Grid-cell
 *
 * Grid cells are the content containers that live inside of grids. By default,
 * they just fill the available space.
 *
 * Example HTML:
 *
 * <div class="Grid">
 *   <div class="Grid-cell">...</div>
 *   <div class="Grid-cell">...</div>
 *   ...
 * </div>
 */

.Grid-cell {
  flex: 1;
}

.Grid-cell--auto {
  flex: 0 1 auto;
}

/**
 * Grid-cell--[size]
 * Grid-cell--[size]-[span]
 * Grid-cell--[size]-offset-[span]
 *
 * For the sake of the following documentation, let's assume that the breakpoint
 * sizes in the gridconfig remain:
 *
 * [xs, sm, md, lg, xl, xx]
 *
 * In this sequence of modifiers, there's a bit going on. We're iterating over
 * the breakpoints in the grid configuration, and applying modifiers to the
 * grid cells. We're also iterating over the number of columns in the grid
 * configuration, and appending more modifiers to grid cells. Let's look at
 * the two main modifier types:
 *
 * Grid-cell--[size]
 *
 * These modifiers cause grid cells to break at a certain size, denoted above
 * by [size]. By default, they occupy 100% width, and then at a certain
 * breakpoint, they transform to fill the available space.
 *
 * Example HTML:
 *
 * <div class="Grid">
 *   <div class="Grid-cell--sm"></div>
 *   <div class="Grid-cell--sm"></div>
 *   <div class="Grid-cell--sm"></div>
 *   ...
 * </div>
 *
 * Grid-cell--[size]-[span]
 *
 * These modifiers are meant to be used declaratively, and chaining them
 * together in the markup determines how they behave at certain screen widths.
 * When building a grid system using these modifiers, the most important part
 * is the declarations at the smallest screen size. If these are left out, grid
 * cells will just auto fill whatever space they take up.
 *
 * Example HTML:
 *
 * <div class="Grid">
 *   <div class="Grid-cell--xs-12 Grid-cell--sm-4 Grid-cell--lg-2"></div>
 *   <div class="Grid-cell--xs-12 Grid-cell--sm-4 Grid-cell--lg-8"></div>
 *   <div class="Grid-cell--xs-12 Grid-cell--sm-4 Grid-cell--lg-2"></div>
 * </div>
 *
 * Grid-cell--[size]-offset-[span]
 *
 * These modifiers can also be used declaratively, and chaining them together
 * will add offsets to grid cells at various breakpoints. For example, at the
 * smallest breakpoint, you can have an offset of 0 columns, at a medium
 * breakpoint, an offset of 4 columns, and at a large breakpoint, an offset of
 * 2 columns. Offsets are from the left, as that's where the horizontal stacking
 * of columns begins. If at any point, you want the offset to go back to 0, you
 * can use the offset-0 modifier.
 *
 * Example HTML:
 *
 * <div class="Grid Grid--gutter-xl">
 *   <div class="Grid-cell--xs-12 Grid-cell--md-6 Grid-cell--md-offset-6"></div>
 *   <div class="Grid-cell--xs-12 Grid-cell--md-8"></div>
 * </div>
 *
 * It's important to be careful that your offsets + cell spans don't overflow
 * outside the rows...a little bit of very basic math is required!
 */

$flexgrid-cell-counter: 1;
@each $key, $val in $flexgrid-breakpoints {
  .Grid-cell--#{$key} {
    flex: 0 0 100%;
    max-width: 100%;

    @include flexgrid-break($key) {
      flex: 1;
    }
  }

  @for $i from 1 through $flexgrid-columns {
    @if ($flexgrid-cell-counter == 1) {
      .Grid-cell--#{$key}-#{$i} {
        flex: 0 0 ($i/$flexgrid-columns)*100%;
        max-width: ($i/$flexgrid-columns)*100%;
      }
    }
  }

  @include flexgrid-break($key) {
    @for $i from 1 through $flexgrid-columns {
      .Grid-cell--#{$key}-#{$i} {
        flex: 0 0 ($i/$flexgrid-columns)*100%;
        max-width: ($i/$flexgrid-columns)*100%;
      }
    }
  }

  @include flexgrid-break($key) {
    @for $i from 0 through $flexgrid-columns {
      .Grid-cell--#{$key}-offset-#{$i} {
        margin-left: ($i/$flexgrid-columns)*100%;
      }
    }
  }

  $flexgrid-cell-counter: $flexgrid-cell-counter + 1;
}

/**
 * Grid--gutter-[size]
 *
 * Grid gutters are used to give grid cells spacing between each other. They are
 * optional modifiers to the grid, and come in various sizes based on the
 * $flexgrid-gutters configuration.
 *
 * Example HTML:
 *
 * <div class="Grid Grid--gutter-xl">
 *   <div class="Grid-cell"></div>
 *   <div class="Grid-cell"></div>
 *   ...
 * </div>
 */

@each $key, $val in $flexgrid-gutters {
  .Grid--gutter-#{$key} {
    margin-top: -$val;
    margin-left: -$val;

    > [class^="Grid-cell"] {
      padding-top: $val;
      padding-left: $val;
    }
  }
}
