.host-nav-rail{scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x}.host-nav-rail::-webkit-scrollbar{display:none}.host-nav-fade{position:relative}.host-nav-fade:before,.host-nav-fade:after{content:"";z-index:2;pointer-events:none;opacity:0;width:1.75rem;transition:opacity .2s;position:absolute;top:0;bottom:0}.host-nav-fade:before{background:linear-gradient(to right, var(--kama-field), transparent);left:0}.host-nav-fade:after{background:linear-gradient(to left, var(--kama-field), transparent);right:0}.host-nav-fade[data-overflow=start]:before,.host-nav-fade[data-overflow=both]:before,.host-nav-fade[data-overflow=end]:after,.host-nav-fade[data-overflow=both]:after{opacity:1}.host-nav-pill{z-index:0;pointer-events:none;background:linear-gradient(180deg, color-mix(in srgb, var(--kama-accent) 88%, white) 0%, var(--kama-accent) 100%);height:100%;box-shadow:0 0 0 1px color-mix(in srgb, var(--kama-accent) 35%, transparent), 0 6px 18px -6px #1b5c578c, inset 0 1px 0 #ffffff38;opacity:0;will-change:transform, width;border-radius:9999px;width:0;transition:transform .4s cubic-bezier(.22,1,.36,1),width .4s cubic-bezier(.22,1,.36,1),opacity .2s;position:absolute;top:0;left:0;transform:translate(0)}.host-nav-pill[data-ready=true]{opacity:1}@media (prefers-reduced-motion:reduce){.host-nav-pill{transition:none}}