=media($width: 320px)
  @media only screen and (min-width: $width)
    @content

=media-max($width: 320px)
  @media only screen and (max-width: $width - 1px)
    @content

=media-range($min: 320px, $max: 720px)
  @media only screen and (min-width: $min) and (max-width: $max - 1px)
    @content

=input-sizes($componentName)
  .hui-#{$componentName}
    box-sizing: border-box

  .hui-#{$componentName}--full
    width: 100%

  .hui-#{$componentName}--wide,
  .hui-#{$componentName}--twoThirds
    width: 66.66%

  .hui-#{$componentName}--half
    width: 50%

  .hui-#{$componentName}--narrow
    width: 34%

  .hui-#{$componentName}--quarter
    width: 25%

  .hui-#{$componentName}--threeQuarters
    width: 75%

  .hui-#{$componentName}--eighth
    width: 12.5%

  .hui-#{$componentName}--sevenEighths
    width: 87.5%

  .hui-#{$componentName}--third
    width: 33.33%

  .hui-#{$componentName}--compact
    padding: 0

  .hui-#{$componentName}--tight
    padding: 0 $x-1 $x-2

  .hui-#{$componentName}--fitted
    padding: 0 $x-4 $x-5

  .hui-#{$componentName}--loose
    padding: 0 $x-4 $x-8