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

wrap(prop = false, val = false)
  if (prop == false)
    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 == "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 == "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 == "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% + %s)" % (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 = false, val = false)
  if (prop == false)
    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)