/* *****************************************************************************
*
*  Transition mixins
*
* ***************************************************************************** */

@mixin transitions($transitions...) {
  $unfoldedTransitions: ();
  $unfoldTransitionProperty: ();

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

  transition: $unfoldedTransitions;
  will-change: $unfoldTransitionProperty;
}


@mixin hover-transition-to($transitionElem, $transitionValue, $transitionTime: $transition-time-base, $transitionEasing: ease-out) {
  transition: $transitionElem $transition-time-short $transitionEasing;
  will-change: $transitionElem;

  @include hover-focus {
    #{$transitionElem}: $transitionValue;
    transition-duration: $transitionTime;
  }

  @include plain-hover-focus {
    cursor: pointer;
  }
}

@mixin hover-transition-from-to($transitionElem, $initValue, $transitionValue, $transitionTime: 0.1s, $transitionEasing: ease-out) {
  #{$transitionElem}: $initValue;
  @include hover-transition-to($transitionElem, $transitionValue, $transitionTime, $transitionEasing)
}