/* Menu */

.menu-wrap > ul,
ul.menu {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.menu-inline {
    flex-direction: row;
    gap: 0 15px;
}

ul.menu-block {
    flex-direction: column;
}

@media all and (max-width: 767px) {

    ul.menu.mobile-inline {
        flex-direction: row;
    }

    ul.menu.mobile-block {
        flex-direction: column;
    }

}

ul.menu > li {
    display: block;
    position: relative;
}

ul.menu-inline > li {
    display: inline-flex;
}




/* Menu variations */

ul.menu.spread {
    line-height: 1.75em;
}

ul.menu.large {
    font-size: var(--font-size-large);
}

ul.menu.larger {
    font-size: var(--font-size-larger);
}




/* Menu with dropdowns */

ul.menu {

    li > a {
        display: flex;
        align-items: center;
        gap: 8px;

        span {
            display: inline-block;
        }

        i.icon {
            display: inline-flex;
            width: 10px;
            height: 10px;
        }
    }

    li.has-dropdown {

        & > .dropdown {
            position: absolute;
        }

        &:not(:hover):not(:focus):not(.focus) > .dropdown {
            display: none;
        }

    }

}





/* Menu with icons */

ul.menu.has-icons {

    &:not(.no-gap) {
        gap: 0 15px;
    }

    & > li {
        display: inline-flex;
        align-items: center;
        position: relative;
        gap: 0 6px;

        a, span {
            display: inline-flex;
        }

        i.icon {
            display: inline-flex;
        }

    }

}