// 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($base-font-size);
/// }
@mixin font-size($size, $important: false) {
  @if $important == false {
    font-size: $size; // fallback for old browsers
    font-size: ($size / $base-font-size) * 1rem;
  }
  @else {
    font-size: $size !important; // fallback for old browsers
    font-size: ($size / $base-font-size) * 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;
    }
  }
}

/// This mixin is used to add margin to your element and it will be automatically converted to rem units
/// @param {string} $values - desired margin setup e.g. `0 0 15px` | `15px` | `0 0 0 12px`
/// @example setting margins for `.foo`
/// .foo {
///   @include margin(0 0 15px 0);
/// }
@mixin margin($values: 0 0 0 0) {
  margin: $values;
  margin: get-unit-list($values);
}

/// This mixin is used to add padding to your element and it will be automatically converted to rem units
/// @param {string} $values - desired padding setup e.g. `0 0 15px` | `15px` | `0 0 0 12px`
/// @example setting padding for `.foo`
/// .foo {
///   @include padding(0 0 15px 0);
/// }
@mixin padding($values: 0 0 0 0) {
  padding: $values;
  padding: get-unit-list($values);
}

/// This mixin is used for including arrows / carets
/// @param {string} $size - Size of the arrow e.g. 10px
/// @param {string} $color - Color of the arrow e.g. #fff | $white | #ffffff
/// @example setting padding for `.foo:before`
/// .foo:before {
///   @include arrow-left(10px,$gray-light-background);
/// }
@mixin arrow-left ($size,$color) {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-top: $size solid transparent;
  border-bottom: $size solid transparent;
  border-right: $size solid $color;
}

/// This mixin is used for multi line ellipsis
/// @param {string} $lineHeight - Line height
/// @param {string} $lineCount - Amount of lines to display
/// @param {string} $bgColor - Background color
/// @example setting padding for `.foo:before`
/// .foo:before {
///   @include multiLineEllipsis($lineHeight: 1.2em, $lineCount: 3, $bgColor: $white);
/// }
@mixin multiLineEllipsis($lineHeight: 1.2em, $lineCount: 1, $bgColor: $white){
  overflow: hidden;
  position: relative;
  line-height: $lineHeight;
  max-height: $lineHeight * $lineCount;
  text-align: justify;
  margin-right: -1em;
  padding-right: 1em;
  &:before {
    content: '...';
    position: absolute;
    right: 0;
    bottom: 0;
  }
  &:after {
    content: '';
    position: absolute;
    right: 0;
    width: 1em;
    height: 1em;
    margin-top: 0.2em;
    background: $bgColor;
  }
}