/** Sidebar Navigation
 * Layout, branding, breadcrumbs, and navigation structure
 */

:root {
    --sidebar-width:                  320px;
}

/* Fix mobile toggle button sizing */
.sidebar-toggle {
    @media screen and not (any-hover) {
        & {
            width: var(--sidebar-toggle-width);

            .sidebar-toggle-button {
                width: calc(var(--sidebar-toggle-width) * 0.5);
            }
        }
    }
}


:is(.sidebar) {
    --sidebar-bg:                     var(--color-mono-1);
    --sidebar-border-color:           var(--border-color);

    --sidebar-link-spacing:           0.15em;
    --sidebar-group-spacing:          1rem;
    --sidebar-group-border:           1px solid var(--sidebar-border-color);

    --sidebar-link-color-hover:       var(--theme-color-5);
    --sidebar-link-color-active:      var(--theme-color-5);

    --sidebar-sub-link-color:         var(--secondary-color-6);
    --sidebar-sub-link-color-hover:   var(--secondary-color-8);
    --sidebar-sub-link-color-active:  var(--theme-color-5);
    --sidebar-sub-link-indent:        calc(var(--_sidebar-list-inset) * 3.8);

    --plugin-search-input-bg:         var(--color-bg) !important;
    --plugin-search-kbd-bg:           var(--color-mono-1) !important;

    /* Flexbox layout */
    display: flex;
    flex-direction: column;
    gap: 1.5rem;

    /* Section ordering */
    .app-name {
        order: 1;
        margin: 1.5rem 1rem 0;
    }

    .search {
        order: 2;
    }

    .sidebar-nav {
        order: 3;
    }


    /* Branding */
    a.app-name-link {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;

        img {
            max-height: 5rem;
        }

        &::after {
            content: "DT Notes";
            font-size: var(--font-size-xxl);
        }
    }


    /* Breadcrumbs */
    .breadcrumbs {
        font-size: 0.8em;
        margin-bottom: var(--margin-block);

        & > p {
            margin: 0;
        }
    }


    /* Navigation links */
    a[href]:hover {
        color: var(--sidebar-link-color-hover);
        font-weight: 500;
        text-decoration: none;
    }

    li[aria-current] > a {
        color: var(--sidebar-link-color-active);
        font-weight: 600;
    }
}

/* Navigation groups and icons */
:is(.app-nav-merged, .sidebar-nav) {
    /* Group items */
    > ul > li {
        padding-bottom: var(--sidebar-group-spacing);
        padding-left: var(--_sidebar-inset);
        margin-left: 0;

        &.group {
            padding-top: calc(0.25 * var(--sidebar-group-spacing));
            padding-bottom: var(--sidebar-group-spacing);
        }
    }

    /* Group headings */
    li > p {
        font-size: 1.1em;
        color: var(--secondary-color);
        display: flex;
        align-items: center;
        gap: 0.5em;
    }

    /* Sub-links */
    > ul ul.app-sub-sidebar {
        padding-left: var(--sidebar-sub-link-indent);
        font-size: var(--font-size-s);
        line-height: 1.2;
        list-style: square;
        margin-bottom: 0.5rem;

        a {
            color: var(--sidebar-sub-link-color);
            font-weight: normal;

            &:hover {
                color: var(--sidebar-sub-link-color-hover);
                text-decoration-color: var(--sidebar-sub-link-color-hover);
            }
        }

        li.active a {
            color: var(--sidebar-sub-link-color-active);
            font-weight: 600;

            &:hover {
                text-decoration-color: var(--sidebar-sub-link-color-active);
            }
        }
    }

    /* Icons */
    li a:has(img, svg, i.si) {
        align-items: center;
        display: flex;
        gap: 0;
    }

    li:has(> svg),
    li a:has(img, svg, i.si) {
        img, svg, i.si {
            margin-right: 0.5em;
        }
    }

    li a :is(.lucide.icon, i.si) {
        color: var(--theme-color);
    }
}