$grow-directions: (
  'top': (bottom, y),
  'left': (right, x),
  'right': (left, x),
);

.popover-menu {
  &__popover-content#{&}__popover-content .popover-next-content__content-wrapper {
    padding: var(--wds-popover-menu-paddings-vertical, var(--wds-space-200)) var(--wds-popover-menu-paddings-horizontal, var(--wds-space-200));
    border-radius: var(--wds-popover-menu-border-radius, var(--wds-border-radius-600));
  }

  @container style(--wds-internal-theme: odeditor) {
    @keyframes popover-menu-panel-grow-y {
      from {
        transform: scaleY(0.9);
      }

      to {
        transform: none;
      }
    }

    @keyframes popover-menu-panel-shrink-y {
      from {
        transform: none;
      }

      to {
        transform: scaleY(0.9);
      }
    }

    @keyframes popover-menu-panel-grow-x {
      from {
        transform: scaleX(0.9);
      }

      to {
        transform: none;
      }
    }

    @keyframes popover-menu-panel-shrink-x {
      from {
        transform: none;
      }

      to {
        transform: scaleX(0.9);
      }
    }

    @keyframes popover-menu-content-in {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    &__popover-content.popover-next-content--status-open .popover-next-content__content-wrapper {
      transform-origin: top;
      animation: popover-menu-panel-grow-y 240ms cubic-bezier(0, 0, 0.25, 1);
    }

    &__popover-content.popover-next-content--status-open .popover-next-content__content-wrapper > div {
      animation: popover-menu-content-in 200ms cubic-bezier(0, 0, 0.2, 1) 50ms backwards;
    }

    &__popover-content.popover-next-content--status-close {
      transition: opacity 90ms cubic-bezier(0.4, 0, 1, 1) 30ms;
    }

    &__popover-content.popover-next-content--status-close .popover-next-content__content-wrapper {
      transform-origin: top;
      animation: popover-menu-panel-shrink-y 120ms cubic-bezier(0.4, 0, 1, 1) both;
    }

    @each $side, $config in $grow-directions {
      $origin: nth($config, 1);
      $axis: nth($config, 2);

      &__popover-content.popover-next-content--status-open.popover-next-content--placement-#{$side} .popover-next-content__content-wrapper,
      &__popover-content.popover-next-content--status-open.popover-next-content--placement-#{$side}-start .popover-next-content__content-wrapper,
      &__popover-content.popover-next-content--status-open.popover-next-content--placement-#{$side}-end .popover-next-content__content-wrapper {
        transform-origin: $origin;
        animation: popover-menu-panel-grow-#{$axis} 240ms cubic-bezier(0, 0, 0.25, 1);
      }

      &__popover-content.popover-next-content--status-close.popover-next-content--placement-#{$side} .popover-next-content__content-wrapper,
      &__popover-content.popover-next-content--status-close.popover-next-content--placement-#{$side}-start .popover-next-content__content-wrapper,
      &__popover-content.popover-next-content--status-close.popover-next-content--placement-#{$side}-end .popover-next-content__content-wrapper {
        transform-origin: $origin;
        animation: popover-menu-panel-shrink-#{$axis} 120ms cubic-bezier(0.4, 0, 1, 1) both;
      }
    }

    @media (prefers-reduced-motion) {
      &__popover-content#{&}__popover-content.popover-next-content--status-open .popover-next-content__content-wrapper,
      &__popover-content#{&}__popover-content.popover-next-content--status-close .popover-next-content__content-wrapper {
        animation: none;
      }
    }
  }
}