$phone: "(max-width: 480px)"
$tablet-portrait: "(max-width: 767px)"
$tablet-landscape-desktop: "(min-width: 768px) and (max-width: 979px)"
$large-desktop: "(min-width: 1200px)"
$non-retina: "screen and (-webkit-max-device-pixel-ratio: 1)"
$retina: "screen and (-webkit-min-device-pixel-ratio: 2)"

=respond($media)
  @media #{$media}
    @content

// =respond($media)
//     @if $media == mobile
//         @media only screen and (max-width: 580px)
//             @content
//     @else if $media == smalldekstop
//         @media only screen and (min-width: 800px) and (max-width: 1124px)
//             @content
//     @else if $media == retina
//         @media (-webkit-min-device-pixel-ratio: 2)
//             @content

=borderbox
  -webkit-box-sizing: border-box
  -moz-box-sizing: border-box
  box-sizing: border-box

=resetkit
  -webkit-appearance: none
  appearance: none

=translatez
  -webkit-transform: translatez(0)
  -moz-transform: translatez(0)
  -ms-transform: translatez(0)
  -o-transform: translatez(0)
  transform: translatez(0)

=fontsmooth
  -webkit-font-smoothing: antialiased
  font-smoothing: antialiased

=disableselect
  -webkit-touch-callout: none
  -webkit-user-select: none
  -khtml-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  user-select: none

=resettap
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
  -webkit-tap-highlight-color: transparent

=mp0
  margin: 0
  padding: 0

=hide-text
  font: 0 / 0 a
  text-shadow: none
  color: transparent

=clearfix
  *zoom: 1
  &:before, &:after
    content: ""
    display: table
  &:after
    clear: both

=mobilefix
  +respond(all-phones)
    &:before, &:after
      content: " "
      display: table
    &:after
      clear: both
    &:last-child
      float: none

=font-size($size: 1.6, $line: $size * 1.25)
  font-size: $size * 10 + px
  line-height: $line * 10 + px
  font-size: $size + rem
  line-height: $line + rem

=center-block
  display: block
  margin-left: auto
  margin-right: auto

=image-2x($image, $width, $height)
  @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx)
    background-image: url($image)
    background-size: $width $height

=abs-pos($top: auto, $right: auto, $bottom: auto, $left: auto)
  top: $top
  right: $right
  bottom: $bottom
  left: $left
  position: absolute

=animation($animate...)
  $max: length($animate)
  $animations: ""
  @for $i from 1 through $max
    $animations: #{$animations + nth($animate, $i)}
    @if $i < $max
      $animations: #{$animations + ", "}
  -webkit-animation: $animations
  -moz-animation: $animations
  -o-animation: $animations
  animation: $animations

=keyframes($animationName)
  @-webkit-keyframes #{$animationName}
    @content

  @-moz-keyframes #{$animationName}
    @content

  @-o-keyframes #{$animationName}
    @content

  @keyframes #{$animationName}
    @content