/*
 * Shared between `<x-navigation-bar-item>` and `<x-navigation-rail-item>` (imported by both
 * navigation-bar-item.css and navigation-rail-item.css): the destination indicator's growing fill
 * and its state layer, on androidx's one stated colour for a navigation item's layer.
 *
 * `NavigationRailColorTokens.kt` gives one colour for all six states, active or not:
 * `ItemActiveHoveredStateLayer = … = ItemInactivePressedStateLayer = OnSecondaryContainer`.
 * `NavigationBarTokens.kt` states no state-layer tokens of its own, so the bar's item takes the
 * rail's (N-19). Hover only where a pointer can hover, so a touch screen does not keep the last
 * hover after a tap; state.css's own opacities (8% hover, 10% focus and press) rather than the
 * package's `md-state-layer` class, because the element focused and pressed is the whole item
 * while the layer is drawn only on the smaller indicator or pill inside it — `md-state-layer`
 * cannot draw on a different element than the one it decorates, and `:focus-visible` never
 * matches a child (the same reason datepicker.css keeps the day's own layer).
 *
 * The active indicator itself is a secondary-container fill painted as a background image so it
 * can grow out of its centre without stretching the icon: when a page arrives through
 * wire:navigate, resources/js/navigation.js starts it at zero width for a moment and it springs
 * open on the default spatial spring, as Compose's indicator does when the selection changes
 * (NavigationItem.kt). A full page load draws it at once; reduced motion zeroes the transition.
 */

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

@layer material.components {
    [data-md-navigation-bar-item] :is([data-md-navigation-indicator], [data-md-navigation-pill]),
    [data-md-navigation-rail-item],
    [data-md-navigation-rail-item] [data-md-navigation-indicator] {
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        transition: background-size var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default);
    }

    @media (hover: hover) {
        :is([data-md-navigation-bar-item], [data-md-navigation-rail-item]):hover {
            --navigation-layer: var(--md-sys-state-hover-state-layer-opacity);
        }
    }

    :is([data-md-navigation-bar-item], [data-md-navigation-rail-item]):focus-visible {
        --navigation-layer: var(--md-sys-state-focus-state-layer-opacity);
    }

    :is([data-md-navigation-bar-item], [data-md-navigation-rail-item]):active {
        --navigation-layer: var(--md-sys-state-pressed-state-layer-opacity);
    }

    [data-md-navigation-bar-item] [data-md-navigation-indicator]::before,
    [data-md-navigation-bar-item] [data-md-navigation-pill]::before,
    [data-md-navigation-rail-item]::before,
    [data-md-navigation-rail-item] [data-md-navigation-indicator]::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        background-color: var(--md-sys-color-on-secondary-container);
        opacity: var(--navigation-layer, 0);
        pointer-events: none;
        transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
    }

    /* The wrapper a floating badge anchors to: tight around the glyph alone, not the wider
       indicator or pill around it, so the badge sits at the icon's own corner (badge.css). */
    [data-md-navigation-icon] {
        position: relative;
        display: inline-flex;
    }
}