// breakpoints
$mobile: 767px;  // mobile 767px and less 
$tablet: 1025px; // tablet 1025px {desctop - 1} and less 
$retina: 1.5;    // standart retina > 1.5x
$retina-hd: 2.5; // hd retina > 2.5x

// breakpoints mixin
@mixin breakpoint($rule){
  @if ($rule == $retina or $rule == $retina-hd){
    @media only screen and ( min-resolution : #{$retina*96} ), ( -webkit-min-device-pixel-ratio : #{$retina} ){
     @content;
    }
  }
  @else{
    @media only screen and (max-width: #{$rule}){
     @content;
    }  
  }
}

/// breakpoints mixin usage
/// selector{
///   height:100px;
///   @include breakpoint($tablet){
///     height:50px;
///   }
/// }

// hide text
@mixin hide-text {
  overflow: hidden;
  text-indent: -9999px;
}

// placeholder
@mixin placeholder {
 ::-webkit-input-placeholder {@content}
 ::-moz-placeholder     {opacity: 1; @content}
 :-moz-placeholder      {@content}
 :-ms-input-placeholder   {@content}
 .placeholder        {@content}
}

@mixin img-resize{
   display:block;
   width:100%;
   height:auto;
}

// full width
%full-width {
  padding-left: 9999px;
  padding-right: 9999px;
  margin-left: -9999px;
  margin-right: -9999px;
}

// alignment
@mixin alignment($display, $alignment) {
  display: $display;
  vertical-align: $alignment;
}

// Sizing shortcuts
@mixin size($width, $height) {
  width: $width;
  height: $height;
}

// font size
@mixin font-size ($font-size, $line-height){
  font-size: $font-size;
  line-height: $line-height;
}

// rotate
@mixin rotate ($deg) {
  -moz-transform  : rotate($deg);
  -ms-transform   : rotate($deg);
  -o-transform   : rotate($deg);
  -webkit-transform : rotate($deg);
}
// transform
@mixin transform ($deg) {
 transform     : $deg;
 -moz-transform  : $deg;
 -ms-transform   : $deg;
 -o-transform   : $deg;
 -webkit-transform : $deg;
}

// transition
@mixin transition ($type:all, $time:0.4s, $linear:linear) {
 -moz-transition   : $type $time $linear;
 -webkit-transition : $type $time $linear;
 -o-transition    : $type $time $linear;
 transition     : $type $time $linear;
}

@mixin linear-gradient($svg, $fromColor, $toColor){
  background: #{$fromColor} #{$svg};
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$fromColor), color-stop(100%,$toColor));
  background: -webkit-linear-gradient(top,  $fromColor 0%,$toColor 100%);
  background: -o-linear-gradient(top,  $fromColor 0%,$toColor 100%);
  background: -ms-linear-gradient(top,  $fromColor 0%,$toColor 100%);
  background: linear-gradient(to bottom,  $fromColor 0%,$toColor 100%);
}

// custom font mixin
@mixin fontface ($fontfamily, $filename, $fontweight: normal, $fontstyle: normal) {
 font-family: $fontfamily;
 src:url('../fonts/#{$filename}.eot');
 src:url('../fonts/#{$filename}.eot?#iefix') format('embedded-opentype'),
  url('../fonts/#{$filename}.woff') format('woff'),
  url('../fonts/#{$filename}.ttf') format('truetype'),
  url('../fonts/#{$filename}.svg#{$filename}') format('svg');
 font-weight: $fontweight;
 font-style: $fontstyle;
}

// retina images
@mixin img-retina($image, $extension, $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('../images/' + $image + '-2x' + '.' + $extension);
    background-size: $width $height;
  }
}

// from http://codepen.io/MichaelArestad/pen/IxFGj 
@mixin arrow-lazy($al-direction: top, $al-size: 10px, $al-color: #ccc, $al-center: 50%, $al-margin: -1px, $al-pseudo: before){
  position: relative;
  border-color: $al-color;

  &:#{$al-pseudo} {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border: 0;
    border-color: $al-color;

    @if $al-direction == "right" {
      top: $al-center;
      left: 100%;
      margin-left: $al-margin;
      margin-top: $al-size * -1;
      border-top: $al-size solid transparent;
      border-bottom: $al-size solid transparent;
      border-left: $al-size solid $al-color;
      border-left-color: inherit;
    } @else if $al-direction == "down" {
      top: 100%;
      left: $al-center;
      margin-top: $al-margin;
      margin-left: $al-size * -1;
      border-left: $al-size solid transparent;
      border-right: $al-size solid transparent;
      border-top: $al-size solid $al-color;
      border-top-color: inherit;
    } @else if $al-direction == "left" {
      top: $al-center;
      right: 100%;
      margin-right: $al-margin;
      margin-top: $al-size * -1;
      border-top: $al-size solid transparent;
      border-bottom: $al-size solid transparent; 
      border-right:$al-size solid $al-color;
      border-right-color: inherit;
    } @else {
      bottom: 100%;
      left: $al-center;
      margin-bottom: $al-margin;
      margin-left: $al-size * -1;
      border-left: $al-size solid transparent;
      border-right: $al-size solid transparent;
      border-bottom: $al-size solid $al-color;
      border-bottom-color: inherit;
    }
  }
}

@mixin animation($value) {
  -webkit-transition:$value;
  transition:$value;
}

@mixin transform ($deg) {
  transform: $deg;
  -moz-transform: $deg;
  -ms-transform: $deg;
  -o-transform: $deg;
  -webkit-transform: $deg;
}

// some CSS3 style
@mixin css3($property, $value) {
  @each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
      #{$prefix}#{$property}: $value;
  }
}

// box-sizing

@mixin box-sizing($value){
  -webkit-box-sizing: $value;
  -moz-box-sizing: $value;
   box-sizing: $value;
}

@mixin rgba-color($hexcolor, $opacity){
  color: $hexcolor;
  color: rgba($hexcolor, $opacity); 
}


@mixin rgba-background($hexcolor, $opacity) {
  background-color: $hexcolor;
  background-color: rgba($hexcolor, $opacity); 
}

@mixin rem-font-size($pxSize) {
  font-size: $pxSize;
  font-size: ($pxSize / 10px) + rem;
}

@mixin font($font-size, $line-height) {
  font-size: $font-size;
  line-height: $line-height;
}

@mixin size($width, $height) {
  width: $width;
  height: $height;
}

@mixin element($top, $right, $bottom, $left) {
  position: absolute;
  content: "";
  z-index: -1; 
  left: $left;
  top: $top;
  bottom: $bottom;
  right: $right;
}

@mixin v-align($va-height: 100%, $va-direction: middle, $va-pseudo: after) {
  white-space: nowrap;

  &:#{$va-pseudo} { 
    content: '';
    display: inline-block;
    vertical-align: $va-direction;
    width: 0;
    min-height: $va-height;
  }

  > * {
    white-space: normal;
    display: inline-block;
    vertical-align: $va-direction;
    max-width: 99%;
  }
}