$slide-distance: 8px;
$open-duration-ms: 300;
$exit-duration-ms: 200;
$menu-easing: cubic-bezier(0.25, 1, 0.5, 1);

/* Component tokens that resolve differently in the odeditor theme,
   re-emitted with the odeditor resolution as the middle fallback. */
$dropdown-list-paddings: var(--wds-dropdown-list-paddings, var(--wds-space-200, 0));

.input-with-options {
  &__dropdown-layout {
    padding: $dropdown-list-paddings;
  }

  @container style(--wds-internal-theme: odeditor) {
    &__input-container {
      --wds-internal-menu-exit-duration: #{$exit-duration-ms};
    }

    &__menu-container {
      animation: input-with-options-menu-open #{$open-duration-ms}ms $menu-easing;
    }

    &__menu-container--direction-up {
      animation-name: input-with-options-menu-open-up;
    }

    /* forwards: the content stays mounted a beat after the animation
       ends — hold the faded-out frame instead of flashing back */
    &__menu-container--closing {
      animation: input-with-options-menu-close #{$exit-duration-ms}ms $menu-easing forwards;
    }

    &__menu-container--closing#{&}__menu-container--direction-up {
      animation-name: input-with-options-menu-close-up;
    }

    @media (prefers-reduced-motion) {
      &__menu-container,
      &__menu-container--direction-up {
        animation-name: input-with-options-menu-fade;
      }

      &__menu-container--closing,
      &__menu-container--closing#{&}__menu-container--direction-up {
        animation-name: input-with-options-menu-fade-out;
      }
    }
  }
}

/* Open keyframes: implicit `to` is the resting state (opacity 1, no
   transform). Close keyframes: implicit `from` is the resting state. */

@keyframes input-with-options-menu-open {
  from {
    opacity: 0;
    transform: translateY(-$slide-distance);
  }
}

@keyframes input-with-options-menu-open-up {
  from {
    opacity: 0;
    transform: translateY($slide-distance);
  }
}

@keyframes input-with-options-menu-close {
  to {
    opacity: 0;
    transform: translateY(-$slide-distance);
  }
}

@keyframes input-with-options-menu-close-up {
  to {
    opacity: 0;
    transform: translateY($slide-distance);
  }
}

@keyframes input-with-options-menu-fade {
  from {
    opacity: 0;
  }
}

@keyframes input-with-options-menu-fade-out {
  to {
    opacity: 0;
  }
}