/* Панель доп. элементов в главном меню */

#call-menu.main-nav {
    z-index: 10;
}

/* Пункт меню */
#call-menu.main-nav > ul.menu.sf-menu {
    display: flex;
}

#call-menu.main-nav > .menu.sf-menu > .menu-item > a {
    border-radius: 9999px;
    border: 2px solid var(--accent);
    background-color: var(--contrast);
    z-index: 1;
    font-weight: 700;
    color: var(--base-2);
}

/* при наведении */
#call-menu.main-nav > .menu.sf-menu > .menu-item:hover > a {
    background-color: var(--accent);
}

/* Панель подменю */
#call-menu.main-nav > .menu.sf-menu > .menu-item > .sub-menu {
    z-index: 0;
    right: 0;

    padding: 3em 0;
    margin-top: -2em;
    margin-right: 1em;

    border: 2px solid var(--accent);
    border-radius: 50px;

    display: block;
    opacity: 0;
    max-height: 0;
    width: max-content;

}
/* если активна */
#call-menu.main-nav > .menu.sf-menu > .menu-item > .sub-menu.toggled-on {
    transition-delay: 0s;
    transition-duration: 0.3s;
    transition-property: all;
    transition-timing-function: ease-in-out, ease-in-out;

    opacity: 1;
    height: auto;
    max-height: 1000px;
    overflow: hidden;
}

/* Пункты панели подменю */
#call-menu.main-nav > .menu.sf-menu > .menu-item > .sub-menu > .menu-item {
    padding-left: 2em;
    padding-right: 2em;
}
#call-menu.main-nav > .menu.sf-menu > .menu-item > .sub-menu > .menu-item > a {
    font-size: 1.5em;
}

/* при наведении */
#call-menu.main-nav > .menu.sf-menu > .menu-item > .sub-menu > .menu-item:hover {
    color: var(--base-2);
    background-color: var(--accent);
}