/*
 * `<x-navigation-rail-item>`: one destination in an `<x-navigation-rail>`, drawn in whichever
 * shape the rail has (NavigationRailVerticalItemTokens.kt, NavigationRailHorizontalItemTokens.kt,
 * NavigationRailBaselineItemTokens.kt, NavigationRailColorTokens.kt, androidx Compose Material 3,
 * Apache-2.0).
 *
 *   [data-md-navigation-rail-item]        data-md-active; the link or button itself
 *     [data-md-navigation-indicator]      the 56×32 indicator, collapsed only
 *       [data-md-navigation-icon]         the floating badge's anchor (navigation-item.css)
 *         [data-md-navigation-badge-icon] the small/large badge, collapsed only
 *     [data-md-navigation-label]
 *     [data-md-navigation-badge-end]      the large badge at the label's end, expanded only
 *
 * Expanded, a 56px full-width pill: the icon, the label-large label beside it (up to two lines,
 * collapsed) and a count at its end. Collapsed, the icon sits in a 56×32 `CornerFull` indicator
 * over a label-medium label, with the count on the icon instead — badges move from the icon
 * (collapsed) to the label end (expanded), M3's stated rule.
 *
 * The item's own state layer is split in two: while expanded the layer paints the whole item (the
 * 56px pill *is* the indicator); while collapsed it paints only the 56×32 box. A CSS variant
 * selector cannot follow a pseudo-element, so `--navigation-item-layer`/`--navigation-indicator-layer`
 * hand `--navigation-layer` (navigation-item.css) on through variables, and each rule below
 * outweighs navigation-item.css's shared one with a doubled `[data-md-navigation-rail-item]`
 * attribute, the same specificity trick `navigation-rail.css` uses for the header's FAB.
 */

@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-rail-item] {
        --navigation-layer: 0;
        --navigation-item-layer: var(--navigation-layer);
        --navigation-indicator-layer: 0;

        position: relative;
        isolation: isolate;
        display: flex;
        flex-shrink: 0;
        align-items: center;
        gap: 8px;
        height: 56px;
        margin-inline: 20px;
        padding-inline: 16px;
        border-radius: var(--md-sys-shape-corner-full);
        color: var(--md-sys-color-on-surface-variant);
        font: var(--md-sys-typescale-label-lg);
        letter-spacing: var(--md-sys-typescale-label-lg-tracking);
        text-align: start;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        outline: none;
        -webkit-tap-highlight-color: transparent;
    }

    [data-md-navigation-rail-item][data-md-navigation-rail-item]::before {
        background-color: var(--md-sys-color-on-secondary-container);
        opacity: var(--navigation-item-layer);
    }

    [data-md-navigation-rail-item][data-md-navigation-rail-item] [data-md-navigation-indicator]::before {
        background-color: var(--md-sys-color-on-secondary-container);
        opacity: var(--navigation-indicator-layer);
    }

    [data-md-navigation-rail-item][data-md-active] {
        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-rail-item] [data-md-navigation-indicator] {
        position: relative;
        isolation: isolate;
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border-radius: var(--md-sys-shape-corner-full);
    }

    [data-md-navigation-rail-item] [data-md-navigation-label] {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

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

    /* The large badge at the label's end, expanded only — collapsed, the badge moves onto the
       icon instead (`[data-md-navigation-badge-icon]`, `display: contents` there). */
    [data-md-navigation-badge-end] {
        display: flex;
        flex-shrink: 0;
    }

    [data-md-navigation-badge-icon] {
        display: none;
    }

    /* ---- Collapsed: icon over label, the 56×32 indicator, badge back on the icon. ---- */

    [data-md-navigation-rail-item] {
        @container style(--md-navigation-rail-value: collapsed) {
            flex-direction: column;
            justify-content: center;
            gap: 4px;
            height: auto;
            min-height: 64px;
            margin-inline: 0;
            padding: 6px 4px;
            border-radius: 0;
            font: var(--md-sys-typescale-label-md);
            letter-spacing: var(--md-sys-typescale-label-md-tracking);
            white-space: normal;
            --navigation-item-layer: 0;
            --navigation-indicator-layer: var(--navigation-layer);
        }
    }

    [data-md-navigation-rail-item] [data-md-navigation-label] {
        @container style(--md-navigation-rail-value: collapsed) {
            flex: none;
            display: -webkit-box;
            max-width: 100%;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            text-align: center;
            overflow-wrap: anywhere;
        }
    }

    [data-md-navigation-rail-item][data-md-active] {
        @container style(--md-navigation-rail-value: collapsed) {
            background-image: none;
            color: var(--md-sys-color-secondary);
        }
    }

    [data-md-navigation-rail-item] [data-md-navigation-indicator] {
        @container style(--md-navigation-rail-value: collapsed) {
            width: 56px;
            height: 32px;
        }
    }

    [data-md-navigation-rail-item][data-md-active] [data-md-navigation-indicator] {
        @container style(--md-navigation-rail-value: collapsed) {
            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-rail-item]:focus-visible {
        @container style(--md-navigation-rail-value: collapsed) {
            outline: none;
        }
    }

    [data-md-navigation-rail-item]:focus-visible [data-md-navigation-indicator] {
        @container style(--md-navigation-rail-value: collapsed) {
            outline: 3px solid var(--md-sys-color-secondary);
            outline-offset: 2px;
        }
    }

    [data-md-navigation-badge-end],
    [data-md-navigation-badge-icon] {
        @container style(--md-navigation-rail-value: collapsed) {
            display: none;
        }
    }

    [data-md-navigation-badge-icon] {
        @container style(--md-navigation-rail-value: collapsed) {
            display: contents;
        }
    }
}