// ---------------------------------
// TILE
//   Based on ZURB's Foundation 4
// ---------------------------------

$max-tiles   : 12 !default;
$tile-gutter : 15px !default;

// Calculate width and padding for tile
@mixin tile-calc (
  $per-row  : 0,
  $gutter   : $tile-gutter,
  $collapse : false ) {
  
  @if $external-call or $per-row == 0 {
    @if $collapse {
      padding: 0;
    } @else {
      padding: 0 ($gutter / 2);
    }
  }

  @if $per-row > 0 {
    width: 100% / $per-row;

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

// Create tile styling for <ul> and <li>
@mixin tile (
  $large  : 0,
  $small  : 0,
  $gutter   : $tile-gutter,
  $collapse : false ) {
  
  // For <ul> styling
  @if $external-call or $large == 0 {
    display : block;
    @if $collapse {
      margin-right: 0;
      margin-left: 0;
    } @else {
      margin-right: -($gutter / 2);
      margin-left: -($gutter / 2);
    }
    @include clearfix;
  }

  // For <li> styling
  > li {
    @if $external-call or $large == 0 {
      display: block;
      position: relative;
      float: $default-float;
      height: auto;
    }
    
    @include tile-calc($per-row:$large, $gutter:$gutter, $collapse:$collapse);

    @if $small > 0 and $responsive {
      @include below(small) {
        &:nth-of-type(n) {
          clear: none;
        }

        @include tile-calc($per-row:$small, $gutter:$gutter, $collapse:$collapse);
      }
    }
  } // li
}

@if $include-tile {

/* ---------------
EDGE Block Grid
--------------- */

[class*="-tile-"] {
  @include tile();
  
  &.collapse {
    @include tile($collapse:true);
  }
}

@for $i from 2   through $max-tiles {
  .large-tile-#{$i} {
    @include tile($large:$i);
  }
}

@if $responsive {
  @include below(small) {
    // Make large-tie 100% width
    [class*="large-tile-"] > li {
      width: 100%;
    }
    [class*="small-tile-"] > li:nth-child(n) {
      clear: none;
    }
    @for $i from 1 through $max-tiles {
      .small-tile-#{$i} {
        @include tile($large:$i);
      }
    }
  }
} // responsive



} // include-block-grid