/*
*
*  Responsive attributes
*
*  References:
*  1) https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties#flex
*  2) https://css-tricks.com/almanac/properties/f/flex/
*  3) https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
*  4) http://godban.com.ua/projects/flexgrid
*
*/

@-moz-document url-prefix() {
  .layout-fill {
    margin: 0;
    width: 100%;
    min-height: 100%;
    height: 100%;
  }
}



@mixin flex-order-for-name() {
  $sizes : '', sm, gt-sm, md, gt-md, lg, gt-lg;

  //  .flex-order--1, .flex-order-sm--1, .flex-order-gt-sm--1, .flex-order-md--1, .flex-order-gt-md--1, .flex-order-lg--1, .flex-order-gt-lg--1 {
  //    order: -1;
  //  }
  //
  //  .flex-order-0, .flex-order-sm-0, .flex-order-gt-sm-0, .flex-order-md-0, .flex-order-gt-md-0, .flex-order-lg-0, .flex-order-gt-lg-0 {
  //    order: 0;
  //  }
  //
  //  .flex-order-1, .flex-order-sm-1, .flex-order-gt-sm-1, .flex-order-md-1, .flex-order-gt-md-1, .flex-order-lg-1, .flex-order-gt-lg-1 {
  //    order: 1;
  //  }
  //
  $offsets : '.flex-order, ';
  @for $i from -9 through 9 {
    @each $s in $sizes {
      @if $s != '' {
        $s : '#{$s}-#{$i}';
      } @else {
        $s : '#{$i}';
      }
      $offsets : $offsets + '.flex-order-#{$s}, ';

      $s : '';
    }

    #{$offsets} {
      order: #{$i};
    }

    $offsets : '';
  }
}

@mixin layout-for-name($name: null) {
  @if $name == null {
    .layout {
      box-sizing: border-box;
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
    }

    .layout-column {
      flex-direction: column;
      -webkit-flex-direction: column;
    }

    .layout-row {
      flex-direction: row;
      -webkit-flex-direction: row;
    }
  }

  @if $name != null {
    .layout-#{$name} {
      box-sizing: border-box;
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -ms-flexbox;
      display: flex;
    }
    .layout-#{$name}-column,
    .md-css-only [layout-#{$name}=column] {
      flex-direction: column;
    }
    .layout-#{$name}-row,
    .md-css-only [layout-#{$name}=row] {
      flex-direction: row;
      flex-wrap: wrap;
    }
  }
}

@mixin offset-for-name($name: null) {
  $offsetName: 'offset';
  @if $name != null {
    $offsetName: 'offset-#{$name}';
  }
  @for $i from 1 through 19 {
    .#{$offsetName}-#{$i * 5},
    .md-css-only [#{$offsetName}="#{$i * 5}"]
    {
      margin-left: #{$i * 5 + '%'};
    }
  }
  .#{$offsetName}-33, .#{$offsetName}-34 {
    margin-left: 34%;
  }
  .#{$offsetName}-66, .#{$offsetName}-67 {
    margin-left: 66%;
  }
}

@mixin flex-properties-for-name($name: null) {
  $flexName: 'flex';
  @if $name != null {
    $flexName: 'flex-#{$name}';
  }

  .#{$flexName} {
    box-sizing: border-box;
    flex: 1;
  }
  
  @if ( $name == 'flex' ) {
    .flex, .flex-initial {
      box-sizing: border-box;
      flex: 0 1 auto;
    }


    .flex-1 {
      box-sizing: border-box;
      flex: 1 1 0%;
    }
  
    .flex-auto {
      box-sizing: border-box;
      flex: 1 1 auto;
    }
  }

  // (1-20) * 5 = 0-100%
  @for $i from 1 through 20 {
    .#{$flexName}-#{$i * 5},
    .md-css-only [#{$flexName}="#{$i * 5}"]
    {
      flex: 0 0 #{$i * 5 + '%'};
    }
    .layout-#{$name}-row > .#{$flexName}-#{$i * 5},
    .md-css-only [layout="row"] > .md-css-only [#{$flexName}="#{$i * 5}"]
    {
      max-width: #{$i * 5 + '%'};
      max-height: 100%;
    }

    .layout-#{$name}-column > .#{$flexName}-#{$i * 5},
    .md-css-only [layout="column"] > .md-css-only [#{$flexName}="#{$i * 5}"]
    {
      max-height: #{$i * 5 + '%'};
      max-width: 100%;
    }
  }

  .#{$flexName}-33, .#{$flexName}-34
  {
    flex: 0 0 33%;
    max-width: 33%;
    max-height: 100%;
  }

  .#{$flexName}-66, .#{$flexName}-67
  {
    flex: 0 0 67%;
    max-width: 67%;
    max-height: 100%;

  }

  .layout-#{$name}-row {
    > .#{$flexName}-33, > .#{$flexName}-34 { max-width: 33%; max-height: 100%;}
    > .#{$flexName}-66, > .#{$flexName}-67 { max-width: 67%; max-height: 100%;  }
  }
  .layout-#{$name}-column {
    > .#{$flexName}-33, > .#{$flexName}-34 { max-height: 33%; max-width: 100%; }
    > .#{$flexName}-66, > .#{$flexName}-67 { max-height: 67%; max-width: 100%;}
  }
}

