////
/// Microscope(-sass) animation library.
/// @group animation
////

/// @name Import animation library.
/// @example @import '~microscope-sass/lib/animation';


///
$animation-default-duration-fast: 0.3s !default;
///
$animation-default-duration-medium: 1s !default;
///
$animation-default-duration-slow: 5s !default;
///
$animation-default-delay: 0s !default;
///
$animation-default-function: ease-in-out !default;


/// Animates changes to property using a CSS transition.
///
/// @param {string} $property ['all'] - Property to animate.
/// @param {number} $duration [$animation-default-duration-fast] - The length of time that an animation takes to complete one.
/// @param {number} $delay [$animation-default-delay] - The amount of time to wait before beginning to perform the animation.
/// @param {string} $function [$animation-default-function] - The "animation-timing-function" to use.
@mixin animate($properties: all, $duration: $animation-default-duration-fast, $delay: $animation-default-delay, $function: $animation-default-function) {
  transition: $properties $duration $function $delay;
}


/// Creates a "fade in" animation.
///
/// @param {string} $name - Name of the animation.
/// @param {string} $property ['opacity'] - Property to animate.
/// @param {number} $value-start [0] - Start value.
/// @param {number} $value-end [1] - End value.
/// @param {number} $duration [$animation-default-duration-medium] - The length of time that an animation takes to complete.
/// @param {number} $delay [$animation-default-delay] - The amount of time to wait before beginning to perform the animation.
/// @param {string} $function [$animation-default-function] - The "animation-timing-function" to use.
@mixin fade-in($name, $property: opacity, $value-start: 0, $value-end: 1, $duration: $animation-default-duration-medium, $delay: $animation-default-delay, $function: $animation-default-function) {
  @include keyframes($name, $property, $value-start, $value-end, $duration, $delay, $function);
}


/// Fades on hover.
///
/// @param {string} $name - Name of the animation.
/// @param {string} $property ['opacity'] - Property to animate.
/// @param {number} $value-start [0] - Start value (when not hovered).
/// @param {number} $value-end [0.7] - End value (when hovered).
/// @param {number} $duration [$animation-default-duration-fast] - The length of time that an animation takes to complete.
/// @param {number} $delay [$animation-default-delay] - The amount of time to wait before beginning to perform the animation.
/// @param {string} $function [$animation-default-function] - The "animation-timing-function" to use.
@mixin hover-fade($property: opacity, $value-start: 1, $value-end: 0.7, $duration: $animation-default-duration-fast, $delay: $animation-default-delay, $function: $animation-default-function) {
  @include animate($property, $duration, $delay, $function);
  #{$property}: $value-start;

  &:focus,
  &:hover {
    #{$property}: $value-end;
  }
}


/// Creates a "Ken Burns" animation.
///
/// @param {string} $name - Name of the animation.
/// @param {string} $origin ['center'] - Animation origin.
/// @param {number} $value-start [1] - Start value.
/// @param {number} $value-end [1.1] - End value.
/// @param {number} $duration [$animation-default-duration-medium] - The length of time that an animation takes to complete.
/// @param {number} $delay [$animation-default-delay] - The amount of time to wait before beginning to perform the animation.
/// @param {string} $function [$animation-default-function] - The "animation-timing-function" to use.
@mixin ken-burns($name, $origin: center, $count: infinite, $value-start: 1, $value-end: 1.1, $duration: $animation-default-duration-slow, $delay: $animation-default-delay, $function: $animation-default-function) {
  $duration: $duration * 2; // Duration for each direction.
  @include keyframes($name, transform, scale($value-start), scale($value-end), $duration, $delay, $function);
  animation-direction: alternate;
  animation-iteration-count: $count;
  transform-origin: $origin;
}


/// Creates a keyframes animation.
///
/// @param {string} $name - Name of the animation.
/// @param {string} $property ['opacity'] - Property to animate.
/// @param {number} $value-start [0] - Start value.
/// @param {number} $value-end [1] - End value.
/// @param {number} $duration [$animation-default-duration-medium] - The length of time that an animation takes to complete.
/// @param {number} $delay [$animation-default-delay] - The amount of time to wait before beginning to perform the animation.
/// @param {string} $function [$animation-default-function] - The "animation-timing-function" to use.
@mixin keyframes($name, $property: 'opacity', $value-start: 0, $value-end: 1, $duration: $animation-default-duration-medium, $delay: $animation-default-delay, $function: $animation-default-function) {
  $name: unquote($name);
  animation: $name $duration $function $delay;

  @keyframes #{$name} {
    0% {
      #{$property}: $value-start;
    }
    100% {
      #{$property}: $value-end;
    }
  }
}