//Font Family Mixin
@mixin font-face($style-name, $file-name) {
  $filepath: "../fonts/" + $file-name;
  @font-face {
    font-family: "#{$style-name}";
    src: url($filepath + ".eot");
    src: url($filepath + ".eot?#iefix") format('embedded-opentype'),
    url($filepath + ".woff2") format('woff2'),
    url($filepath + ".woff") format('woff'),
    url($filepath + ".ttf")  format('truetype');
    font-weight: normal;
    font-style: normal;
  }
}
//px to rem
@function strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

//Clamping the title and adding dots
@mixin title-height($height, $lines) {
  height: $height;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
}

// Percentage to flex item
@mixin flex-percent($percent) {
  -ms-flex: 0 0 $percent;
  flex: 0 0 $percent;
  max-width: $percent;
}

@mixin rem-fallback($property, $values...) {
  $max: length($values);
  $pxValues: '';
  $remValues: '';

  @for $i from 1 through $max {
    $value: strip-unit(nth($values, $i));
    $pxValues: #{$pxValues + $value*16}px;

    @if $i < $max {
      $pxValues: #{$pxValues + " "};
    }
  }

  @for $i from 1 through $max {
    $value: strip-unit(nth($values, $i));
    $remValues: #{$remValues + $value}rem;

    @if $i < $max {
      $remValues: #{$remValues + " "};
    }
  }

  #{$property}: $pxValues;
  #{$property}: $remValues;
}
//Media Queries
@mixin max-width($max) {
  @media (max-width: #{($max - 1) + "px"}) {
    @content;
  }
}
@mixin min-width($min) {
  @media (min-width: #{($min - 1) + "px"}) {
    @content;
  }
}

@mixin width-between($min, $max) {
  @media (min-width: $min + "px") and (max-width: #{($max - 0.02) + "px"}) {
    @content;
  }
}

@mixin breakpoint-only($arg) {
  @if $arg == 'xs' {
    @media (max-width: 575.98px) {
      @content;
    }
  }
  @if $arg == 'sm' {
    @media (min-width: 576px) and (max-width: 767.98px) {
      @content;
    }
  }
  @if $arg == 'md' {
    @media (min-width: 768px) and (max-width: 991.98px) {
      @content;
    }
  }
  @if $arg == 'lg' {
    @media (min-width: 992px) and (max-width: 1199.98px) {
      @content;
    }
  }
  @if $arg == 'xl' {
    @media (min-width: 1200px) {
      @content;
    }
  }
}

@mixin ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@mixin transition($args...) {
  -webkit-transition: $args;
  -moz-transition: $args;
  -ms-transition: $args;
  -o-transition: $args;
  transition: $args; // background 0.3s ease
}
@mixin box-shadow($top, $left, $blur, $color, $inset: false) {
  @if $inset {
    -webkit-box-shadow:inset $top $left $blur $color;
    -moz-box-shadow:inset $top $left $blur $color;
    box-shadow:inset $top $left $blur $color;
  } @else {
    -webkit-box-shadow: $top $left $blur $color;
    -moz-box-shadow: $top $left $blur $color;
    box-shadow: $top $left $blur $color;
  }
}
//Placeholder
@mixin optional-at-root($sel) {
  @at-root #{if(not &, $sel, selector-append(&, $sel))} {
    @content;
  }
}

@mixin placeholder {
  @include optional-at-root('&::-webkit-input-placeholder') {
    @content;
  }

  @include optional-at-root('&:-moz-placeholder') {
    @content;
  }

  @include optional-at-root('&::-moz-placeholder') {
    @content;
  }

  @include optional-at-root('&:-ms-input-placeholder') {
    @content;
  }
}

@mixin centre($axis: "both"){
  position:absolute;
  @if $axis == "y"{
    top:50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  @if $axis == "x"{
    left:50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  @if $axis == "both"{
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
}