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

.pane_nav {
    --padding-mobile: 0.35rem;

    margin: var(--spacing-large);

    width: min-content;
    height: min-content;

    display: flex;
    flex-direction: column;
    gap: var(--spacing-medium);

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

    color: var(--accent-pink);

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

@media only screen and (max-width: 500px) {
    .pane_nav {
        width: calc(
            calc(50% - var(--spacing-large) + var(--spacing-small)) *
                2
        );

        background-color: var(--background-2);
        border-radius: var(--border-radius-leaf);
        padding: 0 var(--spacing-small);

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

        > * {
            width: 100%;
        }
    }

    .pane_nav > #toggle:checked {
        + .header {
            color: var(--highlight-hover);

            + .nav_menu {
                display: grid;

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