/*
 * rx-menu.css
 * Domain drop-down navigation and secondary object navigation.
 */

.rx-navbar-menu
{
    position: relative;
    z-index: 50;
    flex: 0 0 auto;

    background: var(--rx-nav-bg);
    border-bottom: 1px solid var(--rx-nav-border);
}

.rx-navbar-menu > ul,
.rx-object-menu > ul
{
    display: flex;
    align-items: center;

    gap: 2px;

    list-style: none;
    margin: 0;
    padding: 4px 10px;
}

.rx-navbar-menu li,
.rx-object-menu li
{
    list-style: none;
    margin: 0;
    padding: 0;
}

.rx-menu-link
{
    display: block;
    text-decoration: none;
    border-radius: 4px;
}

.rx-navbar-menu > ul > li > .rx-menu-link
{
    padding: 7px 28px 7px 12px;

    color: #e8eef3;
    font-size: 0.91rem;
    font-weight: 500;
}

.rx-menu-domain-link
{
    position: relative;
}

.rx-menu-domain-link::after
{
    content: "▾";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-52%);
    font-size: 0.72rem;
}

.rx-navbar-menu > ul > li > .rx-menu-link:hover,
.rx-navbar-menu > ul > li > .rx-menu-link:focus
{
    color: #ffffff;
    background: var(--rx-nav-hover);
    outline: none;
}

.rx-navbar-menu > ul > li > .rx-menu-link.active
{
    color: #ffffff;
    background: var(--rx-primary);
}

.rx-menu-dropdown
{
    position: relative;
}

.rx-menu-submenu
{
    display: none;
    position: absolute;
    left: 0;
    top: 100%;

    min-width: 220px;
    margin: 0;
    padding: 5px;

    background: #ffffff;
    border: 1px solid var(--rx-border);
    border-radius: 5px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.rx-menu-dropdown:hover > .rx-menu-submenu,
.rx-menu-dropdown:focus-within > .rx-menu-submenu
{
    display: block;
}

.rx-menu-submenu-link
{
    display: block;
    padding: 7px 10px;

    color: var(--rx-text);
    text-decoration: none;
    font-size: 0.88rem;
    white-space: nowrap;

    border-radius: 3px;
}

.rx-menu-submenu-link:hover,
.rx-menu-submenu-link:focus
{
    color: var(--rx-primary-hover);
    background: var(--rx-primary-soft);
    outline: none;
}

.rx-menu-submenu-link.active
{
    color: #ffffff;
    background: var(--rx-primary);
}

.rx-object-menu
{
    flex: 0 0 auto;

    background: var(--rx-surface-soft);
    border-bottom: 1px solid var(--rx-border);
}

.rx-object-menu .rx-menu-link
{
    padding: 6px 11px;

    color: var(--rx-text-muted);
    font-size: 0.86rem;
    font-weight: 550;
}

.rx-object-menu .rx-menu-link:hover,
.rx-object-menu .rx-menu-link:focus
{
    color: var(--rx-text);
    background: var(--rx-secondary-soft);
    outline: none;
}

.rx-object-menu .rx-menu-link.active
{
    color: var(--rx-primary-hover);
    background: var(--rx-primary-soft);
    font-weight: 650;
}

/* Optional generic RX menu classes for other applications. */
.rx-menu
{
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 4px 10px;
    list-style: none;
    background: var(--rx-nav-bg);
}

.rx-menu a
{
    display: block;
    padding: 7px 12px;
    color: #ffffff;
    text-decoration: none;
    border-radius: 4px;
}

.rx-menu a:hover,
.rx-menu .active
{
    background: var(--rx-nav-hover);
}

@media (max-width: 800px)
{
    .rx-navbar-menu > ul,
    .rx-object-menu > ul,
    .rx-menu
    {
        flex-wrap: wrap;
    }

    .rx-menu-submenu
    {
        min-width: 190px;
    }
}