// scss-lint:disable VendorPrefix


/// 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
/// @example setting font size for `.foo`
/// .foo {
///   @include font-size($baseFontSize);
/// }
@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 clearfix to a specific element instead of adding an extra class
/// @example setting `.foo` to clearfix
/// .foo {
///   @include clearfix();
/// }
@mixin clearfix() {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}

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