/*
 * <x-section-nav>: the navigation inside one area of an application — M3's secondary tabs from
 * `medium` (600px), five or more of them the scrollable tab bar M3's own accessibility page
 * blesses rather than a grid that would break the tab bar's divider and strand the upper rows'
 * indicators against nothing (docs/audits/m3-alignment/navigation.md N-16); below `medium`, where a
 * row of them never fits, a button naming the current section opens the same list as a menu.
 *
 *   [data-md-section-nav]                min-inline-size: 0
 *     [data-md-section-nav-picker]       hidden from medium
 *       [data-md-section-nav-trigger]    48px, an outlined field-like button
 *         [data-md-section-nav-trigger-label]  the current section's title, truncated
 *     nav                                hidden below medium
 *       [data-md-tabs-bar]               tabs.css, reused whole
 *
 * Reuses `<x-tabs>`'s own hooks and stylesheet rather than a tab bar of its own: a link marked
 * `aria-current="page"` takes the same active indicator and colour tabs.css already draws for
 * `aria-selected="true"` (N-21), so nothing here repeats a rule tabs.css owns; the only addition is
 * this bar's own list items — flex rows, so tabs.css's `li > [data-md-tab]` share of the width
 * applies, and `min-inline-size: 0`, so a long title still truncates — which `<x-tabs>`'s buttons,
 * direct children of the bar, never need. The picker's trigger is not one of M3's controls
 * — an outlined field-like button naming the current section, 48px tall to meet the target M3 asks
 * for everywhere, in body-large type (a text class on the view, `md-type-body-lg
 * md-ink md-text-start`, since it is prose on a plain button rather than a component's own type).
 */

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

@import './tabs.css';
@import './icon.css';
@import './menu.css';
@import './menu-item.css';
@import './badge.css';

@layer material.components {
    [data-md-section-nav] {
        min-inline-size: 0;
    }

    [data-md-section-nav-picker] {
        @media (width >= 600px) {
            display: none;
        }
    }

    [data-md-section-nav] > nav {
        @media (width < 600px) {
            display: none;
        }
    }

    [data-md-section-nav-trigger] {
        display: flex;
        align-items: center;
        gap: 12px;
        block-size: var(--md-sys-measurement-space600);
        inline-size: min(320px, calc(100vw - 32px));
        cursor: pointer;
        border: 1px solid var(--md-sys-color-outline);
        border-radius: var(--md-sys-shape-corner-xs);
        padding-inline: var(--md-sys-measurement-space200);
    }

    [data-md-section-nav-trigger-label] {
        min-inline-size: 0;
        flex: 1 1 0%;
    }

    [data-md-section-nav] [data-md-tabs-bar] > li {
        display: flex;
        min-inline-size: 0;
    }
}