@mixin css-prefix($property, $value) {
  -webkit-#{$property}: #{$value};
  -khtml-#{$property}: #{$value};
  -moz-#{$property}: #{$value};
  -ms-#{$property}: #{$value};
  -o-#{$property}: #{$value};
  #{$property}: #{$value};
}

@mixin animation($str) {
  @include css-prefix(animation, $str);
}

@mixin background-gradient($direction, $startColor, $startColorAmount, $endColor, $endColorAmount) {
  background-color: $startColor;
  background: linear-gradient($direction, $startColor $startColorAmount, $endColor $endColorAmount);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}', endColorStr='#{$endColor}');
}

@mixin placeholder {
  &::-webkit-input-placeholder {
    @content;
  }

  &:-moz-placeholder {
    @content;
  }

  &::-moz-placeholder {
    @content;
  }

  &:-ms-input-placeholder {
    @content;
  }
}

@mixin text-overflow-ellipsis {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: normal;
  white-space: nowrap;
}

@mixin box-shadow {
  box-shadow: 0.5rem 0.9rem 1.5rem rgba(0, 0, 0, 0.25);
}

@mixin spinner-colour($colour) {
  border-color: $colour;
  border-right-color: transparent;
}

@mixin icon($unicode) {
  content: $unicode;
  font-family: $font-stack-icons;
  font-weight: 900;
}