// // Grid // —————————————-

// grid mixins/functions

@mixin init-grid() {

.container-liquid,
.container-fixed {
  padding-left: $grid-column-padding;
  padding-right: $grid-column-padding;

  @include clearfix();
}

.container-fixed {

  &.left {
    margin-left: 0;
    margin-right: auto;
    float: left;
  }

  &,
  &.center {
    margin-left: auto;
    margin-right: auto;
  }

  &.right {
    margin-left: auto;
    margin-right: 0;
    float: right;
  }

  @include container-fixed();
}

.row {
  margin-left: $grid-column-padding * -1;
  margin-right: $grid-column-padding * -1;
  @include clearfix();
}

%column-standard-settings {
  padding-left: $grid-column-padding;
  padding-right: $grid-column-padding;
  position: relative;
  float: left;
  min-height: 1px; // Prevents empty columns from collapsing
}

@for $size-index from 1 through length($grid-settings) {

  $size-settings: nth($grid-settings, $size-index);
  $screen-size: nth($size-settings, 1);
  $size-name: map-get($grid-screen-sizes, $screen-size);
  $size-min: nth($size-settings, 2);
  $size-max: nth($size-settings, 3);

  $column-name: #{$grid-column-prefix}#{$size-name};

  // shared column settings
  @for $column-outer-idx from 1 through $grid-number-of-columns {
    .#{$column-name}-#{$column-outer-idx} {
      @extend %column-standard-settings;
    }
  }

  // column widths ( -> nested widths)
  @if $size-min {
    @if $size-max {
      @media screen and (min-width: #{$size-min}px) and (max-width: #{$size-max}px) {
        @include create-columns($size-settings);
      }
    } @else {
      @media screen and (min-width: #{$size-min}px) {
        @include create-columns($size-settings);
      }
    }
  } @else {
    @if $size-max {
      @media screen and (max-width: #{$size-max}px) {
        @include create-columns($size-settings);
      }
    } @else {
      @include create-columns($size-settings);
    }
  }

}

}

@mixin grid-debug() {

.grid-debug {

  &.row,
  .row {
    background: url('../images/blackAlpha10.png');
    background: rgba(0, 100, 0, .05);
  }

  &.container-fixed,
  .container-fixed {
    .row {
      background: rgba(100, 0, 0, .05);
    }
  }

  %debug-col-settings {
    background: url('../images/greenAlpha10.png');
    background: rgba(0, 128, 0, .1);
    outline: 1px inset #ccc;
    outline: 1px inset rgba(0, 0, 0, .1);
    outline-offset: -1px;

    &:before,
      &:after {
      content: ' ';
      display: block;
      width: $grid-column-padding;
      height: 100%;
      background: url('../images/greenAlpha50.png');
      background: rgba(0, 255, 0, .5);
      position: absolute;
      top: 0;
    }

    &:before {
      left: 0;
    }

    &:after {
      right: 0;
    }
  }

  %debug-col-settings-fixed {
    background: url('../images/magentaAlpha10.png');
    background: rgba(128, 0, 64, .2);

    &:before,
      &:after {
      background: url('../images/magentaAlpha50.png');
      background: rgba(255, 0, 128, .5);
    }
  }
}

@each $size, $size-name in $grid-screen-sizes {

  $size-name: #{$grid-column-prefix}#{$size-name};

  @for $i from 1 through $grid-number-of-columns {
    .#{$size-name}-#{$i} {
      @extend %debug-col-settings;
    }

    .grid-debug .container-fixed,
    .container-fixed.grid-debug {
      .#{$size-name}-#{$i} {
        @extend %debug-col-settings-fixed;
      }
    }
  }
}

}

@mixin create-columns($size-settings) {

// first level columns' widths & offsets;
$screen-size: nth($size-settings, 1);
$size-name: map-get($grid-screen-sizes, $screen-size);

// widths
$column-name: #{$grid-column-prefix}#{$size-name};

@for $column-outer-idx from 1 through $grid-number-of-columns {
  .#{$column-name}-#{$column-outer-idx} {
    width: percentage($column-outer-idx / $grid-number-of-columns) + .00001; // + .00001 to fix rounding error in safari for col-*-1 at 768
  }
}

