//
// Block Grid Variables
//
$include-html-grid-classes ?= $include-html-classes;

// We use this to control the maximum number of block grid elements per row
$block-grid-elements ?= 12;
$block-grid-default-spacing ?= emCalc(20px);

// Enables media queries for block-grid classes. Set to false if writing semantic HTML.
$block-grid-media-queries ?= true;

//
// Block Grid Mixins
//

// We use this mixin to create different block-grids. You can apply per-row and spacing options.
// Setting $base-style to false will ommit default styles.
block-grid($per-row=false, $spacing=$block-grid-default-spacing, $base-style=true) {

  if $base-style {
    display: block;
    padding: 0;
    margin: 0 (-($spacing / 2));
    clearfix();

    &>li {
      display: inline;
      height: auto;
      float: $default-float;
      padding: 0 ($spacing / 2) $spacing;
    }
  }

  if $per-row {
    &>li {
      width: (100% / $per-row);
      padding: 0 ($spacing / 2) $spacing;

      &:nth-of-type(n) { clear: none; }
      &:nth-of-type({$per-row}n+1) { clear: both; }
    }
  }

}

if $include-html-grid-classes {
  /* Foundation Block Grids for below small breakpoint */
  @media only screen {
    [class*="block-grid-"] {
      block-grid();
    }

    for $i in (1..$block-grid-elements) {
      .small-block-grid-{$i} {
        block-grid($i,$block-grid-default-spacing,false);
      }
    }
  }

  /* Foundation Block Grids for above small breakpoint */
  @media $small {
    /* Remove small grid clearing */
    for $i in (1..$block-grid-elements) {
      .small-block-grid-{$i} > li:nth-of-type({$i}n+1) { clear: none; }
    }
    for $i in (1..$block-grid-elements) {
      .large-block-grid-{$i} {
        block-grid($i,$block-grid-default-spacing,false);
      }
    }
  }
}