@mixin borderRadius($px) {
  -webkit-border-radius: $px;
  -moz-border-radius: $px;
  border-radius: $px;
}

@mixin boxSizing($value) {
  -webkit-box-sizing: $value;
  -moz-box-sizing: $value;
  box-sizing: $value;
}

@mixin boxShadow($value...) {
  -webkit-box-shadow: $value;
  -moz-box-shadow: $value;
  box-shadow: $value;
}

@mixin transition($value...) {
  -webkit-transition: $value;
  -moz-transition: $value;
  -ms-transition: $value;
  -o-transition: $value;
  transition: $value;
}

@mixin transform($value...) {
  -webkit-transform: $value;
  -moz-transform: $value;
  -ms-transform: $value;
  -o-transform: $value;
  transform: $value;
}

@mixin textTruncate() {
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin displayFlex() {
  display: flex;
  display: -moz-flex;
  display: -webkit-flex;
  display: -o-flex;
}
@mixin flexWrap($value) {
  -webkit-flex-wrap: $value;
  -moz-flex-wrap: $value;
  -ms-flex-wrap: $value;
  -o-flex-wrap: $value;
  flex-wrap: $value;
}
@function calcRem($size) {
  $remSize: $size / $root-font-size;
  //Default font size on html element is 100%, equivalent to 16px;
  @return #{$remSize}rem;
}
@mixin fontSize($size) {
  font-size: $size;
  font-size: calcRem($size);
}
@mixin padding($top, $right, $bottom, $left) {
  padding: $top $right $bottom $left;
  padding: calcRem($top) calcRem($right) calcRem($bottom) calcRem($left);
}

@mixin margin($top, $right, $bottom, $left) {
  margin: $top $right $bottom $left;
  margin: calcRem($top) calcRem($right) calcRem($bottom) calcRem($left);
}
@mixin margin-padding($m-direction, $m-amount, $p-direction, $p-amount) {
  @if $m-direction == all {
    margin: $m-amount;
  } @else {
    margin-#{$m-direction}: $m-amount;
  }
  @if $p-direction == all {
    padding: $p-amount;
  } @else {
    padding-#{$p-direction}: $p-amount;
  }
}
@function inverse-side($side) {
  @if      $side == top    { @return bottom; }
  @else if $side == bottom { @return top; }
  @else if $side == left   { @return right; }
  @else if $side == right  { @return left; }
}

@mixin linearGradient($gradientLine, $colorStops...) {
  background-image: -webkit-linear-gradient($gradientLine, $colorStops);
  background-image:    -moz-linear-gradient($gradientLine, $colorStops);
  background-image:      -o-linear-gradient($gradientLine, $colorStops);
  @if length($gradientLine) == 2 {
    background-image:         linear-gradient(to #{inverse-side(nth($gradientLine, 1))} #{inverse-side(nth($gradientLine, 2))}, $colorStops);
  } @else {
    background-image:         linear-gradient(to #{inverse-side($gradientLine)}, $colorStops);
  }
}