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

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

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

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

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

// If the mat-animation-noop class is present on the components root element,
// prevent non css animations from running.
// NOTE: Currently this mixin should only be used with components that do not
// have any projected content.
@mixin _noop-animation() {
  // @at-root is used to steps outside of the hierarchy of the scss rules. This is
  // done to allow a class to be added to be added to base of the scss nesting
  // context.
  // For example:
  // .my-root {
  //   .my-subclass {
  //      @include _noop-animation();
  //    }
  // }
  // results in:
  // ._mat-animation-noopable.my-root .my-subclass { ... }
  @at-root ._uex-animation-noopable#{&} {
    transition: none;
    animation: none;
    @content;
  }
}