/* ------------ MAIN PANELS ------------ */

body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: row;

    & > main#note-viewer {
        flex-grow: 1;
    }

    & > aside#metadata-panel, & > nav#file-tree {
        flex: 0 0 fit-content;
        min-width: 240px;
        display: flex;
        flex-direction: column;
        overflow-y: scroll;

        &.hidden { display: none; }
    }

    & > hr {
        cursor: e-resize;
        border: 2px solid hsl(0 0 15);
    }
}

/* ------------ NOTE VIEWER ------------ */

/* ------ Split views ------ */

main#note-viewer {
    height: 100vh;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;

    --split-ratio: 1;
    
    & .view-wrapper {
        flex: var(--split-ratio, 1) 1 0;
        min-width: 0;
        min-height: 0;
        overflow: hidden;

        display: flex;

        &[data-direction="column"] { flex-direction: column; }

        &[data-direction="row"] { flex-direction: row; }
    }

    & .view {
        flex: var(--split-ratio, 1) 1 0;
        overflow: hidden;
        min-width: 0;
        min-height: 0;

        display: flex;
        flex-direction: column;
    }
}

/* ------ View content ------ */

.view {

    & > .top-bar {
        display: flex;
        flex-direction: row;

        & > .action-bar {
            display: flex;
            flex-direction: row;
        }

        & .tabs-bar {
            display: flex;
            flex-direction: row;
            flex-grow: 1;
            min-width: 0;
    
            & > .tab, > .new-tab-button {
                display: flex;
                flex-direction: row;
            }
        }
    }

    & > .navigation-bar {

        & > .action-bar {
            display: flex;
            flex-direction: row;
        }

        & > .breadcrumbs {
            display: grid;
            align-items: center;
            justify-items: center;

            & > * {
                grid-column: 1;
                grid-row: 1;
            }
    
            & > .breadcrumbs-trail {
                display: none;
                flex-direction: row;
    
                &.active { display: flex; }
            }
        }
    }

    & > .text-editor {
        overflow-y: scroll;
        flex-grow: 1;
        display: flex;
        flex-direction: column;

        & > .page {
            flex-grow: 1;
            display: none;
            flex-direction: column;

            &.active { display: flex; }
    
            & > .page-content {
                display: flex;
                flex-direction: column;
            }
        }
    }
}

/* ------ Text editor UI ------ */



main#note-viewer {

    position: relative;

    /* ------ TOOLBAR ------ */

    & .view.active .text-editor { anchor-name: --text-editor; }

    &:has(.page.active) > .toolbar.active {
        display: flex;
        flex-direction: row;
        @media (width <= 800px) {
            position: absolute;
            bottom: calc(var(--keyboard-height) + 0.5em);
            left: 0.5em;
            right: 0.5em;
        }
        @media (width > 800px) {
            position: fixed;
            position-anchor: --text-editor;
            width: calc(anchor-size(width) - 1em);
            bottom: calc(anchor(bottom) + 0.5em);
            justify-self: anchor-center;
        }
    }

    & > .toolbar {
        display: none;
    }

    /* ------ KEYBOARD ------ */

    & > .keyboard {

        display: none;

        &.active {
            position: sticky;
            bottom: 0px;
            width: 100%;
            display: flex;
        }
    }

    /* ------ MOBILE UI ------ */

    &:has(.keyboard.active) > .mobile-nav-bar {
        display: none;
    }
    
    & > .mobile-nav-bar {
        display: flex;
        flex-direction: row;
    }

    & > .mobile-tabs-panel {
        display: none;

        &.active {
            position: absolute;
            inset: 0px;
            display: grid;
        }
    }
}

@media (width <= 800px) {
    
    body {
        overflow-y: hidden;
        overflow-x: scroll;
        
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: none;
        scrollbar-width: none;

        & > nav#file-tree, > main#note-viewer, > aside#metadata-panel {

            flex: 0 0 100vw;
            min-height: 100vh;

            border: none;
    
            scroll-snap-align: center;

            overflow-y: scroll;
            overflow-x: hidden;
            overscroll-behavior-x: none;
            scrollbar-width: none;
            
        }
    }

}