@mixin layout-align-for-name($suffix: null) {

  // Alignment attributes for layout containers' children
  // Arrange on the Main Axis
  // center, start, end, space-between, space-around
  // flex-start is the default for justify-content
  // ------------------------------

  $name: 'layout-align';
  @if $suffix != null {
    $name: 'layout-align-#{$suffix}';
  }

  // Main Axis Center
  .#{$name}-center,           //stretch
  .#{$name}-center-center,
  .#{$name}-center-start,
  .#{$name}-center-end,
  .md-css-only [#{$name}="center"],
  .md-css-only [#{$name}="center center"],
  .md-css-only [#{$name}="center start"],
  .md-css-only [#{$name}="center end"]
  {
    justify-content: center;
  }

  // Main Axis End
  .#{$name}-end, //stretch
  .#{$name}-end-center,
  .#{$name}-end-start,
  .#{$name}-end-end,
  .md-css-only [#{$name}="end"], //stretch
  .md-css-only [#{$name}="end center"],
  .md-css-only [#{$name}="end start"],
  .md-css-only [#{$name}="end end"]
  {
    justify-content: flex-end;
  }

  // Main Axis Space Around
  .#{$name}-space-around, //stretch
  .#{$name}-space-around-center,
  .#{$name}-space-around-start,
  .#{$name}-space-around-end,
  .md-css-only [#{$name}="space-around"], //stretch
  .md-css-only [#{$name}="space-around center"],
  .md-css-only [#{$name}="space-around start"],
  .md-css-only [#{$name}="space-around end"]
  {
    justify-content: space-around;
  }

  // Main Axis Space Between
  .#{$name}-space-between, //stretch
  .#{$name}-space-between-center,
  .#{$name}-space-between-start,
  .#{$name}-space-between-end,
  .md-css-only [#{$name}="space-between"], //stretch
  .md-css-only [#{$name}="space-between center"],
  .md-css-only [#{$name}="space-between start"],
  .md-css-only [#{$name}="space-between end"]
  {
    justify-content: space-between;
  }


  // Arrange on the Cross Axis
  // center, start, end
  // stretch is the default for align-items
  // ------------------------------

  // Cross Axis Start
  .#{$name}-center-start,
  .#{$name}-start-start,
  .#{$name}-end-start,
  .#{$name}-space-between-start,
  .#{$name}-space-around-start,
  .md-css-only [#{$name}="center start"],
  .md-css-only [#{$name}="start start"],
  .md-css-only [#{$name}="end start"],
  .md-css-only [#{$name}="space-between start"],
  .md-css-only [#{$name}="space-around start"]
  {
    align-items: flex-start;
  }

  // Cross Axis Center
  .#{$name}-center-center,
  .#{$name}-start-center,
  .#{$name}-end-center,
  .#{$name}-space-between-center,
  .#{$name}-space-around-center,
  .md-css-only [#{$name}="center center"],
  .md-css-only [#{$name}="start center"],
  .md-css-only [#{$name}="end center"],
  .md-css-only [#{$name}="space-between center"],
  .md-css-only [#{$name}="space-around center"]
  {
    align-items: center;
    max-width: 100%;

  }

  // Cross Axis End
  .#{$name}-center-end,
  .#{$name}-start-end,
  .#{$name}-end-end,
  .#{$name}-space-between-end,
  .#{$name}-space-around-end,
  .md-css-only [#{$name}="center end"],
  .md-css-only [#{$name}="start end"],
  .md-css-only [#{$name}="end end"],
  .md-css-only [#{$name}="space-between end"],
  .md-css-only [#{$name}="space-around end"]
  {
    align-items: flex-end;
  }

}

@mixin layout-padding-margin() {

  .layout-padding > .flex-sm,
  .layout-padding > .flex-lt-md,
  .md-css-only [layout-padding] > [flex-sm],
  .md-css-only [layout-padding] > [flex-lt-md]
  {
    padding: $layout-gutter-width / 4;
  }

  .layout-padding,
  .layout-padding > .flex,
  .layout-padding > .flex-gt-sm,
  .layout-padding > .flex-md,
  .layout-padding > .flex-lt-lg,
  .md-css-only [layout-padding],
  .md-css-only [layout-padding] > .md-css-only [flex],
  .md-css-only [layout-padding] > .md-css-only [flex-gt-sm],
  .md-css-only [layout-padding] > .md-css-only [flex-md],
  .md-css-only [layout-padding] > .md-css-only [flex-lt-lg]
  {
    padding: $layout-gutter-width / 2;
  }
  .layout-padding > .flex-gt-md,
  .layout-padding > .flex-lg,
  .md-css-only [layout-padding] > .md-css-only [flex-gt-md],
  .md-css-only [layout-padding] > .md-css-only [flex-lg]
  {
    padding: $layout-gutter-width / 1;
  }

  .layout-margin > .flex-sm,
  .layout-margin > .flex-lt-md,
  .md-css-only [layout-margin] >  .md-css-only [flex-sm],
  .md-css-only [layout-margin] >  .md-css-only [flex-lt-md]
  {
    margin: $layout-gutter-width / 4;
  }

  .layout-margin,
  .layout-margin > .flex,
  .layout-margin > .flex-gt-sm,
  .layout-margin > .flex-md,
  .layout-margin > .flex-lt-lg,
  .md-css-only [layout-margin],
  .md-css-only [layout-margin] >  .md-css-only [flex],
  .md-css-only [layout-margin] >  .md-css-only [flex-gt-sm],
  .md-css-only [layout-margin] >  .md-css-only [flex-md],
  .md-css-only [layout-margin] >  .md-css-only [flex-lt-lg]
  {
    margin: $layout-gutter-width / 2;
  }

  .layout-margin > .flex-gt-md,
  .layout-margin > .flex-lg,
  .md-css-only [layout-margin] >  .md-css-only [flex-gt-md],
  .md-css-only [layout-margin] >  .md-css-only [flex-lg]
  {
    margin: $layout-gutter-width / 1;
  }

  .layout-wrap {
    flex-wrap: wrap;
  }

  .layout-fill {
    margin: 0;
    width: 100%;
    min-height: 100%;
    height: 100%;
  }
}

/*
 *  Apply Mixins to create Layout/Flexbox styles
 *
 */

@include layout-for-name();
@include flex-properties-for-name();
@include layout-align-for-name();
@include flex-order-for-name();
@include offset-for-name();
@include layout-padding-margin();



/**
 * `hide-gt-sm show-gt-lg` should hide from 600px to 1200px
 * `show-md hide-gt-sm` should show from 0px to 960px and hide at >960px
 * `hide-gt-md show-gt-sm` should show everywhere (show overrides hide)`
 *
 *  hide means hide everywhere
 *  Sizes:
 *         0    <= size < 600  Phone
 *         600  <= size < 960  Tablet
 *         960  <= size < 1200 Tablet-Landscape
 */


// SMALL SCREEN
@media (max-width: $layout-breakpoint-sm - 1) {
  .hide-sm, .hide {
    &:not(.show-sm):not(.show) {
      display: none;
    }
  }

  @include layout-for-name(sm);
  @include flex-properties-for-name(sm);
}

// BIGGER THAN SMALL SCREEN
@media (min-width: $layout-breakpoint-sm) {
  @include layout-for-name(gt-sm);
  @include flex-properties-for-name(gt-sm);
}

// MEDIUM SCREEN
@media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) {
  .hide, .hide-gt-sm, {
    &:not(.show-gt-sm):not(.show-md):not(.show) {
      display: none;
    }
  }

  .hide-md:not(.show-md):not(.show) {
    display: none;
  }


  @include layout-for-name(md);
  @include flex-properties-for-name(md);
}

// BIGGER THAN MEDIUM SCREEN
@media (min-width: $layout-breakpoint-md) {
  @include layout-for-name(gt-md);
  @include flex-properties-for-name(gt-md);
}

// LARGE SCREEN
@media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) {
  .hide, .hide-gt-sm, .hide-gt-md {
    &:not(.show-gt-sm):not(.show-gt-md):not(.show-lg):not(.show) {
      display: none;
    }
  }
  .hide-lg:not(.show-lg):not(.show) {
    display: none;
  }

  @include layout-for-name(lg);
  @include flex-properties-for-name(lg);
}


// BIGGER THAN LARGE SCREEN
@media (min-width: $layout-breakpoint-lg) {
  .hide-gt-sm, .hide-gt-md, .hide-gt-lg, .hide {
    &:not(.show-gt-sm):not(.show-gt-md):not(.show-gt-lg):not(.show) {
      display: none;
    }
  }

  @include layout-for-name(gt-lg);
  @include flex-properties-for-name(gt-lg);
}
