@mixin mu-transitions(
  $pseudo: (),
  $responsive: (),
  $values: (
    transform: transform,
    color: color
  ),
  $shifts: $mu-default-shifts,
  $easings: $mu-default-easings
) {
  $transition: "";
  $transitions-map: ();
  @each $key, $value in $values {
    $transitions-map: map-merge($transitions-map, (--#{$key}: auto 0s linear));
    $i: index($key, $values);
    $transition: #{$transition + var(--#{$key})};
    @if ($i != 0) {
      $transition: #{$transition + ", "};
    }
  }
  @include mu-create-utility(
    u-shiftable,
    map-merge(
      $transitions-map,
      (
        transition: $transition
      )
    ),
    $pseudo,
    $responsive
  );
  @each $key, $value in $values {
    @each $shift-key, $shift-value in $shifts {
      @each $easing-key, $easing-value in $easings {
        @include mu-create-utility(
          u-shift-#{$key}-#{$shift-key}-#{$easing-key},
          (--#{$key}: #{$value} #{$shift-value} #{$easing-value}),
          $pseudo,
          $responsive
        );
      }
    }
  }
}