#site-menu{
    position: fixed;
    width: var(--menu-w);
    height: calc(100dvh - var(--header-h));
    height: calc(100vh - var(--header-h));
    top: var(--header-h);
    right: calc(var(--menu-w)*-1);
    transition: right .3s ease-in;
    background-color: var(--color-bg);
    border-left: var(--border-light);
    padding: var(--padding-body);
    z-index: 1000;

    @media #{$x-small}{ 
        width: 100vw; 
        right: -100vw;
    }

    display: flex;
    flex-direction: column;


    .search-form{
        margin-top: calc(var(--spacing)*1);
        margin-bottom: calc(var(--spacing)*1);
    }

    nav{
        flex-grow: 1;
        ul{ 
            list-style-type: none;
            text-transform: uppercase;
            li{
                font-size: var(--fs-normal);
                a{
                    display: block;
                    text-decoration: none;
                    padding: 0.5em 0;
                    &:hover{
                        text-decoration: underline;
                    }
                }
            }

            .highlight{
                text-transform: uppercase;
            }
        }
    }
}

body.menu-open{
    overflow: hidden;
    main, footer, #nav-highlight{
        transition: opacity .3s ease-in;
        opacity: 0.1;
    }
    #site-menu{
        right: 0;

    }

    #menu-toggle{
        .open{ display: none; }
        .close{ display: block!important; }
    }
  
}