/* *****************************************************************************
*
*   Transition functions
*
*   Usage:   @include transition(width, height 0.3s ease-in-out);
*   Output:  transition: width 0.2s, height 0.3s ease-in-out;
*            will-change: width, height;
*
* ***************************************************************************** */

// Pass in any number of transitions
@function unfoldTransition ($transition) {
  // Default values
  $property: all;
  $duration: $transition-time-base;
  $easing: ease-out;
  $delay: null; // Browser default is 0, which is what we want
  $defaultProperties: ($property, $duration, $easing, $delay);

  // 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;
}

@function unfoldTransitionProperty ($transition) {
  // Default values
  $property: all;
  $defaultProperties: ($property);

  // 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;
}