@import "./durations";
@import "./easings";

@mixin ca-transition-fade($state: in, $duration: $ca-duration-slow, $delay: 0) {
  @include ca-fade($state, $duration: $duration, $delay: $delay);
}

@mixin ca-transition-slide-fade(
  $state: in,
  $duration: $ca-duration-slow,
  $delay: null
) {
  $direction: up;
  $timing: $ca-bounce-in;

  @if ($state == out) {
    $direction: down;
    $timing: $ca-bounce-out;
  }

  @include ca-slide(
    $direction: $direction,
    $fade: true,
    $timing: $timing,
    $duration: $duration,
    $delay: $delay
  );
}

@mixin ca-transition-scale-fade(
  $state: in,
  $duration: $ca-duration-slow,
  $delay: null
) {
  $timing: $ca-bounce-in;

  @if ($state == out) {
    $timing: $ca-bounce-out;
  }

  @include ca-zoom(
    $state,
    $timing: $timing,
    $duration: $duration,
    $delay: $delay
  );
}

////////////////////////////////////////
// Transition utilities
////////////////////////////////////////

@function unfoldTransition($transition) {
  $property: all;
  $duration: $ca-duration-rapid;
  $easing: $ca-ease-in-out;
  $defaultProperties: ($property, $duration, $easing);

  // Grab transition properties if they exist
  $unfoldedTransition: ();

  @for $i from 1 through length($defaultProperties) {
    $p: null;
    @if $i <= length($transition) {
      $p: nth($transition, $i);
    } @else {
      $p: nth($defaultProperties, $i);
    }
    $unfoldedTransition: append($unfoldedTransition, $p);
  }

  @return $unfoldedTransition;
}

// Mixin for aplying mutliple transitions
// https://gist.github.com/tobiasahlin/7a421fb9306a4f518aab
@mixin transition($transitions...) {
  $unfoldedTransitions: ();

  @each $transition in $transitions {
    $unfoldedTransitions: append(
      $unfoldedTransitions,
      unfoldTransition($transition),
      comma
    );
  }

  transition: $unfoldedTransitions;
}