@import "../tools/functions/core";
@import "../tools/mixins/core";
@import "../settings/media";

$block-grid-elements: 12 !default;
$block-grid-default-spacing: rem-calc(20) !default;
$align-block-grid-to-grid: false !default;
@if $align-block-grid-to-grid {
  $block-grid-default-spacing: $column-gutter;
}
$block-grid-media-queries: true !default;

@mixin block-grid(
  $per-row:false,
  $spacing:$block-grid-default-spacing,
  $include-spacing:true,
  $base-style:true) {

  @if $base-style {
    display: block;
    padding: 0;
    @if $align-block-grid-to-grid {
      margin: 0;
    } @else {
      margin: 0 (-$spacing/2);
    }
    @include clearfix;

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

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

      &:nth-of-type(1n) { clear: none; }
      &:nth-of-type(#{$per-row}n+1) { clear: both; }
      @if $align-block-grid-to-grid {
        @include block-grid-aligned($per-row, $spacing);
      }
    }
  }
}

@mixin block-grid-aligned($per-row, $spacing) {
  @for $i from 1 through $block-grid-elements {
    @if $per-row >= $i {
      $grid-column: '+' + $i;
      @if $per-row == $i {
        $grid-column: '';
      }
      &:nth-of-type(#{$per-row}n#{unquote($grid-column)}) {
        padding-left: ($spacing - (($spacing / $per-row) * ($per-row - ($i - 1))));
        padding-right: ($spacing - (($spacing / $per-row) * $i));
      }
    }
  }
}

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

@include exports("block-grid") {

  [class*="block-grid-"] { @include block-grid; }

  @if $block-grid-media-queries {
    @media #{$small-up} {
      @include block-grid-html-classes($size:small, $include-spacing:false);
    }

    @media #{$medium-up} {
      @include block-grid-html-classes($size:medium, $include-spacing:false);
    }

    @media #{$large-up} {
      @include block-grid-html-classes($size:large, $include-spacing:false);
    }

    @media #{$xlarge-up} {
      @include block-grid-html-classes($size:xlarge, $include-spacing:false);
    }

    @media #{$xxlarge-up} {
      @include block-grid-html-classes($size:xxlarge, $include-spacing:false);
    }
  }
}

/* begin block-grid override */
@mixin block-grid($per-row: false, $spacing: $block-grid-default-spacing, $include-spacing: true, $base-style: true, $align-to-grid: $align-block-grid-to-grid) {
  @if $base-style {
    display: block;
    padding: 0;

    @if $align-to-grid {
      margin: 0;
    }
    @else {
      margin: 0 (-$spacing / 2);
    }

    @include clearfix;

    > * {
      display: block;
      float: $default-float;
      height: auto;
      padding: 0 ($spacing / 2) $spacing;
    }

    &.collapse {
      & > * {
        padding: 0;
      }
    }
  }

  @if $per-row {
    > * {
      list-style: none;
      padding: 0 ($spacing / 2) $spacing;
      width: 100% / $per-row;

      &:nth-of-type(1n) {
        clear: none;
      }

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

      @if $align-to-grid {
        @include block-grid-aligned($per-row, $spacing);
      }
    }
  }
}

@include exports("block-grid-bem") {
  [class*="block-grid-"] {
    @include block-grid;
  }

  [class*="column"] {
    &[class*="block-grid-"] {
      @include block-grid($align-to-grid: true);
    }
  }

  @if $block-grid-media-queries {
    @media #{$small-up} {
      @include block-grid-html-classes($size: small, $include-spacing: false);
    }

    @media #{$medium-up} {
      @include block-grid-html-classes($size: medium, $include-spacing: false);
    }

    @media #{$large-up} {
      @include block-grid-html-classes($size: large, $include-spacing: false);
    }
  }
}