/*
 * `<x-navigation-rail-section>`: a group of `<x-navigation-rail-item>`s under a heading, in an
 * `<x-navigation-rail>`. M3 draws a section header only while the rail is expanded; collapsed, a
 * little space sets the group apart instead, and the heading keeps naming the group for a screen
 * reader either way (`role="group"`/`aria-labelledby`, rendered by the view).
 */

@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;

@layer material.components {
    [data-md-navigation-rail-section] {
        display: flex;
        flex-direction: column;
    }

    [data-md-navigation-rail-section]:not(:first-child) {
        &:where(
            [data-md-navigation-rail='collapsed'],
            [data-md-navigation-rail='collapsed'] *,
            [data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]),
            [data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]) *,
            [data-md-navigation-rail='modal']:not([data-md-open]),
            [data-md-navigation-rail='modal']:not([data-md-open]) *
        ) {
            margin-top: 12px;
        }

        @media (width < 600px) {
            &:where([data-md-navigation-rail='collapsible']:not([data-md-open]), [data-md-navigation-rail='collapsible']:not([data-md-open]) *) {
                margin-top: 12px;
            }
        }

        @media (width < 840px) {
            &:where([data-md-navigation-rail='adaptive']:not([data-md-open]), [data-md-navigation-rail='adaptive']:not([data-md-open]) *) {
                margin-top: 12px;
            }
        }

        @media (840px <= width < 1200px) {
            &:where(
                :is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]),
                :is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]) *
            ) {
                margin-top: 12px;
            }
        }

        @media (width >= 1200px) {
            &:where(
                [data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]),
                [data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]) *
            ) {
                margin-top: 12px;
            }
        }
    }

    [data-md-navigation-rail-heading] {
        display: flex;
        align-items: center;
        min-height: 48px;
        padding-inline: 36px 20px;
        overflow: hidden;
        color: var(--md-sys-color-on-surface-variant);
        font: var(--md-sys-typescale-title-sm);
        letter-spacing: var(--md-sys-typescale-title-sm-tracking);
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    [data-md-navigation-rail-heading] {
        &:where(
            [data-md-navigation-rail='collapsed'],
            [data-md-navigation-rail='collapsed'] *,
            [data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]),
            [data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]) *,
            [data-md-navigation-rail='modal']:not([data-md-open]),
            [data-md-navigation-rail='modal']:not([data-md-open]) *
        ) {
            display: none;
        }

        @media (width < 600px) {
            &:where([data-md-navigation-rail='collapsible']:not([data-md-open]), [data-md-navigation-rail='collapsible']:not([data-md-open]) *) {
                display: none;
            }
        }

        @media (width < 840px) {
            &:where([data-md-navigation-rail='adaptive']:not([data-md-open]), [data-md-navigation-rail='adaptive']:not([data-md-open]) *) {
                display: none;
            }
        }

        @media (840px <= width < 1200px) {
            &:where(
                :is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]),
                :is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]) *
            ) {
                display: none;
            }
        }

        @media (width >= 1200px) {
            &:where(
                [data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]),
                [data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]) *
            ) {
                display: none;
            }
        }
    }
}