@function prefix($property, $prefixes: webkit moz o ms) {
  $vendor-prefixed-properties: transform background-clip background-size;
  $result: ();

  @each $prefix in $prefixes {
    @if index($vendor-prefixed-properties, $property) {
      $property: -#{$prefix}-#{$property};
    }

    $result: append($result, $property);
  }

  @return $result;
}

@function trans-prefix($transition, $prefix: moz) {
  $prefixed: ();

  @each $trans in $transition {
    $prop-name: nth($trans, 1);
    $vendor-prop-name: prefix($prop-name, $prefix);
    $prop-vals: nth($trans, 2);
    $prefixed: append($prefixed, $vendor-prop-name $prop-vals, comma);
  }

  @return $prefixed;
}

@mixin transition($values...) {
  $transitions: ();

  @each $declaration in $values {
    $prop: nth($declaration, 1);
    $prop-opts: ();
    $length: length($declaration);

    @for $i from 2 through $length {
      $prop-opts: append($prop-opts, nth($declaration, $i));
    }

    $trans: $prop, $prop-opts;
    $transitions: append($transitions, $trans, comma);
  }

  -webkit-transition: trans-prefix($transitions, webkit);
  -moz-transition: trans-prefix($transitions, moz);
  -o-transition: trans-prefix($transitions, o);
  transition: $values;
}

@mixin prefix($property, $value, $prefixes: ()) {
  @each $prefix in $prefixes {
    #{"-" + $prefix + "-" + $property}: $value;
  }

  #{$property}: $value;
}

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

  &:-moz-placeholder {
    @content;
  }

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

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

@keyframes loading-animation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes loading-animation {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
  }
}