@import variables

@mixin custom-device($width)
  @media (max-width: #{$width})
    @content

@mixin xs-device
  @media (max-width: #{$xs-device-width})
    @content

@mixin sm-device
  @media (max-width: #{$sm-device-width})
    @content

@mixin md-device
  @media (min-width: #{$sm-device-width}) and (max-width: #{$md-device-width})
    @content

@mixin grid($columns: 0)
  box-sizing: border-box
  display: flex
  flex-wrap: wrap
  > *
    box-sizing: border-box
  > *
    width: (1/$columns) * 100%

@mixin grid_width($width)
  width: $width * 100%

@mixin placeholder
  &::-webkit-input-placeholder
    @content
  &::-moz-placeholder
    @content
  &:-ms-input-placeholder
    @content

@mixin col-x($n)
  @for $i from 1 through $n
    .column-#{$i}
      width: $i * 1%

=appearance
  -webkit-appearance: none
  -moz-appearance: none

=display-flex
  display: -webkit-flex
  display: flex

=flex-direction($direction)
  -webkit-flex-direction: $direction
  flex-direction: $direction

=flex-wrap
  -webkit-flex-wrap: wrap
  flex-wrap: wrap

=align-content($position)
  -webkit-align-items: $position
  align-items: $position

=justify-content($position)
  -webkit-justify-content: $position
  justify-content: $position