// scss-lint:disable VendorPrefix

/// This mixin is used to add a transition
/// @param {array} $args - Accepts multiple arguments on a per need bases
@mixin transition($args...) {
  -webkit-transition: $args;
  -moz-transition: $args;
  -ms-transition: $args;
  -o-transition: $args;
  transition: $args;
}

/// This mixin is used to add a transform
/// @param {array} $args - Accepts multiple arguments on a per need bases
@mixin transform($args...) {
  -webkit-transform: $args;
  -ms-transform: $args;
  transform: $args;
}

/// This mixin is used to add a transform-origin
/// @param {array} $args - Accepts multiple arguments on a per need bases
@mixin transform-origin($args...) {
  -webkit-transform-origin: $args;
  -ms-transform-origin: $args;
  transform-origin: $args;
}

/// This mixin is used to add a cross browser opacity to an element
/// @param {string} $opacity - Opacity should be defined as a float e.g.: 0.1, 0.2 etc.
@mixin opacity($opacity) {
  $IEValue: $opacity*100;
  opacity: $opacity;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=`#{$IEValue}`)";
  filter: alpha(opacity=#{$IEValue});
}

/// This mixin is used to add font-size to your element and it will be automatically converted to rem fonts
/// @param {string} $size - desired font size e.g. 16px
/// @param {boolean} $important [false] - add a !important to the element
@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;
  }
}

/// This mixin is used to add a background gradient
/// @param {array} $colors - Add multiple colors e.g. #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;
}

/// This mixin is used to add a border radius
/// @param {string} $value [$borderRadius] - add a pixel value of intended radius
/// @param {string} $important [false] - add a !important to the element
@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;
}

/// This mixin is used for creating box sizing model in CSS
/// @param {string} $value [border-box] - add a value for the box-sizing model
@mixin box-sizing ( $value: border-box ) {
  -webkit-box-sizing: $value;
  -moz-box-sizing: $value;
  box-sizing: $value;
}

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

/// This mixin is used for adding a box shadow
/// @param {string} $shadow - add a value for you shadow parameters
/// @param {string} $color - add a color for your shadow
@mixin box-shadow($shadow, $color ) {
  -webkit-box-shadow: $shadow $color;
  -moz-box-shadow:    $shadow $color;
  box-shadow:         $shadow $color;
}

/// This mixin is used for adding rotation
/// @param {string} $degrees [$degreesDefault] - add a value for the degrees
@mixin rotate($degrees: $degreesDefault) {
  -webkit-transform: rotate($degrees);
  -moz-transform:    rotate($degrees);
  -ms-transform:     rotate($degrees);
  -o-transform:      rotate($degrees);
  transform:         rotate($degrees);
}

/// This mixin is used for adding rotation and translation
/// @param {string} $translate-measure - add a value for the translate
/// @param {string} $rotate-measure - add a value for the rotate
@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);
}


/// This mixin is used for adding animation
/// @param {string} $args - Arguments for your animation
@mixin animation($args) {
  -webkit-animation: $args;
  animation:         $args;
}

/// This mixin is used for adding keyframes for flashing the background color
/// @param {string} $bgColor [$red] - color for the background flash
/// @param {string} $keyframeName [Red] - name for your keyframe
@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;
    }
  }
}

/// This mixin is used for adding display flex
@mixin display-flex {
  display: -webkit-flex;
  display: flex;
}

/// This mixin is used for adding flex-wrap
/// @param {string} $value - the value of your flex wrap
@mixin flex-wrap($value) {
  -webkit-flex-wrap: $value;
  flex-wrap: $value;
}