/* keep durations in sync with swooshDuration in constants.ts */
$swoosh-slide-duration: 833ms;
$swoosh-stretch-duration: 333ms;
$swoosh-fade-duration: 100ms;

$swoosh-slide-easing: cubic-bezier(0.3, 0.5, 0, 1);
$swoosh-stretch-easing: cubic-bezier(0.17, 0.17, 0, 1);
$swoosh-fade-out-easing: cubic-bezier(0.26, 0, 0.67, 1);

$swoosh-offset: 30px;
$swoosh-squash: 0.93;

/* per entry edge: drift offset, travel-axis stretch, stretch anchor */
$swoosh-edges: (
  left: (translateX(-$swoosh-offset), x, left center),
  right: (translateX($swoosh-offset), x, right center),
  top: (translateY(-$swoosh-offset), y, center top),
  bottom: (translateY($swoosh-offset), y, center bottom),
);

@keyframes transition-swoosh-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes transition-swoosh-fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes transition-swoosh-stretch-x-in {
  from {
    scale: $swoosh-squash 1;
  }

  to {
    scale: 1 1;
  }
}

@keyframes transition-swoosh-stretch-y-in {
  from {
    scale: 1 $swoosh-squash;
  }

  to {
    scale: 1 1;
  }
}

@keyframes transition-swoosh-stretch-x-out {
  from {
    scale: 1 1;
  }

  to {
    scale: $swoosh-squash 1;
  }
}

@keyframes transition-swoosh-stretch-y-out {
  from {
    scale: 1 1;
  }

  to {
    scale: 1 $swoosh-squash;
  }
}

@each $edge, $def in $swoosh-edges {
  @keyframes transition-swoosh-slide-#{$edge}-in {
    from {
      transform: nth($def, 1);
    }

    to {
      transform: translate(0);
    }
  }

  @keyframes transition-swoosh-slide-#{$edge}-out {
    from {
      transform: translate(0);
    }

    to {
      transform: nth($def, 1);
    }
  }
}

.transition {
  @each $edge, $def in $swoosh-edges {
    &#{&}--swoosh-#{$edge} {
      width: fit-content;
      transform-origin: nth($def, 3);

      animation: transition-swoosh-fade-in $swoosh-fade-duration linear backwards,
        transition-swoosh-slide-#{$edge}-in $swoosh-slide-duration $swoosh-slide-easing backwards,
        transition-swoosh-stretch-#{nth($def, 2)}-in $swoosh-stretch-duration $swoosh-stretch-easing backwards;
    }

    /* forwards keeps the exited content hidden until the group unmounts it */
    &#{&}--swoosh-exit-#{$edge} {
      width: fit-content;
      transform-origin: nth($def, 3);

      animation: transition-swoosh-fade-out $swoosh-fade-duration $swoosh-fade-out-easing forwards,
        transition-swoosh-slide-#{$edge}-out $swoosh-slide-duration $swoosh-slide-easing forwards,
        transition-swoosh-stretch-#{nth($def, 2)}-out $swoosh-stretch-duration $swoosh-stretch-easing forwards;
    }
  }

  @media (prefers-reduced-motion) {
    @each $edge, $def in $swoosh-edges {
      &#{&}--swoosh-#{$edge} {
        animation: transition-swoosh-fade-in $swoosh-fade-duration linear backwards;
      }

      &#{&}--swoosh-exit-#{$edge} {
        animation: transition-swoosh-fade-out $swoosh-fade-duration $swoosh-fade-out-easing forwards;
      }
    }
  }
}