/* Hide menu until it finishes loading https://mmenujs.com/support/tips-and-tricks.html */
#vertical-menu:not(.mm-menu) {
    display: none;
}

#vertical-menu {
    width: 40%;
    min-width: 300px;
}

/* the recommended way to change styles is through css variables where supported; see docs at https://mmenujs.com/docs/core/scss.html */
/* otherwise, to overwwrite other mmenujs styles we need to include css with 2 or more selector types to gain a higher specificity. */
#vertical-menu .mm-navbar {
    --mm-navbar-size: 36px;
    --mm-color-background: #656565;
    --mm-color-text-dimmed: #fff;
    --mm-color-button: #fff;
}

.mm-navbar > * {
    /* disable plugin min height for these elemens */
    min-height: inherit;
}

/* underlining of the navbar username 'link' */
#vertical-menu .mm-navbar .link-text {
    text-decoration: underline;
}

#vertical-menu .mm-navbar:hover .link-text,
#vertical-menu .mm-navbar:focus .link-text,
#vertical-menu .mm-navbar:active .link-text {
    text-decoration: none;
}


#vertical-menu .mm-panel {
    --mm-listitem-size: 26px;
    --mm-color: #656565;
    --mm-color-button: #656565;
}

#vertical-menu .mm-listitem__text {
    display: flex;
    align-items: center;
}

/* highlight/focus color */
#vertical-menu .mm-btn, #vertical-menu a.mm-listitem__text {
    --mm-color-background-emphasis: #d3d3d3;
}

/* PROD-8832 allow highlighting by adding js class*/
#vertical-menu .js-highlight {
    background-color: #d3d3d3;
}

/* Get rid of menu item hover animation */
.mm-menu_selected-hover .mm-listitem__btn,
.mm-menu_selected-hover .mm-listitem__text,
.mm-menu_selected-parent .mm-listitem__btn,
.mm-menu_selected-parent .mm-listitem__text {
    -webkit-transition: background-color 0s ease;
    -o-transition: background-color 0s ease;
    transition: background-color 0s ease;
}

/* Make headers bold, and remove highlighting on click */
#vertical-menu .mm-navbar, #vertical-menu .mm-navbar .mm-btn_prev {
    font-weight: bold;
    --mm-color-background-emphasis: #656565;
}

#vertical-menu .mm-listitem:after {
    /* get rid of default separator */
    border-bottom-width: 0;
}

/* non-clickable header items */
#vertical-menu .mm-listitem > span {
    font-weight: bold;
    border-top: 1px solid gainsboro;
    padding-top: 8px;
    padding-bottom: 4px;
}

/* add top margin to all headers minus first header */
#vertical-menu .mm-listitem:not(:first-child) > span {
    margin-top: 12px;
}

/* add margin between first list item and navbar if no header present */
#vertical-menu .mm-listitem:first-child > a {
    margin-top: 4px;
}