@layer components{.md3-navigation-bar-root{box-sizing:border-box;background:var(--md-sys-color-surface-container);min-height:64px;box-shadow:var(--md-sys-elevation-level2);display:flex}.md3-navigation-bar-root[data-arrangement=centered]:has(>.md3-navigation-bar-item:nth-child(3):last-child){padding-inline:20%}.md3-navigation-bar-root[data-arrangement=centered]:has(>.md3-navigation-bar-item:nth-child(4):last-child){padding-inline:15%}.md3-navigation-bar-root[data-arrangement=centered]:has(>.md3-navigation-bar-item:nth-child(5):last-child){padding-inline:10%}.md3-navigation-bar-root[data-arrangement=centered]:has(>.md3-navigation-bar-item:nth-child(6):last-child){padding-inline:5%}.md3-navigation-bar-item{box-sizing:border-box;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:0 0;border:none;outline:none;flex-direction:column;flex:1 1 0;justify-content:center;align-items:center;gap:4px;min-width:48px;padding-block:6px;padding-inline:0;display:flex}.md3-navigation-bar-item[data-icon-position=start]{flex-direction:row}.md3-navigation-bar-indicator{box-sizing:border-box;border-radius:var(--md-sys-shape-corner-full);justify-content:center;align-items:center;width:56px;height:32px;display:inline-flex;position:relative}.md3-navigation-bar-item[data-icon-position=start] .md3-navigation-bar-indicator{gap:4px;width:auto;height:40px;padding-inline:16px}.md3-navigation-bar-indicator:before{content:"";border-radius:inherit;background:var(--md-sys-color-secondary-container);opacity:0;clip-path:inset(0 50% round var(--md-sys-shape-corner-full));position:absolute;inset:0}.md3-navigation-bar-item[data-active] .md3-navigation-bar-indicator:before{opacity:1;clip-path:inset(0 round var(--md-sys-shape-corner-full))}@media (prefers-reduced-motion:no-preference){.md3-navigation-bar-indicator:before{transition:clip-path var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-fast-spatial), opacity var(--md-sys-motion-duration-short2) linear}}.md3-navigation-bar-item:focus-visible .md3-navigation-bar-indicator{outline:3px solid var(--md-sys-color-secondary);outline-offset:2px}.md3-navigation-bar-stateLayer{border-radius:inherit;color:var(--md-sys-color-on-surface);position:absolute;inset:0;overflow:hidden}.md3-navigation-bar-stateLayer:before{content:"";opacity:0;background:currentColor;transition:opacity 15ms linear;position:absolute;inset:0}.md3-navigation-bar-item:hover .md3-navigation-bar-stateLayer:before{opacity:var(--md-sys-state-hover-state-layer-opacity)}.md3-navigation-bar-item:focus-visible .md3-navigation-bar-stateLayer:before{opacity:var(--md-sys-state-focus-state-layer-opacity)}.md3-navigation-bar-icon{block-size:24px;inline-size:24px;color:var(--md-sys-color-on-surface-variant);font-size:24px;display:inline-flex;position:relative}.md3-navigation-bar-item[data-active] .md3-navigation-bar-icon{color:var(--md-sys-color-on-secondary-container)}.md3-navigation-bar-label{font-family:var(--md-sys-typescale-label-medium-font);font-size:var(--md-sys-typescale-label-medium-size);line-height:var(--md-sys-typescale-label-medium-line-height);font-weight:var(--md-sys-typescale-label-medium-weight);letter-spacing:var(--md-sys-typescale-label-medium-tracking);color:var(--md-sys-color-on-surface-variant);white-space:nowrap;position:relative}.md3-navigation-bar-item[data-active] .md3-navigation-bar-label{color:var(--md-sys-color-secondary)}.md3-navigation-bar-badge{display:inline-flex;position:absolute;inset-block-start:0;inset-inline-start:50%}.md3-navigation-bar-badge:has([data-variant=small]){margin-block-start:4px;margin-inline-start:6px}.md3-navigation-bar-badge:has([data-variant=large]){margin-block-start:1px;margin-inline-start:2px}.md3-navigation-bar-item[data-disabled]{cursor:default;pointer-events:none}.md3-navigation-bar-item[data-disabled] .md3-navigation-bar-icon,.md3-navigation-bar-item[data-disabled] .md3-navigation-bar-label{color:color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent)}}
.demo-navigation-bar-badges{width:412px;max-width:100%}
.demo-navigation-bar{width:412px;max-width:100%}
.demo-navigation-bar-wide{width:700px;max-width:100%}