// ==============
// 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,
  $clear    : false) {
  
  @if $for-base {
    display: block;
    @include clearfix;
  }

  // Collapse, reduce all margin and padding to 0
  @if $collapse {
    margin-right: 0;
    margin-left: 0;
  }
  
  @if $gutter > 0 {
    margin-right: -($gutter / 2);
    margin-left: -($gutter / 2);
  }

  > h-ti {
    @if $for-base {
      display: block;
      float: $default-float;
    }

    @if $collapse {
      padding: 0;
    }

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

    @if $size > 1 {
      &: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,
    $clear: $in-media
  );

  @if $small > 0 {
    @include below(small) {
      @include base-tile($small, $clear:true);
    }
  }

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

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

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

h-tile {
  @include base-tile($gutter:$tile-gutter, $for-base:true);

  &.collapse {
    @include base-tile($collapse:true);
  }
}

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

@include below(small) {
  // Make large-tile 100% width
  [class^="block-"] {
    @include base-tile(1, $clear:true);
  }

  @for $i from 1 through $max-tiles {
    .small-block-#{$i} {
      @include base-tile($i);
    }
  }
}



} // include-block-grid