+add-selector('container', '',
'width-100', 'clearfix') {
  _.current_selector = 'container'

  margin 0 auto
  max-width: 1280px

  +add-value('full') {
    max-width: none
  }
  +add-value('limited') {
    max-width: 1280px
  }
}


+add-selector('row', '', 'width-100', 'clearfix') {
  _.current_selector = 'row'

  align-content: start
  align-items: start
  display: flex
  flex-wrap: wrap
}


+add-selector('col', '', 'col') {
  _.current_selector = 'col'

  position: relative;
  padding: 0 ($Grid.gutters / 2);

  for $col in 1..$Grid.columns {
    +add-value($col) {
      width: ($col / $Grid.columns * 100%)
    }
    +add-value('push-' + $col) {
      left: ($col / $Grid.columns * 100%)
    }
    +add-value('pull-' + $col) {
      left: -($col / $Grid.columns * 100%)
    }
  }
}

for $col in 1..$Grid.columns {
  +add-selector('push', $col) {
    left: ($col / $Grid.columns * 100%)
  }
  +add-selector('pull', $col) {
    left: -($col / $Grid.columns * 100%)
  }
}

+add-selector('row', '', 'width-100', 'clearfix') {
  _.current_selector = 'row'

  align-content: start
  align-items: start
  display: flex
  flex-wrap: wrap
}


+add-selector('footer', '', 'clearfix', 'margin-center', 'width-100', 'color-background-primary') {
  _.current_selector = 'footer'

  padding: $Sizes.padding.large $Sizes.padding.small
  margin-top: $Sizes.margin.large

  for $color-name, $color-value in $Colors.all {
    add-value($color-name, 'color-background-' + $color-name)
  }
}

+add-selector('has', 'footer') {
  display: flex
  flex-direction: column
  min-height: 100vh

  > * {
    &:not({selector-name('footer', 'sticky')}) {
      flex: 1 0 auto
    }
  }

  {selector-name('footer', 'sticky')} {
    flex-shrink: 0
  }
}