@lost flexbox flex

$padding = ($indent / 2)
$border = 1px solid $color-border

.gl.row
  display flex
  flex-wrap wrap
  width 100%

  > .column
    display flex
    flex-direction column
    padding $padding
    position relative
    overflow hidden

    &[class*='middle aligned']
      justify-content center

    &[class*='center aligned']
      align-items center

    &[class*='left aligned']
      align-items flex-start

    &[class*='right aligned']
      align-items flex-end

    &.fixed
      min-height 400px

    &.fitted
      padding 0

    &.padded
      $padding = ($padding * 2)

      &:not(.horizontally)
        padding-bottom $padding
        padding-top @padding-bottom

      &:not(.vertically)
        padding-left $padding
        padding-right @padding-left

    &[class*='very padded']
      $padding = ($padding * 4)

      &:not(.horizontally)
        padding-bottom $padding
        padding-top @padding-bottom

      &:not(.vertically)
        padding-left $padding
        padding-right @padding-left

    &.spaced

      &.around
        justify-content space-around

      &.between
        justify-content space-between

    &.fluid
      flex-grow 1

    &.blue
      background $color-blue
      color #fff

      &[class*='light blue']
        background $color-blue-lighter

      &[class*='dark blue']
        background $color-blue-darker

    &.disabled
      color $color-grey

  &[class*='middle aligned']
    align-items center

  &[class*='bottom aligned']
    align-items flex-end

  &[class*='center aligned']
    justify-content center

  &[class*='right aligned']
    justify-content flex-end

  setColumns($padding)

    > .column

      &[class*='one wide']
        flex-basis 8.33%
        min-width @flex-basis
        width @flex-basis

      &[class*='two wide']
        flex-basis 16.66%
        min-width @flex-basis
        width @flex-basis

      &[class*='three wide']
        flex-basis 25%
        min-width @flex-basis
        width @flex-basis

      &[class*='four wide']
        flex-basis 33.33%
        min-width @flex-basis
        width @flex-basis

      &[class*='five wide']
        flex-basis 41.66%
        min-width @flex-basis
        width @flex-basis

      &[class*='six wide']
        flex-basis 50%
        min-width @flex-basis
        width @flex-basis

      &[class*='seven wide']
        flex-basis 58.33%
        min-width @flex-basis
        width @flex-basis

      &[class*='eight wide']
        flex-basis 66.66%
        min-width @flex-basis
        width @flex-basis

      &[class*='nine wide']
        flex-basis 75%
        min-width @flex-basis
        width @flex-basis

      &[class*='ten wide']
        flex-basis 83.33%
        min-width @flex-basis
        width @flex-basis

      &[class*='eleven wide']
        flex-basis 91.66%
        min-width @flex-basis
        width @flex-basis

    &[class*='twelve wide']
    &[class*='full wide']
      flex-basis 100%
      min-width @flex-basis
      width @flex-basis

  fullWidthDefinitions($width)

    setRows()
      &[class*='two column']

        > .column:not(.wide)
          flex-basis 50%
          min-width @flex-basis
          width @flex-basis

      &[class*='three column']

        > .column:not(.wide)
          flex-basis 33.33%
          min-width @flex-basis
          width @flex-basis

      &[class*='four column']

        > .column:not(.wide)
          flex-basis 25%
          min-width @flex-basis
          width @flex-basis


      &:not(.fitted)
        setColumns($padding)

      &.fitted
        setColumns(0px)

    &.fixed
      setRows()

    @media not all and (max-width: $width)
      setRows()

    @media (max-width: $width)

      &:not(.fixed)
        flex-wrap wrap

        &.centered

          > .column
            align-items center

        > .column
          flex-basis auto
          min-width 100%
          width 100%

        &.double

          > .column
            flex-basis 50%
            min-width @flex-basis
            width @flex-basis

        &.reversed
          flex-direction column-reverse

      &.fixed
        flex-wrap nowrap

  $sizes = 'tiny' $media-tiny,
           'small' $media-small,
           'large' $media-large,
           'big' $media-big

  &:not(.sized)
    fullWidthDefinitions($media-medium)

  for $size in $sizes

    &[class*=\'{$size[0] + ' sized'}\']
      fullWidthDefinitions($size[1])

  &.padded

    > .column:not(.padded):not([class*='very padded'])
      padding ($padding * 2)

  &[class*='very padded']

    > .column:not(.padded):not([class*='very padded'])
      padding ($padding * 4)

  &.fitted

    > .column

      &:not(.padded)
      &.vertically.padded
        padding-left 0
        padding-right 0

      &:not(.padded)
      &.horizontally.padded
        padding-bottom 0
        padding-top 0

  &.loose
    flex-wrap wrap

  &.growing
    flex-grow 1

  &.divided

    > .column

      &:not(:last-child)
        border-right $border

    &.emphasized

      > .column

        &:not(:last-child)
          border-color $color-grey-lighter


.gl.grid
  lost-center 100%

  $fractions = 'one' 1,
               'two' 2,
               'three' 3,
               'four' 4,
               'five' 5,
               'six' 6,
               'seven' 7,
               'eight' 8,
               'nine' 9,
               'ten' 10,
               'eleven' 11,
               'twelve' 12

  for $fraction in $fractions

    &[class*=\'{$fraction[0]} column\']

      &:not(.waffle)

        > .column
          lost-column 1/1 * $fraction[1]

      &.waffle

        > .column
          lost-waffle 1/1 * $fraction[1]

  > .column
    padding $padding

    &:not(.media)

      for $fraction in $fractions

        &[class*=\'{$fraction[0]} wide\']

          ~/:not(.waffle) ^[1..-1]
            lost-column $fraction[1]/12

          ~/.waffle ^[1..-1]
            lost-waffle $fraction[1]/12

    &.media

      for $fraction in $fractions

        &[class*=\'{$fraction[0]} wide other media\']

          ~/:not(.waffle) ^[1..-1]
            lost-column $fraction[1]/12

          ~/.waffle ^[1..-1]
            lost-waffle $fraction[1]/12

      for $fraction in $fractions

        for $size in $media-sizes

          &[class*=\'{$fraction[0]} wide {$size[0]} media\']

            @media(max-width $size[1])

              ~/:not(.waffle) ^[1..-1]
                lost-column $fraction[1]/12

              ~/.waffle ^[1..-1]
                lost-waffle $fraction[1]/12

  &.stackable

    @media (max-width $media-medium)

      &:not(.waffle)

        > .column
          lost-column 1/1 !important

      &.waffle

        > .column
          lost-waffle 1/1 !important