html[data-scroll="down"] {
    .navigation-bar {transform: translateY(-100%); }
    .mobile-nav-bar {transform: translateY(100%); transition: transform .25s;}
}

.navigation-bar {
    display: flex;
    flex-direction: row;
    padding: 0.4em 0.2em;
    gap: 0.2em;

    transition: transform .25s;

    & > .breadcrumbs {
        flex-grow: 1;
        min-width: 0;
        overflow: hidden;
        
        padding: 0.2em 0.4em;
        border-radius: 0.6em;
        border: var(--border);

        transition: height .25s, background .25s;
        
        &:has(input:focus) {border-color: var(--accent-color);}
        
        &:has(input:focus) .breadcrumbs-trail {display: none !important;}
        
        & > input.address-bar {
            display: block;
            
            cursor: text;
            background-color: transparent;
            outline: none;
            border: none;
            font-size: inherit;
            line-height: inherit;
            font-size-adjust: inherit;
            font-family: inherit;
            color: transparent;
            padding: 0.4em;
            
            width: 100%;
            
            &:focus {
                border-color: hsl(330 80 30);
                color: inherit;
            }
        }

        & > .breadcrumbs-trail {
            justify-self: start;
            gap: 0.2em;
            align-items: center;
            min-width: 0;
            
            & > .crumb {
                min-width: 0;
                overflow: hidden;
                text-overflow: clip;
                white-space: nowrap;
                justify-content: left;
                flex-basis: fit-content;
            }
            
            & > .home-crumb {
                flex-shrink: 0;
            }
        
            & > .crumb-separator {
                color: hsl(0 0 60);
            }
        }

    }
}

.mobile-nav-bar {
    @media (width <= 800px) {
        font-size: 1.25em;
        background-color: var(--bg-color);
        border-top: var(--border);
        padding-top: 0.2em;
        padding-bottom: 0.4em;
        cursor: pointer;
        flex-shrink: 0;

        transition: transform .25s;
        
        
        & > .mobile-nav-button {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-grow: 1;
            padding: 0.4em;

            &:hover {background-color: var(--hover);}
            
            & > svg {
                height: 1lh;
                width: 1lh;
            }
            
            & > .tab-number-icon {
                border: 2px solid currentColor;
                border-radius: 0.3em;
                aspect-ratio: 1/1;
                height: 100%;
                max-height: 2em;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 1rem;
            }
        }
    }
}