/* Canonical reveal motion for button-triggered menus across public and ops tools. */
:root {
  --ceangal-menu-reveal-duration: 180ms;
  --ceangal-menu-reveal-distance: 5px;
  --ceangal-menu-reveal-scale: .985;
  --ceangal-menu-reveal-easing: cubic-bezier(.22, .72, .2, 1);
}

@keyframes ceangal-menu-reveal {
  from {
    opacity: 0;
    transform: translateY(calc(-1 * var(--ceangal-menu-reveal-distance))) scale(var(--ceangal-menu-reveal-scale));
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

:where(
  .custom-select > .custom-select-menu,
  .ops-select > .ops-select-menu,
  .editor-select > .editor-select-menu,
  .ops-more-menu > div
) {
  transition: none !important;
}

:where(
  .custom-select.open > .custom-select-menu,
  .ops-select.open > .ops-select-menu,
  .editor-select.open > .editor-select-menu,
  .ops-more-menu[open] > div
) {
  animation: ceangal-menu-reveal var(--ceangal-menu-reveal-duration) var(--ceangal-menu-reveal-easing) both;
  transform-origin: top center;
}

:where(.ops-more-menu.open-up[open] > div) {
  transform-origin: bottom center;
}

@media (prefers-reduced-motion: reduce) {
  :where(
    .custom-select.open > .custom-select-menu,
    .ops-select.open > .ops-select-menu,
    .editor-select.open > .editor-select-menu,
    .ops-more-menu[open] > div
  ) {
    animation: none !important;
  }
}