///mixin to create clear columns classes
///parameters include $screen- and $range: "up","only","down";

@mixin box-sizing($type: border-box) {
  -webkit-box-sizing: $type;
	   -moz-box-sizing: $type;
	        box-sizing: $type;
}

@mixin clear-column($screen, $range) {
  $class-name: make-grid-class(clear,$screen, $range);
  .#{$class-name} {
    clear: both;
  }
}

///mixin to hide classes
///parameters include $screen- and $range: "up","only","down";
@mixin hide-column($screen,$range) {
  $class-name: make-grid-class(hide,$screen,$range);
  .#{$class-name} {
    display: none;
  }
}

///mixin to create show classes
///parameters include $screen- and $range: "up","only","down";
@mixin show-column($screen,$range,$types:$show-classes-sub-list) {
  @each $show-type in $types {
    $class-name: make-grid-class($show-type,$screen,$range);
    .#{$class-name} {
      display: #{$show-type};
    }
  }
}

///mixin to create center columnclasses
///parameters include $screen- and $range: "up","only","down";
@mixin center-column($screen,$range) {
  $class-name: make-grid-class(hide,$screen,$range);
  .#{$class-name} {
    margin: 0px auto;
    float: none;
  }
}

@mixin grid-row($screen,$type) {

  @if $screen != "default"  and ($type =="nest" or $type == "row") {

    @if map-has-key(map-get($screen-list,$screen),gutter) and $type == "nest"{
      $gutter: get-map-values($screen,gutter);
      margin-#{$default-float}: -($gutter/2);
      margin-#{$opposite-default-float}: -($gutter/2);
      max-width: none;
    }

    @if map-has-key(map-get($screen-list,$screen),max-width) and $type == "row"{
      $max-width : get-map-values($screen,max-width);
      max-width: #{$max-width};
    }
  } @else {

    @if $type == "row" {
      width: 100%;
      margin-#{$default-float}: auto;
      margin-#{$opposite-default-float}: auto;
      margin-top: 0;
      margin-bottom: 0;
      max-width: #{$row-max-width};
    } @else if $type == "collapse" {
      width: 100%;
      margin: 0;
      max-width: #{$row-max-width};
    } @else if $type == "nest" {
      width: auto;
      margin-#{$default-float}: -($column-gutter/2);
      margin-#{$opposite-default-float}: -($column-gutter/2);
      margin-top: 0;
      margin-bottom: 0;
      max-width: none;
    } @else if $type == "nest-collapse" {
      width: auto;
      margin: 0;
      max-width: none;
    } @else {

    }
  }
}

@mixin grid-column (
  $screen-size,
  $column-type: "columns",
  $column-size: false,
  $total-columns: false ) {

  @if $column-type == "push" or $column-type == "pull" {
      position: relative;

      @if $column-type == "push" {
          #{$default-float}: column-width-calc($column-size, $total-columns);
          #{$opposite-default-float}: auto;
      } @else {
          #{$opposite-default-float}: column-width-calc($column-size, $total-columns);
          #{$default-float}: auto;
      }
  }

  @if $column-type == "columns" {
      width: column-width-calc($column-size, $total-columns);
  }

  @if $column-type == "offset" {
      margin-#{$default-float}: column-width-calc($column-size, $total-columns);
  }
  @if $column-type == "collapse" {
      padding-left: 0;
      padding-right: 0;
  }
  @if $column-type == "default" and $screen-size != "default" {
     @if map-has-key(map-get($screen-list,$screen-size),gutter) {
          $gutter: get-map-values($screen-size,gutter);
          padding-#{$default-float}: ($gutter/2);
          padding-#{$opposite-default-float}: ($gutter/2);
     } @else {
          padding-#{$default-float}: ($column-gutter/2);
          padding-#{$opposite-default-float}: ($column-gutter/2);
     }

  } @else if $column-type == "default" and $screen-size == "default" {
      float:$default-float;
      padding-#{$default-float}: ($column-gutter/2);
      padding-#{$opposite-default-float}: ($column-gutter/2);
      width:100%;
  }
}


@mixin grid-helpers($screen: "default") {

  @if $screen == "default" {
    .row {
      @include grid-row($screen,"row");
      &:after, &:before {
        content: " ";
        display: table;
      }

      &:after {
          clear:both;
      }

      &.collapse {
          .columns { @include grid-column($screen,$column-type: "collapse"); }
          .row {margin-left:0; margin-right:0;}
      }

      .row {
        @include grid-row($screen,"nest");
        &.collapse {
          @include grid-row($screen, "nest-collapse");
        }
      }
    }
    .columns{
        @include grid-column($screen,"default") ;
    }

    [class*="column"] + [class*="column"]:last-child { float: $opposite-default-float; }
  }

  [class*=" show-"] {
    display:none;
  }
}

@mixin grid-classes($screen-size,$total-columns) {
  $grid-classes: get-map-values($screen-size,grid-classes);
  $grid-class-name: ();
  @for $column-increment from 0 through $total-columns {
    @each $grid-type in $grid-classes {
      @if $grid-type == "columns" {
        $grid-class-name: #{$screen-size}-#{$column-increment};
      } @else {
        $grid-class-name: make-grid-class($grid-type,$screen-size) + $column-increment;
      }
      .#{$grid-class-name} {
        @include grid-column( $screen-size,$grid-type,$column-increment,$total-columns);
      }
    }
  }
}



*,
*:before,
*:after {
  @include box-sizing();
}


@include grid-helpers();

@each $screen,$screen-properties in $screen-list {

  $total-columns: map-get($screen-properties,columns);

  $querie-up: map-get($screen-properties,media-querie-up);
  $querie-only: map-get($screen-properties,media-querie-only);
  $querie-down: map-get($screen-properties,media-querie-down);

  $helper-included: map-has-key($screen-properties,helper-classes);
  $helper-classes: map-get($screen-properties,helper-classes);

  @media #{$querie-up} {
    @include grid-classes($screen, $total-columns);
    @if $helper-included {
      @if index($helper-classes,"clear"){
          @include clear-column($screen,"up");
      }
      @if index($helper-classes,"show") != null {
          @include show-column($screen,"up");
      }
      @if index($helper-classes,"center") != null {
          @include center-column($screen,"up");
      }
    }
  }

  @media #{$querie-only} {
    @if $helper-included {
        @if index($helper-classes,"clear") != null{
        @include clear-column($screen,"only");
        }
        @if index($helper-classes,"hide") != null {
            @include hide-column($screen,"only");
        }
        @if index($helper-classes,"show") != null {
            @include show-column($screen,"only");
        }
    }
    .row {
      @include grid-row($screen,"row");
      .row {
        @include grid-row($screen,"nest")
      }
    }
    .columns {
      @include grid-column($screen,"default")
    }
  }

  @media #{$querie-down} {
    @if $helper-included {
      @if index($helper-classes,"clear") != null {
        @include clear-column($screen,"down");
      }
      @if index($helper-classes,"hide") != null {
        @include hide-column($screen,"down");
      }
      @if index($helper-classes,"show") != null {
        @include show-column($screen,"down");
      }
    }
  }
}