@layer m3-components{.m3-rail{--_w:var(--md-sys-size-rail);--_rpad:0px;--_ic:var(--md-sys-size-icon);--_pw:56px;--_ph:32px;--_pt:6px;--_ch:64px;--_eh:56px;--_ipad:16px;--_igap:12px;--_hh:56px;--_top:calc(.5 * (var(--md-sys-size-app-bar) - var(--_hh)));--_fg:var(--md-sys-color-on-surface-variant);z-index:var(--md-sys-z-nav);box-sizing:border-box;inline-size:var(--_w);max-inline-size:100%;padding:var(--_top) var(--_rpad) 16px;background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);transition:inline-size var(--md-sys-motion-t-medium),padding-inline var(--md-sys-motion-t-medium);flex-direction:column;flex:none;display:flex;position:relative;overflow:hidden}.m3-rail[data-sticky]{align-self:flex-start;block-size:100dvh;position:sticky;top:0}.m3-rail[data-expanded]{--_w:var(--md-sys-size-rail-expanded);--_rpad:12px;transition:inline-size var(--md-sys-motion-t-large),padding-inline var(--md-sys-motion-t-large)}.m3-rail__head{min-block-size:var(--_hh);flex:none;align-items:center;margin-block-end:var(--md-sys-space-4);display:flex}.m3-rail__menu{transition:margin-inline-start var(--md-sys-motion-t-medium);margin-inline-start:calc(.5 * (var(--md-sys-size-rail) - var(--md-sys-size-btn-s)))}.m3-rail[data-expanded] .m3-rail__menu{transition-duration:var(--md-sys-motion-dur-large);margin-inline-start:calc(var(--_ipad) + var(--_ic) / 2 - var(--md-sys-size-btn-s) / 2)}.m3-rail__head-slot{min-width:0;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity var(--md-sys-motion-fx-micro) linear,visibility 0s linear var(--md-sys-motion-fx-micro);margin-inline-start:var(--md-sys-space-2)}.m3-rail[data-expanded] .m3-rail__head-slot{opacity:1;visibility:visible;transition:opacity var(--md-sys-motion-t-fx-large),visibility 0s linear 0s;transition-delay:calc(var(--md-sys-motion-dur-large) * .25),0s}.m3-rail__items{scrollbar-width:none;min-block-size:0;overflow:hidden auto}.m3-rail__foot,.m3-rail__items{flex-direction:column;gap:4px;display:flex}.m3-rail__foot{flex:none;align-items:flex-start;margin-block-start:auto;padding-block-start:var(--md-sys-space-2)}.m3-rail__foot>:where(*){transition:margin-inline-start var(--md-sys-motion-t-medium);margin-inline-start:calc(.5 * (var(--md-sys-size-rail) - var(--md-sys-size-btn-s)))}.m3-rail[data-expanded] .m3-rail__foot>:where(*){transition-duration:var(--md-sys-motion-dur-large);margin-inline-start:calc(var(--_ipad) + var(--_ic) / 2 - var(--md-sys-size-btn-s) / 2)}.m3-rail__item{--m3-icon-size:var(--_ic);inline-size:100%;block-size:var(--_ch);color:var(--_fg);-webkit-tap-highlight-color:transparent;cursor:pointer;transition:block-size var(--md-sys-motion-t-medium),color var(--md-sys-motion-t-fx-small);outline:none;flex:none;text-decoration:none;display:block;position:relative}.m3-rail[data-expanded] .m3-rail__item{block-size:var(--_eh);transition:block-size var(--md-sys-motion-t-large),color var(--md-sys-motion-t-fx-small)}.m3-rail__pill{inline-size:var(--_pw);block-size:var(--_ph);border-radius:var(--md-sys-shape-corner-full);isolation:isolate;pointer-events:none;transition:inline-size var(--md-sys-motion-t-medium),block-size var(--md-sys-motion-t-medium),inset-block-start var(--md-sys-motion-t-medium);margin-inline:auto;position:absolute;inset-block-start:var(--_pt);inset-inline:0}.m3-rail[data-expanded] .m3-rail__pill{inline-size:100%;block-size:var(--_eh);transition-duration:var(--md-sys-motion-dur-large);inset-block-start:0}.m3-rail__pill:after,.m3-rail__pill:before{content:"";border-radius:inherit;position:absolute;inset:0}.m3-rail__pill:before{background:var(--md-sys-color-secondary-container);opacity:0;scale:calc(1 - .5 * var(--md-sys-motion-travel)) 1;transition:scale var(--md-sys-motion-t-small),opacity var(--md-sys-motion-t-fx-small)}.m3-rail__pill:after{background:var(--md-sys-color-on-surface);opacity:0;transition:opacity var(--md-sys-motion-t-state)}.m3-rail__item[data-active] .m3-rail__pill:before{opacity:1;scale:1}@media (hover:hover){.m3-rail__item:hover .m3-rail__pill:after{opacity:var(--md-sys-state-hover-opacity)}}.m3-rail__item:active .m3-rail__pill:after{opacity:var(--md-sys-state-pressed-opacity);transition-duration:0s}.m3-rail__item:focus-visible .m3-rail__pill{outline:var(--md-sys-focus-width) solid var(--md-sys-focus-color);outline-offset:var(--md-sys-focus-offset)}.m3-rail__icon{transition:inset-block-start var(--md-sys-motion-t-medium),inset-inline-start var(--md-sys-motion-t-medium),font-variation-settings var(--md-sys-motion-t-fx-small);position:absolute;inset-block-start:calc(var(--_pt) + .5 * (var(--_ph) - var(--_ic)));inset-inline-start:calc(50% - var(--_ic) / 2)}.m3-rail[data-expanded] .m3-rail__icon{transition-duration:var(--md-sys-motion-dur-large),var(--md-sys-motion-dur-large),var(--md-sys-motion-fx-small);inset-block-start:calc(.5 * (var(--_eh) - var(--_ic)));inset-inline-start:var(--_ipad)}.m3-rail__item[data-active] .m3-rail__icon{color:var(--md-sys-color-on-secondary-container)}.m3-rail__label-v{text-align:center;font:500 12px/16px var(--md-ref-typeface-brand);letter-spacing:.5px;transition:opacity var(--md-sys-motion-t-fx-small),color var(--md-sys-motion-t-fx-small);transition-delay:calc(var(--md-sys-motion-dur-medium) * .25),0s;inset-block-start:calc(4px + var(--_pt) + var(--_ph));inset-inline:0}.m3-rail__label-h,.m3-rail__label-v{text-overflow:ellipsis;white-space:nowrap;position:absolute;overflow:hidden}.m3-rail__label-h{inset-block-start:calc(.5 * (-20px + var(--_eh)));inset-inline:calc(var(--_ipad) + var(--_ic) + var(--_igap)) 12px;font:500 14px/20px var(--md-ref-typeface-brand);letter-spacing:.1px;opacity:0;transition:opacity var(--md-sys-motion-fx-micro) linear,color var(--md-sys-motion-t-fx-small)}.m3-rail[data-expanded] .m3-rail__label-v{opacity:0;transition:opacity var(--md-sys-motion-fx-micro) linear;transition-delay:0s}.m3-rail[data-expanded] .m3-rail__label-h{opacity:1;transition:opacity var(--md-sys-motion-t-fx-large),color var(--md-sys-motion-t-fx-small);transition-delay:calc(var(--md-sys-motion-dur-large) * .25),0s}.m3-rail__item[data-active] .m3-rail__label-v{color:var(--md-sys-color-secondary)}.m3-rail__item[data-active] .m3-rail__label-h{color:var(--md-sys-color-on-secondary-container)}@media (forced-colors:active){.m3-rail__item[data-active] .m3-rail__pill{outline:2px solid highlight}.m3-rail__item[data-active] .m3-rail__pill:before{background:0 0}}}@layer m3-density{:root[data-density=compact] .m3-rail{--_ic:var(--md-sys-size-icon);--_pw:48px;--_ph:28px;--_pt:4px;--_ch:56px;--_eh:44px;--_ipad:12px;--_igap:12px;--_hh:40px}:root[data-density=compact] .m3-rail__label-v{letter-spacing:.1px;padding-inline:1px;font-size:11px;line-height:14px}:root[data-density=compact] .m3-rail__label-h{font-size:13px}}
