.topMenuItem {
    position: relative;
    }
.topMenuItem a {
    gap: var(--Gap-xs);
    color: var(--Header-Texts);
}
.topMenuItem a:hover {
    color: var(--Header-Texts-Active);
}
.topMenuItem a.selected {
    color: var(--Header-Texts-Active);
    font-weight: 700;
}

.topMenuItem:hover::after { /* prevent closing of sub-menu when mouse move out of .topMenuItem  */
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    height: 21px;
    width: 180px;
    pointer-events: auto;
    background-color: transparent;
}
.topMenuItem.disabled a {
    color: var(--Text-Semantic-Disabled);
    pointer-events: none;
    cursor: default;
}
.topMenuItem:hover .sub-menu {
    display: flex;
}    
.topMenuItem .sub-menu {
    position: absolute;
    top: 43px;
    left: 50%;
    width: 180px;
    padding: var(--Padding-md);
    background-color: var(--Header-Background);
    transform: translateX(-50%);
    border-radius: 0 0 var(--Radius-custom) var(--Radius-custom);
    background: var(--Header-Background);
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--Gap-sm);
    z-index: 2;
}
.topMenuItem .sub-menu .divider {
    background-color: var(--Divider-On-Dark);
}


.topMenuItem:has(.sub-menu a.selected) > a {
    color: var(--Header-Texts-Active);
    font-weight: 700;
}