function getDetachedContainerStyles(openDirection, anchorDirection, referenceEl) {
  const referenceRect = referenceEl.getBoundingClientRect();
  let offsetX = referenceRect.left;
  let offsetY = referenceRect.top;

  if (openDirection === OPEN_UP) {
    offsetY = -(window.innerHeight - referenceRect.bottom);
  }

  if (anchorDirection === ANCHOR_RIGHT) {
    offsetX = -(window.innerWidth - referenceRect.right);
  }

  return {
    transform: `translate3d(${Math.round(offsetX)}px, ${Math.round(offsetY)}px, 0)`,
  };
}
Calculate and return a CSS transform style to position a detached element
next to a reference element. The open and anchor direction indicate wether
it should be positioned above/below and/or to the left/right of the
reference element.

Assuming r(0,0), r(1,1), d(0,0), d(1,1) for the bottom-left and top-right
corners of the reference and detached elements, respectively:
 - openDirection = DOWN, anchorDirection = LEFT => d(0,1) == r(0,1)
 - openDirection = UP, anchorDirection = LEFT => d(0,0) == r(0,0)
 - openDirection = DOWN, anchorDirection = RIGHT => d(1,1) == r(1,1)
 - openDirection = UP, anchorDirection = RIGHT => d(1,0) == r(1,0)

By using a CSS transform, we allow to further position it using
top/bottom CSS properties for the anchor gutter.

@param {string} openDirection The vertical positioning of the popup
@param {string} anchorDirection The horizontal position of the popup
@param {HTMLElement} referenceEl The reference element