$auto-widths-iterations = 12 // Set to how many columns you want enable for auto fly operation
$percent-widths-iterations = 100 // Set to percentages, defaults to 1,2,3,4,5 till 100
$unit-widths-iterations = 12 // Set to the number of spans you want, default 12
$gutter = 15 // Set to what gutter you want crow to use, to remove gutter use class "no-gutter", don't set this value to 0

*,
*:before,
*:after
  box-sizing: inherit
html
  box-sizing: border-box

auto-widths(nums)
  for i in 1..nums
    > *:first-child:nth-last-child({i}),
    > *:first-child:nth-last-child({i}) ~ *
      $percent = 100/i
      width: $percent+"%"

percent-widths(nums)
  for i in 1..nums
    .w-{i}
      $percent = i
      width: $percent+"%"

unit-widths(nums)
  for i in 1..nums
    .ws-{i}
      $percent = 100*i/$unit-widths-iterations
      width: $percent+"%"

crowify()
  text-align: center
  font-size: 0 !important
  &:before
    content: ''
    display: inline-block
    height: 100%
    vertical-align: middle
  > *
    vertical-align: middle
    display: inline-block
    font-size: medium /* IE */
    font-size: initial
    text-align: left
    margin: 0
    padding: 0
  &.fly
    auto-widths($auto-widths-iterations)
  &.up
    > *
      vertical-align: top
  &.down
    > *
      vertical-align: bottom
  > *
    &.up
      vertical-align: top
    &.down
      vertical-align: bottom

flex-crowify()
  display: flex
  flex-wrap: wrap
  justify-content: center
  align-items: center
  align-content: center
  &.fly
    > *
      flex-grow: 1
  &.up
    align-items: flex-start
  &.down
    align-items: flex-end
  > *
    &.up
      align-self: flex-start
    &.down
      align-self: flex-end;
    
.crow
  crowify()
  percent-widths($percent-widths-iterations)
  unit-widths($unit-widths-iterations)

.crow
  &.gutter
    padding-right: ($gutter * 1px)
    padding-left: ($gutter * 1px)
    margin-right: (- $gutter * 1px)
    margin-left: (- $gutter * 1px)
    > *
      padding-right: ($gutter * 1px)
      padding-left: ($gutter * 1px)

.nest
  width: 960px
  padding-right: ($gutter * 1px)
  padding-left: ($gutter * 1px)
  margin-right: auto
  margin-left: auto
    
uncrowify()
  &.crow
    height: auto
    display: block
    > *
      display: block
      width: auto
    &:before
      content: ''
      display: none