.menu-wrapper {
    max-width: 35em;
    width: 90%;
    margin: auto;

    .menu {
        display: flex;
        flex-direction: column;
        gap: 1em;
        width: 100%;

        .items-wrapper {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1em;

            .menu-item {
                $menuitem-height: 5em;
                width: 100%;
                height: $menuitem-height;
                border: 1px solid var(--link-fg);
                border-radius: 0.3em;

                display: grid;
                grid-template-columns: 15fr 85fr;
                align-items: center;

                color: var(--body-fg);
                text-decoration: none;

                transition: width 150ms, margin-left 150ms;

                .logo {
                    height: $menuitem-height;
                    width: $menuitem-height;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    svg {
                        $dim: calc($menuitem-height - 2em);
                        height: $dim;
                        width: $dim;
                    }
                }

                .label {
                    font-size: 1.7em;
                    font-weight: bold;
                    padding-bottom: 0.15em;
                }
            }

            .menu-item:hover {
                width: 105%;
                margin-left: 5%;
                transition: width 200ms, margin-left 200ms;
            }
        }
    }
}

#manage-menu-page, #home-page {
    $h: calc(var(--nav-height) + calc(var(--main-padding) * 2));
    height: calc(100vh - $h);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}