/**
 * File: basic/_responsive-layout.scss
 * Type: SASS partial
 * Author: Chris Humboldt
 */

// Table of contents
// Variables
// Row
// Span
// Offsets
// Layout
// Breakpoint
// Flexbox

// Variables
$column-limit: 12 !default;
$limit-width: 68.750em !default;
$break-main: 43.813em !default;
$min-max: false !default;
// Containers
@mixin row() {
   width: 100%;
   &:before,
   &:after {
      content: " ";
      display: table;
   }
   &:after {
      clear: both;
   }
}
// Spans
@mixin span($span: $column-limit, $span-column-limit: $column-limit) {
   float: left;
   position: relative;
   width: percentage($span / $span-column-limit);
}
@mixin span-new($span: $column-limit, $span-column-limit: $column-limit) {
   width: percentage($span / $span-column-limit);
}
@mixin span-reset() {
   @include span($column-limit);
   @include offset(0);
   @include offset-r(0);
}
// Offsets
@mixin offset($off-by, $span-column-limit: $column-limit) {
   margin-left: percentage($off-by / $span-column-limit);
}
@mixin offset-r($off-by, $span-column-limit: $column-limit) {
   margin-right: percentage($off-by / $span-column-limit);
}
// Layout
@mixin limit() {
   width: 100%;
	max-width: $limit-width;
   margin: 0 auto;
}
// Breakpoint
@mixin breakpoint($breakpoint, $breakpoint-type: false, $orientation: false) {
   @if $breakpoint == retina {
      @media screen and (-webkit-min-device-pixel-ratio: 1.75),
      (min-resolution: 168dpi) {
         @content;
      }
   }
   @else {
      // Min max
      @if $breakpoint-type == false {
         @if $breakpoint == small {
            $min-max: max-width !global;
         }
         @else if $breakpoint == fluid {
            $min-max: max-width !global;
         }
         @else {
            $min-max: min-width !global;
         }
      }
      @else {
         @if $breakpoint-type == max {
            $min-max: max-width !global;
         }
         @else {
            $min-max: min-width !global;
         }
      }
      // Breakpoint
      @if $breakpoint == large {
         $breakpoint: $break-main;
      }
      @else if $breakpoint == fluid {
         $breakpoint: $limit-width;
      }
      @else if $breakpoint == small {
         $breakpoint: $break-main;
      }
      // Return (check orientation)
      @if $orientation != false {
         @media only screen and ($min-max: $breakpoint) and (orientation : $orientation) {
            @content;
         }
      }
      @else {
         @media only screen and ($min-max: $breakpoint) {
            @content;
         }
      }
   }
}
@mixin breakpoint-vertical($breakpoint, $breakpoint-type: false, $orientation: false) {
   @if $breakpoint == retina {
      @media screen and (-webkit-min-device-pixel-ratio: 1.75),
      (min-resolution: 168dpi) {
         @content;
      }
   }
   @else {
      // Min max
      @if $breakpoint-type == false {
         // Large
         @if $breakpoint == small {
            $min-max: max-height !global;
         }
         @else if $breakpoint == fluid {
            $min-max: max-height !global;
         }
         @else {
            $min-max: min-height !global;
         }
      }
      @else {
         @if $breakpoint-type == max {
            $min-max: max-height !global;
         }
         @else {
            $min-max: min-height !global;
         }
      }
      // Breakpoint
      @if $breakpoint == large {
         $breakpoint: $break-main;
      }
      @else if $breakpoint == fluid {
         $breakpoint: $limit-width;
      }
      @else if $breakpoint == small {
         $breakpoint: $break-main;
      }
      // Return (check orientation)
      @if $orientation != false {
         @media only screen and ($min-max: $breakpoint) and (orientation : $orientation) {
            @content;
         }
      }
      @else {
         @media only screen and ($min-max: $breakpoint) {
            @content;
         }
      }
   }
}
// Flexbox
// Based on: https://github.com/zessx/sass-flexbox/blob/master/sass-flexbox.scss
// By: Samuel Marchal
@mixin align-content($align: flex-start) {
   @if $align == flex-start {
      -ms-flex-line-pack: start;
      -webkit-align-content: flex-start;
      -moz-align-content: flex-start;
      align-content: flex-start;
   }
   @else if $align == flex-end {
      -ms-flex-line-pack: end;
      -webkit-align-content: flex-end;
      -moz-align-content: flex-end;
      align-content: flex-end;
   }
   @else if $align == center {
      -ms-flex-line-pack: center;
      -webkit-align-content: center;
      -moz-align-content: center;
      align-content: center;
   }
   @else if $align == space-between {
      -ms-flex-line-pack: space-between;
      -webkit-align-content: space-between;
      -moz-align-content: space-between;
      align-content: space-between;
   }
   @else if $align == space-around {
      -ms-flex-line-pack: space-around;
      -webkit-align-content: space-around;
      -moz-align-content: space-around;
      align-content: space-around;
   }
   @else if $align == stretch {
      -ms-flex-line-pack: stretch;
      -webkit-align-content: stretch;
      -moz-align-content: stretch;
      align-content: stretch;
   }
   @else {
      -ms-flex-line-pack: inherit;
      -webkit-align-content: inherit;
      -moz-align-content: inherit;
      align-content: inherit;
   }
}
@mixin align-items($align: flex-start) {
   @if $align == flex-start {
      -webkit-box-align: start;
      -ms-flex-align: start;
      -webkit-align-items: flex-start;
      -moz-align-items: flex-start;
      align-items: flex-start;
   }
   @else if $align == flex-end {
      -webkit-box-align: end;
      -ms-flex-align: end;
      -webkit-align-items: flex-end;
      -moz-align-items: flex-end;
      align-items: flex-end;
   }
   @else if $align == center {
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      -moz-align-items: center;
      align-items: center;
   }
   @else if $align == baseline {
      -webkit-box-align: baseline;
      -ms-flex-align: baseline;
      -webkit-align-items: baseline;
      -moz-align-items: baseline;
      align-items: baseline;
   }
   @else if $align == stretch {
      -webkit-box-align: stretch;
      -ms-flex-align: stretch;
      -webkit-align-items: stretch;
      -moz-align-items: stretch;
      align-items: stretch;
   }
   @else {
      -webkit-box-align: inherit;
      -ms-flex-align: inherit;
      -webkit-align-items: inherit;
      -moz-align-items: inherit;
      align-items: inherit;
   }
}
@mixin align-self($align: auto) {
   @if $align == auto {
      -ms-flex-item-align: auto;
      -webkit-align-self: auto;
      -moz-align-self: auto;
      align-self: auto;
   }
   @else if $align == flex-start {
      -ms-flex-item-align: start;
      -webkit-align-self: flex-start;
      -moz-align-self: flex-start;
      align-self: flex-start;
   }
   @else if $align == flex-end {
      -ms-flex-item-align: end;
      -webkit-align-self: flex-end;
      -moz-align-self: flex-end;
      align-self: flex-end;
   }
   @else if $align == center {
      -ms-flex-item-align: center;
      -webkit-align-self: center;
      -moz-align-self: center;
      align-self: center;
   }
   @else if $align == baseline {
      -ms-flex-item-align: baseline;
      -webkit-align-self: baseline;
      -moz-align-self: baseline;
      align-self: baseline;
   }
   @else if $align == stretch {
      -ms-flex-item-align: stretch;
      -webkit-align-self: stretch;
      -moz-align-self: stretch;
      align-self: stretch;
   }
   @else {
      -ms-flex-item-align: inherit;
      -webkit-align-self: inherit;
      -moz-align-self: inherit;
      align-self: inherit;
   }
}
@mixin flex($grow: 0, $shrink: 1, $basis: auto) {
   @include flex-grow($grow);
   @include flex-shrink($shrink);
   @include flex-basis($basis);
}
@mixin flex-basis($basis: auto) {
   -webkit-flex-basis: $basis;
   -moz-flex-basis: $basis;
   -ms-flex-preferred-size: $basis;
   flex-basis: $basis;
}
@mixin flex-direction($direction: row) {
   @if $direction == row {
      -webkit-box-orient: horizontal;
      -moz-box-orient: horizontal;
      -webkit-flex-direction: row;
      -moz-flex-direction: row;
      -ms-flex-direction: row;
      flex-direction: row;
   }
   @else if $direction == row-reverse {
      -webkit-box-orient: horizontal;
      -moz-box-orient: horizontal;
      -webkit-box-direction: reverse;
      -moz-box-direction: reverse;
      -webkit-flex-direction: row-reverse;
      -moz-flex-direction: row-reverse;
      -ms-flex-direction: row-reverse;
      flex-direction: row-reverse;
   }
   @else if $direction == column {
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      -webkit-flex-direction: column;
      -moz-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
   }
   @else if $direction == column-reverse {
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      -webkit-box-direction: reverse;
      -moz-box-direction: reverse;
      -webkit-flex-direction: column-reverse;
      -moz-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
      flex-direction: column-reverse;
   }
   @else {
      -webkit-box-orient: inherit;
      -moz-box-orient: inherit;
      -webkit-flex-direction: inherit;
      -moz-flex-direction: inherit;
      -ms-flex-direction: inherit;
      flex-direction: inherit;
   }
}
@mixin flex-display($display: normal) {
   @if $display == inline {
      display: -webkit-inline-flex;
      display: inline-flex;
   }
   @else {
      display: -webkit-box;
      display: -moz-box;
      display: -webkit-flexbox;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
   }
}
@mixin flex-flow($direction, $wrap) {
   @include flex-direction($direction);
   @include flex-wrap($wrap);
}
@mixin flex-grow($grow: 0) {
   -webkit-flex-grow: $grow;
   -webkit-box-flex: $grow;
   -moz-flex-grow: $grow;
   -ms-flex-positive: $grow;
   flex-grow: $grow;
}
@mixin flex-shrink($shrink: 1) {
   -webkit-flex-shrink: $shrink;
   -webkit-box-flex: $shrink;
   -moz-flex-shrink: $shrink;
   -ms-flex-negative: $shrink;
   flex-shrink: $shrink;
}
@mixin flex-wrap($wrap: nowrap) {
   @if $wrap == nowrap {
      -webkit-flex-wrap: nowrap;
      -moz-flex-wrap: nowrap;
      -ms-flex-wrap: none;
      flex-wrap: nowrap;
   }
   @else if $wrap == wrap {
      -webkit-flex-wrap: wrap;
      -moz-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
   }
   @else if $wrap == wrap-reverse {
      -webkit-flex-wrap: wrap-reverse;
      -moz-flex-wrap: wrap-reverse;
      -ms-flex-wrap: wrap-reverse;
      flex-wrap: wrap-reverse;
   }
   @else {
      -webkit-flex-wrap: inherit;
      -moz-flex-wrap: inherit;
      -ms-flex-wrap: inherit;
      flex-wrap: inherit;
   }
}
@mixin justify-content($content: flex-start) {
   @if $content == flex-start {
      -webkit-box-pack: start;
      -moz-box-pack: start;
      -webkit-flex-pack: start;
      -ms-flex-pack: start;
      -moz-justify-content: flex-start;
      -webkit-justify-content: flex-start;
      justify-content: flex-start;
   }
   @else if $content == flex-end {
      -webkit-box-pack: end;
      -moz-box-pack: end;
      -webkit-flex-pack: end;
      -ms-flex-pack: end;
      -moz-justify-content: flex-end;
      -webkit-justify-content: flex-end;
      justify-content: flex-end;
   }
   @else if $content == center {
      -webkit-box-pack: center;
      -moz-box-pack: center;
      -webkit-flex-pack: center;
      -ms-flex-pack: center;
      -moz-justify-content: center;
      -webkit-justify-content: center;
      justify-content: center;
   }
   @else if $content == space-between {
      -webkit-box-pack: justify;
      -moz-box-pack: justify;
      -webkit-flex-pack: justify;
      -ms-flex-pack: justify;
      -moz-justify-content: space-between;
      -webkit-justify-content: space-between;
      justify-content: space-between;
   }
   @else if $content == space-around {
      -moz-justify-content: space-around;
      -webkit-justify-content: space-around;
      justify-content: space-around;
   }
   @else {
      -webkit-box-pack: inherit;
      -moz-box-pack: inherit;
      -webkit-flex-pack: inherit;
      -ms-flex-pack: inherit;
      -moz-justify-content: inherit;
      -webkit-justify-content: inherit;
      justify-content: inherit;
   }
}
@mixin order($order: 0) {
   -webkit-box-ordinal-group: ($order + 1);
   -moz-box-ordinal-group: $order;
   -ms-flex-order: $order;
   -webkit-order: $order;
   -moz-order: $order;
   order: $order;
}
