/* A menu that opens under its button (<dialog class="popup">, shown
/* non-modal by dialog_controller; layouts/shared/_quick_filter): placed
/* under the button's start edge, inside a `relative` wrapper. Near the
/* window's edge orientation_helpers flips it with .orient-left or
/* .orient-right and nudges it by --orient-offset. The markup draws it
/* (ui(:menu)). */
@layer components {
  .popup {
    inset: calc(100% + calc(var(--spacing) * 1)) auto auto 0;
    margin: 0;
    max-block-size: 70dvh;
    max-inline-size: calc(100vw - calc(var(--spacing) * 4));
    overflow-y: auto;
    position: absolute;
    z-index: var(--z-popup);

    &.orient-left {
      inset-inline: auto 0;
      translate: var(--orient-offset, 0px);
    }

    &.orient-right {
      inset-inline: 0 auto;
      translate: var(--orient-offset, 0px);
    }
  }
}