.main-grid {
    --_nav-container-expanded-width: 28ch;
    --_nav-container-collapsed-width: 4.5rem;

    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: min-content [main] auto;
}

.main-grid > .container {
    padding-block: 0;
    padding-inline: var(--coda-spacing);
}

.coda-logo {
    --_coda-logo-color: var(--coda-primary);

    max-width: fit-content;
    border: 1px solid var(--_coda-logo-color) !important;
    border-radius: var(--coda-border-radius);

    margin-inline: var(--coda-spacing);
    margin-block: calc(var(--coda-spacing) * 1.5);
}

.coda-logo a {
    display: block;

    font-size: 1.75rem !important;

    max-width: fit-content;
    margin: 0 !important;
    padding: 0 !important;

    color: var(--_coda-logo-color);
    text-align: center;
    text-decoration: none;

    transition: padding 0.2s ease-in-out, color 0.2s ease-in-out;
}

.coda-logo a:hover {
    --_coda-logo-color: var(--coda-primary-hover);
}

.nav-container {
    --_nav-container-width: var(--_nav-container-expanded-width);

    z-index: 10;
    min-height: 100vh;
    width: var(--_nav-container-width);
    background-color: hsl(from var(--coda-card-background-color) h s l / 0.4);
    border-right: 1px solid var(--coda-muted-border-color);
    backdrop-filter: blur(10px);
}

.nav {
    display: grid;

    min-height: 100vh;
    grid-template-columns: [nav logo theme-switch] var(--_nav-container-expanded-width);
    grid-template-rows: [logo] min-content [nav] max-content [theme-switch] auto;
    align-items: end;

    position: sticky;
    top: 0;

    & ul {
        padding: 0;
        margin: 0;
    }

    & ul:has(.coda-logo) {
        grid-area: logo;
        padding-inline-start: calc(var(--coda-spacing) / 2);
    }

    & .nav__link-list {
        grid-area: nav;
        padding-inline-start: calc(var(--coda-spacing) / 2);
        padding-inline-end: calc(var(--coda-spacing));
    }

    & .nav__link-list > li {
        padding-inline-start: 0;
        margin-inline-start: calc(var(--coda-spacing));
        margin-block: calc(var(--coda-spacing) / 2);
    }

    & a {
        border: 1px solid transparent;
        font-size: 1.15rem;
        text-wrap: nowrap;
    }

    & .nav__link-list a:not([role="button"]):hover {
        border: 1px solid var(--coda-primary-background);
        color: var(--coda-secondary);
        text-decoration: none;
    }


    & a.active {
        position: relative;
    }

    & a.active::before {
        position: absolute;
        content: "";
        top: 20%;
        left: 0;
        height: 60%;
        width: 4px;

        border-radius: var(--coda-border-radius);
        background-color: var(--coda-primary-border);
    }

    & .nav-link-icon {
        margin-inline-end: calc(var(--coda-spacing) / 2);
        min-width: 1.5rem;
    }

    & .login_logout_button {
        text-align: left;
        text-overflow: clip;

        width: 100%;
        margin: 0;
        padding: 0;

        background-color: transparent;
        border: none;

        a:hover {
            text-decoration: none;
        }

        img {
            margin: 0 !important;
        }
    }

    & button.login_logout_button {
        text-wrap: nowrap;
    }

    & li:has(.login_logout_button) {
        border: 1px solid var(--coda-secondary-background);
        border-radius: var(--coda-border-radius);
        margin-inline-start: calc(var(--coda-spacing) / 2);
        padding-inline-start: calc(var(--coda-spacing) / 2);
    }

    .theme-switch-wrapper {
        grid-area: theme-switch;
        padding-inline-start: calc(var(--coda-spacing) / 2);
    }

    #theme-switch {
        position: relative;
        display: block;
        width: 2.5rem;
        height: 2.5rem;

        appearance: none;
        -webkit-appearance: none;

        border-radius: 50%;
        background-color: white;
        border: none;
    }

    #theme-switch:checked {
        background-image: none;
    }

    #theme-switch::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;

        width: 100%;
        height: 100%;

        border-radius: 50%;

        background-image: url("../assets/moon.10927db5e9b2.svg");
        background-position: center;
    }

    #theme-switch:checked::before {
        background-image: url("../assets/sun.69932be4ab5f.svg");
    }

}

@media screen and (width < 1728px) {
    .main-grid {
        grid-template-columns: [nav] var(--_nav-container-collapsed-width) [main] auto;
    }

    .main-grid > main {
        grid-area: main;
    }

    .main-grid > .nav-container {
        grid-area: nav;
    }

    .nav-container {
        --_nav-container-width: var(--_nav-container-collapsed-width);
        position: fixed;

        transition: width 0.2s ease-in-out;
    }

    .nav-container:hover,
    .nav-container:focus-within {
        --_nav-container-width: var(--_nav-container-expanded-width);
    }

    .nav-container .nav span,
    .nav-container .nav .bmftr-logo {
        --_opacity-transition-duration: 0.1s;
        width: 0;

        visibility: hidden;
        opacity: 0;
        transition: opacity var(--_opacity-transition-duration) ease-in-out;
    }

    .nav-container:is(:hover, :focus-within) .nav span,
    .nav-container:is(:hover, :focus-within) .nav .bmftr-logo {
        visibility: visible;
        opacity: 1;
        width: auto;
    }

    .nav {
        grid-template-columns: [nav logo theme-switch] var(--_nav-container-collapsed-width);
    }

    .nav-container:is(:hover, :focus-within) .nav {
        grid-template-columns: [nav logo theme-switch] var(--_nav-container-expanded-width);
    }


    .nav .nav__link-list {
        padding-inline-start: calc(var(--coda-spacing) / 2);
        padding-inline-end: calc(var(--coda-spacing));
    }
}

:root[data-theme="dark"] {
    .nav-link-icon {
        filter: invert();
    }

    & .nav__link-list a:hover img {
        filter: invert();
    }
}


@media screen and (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        .nav-link-icon {
            filter: invert();
        }

        & .nav__link-list a:hover img {
            filter: invert();
        }
    }
}