//
// Block Grid Variables
//

// We use this to control the maximum number of block grid elements per row
$block-grid-elements: 12 !default;
$block-grid-default-spacing: 10px !default;

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

//
// 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.
@mixin block-grid($per-row:false, $spacing:$block-grid-default-spacing, $base-style:true) {

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

    &>li {
      display: block;
      height: auto;
      float: $default-float;
      padding: 0 $spacing $spacing;
    }
  }

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

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

}

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

    @for $i from 1 through $block-grid-elements {
      .small-block-grid-#{($i)} {
        @include block-grid($i,$block-grid-default-spacing,false);
      }
    }
  }

  /* Foundation Block Grids for above small breakpoint */
  @media #{$small} {
    @for $i from 1 through $block-grid-elements {
      .large-block-grid-#{($i)} {
        @include block-grid($i,$block-grid-default-spacing,false);
      }
    }
    [class*="small-block-grid-"] > li { clear: none !important; }
  }
}