/* ************************************************** */
/* #region ACTIVATORS                                 */
/* ************************************************** */

.popover-activator:has(+ [popover]:popover-open) {
    background-color: var(--bg-color-hover);
    color: var(--text-color-hover);
}

/* #endregion */

/* ************************************************** */
/* #region POPOVER - GENERAL                          */
/* ************************************************** */

[popover] {
    appearance: none;
    isolation: isolate;
    flex-direction: column;
    padding: 0;
    background-color: var(--bg-color);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-color);
    overflow: visible;
}

[popover]:popover-open {
    display: flex;
}

[popover]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--bg-color);
    border: 0;
    border-radius: var(--border-radius);
    pointer-events: none;
    will-change: opacity;
    z-index: -1;
}

[popover]::after {
    content: "";
    position: absolute;
    top: var(--shadow-y);
    left: var(--shadow-x);
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius);
    pointer-events: none;
    will-change: opacity;
    z-index: -2;

    /* ===== Linear Halftone ===== */
    background-image: radial-gradient(
        circle at center, 
        var(--border-color) var(--dot-size), 
        transparent calc(var(--dot-size) + 0px)
    );
    background-size: var(--dot-space) var(--dot-space);

    /* ===== Hex Halftone ===== */
    background-image: 
        radial-gradient(circle at center, var(--border-color) var(--dot-size), transparent calc(var(--dot-size) + 0px)),
        radial-gradient(circle at center, var(--border-color) var(--dot-size), transparent calc(var(--dot-size) + 0px));
    background-size: var(--dot-space) var(--dot-space);
    /* Offset the second gradient by half the spacing */
    background-position: 
        0 0,
        calc(var(--dot-space) / 2) calc(var(--dot-space) / 2);
}

/* #endregion */

/* ************************************************** */
/* #region DROPDOWN MENU                              */
/* ************************************************** */

dropdown-menu {
    inset: unset;
    min-width: 120px;
    margin: 0;
    margin-top: 4px;
    margin-bottom: var(--grid-gap);
    margin-right: var(--grid-gap);

    position-area: block-end span-inline-end;
    position-try-fallbacks: flip-block, flip-inline, flip-inline flip-block;
}

dropdown-menu:popover-open {
    outline: auto;
}

/* #endregion */

/* ************************************************** */
/* #region MULTI-SELECT POPOVERS                      */
/* ************************************************** */

.multi-select-options-wrapper  {
    width: 100%;
    height: 100%;
    overflow: auto;
}

/* #endregion */

/* ************************************************** */
/* #region TOOLTIP                                    */
/* ************************************************** */

.tooltip-popover {
    padding: 4px 8px;
    box-shadow: none;
}

.custom-enhancements-popover-hint {
    padding: 0.5em;
}

/* #endregion */

/* ************************************************** */
/* #region ERRORS                                     */
/* ************************************************** */

.popover-error-message {
    display: none;
    padding: 8px;
    color: red;
}

/* #endregion */

/* ************************************************** */
/* #region ANCHORING                                  */
/* ************************************************** */

.submenu-popover {
    margin-left: 12px;
    position-area: span-block-end inline-end;
    position-try-fallbacks: flip-inline, flip-block, flip-inline flip-block;
}

/* #endregion */