/*mixin for converting pixel into rem*/
@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 / 16 + 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 */
  }
}

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

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

/*mixin for border*/
@mixin border($direction, $width, $style, $color) {
  border-#{$direction}: $width $style $color;
  @if $direction == 'all' {
    border: $width $style $color;
  } @else if $direction == 'default'{
    border: 1px solid $color-dark-gray1;
  }
}


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

// Single side border-radius

@mixin border-top-radius($radius) {
  border-top-left-radius: $radius;
  border-top-right-radius: $radius;
  -webkit-border-top-left-radius: $radius;
  -webkit-border-top-right-radius: $radius;
   background-clip: padding-box;
}
@mixin border-right-radius($radius) {
  -webkit-border-bottom-right-radius: $radius;
  border-bottom-right-radius: $radius;
  -webkit-border-top-right-radius: $radius;
  border-top-right-radius: $radius;
  background-clip: padding-box;
}
@mixin border-bottom-radius($radius) {
  border-bottom-left-radius: $radius;
  border-bottom-right-radius: $radius;
  -webkit-border-bottom-left-radius: $radius;
  -webkit-border-bottom-right-radius: $radius;
  background-clip: padding-box;
}
@mixin border-left-radius($radius) {
  border-top-left-radius: $radius;
  border-bottom-left-radius: $radius;
  -webkit-border-top-left-radius: $radius;
  -webkit-border-bottom-left-radius: $radius;
  background-clip: padding-box;
}

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

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

/*mixin for text truncation*/
@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 for Error Message*/
@mixin error-message($colorlass) {
  .message-#{$colorlass} {
      border: 1px dotted red;
      color: red;
      margin: 20px;
      padding: 10px;
      @content;
  }
}

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

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