/* NOTE: This style sheet is only useful when using the gui.js script in
themes/swws/js folder. It can be safely ignored otherwise. */

.header1 {
    flex: auto
}

.menu {
    display: none;
}

#menu-title {
    background-image: var(--primary-menu-icon);
    background-position: 0.3em center;
    background-repeat: no-repeat;
    font-size: 1.2em;
    padding-left: 2.5em;
}

.menu-modal {
    background-color: var(--background-color);
    overflow: auto;
    overscroll-behavior: contain;
}

.menu-modal ul {
    display: block;
    margin: 0em;
    padding: 0em;
    list-style-type: none;
}

.menu-modal li {
    display: block;
    box-sizing: border-box;
    padding: 0em;
}

.menu-modal a:link {
    display: block;
    font-weight: normal;
    padding: 0.5em 1.2em;
}

.menu-modal a:active,
.menu-modal a:focus,
.menu-modal a:hover {
    background-color: var(--text-color);
    color: var(--background-color);
}

#menu-button {
    background-color: var(--background-color);
    background-image: var(--primary-menu-icon);
    background-position: bottom;
    background-repeat: no-repeat;
    border-style: none;
    cursor: pointer;
    height: var(--navbar-height);
    width: var(--navbar-height);
}

#toc-button,
#menu-close-button,
#toc-close-button {
    background-color: var(--background-color);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border-style: none;
    cursor: pointer;

    height: 25px;
    width: 25px;
}

#toc-button {
    position: fixed;
    background-image: var(--toc-icon);
    left: 0.3em;
    top: calc(0.4em + var(--navbar-height));
}

#menu-close-button,
#toc-close-button {
    position: absolute;
    background-image: var(--close-icon);
}

#menu-close-button {
    right: 1em;
}

#toc-close-button {
    right: 1em;
    top: 4.8em;
}

#menu-button:active,
#menu-button:focus,
#menu-button:hover,
#menu-close-button:active,
#menu-close-button:focus,
#menu-close-button:hover,
#toc-button:active,
#toc-button:focus,
#toc-button:hover,
#toc-close-button:active,
#toc-close-button:focus,
#toc-close-button:hover {
    filter: invert(1);
}

.menu-modal,
.toc-modal {
    position: fixed;
    left: 0px;
    top: 0px;
    height: 100vh;
    width: 100vw;
    z-index: var(--modal-z-index);
}



@media screen and (min-width: 1500px) {
    .menu {
	display: initial;
    }

    #menu-button,
    #menu-close-button,
    #toc-button,
    #toc-close-button {
        display: none;
    }
}