/*! Flexible Grid System 5.6.0 | Sass | MIT License | dnomak.com/flexiblegs */

=wrap($prop: null, $val: null)
  @if $prop == null
    display: block
    width: 100%
    font-size: 0
    letter-spacing: 0
    text-align: left
    -webkit-box-sizing: border-box
    -moz-box-sizing: border-box
    box-sizing: border-box
    > *
      display: inline-block
      vertical-align: top
  @else if $prop == "table"
    display: table
    table-layout: fixed
    -webkit-flex-direction: initial
    -ms-flex-direction: initial
    flex-direction: initial
    -webkit-flex-wrap: initial
    -ms-flex-wrap: initial
    flex-wrap: initial
    -webkit-justify-content: initial
    -ms-justify-content: initial
    justify-content: initial
    -webkit-align-content: initial
    -ms-align-content: initial
    align-content: initial
    -webkit-align-items: initial
    -ms-align-items: initial
    align-items: initial
    -webkit-column-count: auto
    -moz-column-count: auto
    column-count: auto
    > *
      display: table-cell
  @else if $prop == "flexbox"
    display: -webkit-flex
    display: -ms-flexbox
    display: flex
    table-layout: auto
    -webkit-flex-direction: row
    -ms-flex-direction: row
    flex-direction: row
    -webkit-flex-wrap: wrap
    -ms-flex-wrap: wrap
    flex-wrap: wrap
    -webkit-justify-content: flex-start
    -ms-justify-content: flex-start
    justify-content: flex-start
    -webkit-align-content: center
    -ms-align-content: center
    align-content: center
    -webkit-align-items: center
    -ms-align-items: center
    align-items: center
    -webkit-column-count: auto
    -moz-column-count: auto
    column-count: auto
    > *
      display: inline-block
  @else if $prop == "normal"
    display: block
    table-layout: auto
    -webkit-flex-direction: initial
    -ms-flex-direction: initial
    flex-direction: initial
    -webkit-flex-wrap: initial
    -ms-flex-wrap: initial
    flex-wrap: initial
    -webkit-justify-content: initial
    -ms-justify-content: initial
    justify-content: initial
    -webkit-align-content: initial
    -ms-align-content: initial
    align-content: initial
    -webkit-align-items: initial
    -ms-align-items: initial
    align-items: initial
    -webkit-column-count: auto
    -moz-column-count: auto
    column-count: auto
    > *
      display: inline-block
  @else if $prop == "left"
    -webkit-justify-content: flex-start
    -ms-justify-content: flex-start
    justify-content: flex-start
    text-align: left
  @else if $prop == "center"
    -webkit-justify-content: center
    -ms-justify-content: center
    justify-content: center
    text-align: center
  @else if $prop == "right"
    -webkit-justify-content: flex-end
    -ms-justify-content: flex-end
    justify-content: flex-end
    text-align: right
  @else if $prop == "top"
    -webkit-align-items: flex-start
    -ms-align-items: flex-start
    align-items: flex-start
    > *
      vertical-align: top
  @else if $prop == "middle"
    -webkit-align-items: center
    -ms-align-items: center
    align-items: center
    > *
      vertical-align: middle
  @else if $prop == "bottom"
    -webkit-align-items: flex-end
    -ms-align-items: flex-end
    align-items: flex-end
    > *
      vertical-align: bottom
  @else if $prop == "between"
    -webkit-justify-content: space-between
    -ms-justify-content: space-between
    justify-content: space-between
    -webkit-align-content: space-between
    -ms-align-content: space-between
    align-content: space-between
  @else if $prop == "stretch"
    -webkit-align-content: stretch
    -ms-align-content: stretch
    align-content: stretch
    -webkit-align-items: stretch
    -ms-align-items: stretch
    align-items: stretch
  @else if $prop == "around"
    -webkit-justify-content: space-around
    -ms-justify-content: space-around
    justify-content: space-around
    -webkit-align-content: space-around
    -ms-align-content: space-around
    align-content: space-around
  @else if $prop == "baseline"
    -webkit-align-items: baseline
    -ms-align-items: baseline
    align-items: baseline
  @else if $prop == "reverse"
    -webkit-flex-direction: row-reverse
    -ms-flex-direction: row-reverse
    flex-direction: row-reverse
    -webkit-flex-wrap: wrap-reverse
    -ms-flex-wrap: wrap-reverse
    flex-wrap: wrap-reverse
  @else if $prop == "not-reverse"
    -webkit-flex-direction: row
    -ms-flex-direction: row
    flex-direction: row
    -webkit-flex-wrap: wrap
    -ms-flex-wrap: wrap
    flex-wrap: wrap
  @else if $prop == "gutter"
    width: calc(100% + #{$val}#{"px"})
    margin-left: -#{$val / 2}#{"px"}
    margin-right: -#{$val / 2}#{"px"}
    padding-left: 0
    padding-right: 0
    > *
      padding-left: #{$val / 2}#{"px"}
      padding-right: #{$val / 2}#{"px"}
  @else if $prop == "outside"
    width: 100%
    margin-left: 0
    margin-right: 0
    padding-left: #{$val / 2}#{"px"}
    padding-right: #{$val / 2}#{"px"}
  @else
    > *
      @if $prop == "auto"
        width: auto
      @else
        width: #{100% / $prop}

=col($prop: null, $val: null)
  @if $prop == null
    min-height: 1px
    font-size: 1rem
    -webkit-box-sizing: border-box
    -moz-box-sizing: border-box
    box-sizing: border-box
  @else if $prop == "width"
    width: #{$val}#{"px"}
  @else if $prop == "hidden"
    display: none
  @else if $prop == "not-hidden"
    display: inline-block
  @else if $prop == "first"
    -ms-flex-order: -1
    -webkit-order: -1
    order: -1
  @else if $prop == "not-first"
    -ms-flex-order: 0
    -webkit-order: 0
    order: 0
  @else if $prop == "last"
    -ms-flex-order: 1
    -webkit-order: 1
    order: 1
  @else if $prop == "not-last"
    -ms-flex-order: 0
    -webkit-order: 0
    order: 0
  @else
    width: #{100% / $val * $prop}