// offset
@if $compile-grid-offsets {

  $offset-name: offset-#{$size-name};
  $grid-number-of-offsets: $grid-number-of-columns - 1;

  @for $column-offset-idx from 0 through $grid-number-of-offsets {
    .#{$offset-name}-#{$column-offset-idx} {
      @if $column-offset-idx == 0 {
        margin-left: 0;
      } @else {
        margin-left: percentage($column-offset-idx / $grid-number-of-columns);
      }
    }
  }
}

}

@mixin create-emphased-classes($grid-settings) {

// manual default values ...
.col-emphased { font-weight: bold; }

// default size large
@media screen and (min-width: #{$grid-large-min}px) and (max-width: #{(-1 + $grid-extra-large-min)}px) {
  @if $compile-grid-emphased-class {
    .col-l-emphased { font-weight: bold; }
    .debug-thingy .screensize.col-l-emphased { color: #fff; }
  }
}

@for $size-index from 1 through length($grid-settings) {
  $size-settings: nth($grid-settings, $size-index);
  $size-name: map-get($grid-screen-sizes, nth($size-settings, 1));
  $size-name: #{$grid-column-prefix}#{$size-name};
  $size-min: nth($size-settings, 2);
  $size-max: nth($size-settings, 3);

  @if $size-min {
    @if $size-max {
      @media screen and (min-width: #{$size-min}px) and (max-width: #{$size-max}px) {
        @if $compile-grid-emphased-class {
          .#{$size-name}-emphased { font-weight: bold; }
          .debug-thingy .screensize.#{$size-name}-emphased { color: #fff; }
        }
      }
    } @else {
      @media screen and (min-width: #{$size-min}px) {
        @if $compile-grid-emphased-class {
          .#{$size-name}-emphased { font-weight: bold; }
          .debug-thingy .screensize.#{$size-name}-emphased { color: #fff; }
        }
      }
    }
  } @else {
    @if $size-max {
      @media screen and (max-width: #{$size-max}px) {
        @if $compile-grid-emphased-class {
          .#{$size-name}-emphased { font-weight: bold; }
          .debug-thingy .screensize.#{$size-name}-emphased { color: #fff; }
        }
      }
    }
  }
}

}

@mixin create-visibility-classes($grid-settings) {

// manual default values ...
.col-hide { display: none !important;}

// default size large
@media screen and (min-width: #{$grid-large-min}px) and (max-width: #{(-1 + $grid-extra-large-min)}px) {
  @if $compile-grid-hide-class {.col-l-hide { display: none !important;}}
}

@media screen and (min-width: #{$grid-extra-large-min}), screen and (max-width: #{(-1 + $grid-large-min)}px) {
  @if $compile-grid-show-class {.col-l-show { display: none !important; }}
}

@for $size-index from 1 through length($grid-settings) {
  $size-settings: nth($grid-settings, $size-index);
  $size-name: map-get($grid-screen-sizes, nth($size-settings, 1));
  $size-name: #{$grid-column-prefix}#{$size-name};
  $size-min-hide: nth($size-settings, 2);
  $size-max-hide: nth($size-settings, 3);
  $size-min-show: nth($size-settings, 2) - 1;
  $size-max-show: nth($size-settings, 3) + 1;

  @if $size-min-hide {
    @if $size-max-hide {
      @media screen and (min-width: #{$size-min-hide}px) and (max-width: #{$size-max-hide}px) {
        @if $compile-grid-hide-class {.#{$size-name}-hide { display: none !important; }}
      }

      @media screen and (max-width: #{$size-min-show}px), screen and (min-width: #{$size-max-show}px) {
        @if $compile-grid-show-class {.#{$size-name}-show { display: none !important; }}
      }
    } @else {
      @media screen and (min-width: #{$size-min-hide}px) {
        @if $compile-grid-hide-class {.#{$size-name}-hide { display: none !important; }}
      }

      @media screen and (max-width: #{$size-min-show}px) {
        @if $compile-grid-show-class {.#{$size-name}-show { display: none !important; }}
      }
    }
  } @else {
    @if $size-max-hide {
      @media screen and (max-width: #{$size-max-hide}px) {
        @if $compile-grid-hide-class {.#{$size-name}-hide { display: none !important; }}
      }

      @media screen and (min-width: #{$size-max-show}px) {
        @if $compile-grid-show-class {.#{$size-name}-show { display: none !important; }}
      }
    }
  }
}

}

// grid initialization //

@if $compile-grid {

@include init-grid();

// deprecated in favor of .visibile-* and hidden-* in v2.1.0
@include create-visibility-classes($grid-settings-size-exclusive);

}