//
// Design System : MOTION
//

//
// VARIABLES
//

// Animations (from mdl http://www.getmdl.io/)
$animation-curve-fast-out-slow-in: cubic-bezier(.4, 0, .2, 1) !default;
$animation-curve-linear-out-slow-in: cubic-bezier(0, 0, .2, 1) !default;
$animation-curve-fast-out-linear-in: cubic-bezier(.4, 0, 1, 1) !default;
$animation-curve-default: $animation-curve-fast-out-slow-in !default;

//
// MIXINS
//

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

  @media screen and (prefers-reduced-motion: reduce) {
    transition: none;
  }
}

@mixin material-animation-fast-out-slow-in($duration:.2s) {
  transition-timing-function: $animation-curve-fast-out-slow-in;
  transition-duration: $duration;
}

@mixin material-animation-linear-out-slow-in($duration:.2s) {
  transition-timing-function: $animation-curve-linear-out-slow-in;
  transition-duration: $duration;
}

@mixin material-animation-fast-out-linear-in($duration:.2s) {
  transition-timing-function: $animation-curve-fast-out-linear-in;
  transition-duration: $duration;
}

@mixin material-animation-default($duration:.2s) {
  transition-timing-function: $animation-curve-default;
  transition-duration: $duration;
}