:root{--component-inactive-color:color-mix(in srgb,var(--brand-text) 55%,transparent);--component-bg:var(--brand-background);--component-shadow:rgba(0,0,0,.08);--component-active-bg:color-mix(in srgb,var(--brand-primary) 12%,transparent);--component-active-color-default:var(--brand-primary)}.menu{justify-content:space-around;gap:.25rem;background:var(--component-bg);border-top:1px solid var(--component-shadow);padding:.5rem .75rem calc(.5rem + env(safe-area-inset-bottom))}.menu,.menu__item{display:flex;align-items:center}.menu__item{flex-direction:row;gap:0;padding:.6rem .75rem;border-radius:999px;color:var(--component-inactive-color);background:transparent;border:none;cursor:pointer;transition:color .25s ease,background-color .25s ease,padding .25s ease;overflow:hidden;white-space:nowrap;font-family:inherit}.menu__item.active{color:var(--component-active-color,var(--component-active-color-default));background:var(--component-active-bg);padding-right:1rem;padding-left:1rem}.menu__item:active{transform:scale(.96)}.menu__icon{position:relative;display:inline-flex;flex-shrink:0}.menu__badge,.menu__icon{align-items:center;justify-content:center}.menu__badge{position:absolute;top:-5px;right:-7px;background:var(--brand-danger,#ef4444);color:#fff;font-size:.6rem;font-weight:700;min-width:1rem;height:1rem;border-radius:999px;display:flex;padding:0 .2rem;line-height:1;pointer-events:none}.menu__icon .icon{width:1.35rem;height:1.35rem;stroke-width:2}.menu__item.active .menu__icon{animation:iconBounce .6s ease}.menu__text{font-size:.8125rem;font-weight:600;letter-spacing:.01em;text-transform:lowercase;max-width:0;opacity:0;margin-left:0;transition:max-width .3s ease,opacity .25s ease,margin-left .25s ease;overflow:hidden}.menu__text.active{max-width:var(--lineWidth,120px);opacity:1;margin-left:.4rem}@keyframes iconBounce{0%,to{transform:translateY(0)}20%{transform:translateY(-.3em)}40%{transform:translateY(0)}60%{transform:translateY(-.1em)}80%{transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.menu__item,.menu__text{transition:none}.menu__item.active .menu__icon{animation:none}}