.popup-menu:not(.popup-menu--form) { font-size: 1.4rem; }

.popup-menu--outside-right\@desktop { left: 100%; }
.popup-menu--outside-left\@desktop { right: 100%; }

/* Loading state for when we're ajaxing in the popup menu's content */
turbo-frame.popup-menu[busy] {
  min-height: 8rem;

  &::before,
  &::after {
    content: "";
    position: absolute;
    top: 45%;
    left: 50%;
    margin-left: -1.7rem;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--color-bg--main);
    border-radius: 100%;
    display: inline-block;
    animation: spinner-bounce 1.4s infinite ease-in-out both;
  }

  &::after {
    animation-delay: -0.25s;
    margin-left: 0.2rem;
  }

  &:not(:empty) {
    &::before,
    &::after {
      opacity: 0;
    }
  }
}