// ==============
// EDGE TILE
// ==============

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

// ------------------------------
// BASE TILE
// - Styling for base framework
// ------------------------------

@mixin base-tile(
  $size     : 0,
  $gutter   : 0,
  $collapse : false,
  $for-base : false,
  $reset-clearing : false) {
  
  @if $for-base {
    display: block;
    @include clearfix();
    
    > li {
      display: block;
      position: relative;
      float: $default-float;
    }
  }

  // Collapse, reduce all margin and padding to 0
  @if $collapse {
    margin-right: 0;
    margin-left: 0;

    > li {
      padding: 0;
    }
  }
  
  // if gutter is not specified, use the default gutter.
  @if $gutter == 0 and $for-base and not $collapse {
    $gutter: $tile-gutter;
  }
  
  @if $gutter > 0 {
    margin-right: -($gutter / 2);
    margin-left: -($gutter / 2);

    > li {
      padding-right: ($gutter / 2); 
      padding-left: ($gutter / 2);
    }
  }
  
  // Number of tiles per row
  @if $size > 0 {
    > li {
      width: 100% / $size;
      
      @if $reset-clearing {
        &:nth-of-type(n) {
          clear: none;
        }
      }

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

}

// -----------------------------------
// TILE
// - Styling for external mixin call
// -----------------------------------

@mixin tile (
  $size   : 0,
  $small  : 0,
  $mini   : 0,
  $gutter : 0,
  $collapse : false) {

  @include base-tile(
    $size: $size,
    $gutter: $gutter,
    $collapse: $collapse,
    $for-base: true,
    $reset-clearing: $is-in-media
  );

  @if $small > 0 {
    @include below(small) {
      @include base-tile($size: $small, $reset-clearing: true); 
    }
  } @else if $responsive and not $is-in-media { // else, become 100% width on small screen (if responsive)
    @include below(small) {
      @include base-tile($size: 1);
    }
  }

  @if $mini > 0 {
    @include below(mini) {
      @include base-tile($size: $mini, $reset-clearing: true);
    }
  }
}

@if $include-tile and not $user-mode {

/* --------------
  EDGE Tile
-------------- */

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

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

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



} // include-block-grid