@import variables

// Helpers
// These helpers are here for quick adjustments. Add small reusable classes here.

// Text, Typography

// Lists

ul, ol
  &.list
    padding-left: 1em
    li
      padding-bottom: 0.5em
ul.list
  li
    list-style: disc
  ul
    margin-top: 0
    li
      list-style: circle
ol.list
  li
    list-style: decimal
  ul
    margin-bottom: 0
    li
      list-style: circle

.align-left
  text-align: left
.align-right
  text-align: right
.break-word
  word-break: break-all
.thin
  font-weight: 100
.uppercase
  text-transform: uppercase

// Removals

.no-wrap
  white-space: nowrap
.no-text-margins *
  margin: 0
.no-margin-top
  margin-top: 0
.no-margin-bottom
  margin-bottom: 0
.no-first-last
  *
    &:first-child
      margin-top: 0
    &:last-child
      margin-bottom: 0

// Lighten all typography for dark backgrounds

.light-text
  *, a
    color: white
  a:hover
    text-decoration: underline

// Page width

.narrow
  max-width: 34em
  margin: 0 auto
.narrow-large
  max-width: 40em
  margin: 0 auto
.narrow-small
  max-width: 20em
  margin: 0 auto

// Alignment

.auto
  margin: 0 auto
.block
  display: block
.center
  text-align: center
.clear
  clear: both
.float-left
  float: left
.float-right
  float: right
.inline
  display: inline
.inline-block
  display: inline-block
.padding
  padding: 1em

// Forms

.checkbox, .radio
  display: block
  line-height: 2.2

// Styled Elements

.box
  border-radius: $radius
  border: $border-width solid #ddd
  margin: 1em 0
  padding: 1em
.disabled
  color: $gray-light
.radius
  border-radius: $radius
.round
  border-radius: $round

// Colors

.gray
  color: $gray
.gray-medium
  color: $gray-medium
.gray-light
  color: $gray-light
.gray-lighter
  color: $gray-lighter
.gray-lightest
  color: $gray-lightest

// Backgrounds

.bg
  background: $gray-lightest
.bg-white
  background: #FFF
.bg-default
  background: $bg-default-fallback
  background: $bg-default
.bg-black
  background: $bg-black-fallback
  background: $bg-black
.bg-gray
  background: $bg-gray-fallback
  background: $bg-gray
.bg-blue
  background: $bg-blue-fallback
  background: $bg-blue
.bg-red
  background: $bg-red-fallback
  background: $bg-red
.bg-orange
  background: $bg-orange-fallback
  background: $bg-orange
.bg-green
  background: $bg-green-fallback
  background: $bg-green

// Opacities

.opacity-1
  opacity: 0.1
.opacity-2
  opacity: 0.2
.opacity-3
  opacity: 0.3
.opacity-4
  opacity: 0.4
.opacity-5
  opacity: 0.5
.opacity-6
  opacity: 0.6
.opacity-7
  opacity: 0.7
.opacity-8
  opacity: 0.8
.opacity-9
  opacity: 0.9
.opaque
  opacity: 1

// Hide / Show

.hide
  display: none

.show
  display: block

// Widths

.full
  width: 100%

// Manually inserting a space into an empty element

.space
  &:after
    content: $non-breaking-space

// Sizing

.x2
  font-size: 2em
.x3
  font-size: 3em
.x4
  font-size: 4em
.x5
  font-size: 5em

.same-width
  text-align: center
  width: 2em
  display: inline-block

// Image sizes

img
  height: auto
  &.smallest
    width: 1em
  &.smaller
    width: 2em
  &.small
    width: 3em
  &.medium
    width: 4em
  &.large
    width: 5em
  &.larger
    width: 6em
  &.largest
    width: 7em

// Grid

.padded
  [class*='col-'], .col
    padding-left: $grid-padding
    padding-right: $grid-padding

.right-padded
  [class*='col-'], .col
    padding-right: $grid-padding

@media screen and (max-width: $phablet)

  .right-padded
    [class*='col-'], .col
      padding: 0

@media screen and (max-width: $handheld)

  // Hide these classes on the $handheld breakpoint

  .space, .hide-on-mobile
    display: none

  .responsive
    width: 100%

@media screen and (max-width: $handheld-portrait)

  .responsive-portrait
    width: 100%