@use "nav_header";
@use "nav_menu";
@use "nav_location";
@use "nav_quick_links";

nav.pane {
    grid-area: nav;

    --padding-mobile: 0.35rem;

    height: min-content;

    display: flex;
    flex-direction: column;

    position: sticky;
    top: var(--spacing-large);
    left: var(--spacing-large);

    color: var(--accent-pink);

    input[type="checkbox"] {
        display: none;
    }
}

@media (max-width: 600px) {
    nav.pane {
        background-color: var(--background-2);
        border-radius: var(--border-radius-leaf);
        padding: 0 var(--spacing-small);

        .menu,
        .quick_links,
        .location {
            display: none;
        }

        > * {
            width: 100%;
        }
    }

    nav.pane > input:checked + label {
        color: var(--highlight-hover);

        + .menu {
            display: grid;

            + .location + .quick_links {
                display: flex;
            }
        }
    }
}