// breakpoints
$mobile: 767px;  // mobile 767px and less 
$tablet: 980px; // tablet 980px {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;
///   }
/// }


// clearfix
%clearfix {
  &:after {
    content: " ";
    display: block;
    clear: both;
  }
}

// reset for list
%listreset {
  margin: 0;
  padding: 0;
  list-style: none;
}

// reset for list
%after {
  position: absolute;
  content:"";
}

// reset width-auto
@mixin width-auto{
  margin: 0 auto;
  max-width:$base-width;
}

// reset for box
%boxreset {
  width:100%;
  overflow:hidden;
  position:relative;
}

// reset for box
%img-responsive {
  width:100%;
  display: block;
  height: auto;
}

// reset for box
%img-responsive2 {
  max-width:100%;
  display: block;
  height: auto;
  margin: 0 auto;
}

@mixin element($element, $top, $right, $bottom, $left, $bg-color){
  position: relative;
  z-index: 1;
  &:#{$element} {
    position: absolute;
    content: "";
    top:$top;
    z-index: -1;
    bottom:$bottom;
    left:$left;
    right:$right;
    background: $bg-color;
  }
}

@mixin element2($element2, $top, $right, $bottom, $left){
	position: relative;
	&:#{$element2} {
		position: absolute;
		content: "";
		top:$top;
		bottom:$bottom;
		left:$left;
		right:$right;
	}
} 

// postion reset
%postionreset{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

// postion reset
%backgroundreset {
  -webkit-background-size:cover;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:50% 50%;
}

// opacity
@mixin opacity($opacity) {
  opacity: $opacity;
  $opacityIE: $opacity * 100;
  filter: alpha(opacity=$opacityIE);
}

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

// vertical alignment within the block
@mixin v-align($child-class-name, $valign: middle){
  white-space:nowrap;
  .#{$child-class-name}{
    display:inline-block;
    white-space:normal;
    vertical-align:$valign;
    }
  &:before{
    content:'';
    vertical-align:$valign;
    display:inline-block;
    min-height:inherit;
    width:1px;
    overflow:hidden;
    margin:0 0 0 -5px;
  }
}
@mixin v-align2($child-class-name, $valign: middle){
  white-space:nowrap;
  .#{$child-class-name}{
    display:inline-block;
    white-space:normal;
    vertical-align:$valign;
  }
  &:before{
    content:'';
    vertical-align:$valign;
    display:inline-block;
    height:100%;
    width:1px;
    overflow:hidden;
    margin:0 0 0 -5px;
  }
}

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

// gradient
@mixin linear-gradient($fromColor, $toColor) {
  background-color: $toColor;
  background-image: -webkit-linear-gradient($fromColor, $toColor);
  background-image:   -moz-linear-gradient($fromColor, $toColor);
  background-image:    -ms-linear-gradient($fromColor, $toColor);
  background-image:     -o-linear-gradient($fromColor, $toColor);
  background-image:        linear-gradient($fromColor, $toColor);
}

// arrow 
@mixin arrow($top, $right, $bottom, $left, $top-color, $right-color, $bottom-color, $left-color){
  width: 0;
  height: 0;
  border-style: solid;
  border-width:$top $right $bottom $left;
  border-color:$top-color $right-color $bottom-color $left-color;
}

// 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}.woff2') format('woff2'),
    url('../fonts/#{$filename}.ttf') format('truetype'),
    url('../fonts/#{$filename}.svg#{$filename}') format('svg');
  font-weight: $fontweight;
  font-style: $fontstyle;
}

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

// 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}
}

// retina images
@mixin img-retina($image, $extension, $width, $height) {
  background: url('../images/' + $image + '.' + $extension) no-repeat;
  width: $width;
  height: $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;
    }
  }
}
// sprite image
@mixin sprite ($width, $height, $horizontal-offset, $vertical-offset) {
  $image-path: url(../images/sprite.png);
  background: $image-path no-repeat $horizontal-offset $vertical-offset;
  width: $width;
  height: $height;
}

// full width
%full-width {
  position: absolute;
  left: -9999px;
  right: -9999px;
  top: -9999px;
  bottom: -9999px;
}