/* ************************************************** */
/* #region PORTAL CONTAINER                           */
/* ************************************************** */

.portal-container {
    flex: 1;
    display: flex;
    position: relative;
    width: 100%;
    pointer-events: none;
}

body:has(.panel.dragging) .portal-container {
    contain: size;
}

/* #endregion */

/* ************************************************** */
/* #region PORTAL                                     */
/* ************************************************** */

.portal {
    position: fixed;
    margin: 0;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    pointer-events: auto;
}

.portal[data-portal-visibility="visible"] {
    position-anchor: none;  /* overridden inline per-instance via _anchorToPlaceholder() */
    top: anchor(top);
    left: anchor(left);
    width: anchor-size(width);
    height: anchor-size(height);
    z-index: 1;
}

.portal[data-portal-visibility="hidden"] {
    top: var(--portal-hidden-top, 0px);
    left: var(--portal-hidden-left, 0px);
    width: var(--portal-hidden-width, 0px);
    height: var(--portal-hidden-height, 0px);
    visibility: hidden;
}

/* Remove dithered shadow on popovers since host is a popover */
[popover].portal::before,
[popover].portal::after {
    content: none;
}

/* #endregion */