.c-mmenu {
    position        : fixed;
    bottom          : 0;
    left            : 0;
    width           : 100%;
    border-top      : var(--border-thin) solid var(--main-fg);
    background-color: var(--main-bg);
    box-shadow      : 0 var(--n-margin-xxs) var(--margin-xs) 0 rgba(0, 0, 0, 0.25);
    z-index         : 1;
}

.c-mmenu-list {
    display: flex;
    margin : var(--margin-sm) 0;
    padding: 0;
}

.c-mmenu-item {
    flex-grow      : 1;
    list-style-type: none;
    margin-bottom  : 0;
}

.c-mmenu-button {
    display         : flex;
    flex-direction  : column;
    width           : 100%;
    align-items     : center;
    border          : none;
    background-color: var(--main-bg);
    color           : var(--main-fg);
    text-decoration : none;
    font-family     : var(--font-standard);
    font-stretch    : var(--font-condensed);
    font-size       : var(--font-size-sm);
    cursor          : pointer;
}

.c-mmenu-button>svg {
    margin-bottom: var(--margin-xxxs);
}

.c-mmenu-button:visited {
    color: var(--main-fg);
}

.c-mmenu-submenu {
    display         : none;
    position        : fixed;
    bottom          : var(--main-menu-height);
    margin-bottom   : var(--main-menu-margin);
    left            : 0;
    width           : 100%;
    background-color: var(--main-fg);
    color           : var(--main-bg);
    max-height      : calc(100vh - calc(var(--main-menu-height) + var(--main-menu-margin)));
    overflow-y      : scroll;
}

.c-mmenu-open {
    display: block;
}

@media (min-width: 48rem) {
    .c-mmenu {
        position  : unset;
        width     : unset;
        box-shadow: unset;
        border    : unset;
    }

    .c-mmenu-submenu {
        position  : absolute;
        width     : 50vw;
        min-width : 30rem;
        max-width : var(--max-content-width);
        top       : var(--main-menu-height);
        bottom    : unset;
        right     : 0;
        left      : unset;
        margin-top: var(--n-margin-sm);
    }

    .c-mmenu-list {
        gap            : var(--margin-xxxl);
        justify-content: end;
        padding-right  : var(--margin-xs);
    }

    .c-mmenu-item {
        position : relative;
        flex-grow: 0;
    }
}