/*
@example
    <nav is="side-navigation">
    <ul>
        <li><a href="#">Menu Item 1</a></li>
        <li><a href="#">Menu Item 2</a></li>
        <li>
            <a href="#">Menu Item 3</a>
            <ul>
                <li><a href="#">Nested Menu Item</a></li>
            </ul>
        </li>
    </ul>
</nav>
*/
@layer component {
    [is=side-navigation] {
        min-height: 100%;
        height: 100%;
        min-width: calc(var(--space-xl) * 4);
        padding-top: var(--space-s);
        display: flex;
        flex-direction: column;
        overflow: hidden;

        & > ul {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
        }

        &[has~=independent-scrolling] {
            position: sticky;
            top: 0;
            align-self: flex-start;
            min-height: 0;
            height: var(--side-navigation-independent-height, 100dvh);
            max-height: var(--side-navigation-independent-height, 100dvh);
            overflow: hidden;
            overscroll-behavior: contain;

            & > ul {
                overscroll-behavior: contain;
            }
        }

        & > [is=side-navigation-search] {
            flex-shrink: 0;
            padding: 0 var(--space-xs) var(--space-s);
            border-bottom: var(--divider-border);
            margin-bottom: var(--space-xs);

            & > [is=input] {
                background: var(--background-color);
            }
        }

        & [is=side-navigation-search-status] {
            margin-top: var(--space-xs);
            padding: 0 var(--space-xxs);
            color: var(--foreground-soft-color);
            font-size: var(--font-size-s);
            min-height: calc(var(--font-size-s) * 1.2);
        }

        & ul, li {
            list-style: none;
            margin: 0;
            padding: var(--space-xs);

            & > ul {
                border-top: var(--divider-border);
                margin: 0;
                padding: 0;
                & a {
                    padding: var(--space-xs) var(--space-s)  var(--space-xs)  var(--space-m);
                }
            }
        }
        & li > ul {
            display: none;
        }

        & li[now~=open] > ul {
            display: block;
        }

        & li[now~=search-open] > ul {
            display: block;
        }

        & li[now~=active] > a,
        & a[now~=active] {
            font-weight: bold;
        }

        & a {
            cursor: pointer;
            border-radius: var(--border-radius);
            padding: var(--space-xs);
            text-decoration: none;
            display: block;

            &:active,
            &:hover {
                background-color: var(--background-more-lighter-color);
            }

        }

        & a[is=navigation-link] {
            display: flex;
            align-items: center;
        }

        &[has~=icon-layout] {
            min-width: auto;

            & ul, li {
                padding: 0;
            }

            & [now=open] > ul  {
                border: none;
                padding: 0;
            }

            & a {
                justify-content: center;
                font-size: 0;
            }

            & a[is=navigation-link] {
                border-radius: 0;
                border-left: 3px transparent solid;
                padding: var(--space-xs) var(--space-s);
            }

            & [now=open] > a[is=navigation-link] {
                border-left: 3px var(--call-to-action-color) solid;
            }

            & a[is=navigation-link] [is=icon],
            & a[has*=-icon]::before {
                margin-right: 0;
                font-size: var(--font-size-l);
            }

            & > [is=side-navigation-search] {
                display: none;
            }
        }

        & [is=side-navigation-footer] {
            margin-top: auto;
            border-top: var(--divider-border);
            padding: var(--space-s) var(--space-xs);
            flex-shrink: 0;
        }
    }
}

@layer component {
    #side-nav-toggle {
        display: none;
    }

    @media (max-width: 800px) {
        [is=sitebar] {
            width: 0;
        }

        #side-nav-toggle {
            display: block;
            position: fixed;
            top: var(--space-m);
            left: var(--space-m);
            z-index: 30;
        }

        [is=side-navigation] {
            position: fixed;
            top: 0;
            left: 0;
            height: 100%;
            transform: translateX(-100%);
            transition: transform 0.3s;
            z-index: 20;

            &[now~=open] {
                transform: translateX(0);
            }
        }
    }
}