$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)";

@mixin 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

@mixin borderbox {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@mixin resetkit {
  -webkit-appearance: none;
  appearance: none;
}

@mixin translatez {
  -webkit-transform: translatez(0);
  -moz-transform: translatez(0);
  -ms-transform: translatez(0);
  -o-transform: translatez(0);
  transform: translatez(0);
}

@mixin fontsmooth {
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

@mixin disableselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@mixin resettap {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

@mixin mp0 {
  margin: 0;
  padding: 0;
}

@mixin hide-text {
  font: 0 / 0 a;
  text-shadow: none;
  color: transparent;
}

@mixin clearfix {
  *zoom: 1;
  &:before, &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
  }
}

@mixin mobilefix {
  @include respond(all-phones) {
    &:before, &:after {
      content: " ";
      display: table;
    }
    &:after {
      clear: both;
    }
    &:last-child {
      float: none;
    }
  }
}

@mixin 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;
}

@mixin center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@mixin 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;
  }
}

@mixin abs-pos($top: auto, $right: auto, $bottom: auto, $left: auto) {
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
  position: absolute;
}

@mixin 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;
}

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

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

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

  @keyframes #{$animationName} {
    @content;
  }
}