﻿/* Dropdown portal — renders as a fixed overlay outside all overflow:hidden ancestors */

.nx-dropdown-portal {
    position: fixed;
    z-index: 9000; /* above dialogs (2000) and notifications */
    box-sizing: border-box;
    pointer-events: auto;
}

    /* When flipped above, use bottom positioning instead of top */
    .nx-dropdown-portal.nx-dropdown-portal-above .nx-input-dropdown {
        display: flex;
        flex-direction: column-reverse;
    }

    /* Re-apply dropdown styles inside the portal.
   These mirror .nx-input .nx-input-dropdown from nx-input.css but
   the dropdown is no longer a child of .nx-input, so we scope to the portal. */
    .nx-dropdown-portal .nx-input-dropdown {
        position: static; /* portal container handles placement */
        max-height: 200px;
        overflow-y: auto;
        background-color: var(--nx-tertiary-bg);
        border-radius: var(--nx-border-radius);
        box-shadow: var(--nx-box-shadow);
        padding: var(--nx-space-small);
        border: var(--nx-border-width) solid var(--nx-border-color);
        font-family: var(--nx-font);
        color: var(--nx-primary-fg);
        margin: 0;
        list-style: none;
    }

        .nx-dropdown-portal .nx-input-dropdown li {
            padding: var(--nx-space-small) var(--nx-space);
            cursor: pointer;
            list-style: none;
        }

        .nx-dropdown-portal .nx-input-dropdown .highlighted {
            background-color: var(--nx-highlight-bg);
            font-weight: bold;
        }

        .nx-dropdown-portal .nx-input-dropdown li:hover {
            background-color: var(--nx-highlight-bg);
        }

        .nx-dropdown-portal .nx-input-dropdown .nx-item-caption {
            font-size: 0.8rem;
            font-style: italic;
            padding-left: var(--nx-space-small);
            padding-right: var(--nx-space-small);
            font-weight: normal;
            opacity: 0.7;
            color: var(--nx-muted-fg);
        }

    .nx-dropdown-portal .muted {
        color: var(--nx-muted-fg);
    }
