@use 'sass:list';

// For accessibility, we need to respect the user's prefers-reduced-motion setting.
// Find out more: https://css-tricks.com/introduction-reduced-motion-media-query/
@mixin transition($properties, $duration: 0.2s, $ease: ease-in-out, $delay: 0s) {
  @media (prefers-reduced-motion: no-preference) {
    $transition: ();

    @for $property from 1 through length($properties) {
      @for $i from 0 to (length($properties)) - (length($duration)) {
        $duration: list.join($duration, list.nth($duration, -1));
      }

      @for $i from 0 to (length($properties)) - (length($ease)) {
        $ease: list.join($ease, list.nth($ease, -1));
      }

      @for $i from 0 to (length($properties)) - (length($delay)) {
        $delay: list.join($delay, list.nth($delay, -1));
      }

      $transition: list.append(
        $transition,
        (
          list.nth($properties, $property)
            list.nth($duration, $property)
            list.nth($ease, $property)
            list.nth($delay, $property)
        ),
        $separator: comma
      );
    }

    transition: $transition;
  }
}
