@mixin prefixValue($map) {
  
  $prefix : '-webkit-';
  @each $prop, $value in $map {
    #{$prop}:  #{$prefix}#{$value};  
    #{$prop}: #{$value};  
  }
}

@mixin prefixProp($map) {
  
  $prefix : '-webkit-';
  @each $prop, $value in $map {
    #{$prefix}#{$prop}: #{$value};  
    #{$prop}: #{$value};  
  }
}

@mixin layout-rules-common($suffix) {

  .f-row#{$suffix}, .f-column#{$suffix} {

    @include prefixValue((display: flex));
    @include prefixProp((flex-direction: row));
    @include prefixProp((justify-content: space-between));

    & > * {
      @include prefixProp((flex: "0 0 auto"));
    }

    &.f-show#{$suffix} {
      @include prefixValue((display: flex));
    }

    &.f-padding#{$suffix} > * { 
      padding:10px;
    }

    &.f-margin#{$suffix} > * {
      margin:10px;
    }

  }


}

@mixin layout-rules($suffix) {
  
  @include layout-rules-common($suffix);
  
  .f-row#{$suffix} {
    @include prefixProp((flex-direction: row));
    line-height: 1;
    @include prefixProp((align-items: center));

    @each $type, $prop in (top: flex-start, middle: center, bottom: flex-end, 
    space-between: space-between, space-around: space-around, stretch: stretch) {

      &.f-wrap-#{$type}#{$suffix} {
        @include prefixProp((flex-wrap: wrap));
        @include prefixProp((align-content: $prop));
      }
    }

    @each $type, $prop in (left: flex-start, center: center, right: flex-end, 
    space-between: space-between, space-around: space-around) {
      &.f-#{$type}#{$suffix} {
        @include prefixProp((justify-content: $prop));
      }
    }  

    @each $type, $prop in (top: flex-start, middle: center, bottom: flex-end, stretch: stretch, baseline: baseline) {
      &.f-#{$type}#{$suffix} {
        @include prefixProp((align-items: $prop));
      }
    }  

    @each $type, $prop in (top: flex-start, middle: center, bottom: flex-end, stretch: stretch, baseline: baseline) {
      & > .f-self-#{$type}#{$suffix} {
        @include prefixProp((align-self: $prop));
      }
    }   

  } 

  .f-column#{$suffix} {

    @include prefixProp((flex-direction: column));
    @include prefixProp((align-items: center));

    @each $type, $prop in (left: flex-start, center: center, right: flex-end, 
    space-between: space-between, space-around: space-around, stretch: stretch) {

      &.f-wrap-#{$type}#{$suffix} {
        @include prefixProp((flex-wrap: wrap)); 
        @include prefixProp((align-content: $prop));
      }
    }

    @each $type, $prop in (top: flex-start, middle: center, bottom: flex-end, space-between: space-between, space-around: space-around) {
      &.f-#{$type}#{$suffix} {
        @include prefixProp((justify-content: $prop))
      }
    }  

    @each $type, $prop in (left: flex-start, center: center, right: flex-end, stretch: stretch) {
      &.f-#{$type}#{$suffix} {
        @include prefixProp((align-items: $prop))
      }
    }  

    @each $type, $prop in (left: flex-start, center: center, right: flex-end, stretch: stretch) {
      & > .f-self-#{$type}#{$suffix} {
        @include prefixProp((align-self: $prop))
      }
    }  

  }

  .f-hide#{$suffix} { 
    display: none;
  }

  .f-show#{$suffix} {
    display: block;
  }

  .f-grow#{$suffix} {
    @include prefixProp((flex: 1 1 auto))
  }

  .f-shrink#{$suffix} {
    @include prefixProp((flex: 0 0))
  }

  .f-fixed#{$suffix} {
    @include prefixProp((flex: 0 0 auto))
  }

  @for $i from 1 through 5 {
    .f-order-#{$i}#{$suffix} {
      @include prefixProp((order: $i))
    }
  }

}

@include layout-rules("");

@media only screen and (max-width: 600px) {
  @include layout-rules("-s");
}

@media only screen and (min-width: 601px) and (max-width: 992px) {
  @include layout-rules("-m");
}

@media only screen and (min-width: 993px) {
  @include layout-rules("-l");
}