/*
 * `<x-navigation-bar-item>`: one destination in an `<x-navigation-bar>`
 * (NavigationBarVerticalItemTokens.kt, NavigationBarHorizontalItemTokens.kt, androidx Compose
 * Material 3, Apache-2.0).
 *
 *   [data-md-navigation-bar-item]        data-md-active; the link or button itself
 *     [data-md-navigation-pill]          icon and label; becomes the indicator from 600px
 *       [data-md-navigation-indicator]   the 56×32 indicator around the icon below 600px
 *         [data-md-navigation-icon]      the floating badge's anchor (navigation-item.css)
 *       [data-md-navigation-label]
 *
 * Below 600px (the bar's own width — a container query, so a bar in a narrow column keeps this
 * layout) the icon sits in a 56×32 `CornerFull` indicator over a label-medium label, both equally
 * wide. From 600px icon and label share a 40px horizontal indicator with 16px leading and
 * trailing space; the label stays label-medium — `NavigationBarTokens.LabelTextFont` is the bar's
 * only label token, and Compose's `ShortNavigationBarItem` passes it for both icon positions (the
 * *rail's* horizontal item is label-large, a different component's token; N-08). An active item is
 * secondary-container behind on-secondary-container (icon and, from 600px, label); its indicator's
 * fill is a background image so it can grow from its centre (navigation-item.css) rather than
 * stretch the icon.
 *
 * The indicator's growing fill and its state layer are shared with the rail's item
 * (navigation-item.css); only this file's focus ring and the display swap between the two
 * indicator shapes are the bar's own.
 */

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

@import './icon.css';
@import './badge.css';
@import './navigation-item.css';

@layer material.components {
    [data-md-navigation-bar-item] {
        --navigation-layer: 0;

        position: relative;
        display: flex;
        flex: 1 1 0%;
        min-width: 0;
        align-items: center;
        justify-content: center;
        padding-block: 6px;
        color: var(--md-sys-color-on-surface-variant);
        text-decoration: none;
        cursor: pointer;
        outline: none;
        -webkit-tap-highlight-color: transparent;
    }

    [data-md-navigation-bar-item][data-md-active] {
        color: var(--md-sys-color-secondary);
    }

    [data-md-navigation-bar-item] [data-md-navigation-pill] {
        display: flex;
        min-width: 0;
        max-width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        border-radius: var(--md-sys-shape-corner-full);
        font: var(--md-sys-typescale-label-md);
        letter-spacing: var(--md-sys-typescale-label-md-tracking);
    }

    [data-md-navigation-bar-item] [data-md-navigation-label] {
        max-width: 100%;
        padding-inline: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    [data-md-navigation-bar-item] [data-md-navigation-indicator] {
        position: relative;
        isolation: isolate;
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 32px;
        border-radius: var(--md-sys-shape-corner-full);
    }

    /* Vertical layout (below 600px, or a tall bar at any width): the indicator fills behind the
       icon; the pill draws no layer of its own. */
    [data-md-navigation-bar-item][data-md-active] [data-md-navigation-indicator] {
        background-image: linear-gradient(var(--md-sys-color-secondary-container), var(--md-sys-color-secondary-container));
        color: var(--md-sys-color-on-secondary-container);
    }

    [data-md-navigation-bar-item] [data-md-navigation-pill]::before {
        display: none;
    }

    [data-md-navigation-bar-item]:focus-visible [data-md-navigation-indicator] {
        outline: 3px solid var(--md-sys-color-secondary);
        outline-offset: 2px;
    }

    /* Horizontal layout, from 600px: the pill itself fills and takes the layer; the indicator
       stops drawing either. Only the short bar (a tall bar keeps the vertical layout). */
    @container (width >= 600px) {
        [data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-item] {
            min-width: max-content;
        }

        [data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-item] [data-md-navigation-pill] {
            position: relative;
            isolation: isolate;
            flex-direction: row;
            height: 40px;
            padding-inline: 16px;
        }

        [data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-item] [data-md-navigation-label] {
            padding-inline: 0;
        }

        [data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-item][data-md-active] {
            color: var(--md-sys-color-on-secondary-container);
        }

        [data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-item][data-md-active] [data-md-navigation-pill] {
            background-image: linear-gradient(var(--md-sys-color-secondary-container), var(--md-sys-color-secondary-container));
        }

        [data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-item][data-md-active] [data-md-navigation-indicator] {
            background-image: none;
        }

        [data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-item] [data-md-navigation-pill]::before {
            display: block;
        }

        [data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-item] [data-md-navigation-indicator]::before {
            display: none;
        }

        [data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-item]:focus-visible [data-md-navigation-indicator] {
            outline: none;
        }

        [data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-item]:focus-visible [data-md-navigation-pill] {
            outline: 3px solid var(--md-sys-color-secondary);
            outline-offset: 2px;
        }
    }
}