@require 'eight.theme'
@require 'eight.mixins'


/* Mixins */

makeStackable()
  flex-flow column wrap

  &.reverse
    flex-direction column-reverse

  > .col
    flex-basis 100%
    max-width 100%


/* Rules */

html
  min-width 320px

body
  overflow-x hidden

.container
  box-sizing border-box
  max-width 100%
  margin 0 auto
  padding 0 $container-gutter

  @media screen and (min-width: $md)
    width $sm

  @media screen and (min-width: $lg)
    width $md

  @media screen and (min-width: $xl)
    width $lg

  &.sm
    @media screen and (min-width: $md)
      max-width $sm

  &.md
    @media screen and (min-width: $lg)
      max-width $md

.row,
.col
  display flex
  flex 1
  box-sizing border-box

.row
  flex-wrap wrap
  margin-left - $grid-col-gutter * 1
  margin-right - $grid-col-gutter * 1

  .col
    flex-direction column
    padding-left $grid-col-gutter * 1
    padding-right $grid-col-gutter * 1
    max-width 100%

    &.twelfth
      flex-basis 8.333333333%
      max-width 8.333333333%

    &.tenth
      flex-basis 10%
      max-width 10%

    &.eighth
      flex-basis 12.5%
      max-width 12.5%

    &.sixth
      flex-basis 16.666666667%
      max-width 16.666666667%

    &.fifth
      flex-basis 20%
      max-width 20%

    &.fourth
      flex-basis 25%
      max-width 25%

    &.third
      flex-basis 33.33%
      max-width 33.33%

    &.half
      flex-basis 50%
      max-width 50%

    &.golden
      flex-basis 61.803398875%
      max-width 61.803398875%

  &.compact
    margin-left - $grid-col-gutter * 0
    margin-right - $grid-col-gutter * 0

    .col
      padding-left $grid-col-gutter * 0
      padding-right $grid-col-gutter * 0

  &.tiny
    margin-left - $grid-col-gutter * .5
    margin-right - $grid-col-gutter * .5

    .col
      padding-left $grid-col-gutter * .5
      padding-right $grid-col-gutter * .5

  &.expanded
    margin-left - $grid-col-gutter * 2
    margin-right - $grid-col-gutter * 2

    .col
      padding-left $grid-col-gutter * 2
      padding-right $grid-col-gutter * 2

  &.reverse
    flex-direction row-reverse

  &.stackable
    @media screen and (max-width: $xs)
      makeStackable()

    &.sm
      @media screen and (max-width: $sm)
        makeStackable()

    &.md
      @media screen and (max-width: $md)
        makeStackable()

    &.lg
      @media screen and (max-width: $lg)
        makeStackable()