// scss-lint:disable VendorPrefix

/**
 * Mixin for breakpoints (Uses NEW grid)
 * usage: @include breakpoint(md) {
 *          body {
 *            color: blue;
 *          }
 *        }
**/
@mixin breakpoint($class) {
  @if $class == xs {
    @media (max-width: 767px) { @content; }
  }
  @else if $class == sm {
    @media (min-width: 768px) { @content; }
  }
  @else if $class == md {
    @media (min-width: 998px) { @content; }
  }
  @else if $class == lg {
    @media (min-width: 1258px) { @content; }
  }
  @else if $class == xl {
    @media (min-width: 1458px) { @content; }
  }
  @else if $class == xxl {
    @media (min-width: 1658px) { @content; }
  }
  @else {
    @warn "Breakpoint mixin supports: xs, sm, md, lg, xl, xxl";
  }
}

/**
 * Mixin for setting min and max width in breakpoint
 * usage: @include breakpoint-minmax(md) {
 *          body {
 *            color: blue;
 *          }
 *        }
**/
@mixin breakpoint-minmax($class) {
  @if $class == xs {
    @media (max-width: 767px) { @content; }
  }
  @else if $class == sm {
    @media (min-width: 768px) and (max-width: 997px) { @content; }
  }
  @else if $class == md {
    @media (min-width: 998px) and (max-width: 1257px) { @content; }
  }
  @else if $class == sm-md {
    @media (min-width: 768px) and (max-width: 1257px) { @content; }
  }
  @else if $class == lg {
    @media (min-width: 1258px) and (max-width: 1457px) { @content; }
  }
  @else if $class == xl {
    @media (min-width: 1458px) and (max-width: 1657px) { @content; }
  }
  @else {
    @warn "Breakpoint mixin supports: sm, md, lg, xl (xs and xxl not supported in this method)";
  }
}

/**
 * Mixin for transition
 * usage: @include transition(color .3s ease);
**/
@mixin transition($args...) {
  -webkit-transition: $args;
  -moz-transition: $args;
  -ms-transition: $args;
  -o-transition: $args;
  transition: $args;
}

/**
 * Mixin for transform
 * usage: @include transform(scale(.9, .8);
**/
@mixin transform($args...) {
  -webkit-transform: $args;
  -ms-transform: $args;
  transform: $args;
}

/**
 * Mixin for transform-origin
 * usage: @include transform-origin(2px 12em); transform-origin(top left);
**/
@mixin transform-origin($args...) {
  -webkit-transform-origin: $args;
  -ms-transform-origin: $args;
  transform-origin: $args;
}

/**
 * Mixin for opacity (cross browser)
 * usage: @include opacity(.4);
**/
@mixin opacity($opacity) {
  $IEValue: $opacity*100;
  opacity: $opacity;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=`#{$IEValue}`)";
  filter: alpha(opacity=#{$IEValue});
}

/**
 * Mixin for rem based font-size (cross browser)
 * usage: @include font-size(16);
**/
@mixin font-size($size, $important: false) {
  @if $important == false {
    font-size: $size; // fallback for old browsers
    font-size: ($size / $baseFontSize) * 1rem;
  }
  @else {
    font-size: $size !important; // fallback for old browsers
    font-size: ($size / $baseFontSize) * 1rem !important;
  }
}

/**
 * Mixin for creating a background gradient
 * usage: @include linear-gradient(#fff, #fff, #fff, #E0E0E0);
**/
@mixin linear-gradient($colors...) {
  background: -webkit-linear-gradient($colors) !important;
  background: -o-linear-gradient($colors) !important;
  background: -moz-linear-gradient($colors) !important;
  background: linear-gradient($colors) !important;
}

/**
 * Mixin for creating a background gradient
 * usage: @include border-radius(4px);
 * if no px defined default radius will be picked up
**/
@mixin border-radius ( $value: $borderRadius, $important: false ) {
  @if $important == false {
    -webkit-border-radius: $value;
    -moz-border-radius: $value;
    border-radius: $value;
  }
  @else {
    -webkit-border-radius: $value !important;
    -moz-border-radius: $value !important;
    border-radius: $value !important;
  }
  // keeps background from busting out of border
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
}

/**
 * Mixin for creating box sizing model in CSS
 * usage: @include box-sizing;
 * NOTE: default value is border-box, but you can override this by specifying parameter
**/
@mixin box-sizing ( $value: border-box ) {
  -webkit-box-sizing: $value;
  -moz-box-sizing: $value;
  box-sizing: $value;
}

/**
 * Mixin adding clearfix to a specific element instead of adding an extra class
 * usage: @include clearfix;
**/
@mixin clearfix() {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}

/**
 * Mixin pass shadow and color needed for any box shadow.
 * usage: @include box-shadow;
**/
@mixin box-shadow($shadow, $color ) {
  -webkit-box-shadow: $shadow $color;
  -moz-box-shadow:    $shadow $color;
  box-shadow:         $shadow $color;
}

/**
 * Mixin pass the degrees of rotation needed.  All browsers always accounted
 * usage: @include rotate;
 * NOTE: default value is $degreesDefault, but you can override this by specifying parameter
**/
@mixin rotate($degrees: $degreesDefault) {
  -webkit-transform: rotate($degrees);
  -moz-transform:    rotate($degrees);
  -ms-transform:     rotate($degrees);
  -o-transform:      rotate($degrees);
  transform:         rotate($degrees);
}



//Mixin pass the measure of rotation and translation needed.  All browsers always accounted
//usage: @include rotate-translate;
@mixin rotate-translate($translate-measure, $rotate-measure) {
  -webkit-transform: translate($translate-measure) rotateZ($rotate-measure);
  -moz-transform: translate($translate-measure) rotateZ($rotate-measure);
  -o-transform: translate($translate-measure) rotateZ($rotate-measure);
  transform: translate($translate-measure) rotateZ($rotate-measure);
}


/**
 * Mixin pass arguments for a animation.
 * usage: @include animation;
**/
@mixin animation($args) {
  -webkit-animation: $args;
  animation:         $args;
}

/**
 * Mixin for rem based font-size (cross browser)
 * usage: @include font-size(16);
**/
@mixin flashBgColor($bgColor: $red, $keyframeName: 'Red') {
  @keyframes flashBg#{$keyframeName} {
    0% {
      background-color: inherit;
    }
    50% {
      background-color: $bgColor;
    }
    100% {
      background-color: inherit;
    }
  }

  @-webkit-keyframes flashBg#{$keyframeName} {
    0% {
      background-color: inherit;
    }
    50% {
      background-color: $bgColor;
    }
    100% {
      background-color: inherit;
    }
  }
}

///**
// * Mixin for display flex
// * usage: @include display-flex;
//**/
@mixin display-flex {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

///**
// * Mixin for display flex
// * usage: @include display-flex;
//**/
@mixin flex-align-center {
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;

  align-items: center;
}

///**
// * Mixin for flex-wrap
// * usage: @include flex-wrap;
//**/
@mixin flex-wrap($value) {
  -webkit-flex-wrap: $value;
  flex-wrap: $value;
}
///**
// * Helper class for text-overflow ellipsis
//**/
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@mixin zoom($value){
  zoom: $value;
  -moz-transform: scale($value);
  -moz-transform-origin: 0 0;
}