const PORTAL_ID = 'recomaze-portal';

/**
 * The element floating UI (dialogs, popovers, selects, tooltips) renders into.
 *
 * It lives directly under <body>, outside the app frame's layout containment
 * and above the wp-admin chrome (see #recomaze-portal in tailwind.css), and
 * carries the same `recomaze-ui` class as the app root so the scoped reset
 * and the tokens apply to portaled content too.
 *
 * @returns {HTMLElement}
 */
export function getPortalContainer(): HTMLElement {
  let container = document.getElementById(PORTAL_ID);
  if (container) {
    return container;
  }

  container = document.createElement('div');
  container.id = PORTAL_ID;
  container.className = 'recomaze-ui';
  document.body.appendChild(container);

  return container;
}