@import "./variables.scss";

@mixin rem($property, $values) {
  $px: (); /* 3 */
  $rem: (); /* 3 */
  @each $value in $values {
    /* 4 */
    @if $value == 0 or $value == auto {
      /* 5 */
      $px: append($px, $value);
      $rem: append($rem, $value);
    } @else {
      $unit: unit($value); /* 6 */
      $val: parseInt($value); /* 6 */
      @if $unit == "px" {
        /* 7 */
        $px: append($px, $value);
        $rem: append($rem, ($val / 10 + rem));
      }
      @if $unit == "rem" {
        /* 7 */
        $px: append($px, ($val * 10 + px));
        $rem: append($rem, $value);
      }
    }
  }
  @if $px == $rem {
    /* 8 */
    #{$property}: $px; /* 9 */
  } @else {
    #{$property}: $px; /* 9 */
    #{$property}: $rem; /* 9 */
  }
}

@function parseInt($n) {
  @return $n / ($n * 0 + 1);
}

@mixin clearfix {
  &:after {
    content: "";
    display: block;
    clear: both;
  }
}

/*mixin for border radius*/
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

/*mixin for Line-height*/
@mixin line-height($value, $font-size) {
  line-height: ($value / $font-size);
}

@mixin box-shadow {
  box-shadow: 0 2px 4px 0 $color-light-gray4;
}

@mixin truncate($truncation-boundary) {
  max-width: $truncation-boundary;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@mixin push--auto {
  margin: {
      left: auto;
      right: auto;
  }
}

@mixin error-message($colorlass) {
  .message-#{$colorlass} {
      border: 1px dotted red;
      color: red;
      margin: 20px;
      padding: 10px;
      @content;
  }
}

@mixin success-message($colorlass) {
  .message-#{$colorlass} {
      border: 1px dotted green;
      color: green;
      margin: 20px;
      padding: 10px;
      @content;
  }
}

@mixin warning-message($colorlass) {
  .message-#{$colorlass} {
      border: 1px dotted yellow;
      color: yellow;
      margin: 20px;
      padding: 10px;
      @content;
  }
}
