html, body {
    width: 100vw;
    height: 100vh;
}

body {
    justify-content: space-around;
    align-items: stretch;
    align-content: stretch;
    flex-direction: row;
}

@media screen {
    body {
        overflow: hidden;
        display: grid;
    }

    *[data-desktop-app=desktop-app] {
        position: relative;
        overflow: hidden;
        display: grid;
    }
    
}

*[data-desktop-app=desktop-app] {
    min-width: 900px;
    grid-template-rows: 1fr auto;
    grid-template-columns: auto 1fr auto;

    & drawer-menu {
        transition: all 0.5s ease-out;
        &[drawer-hidden] {
            width: 1px;
        }
    }

    &[drawer-hidden] {
        & drawer-menu {
            width: 1px;
        }
    }
    
    & > [data-page-element=app] {
        grid-row: 1;
        grid-column: 2;
        position: inherit; 
    }

    & > [data-page-element=menu-renderer] {
        grid-row: 1;
        grid-column: 1;
        overflow-x: hidden;
        overflow-y: auto; 
    }
    
    & > [data-page-element=side-bar] {
        grid-row: 1;
        grid-column: 3;
        overflow-x: hidden;
        overflow-y: auto; 
    }
    
    & > [data-page-element=status-bar] {
        grid-row: 2;
        grid-column: 1 / span 3;
        padding: 5px;
        margin-top: 2px;
        border-top: solid 1px lightgray;
        overflow: hidden; 
    }

    &[data-full-width] {
        width: 100vw;
        min-width: 100vw;
    }

    &[data-hide-drawer=true] {
        & drawer-menu, & [data-drwaer-page] {
            display: none;
        }
    }

    &[data-hide-toolbar=true] {

        & [data-base-page=base-page] {
            grid-template-rows: auto auto 1fr auto;
        }

        & [data-page-element=status-bar] {
            display: none;
        }

        & [data-page-element=icon] {
            display: none; 
        }
        
        & [data-page-element=title] {
            display: none; 
        }
        
        & [data-page-element=action-bar] {
            display: none; 
        }
        
        & [data-page-element=action] {
            display: none;    
        }

        & [data-page-element=header] {
            grid-row: 1;
        }

        & [data-page-element=content] {
            grid-row: 2 / span 3;
        }
    }    
}