$prefix-for-webkit: true !default;
$prefix-for-mozilla: true !default;
$prefix-for-microsoft: true !default;
$prefix-for-opera: true !default;
$prefix-for-spec: true !default;

@mixin prefixer($property, $value, $prefixes) {
  @each $prefix in $prefixes {
    @if $prefix == webkit {
      @if $prefix-for-webkit {
        -webkit-#{$property}: $value;
      }
    } @else if $prefix == moz {
      @if $prefix-for-mozilla {
        -moz-#{$property}: $value;
      }
    } @else if $prefix == ms {
      @if $prefix-for-microsoft {
        -ms-#{$property}: $value;
      }
    } @else if $prefix == o {
      @if $prefix-for-opera {
        -o-#{$property}: $value;
      }
    } @else if $prefix == spec {
      @if $prefix-for-spec {
        #{$property}: $value;
      }
    } @else {
      @warn "Unrecognized prefix: #{$prefix}";
    }
  }
}

@mixin disable-prefix-for-all() {
  $prefix-for-webkit: false !global;
  $prefix-for-mozilla: false !global;
  $prefix-for-microsoft: false !global;
  $prefix-for-opera: false !global;
  $prefix-for-spec: false !global;
}

//
// Transform
//
@mixin transform($property: none) {
  // none | <transform-function>
  @include prefixer(transform, $property, webkit moz ms o spec);
}

@mixin transform-origin($axes: 50%) {
  // x-axis - left | center | right  | length | %
  // y-axis - top  | center | bottom | length | %
  // z-axis -                          length
  @include prefixer(transform-origin, $axes, webkit moz ms o spec);
}

@mixin transform-style($style: flat) {
  @include prefixer(transform-style, $style, webkit moz ms o spec);
}

//
// Set a pixel font size with rem fallback
//

@function calculatePx($size, $pxBase: 16px) {
  $pxSize: $size / 1rem;
  @return $pxSize * $pxBase;
}

//
//Set a rem font size with pixel fallback
//

@function calculateRem($size, $pxBase: 16px) {
  $remSize: $size / $pxBase;
  @return $remSize * 1rem;
}

@function calculateEm($size, $pxBase: 16px) {
  @return ($size / 1em) * $pxBase + 0px;
}

@mixin font-size-rem($size) {
  //font-size: $size;
  font-size: calculateRem($size);
}

//p {
//  @include font-size-rem(14px)
//}

//
// SVG background images with PNG and retina fallback
//
$image-path: '../images' !default;
$fallback-extension: 'png' !default;
$retina-suffix: '@2x';
@mixin background-image($name, $size: false) {
  background-image: url(#{$image-path}/#{$name}.svg);
  @if ($size) {
    background-size: $size;
  }
  .no-svg & {
    background-image: url(#{$image-path}/#{$name}.#{$fallback-extension});

    @media only screen and (-moz-min-device-pixel-ratio: 1.5),
      only screen and (-o-min-device-pixel-ratio: 3/2),
      only screen and (-webkit-min-device-pixel-ratio: 1.5),
      only screen and (min-device-pixel-ratio: 1.5) {
      background-image: url(#{$image-path}/#{$name}#{$retina-suffix}.#{$fallback-extension});
    }
  }
}

//body {
//  @include background-image('pattern');
//}

//
// Animations and keyframes
//

@mixin keyframes($animation-name) {
  @-webkit-keyframes #{$animation-name} {
    @content;
  }
  @-moz-keyframes #{$animation-name} {
    @content;
  }
  @-ms-keyframes #{$animation-name} {
    @content;
  }
  @-o-keyframes #{$animation-name} {
    @content;
  }
  @keyframes #{$animation-name} {
    @content;
  }
}

@mixin animation($str) {
  -webkit-animation: #{$str};
  -moz-animation: #{$str};
  -ms-animation: #{$str};
  -o-animation: #{$str};
  animation: #{$str};
}

@mixin animation-delay($delay: 0s) {
  @include prefixer(animation-delay, $delay, webkit moz ms o spec);
}

@mixin animation-name($name) {
  @include prefixer(animation-name, $name, webkit moz ms o spec);
}

//
// Perspective
//
@mixin perspective($property: none) {
  @include prefixer(perspective, $property, webkit moz ms o spec);
}

//@include keyframes(slide-down) {
//  0% { opacity: 1; }
//  90% { opacity: 0; }
//}
//
//.element {
//  width: 100px;
//  height: 100px;
//  background: black;
//  @include animation('slide-down 5s 3');
//}

//
// Cross browser opacity
//

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

//.faded-text {
//  @include opacity(0.8);
//}

//
// Centering Mixin
//
@mixin center($horizontal: true, $vertical: true) {
  position: absolute;

  @if ($horizontal and $vertical) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  } @else if ($horizontal) {
    left: 50%;
    transform: translate(-50%, 0);
  } @else if ($vertical) {
    top: 50%;
    transform: translate(0, -50%);
  }
}

//.parent {
//  position: relative;
//}
//
//.child {
//  &.both {
//    @include center;
//  }
//
//  &.horizontal {
//    @include center(true, false);
//  }
//
//  &.vertical {
//    @include center(false, true);
//  }
//}

// --------------------------------------------------------
// arrows
// --------------------------------------------------------
// $direction: top, left, right, bottom, top-left, top-right, bottom-left, bottom-right
// $color: hex, rgb or rbga
// $size: px or em
// @example
// .element{
//     @include arrow(top, #000, 50px);
// }
@mixin make-arrow($direction, $color, $size-w, $size-h) {
  display: block;
  height: 0;
  width: 0;

  @if $direction == 'top' {
    border-left: $size-w solid transparent;
    border-right: $size-w solid transparent;
    border-bottom: $size-h solid $color;
  } @else if $direction == 'right' {
    border-top: $size-w solid transparent;
    border-bottom: $size-w solid transparent;
    border-left: $size-h solid $color;
  } @else if $direction == 'bottom' {
    border-top: $size-h solid $color;
    border-right: $size-w solid transparent;
    border-left: $size-w solid transparent;
  } @else if $direction == 'left' {
    border-top: $size-w solid transparent;
    border-right: $size-h solid $color;
    border-bottom: $size-w solid transparent;
  } @else if $direction == 'top-left' {
    border-top: $size-h solid $color;
    border-right: $size-w solid transparent;
  } @else if $direction == 'top-right' {
    border-top: $size-h solid $color;
    border-left: $size-w solid transparent;
  } @else if $direction == 'bottom-left' {
    border-bottom: $size-h solid $color;
    border-right: $size-w solid transparent;
  } @else if $direction == 'bottom-right' {
    border-bottom: $size-h solid $color;
    border-left: $size-w solid transparent;
  }
}

@function calculateTextHeight(
  $line: 1,
  $font-size: $font-size-base,
  $line-height: $line-height-base
) {
  @return ($font-size * $line-height * $line);
}

@mixin max-height-text(
  $line: 1,
  $fixed: false,
  $font-size: $font-size-base,
  $line-height: $line-height-base
) {
  max-height: calculateTextHeight($line, $font-size, $line-height);
  @if ($fixed) {
    height: calculateTextHeight($line, $font-size, $line-height);
  }
  overflow: hidden;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  text-overflow: ellipsis;
  white-space: normal;
}

@mixin overlay-item() {
  content: '';
  position: absolute;
  @include gradient-y(transparent, #000);
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}