@import "../styles/refresh.base.css";

@media only screen and (min-width: 1000px) {
    .navigationTree {
        display: block;
        max-width: 25%;
    }

    .prevNext {
        display: flex;
    }

    .pageContainer {
        padding: 0%;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    #pageContainerInner {
        padding: 1.5em;
        max-width: 1000px;
    }

    #whiteboardContainer {
        /* 55% will adjust for aspect ratio of canvas correctly. Additional px added for overflow of toolbar */
        padding-top: calc(55% + 120px);
    }

        #whiteboardContainer.portrait {
            padding-top: calc(144% + 120px);
        }
}

@media only screen and (max-width: 1000px) {
    .navigationTree {
        position: absolute;
        z-index: 100;
        top: 0;
        bottom: 0;
        left: 0;
        display: none;
        max-width: 60%;
    }

    .prevNext {
        display: none;
    }

    .pageContainer {
        padding: 0%;
        padding-top: 1em;
        padding-bottom: 4rem;
    }

    #pageContainerInner {
        padding: 1.5em;
        max-width: 1000px;
    }

    #whiteboardContainer {
        padding-top: calc(55% + 120px)
    }

        #whiteboardContainer.portrait {
            padding-top: calc(144% + 120px);
        }
}

@media only screen and (max-width: 600px) {
    .navigationButton span:first-of-type {
        display: none;
    }

    .navItem .searchTbx {
        display: none;
    }

    #boardInfoContainer {
        flex-wrap: wrap-reverse;
    }

    .navigationTree {
        display: none;
        width: 100%;
    }

    .prevNext {
        display: none;
    }

    .pageContainer {
        padding: 0;
    }

    #pageContainerInner {
        padding: 2%;
        max-width: 100%;
    }

    #whiteboardContainer {
        padding-top: calc(55% + 160px);
    }

        #whiteboardContainer.portrait {
            padding-top: calc(144% + 160px);
        }
}