@layer design-system.components{.vds-bottom-nav{--bottom-nav-height:var(--vds-size-2xl,3.25rem);--bottom-nav-padding-inline:var(--vds-space-2,.5rem);--bottom-nav-padding-block:var(--vds-space-1,.25rem);--bottom-nav-gap:var(--vds-space-1,.25rem);--bottom-nav-max-inline-size:100%;--bottom-nav-radius:0px;--bottom-nav-safe-area:env(safe-area-inset-bottom,0px);--bottom-nav-offset-block-end:0px;--bottom-nav-z-index:var(--vds-z-banner,1200);--bottom-nav-background:var(--vds-surface-bg,var(--vds-color-surface,#fff));--bottom-nav-border-color:var(--vds-surface-border,var(--vds-color-border-muted,#e5e7eb));--bottom-nav-border-block-start-width:1px;--bottom-nav-shadow:var(--vds-surface-shadow,var(--vds-shadow-none,0 0 0 0 transparent));--vds-radius-host-r:var(--bottom-nav-radius);--vds-radius-host-b:var(--bottom-nav-border-block-start-width);--vds-radius-host-p:var(--bottom-nav-padding-inline);--bottom-nav-font-family:var(--vds-font-sans,ui-sans-serif, system-ui, sans-serif);--bottom-nav-font-weight:var(--vds-font-weight-medium,500);--bottom-nav-transition-duration:var(--vds-duration-normal,.2s);--bottom-nav-transition-easing:var(--vds-ease-out,cubic-bezier(0, 0, .2, 1));--bottom-nav-hide-translate:calc(100% + var(--bottom-nav-safe-area));--bottom-nav-indicator-color:var(--vds-color-neutral-a3,#0000000f);--bottom-nav-indicator-height:100%;--bottom-nav-indicator-inline-size:64%;--bottom-nav-indicator-radius:var(--vds-radius-full,9999px);--bottom-nav-indicator-position:center;--bottom-nav-indicator-duration:var(--vds-duration-normal,.2s);--bottom-nav-indicator-easing:var(--vds-ease-out,cubic-bezier(0, 0, .2, 1))}@supports (color:lab(0% 0 0)){.vds-bottom-nav{--bottom-nav-indicator-color:var(--vds-color-neutral-a3,lab(0% 0 0/.06))}}.vds-bottom-nav__item{--item-min-touch:44px;--item-flex:1;--item-gap:var(--vds-space-1-5,.375rem);--item-padding-inline:var(--vds-space-2,.5rem);--item-padding-block:var(--vds-space-1,.25rem);--item-radius:var(--vds-radius-nav-item,.375rem);--item-press-scale:.94;--item-icon-size:1.5rem;--item-label-font-size:var(--vds-text-xs,.75rem);--item-label-line-height:var(--vds-leading-tight,1.25);--item-label-display:inline-block;--item-color:var(--vds-color-text-muted,#6b7280);--item-color-active:var(--vds-color-primary-solid,#6366f1);--item-color-disabled:var(--vds-color-text-disabled,#9ca3af);--item-background:transparent;--item-background-hover:var(--vds-color-hover,#0000000a);--item-background-active:var(--vds-color-active,#00000014);--item-focus-ring-color:var(--vds-color-ring,var(--item-color-active));--item-focus-ring-width:2px;--item-focus-ring-offset:2px;--item-transition-duration:var(--vds-duration-fast,.1s);--item-transition-easing:var(--vds-ease-out,cubic-bezier(0, 0, .2, 1))}@supports (color:lab(0% 0 0)){.vds-bottom-nav__item{--item-background-hover:var(--vds-color-hover,lab(0% 0 0/.04));--item-background-active:var(--vds-color-active,lab(0% 0 0/.08))}}.vds-bottom-nav[data-variant=ios] .vds-bottom-nav__item{--item-gap:.1875rem}.vds-bottom-nav[data-variant=underline] .vds-bottom-nav__item{--item-gap:.25rem}.vds-bottom-nav[data-variant=floating]{--bottom-nav-offset-block-end:var(--vds-space-3,.75rem);--bottom-nav-max-inline-size:calc(100% - (var(--vds-space-6,1.5rem) * 2));--bottom-nav-radius:var(--vds-radius-bottom-nav,.75rem);--bottom-nav-shadow:var(--vds-shadow-xl,0 20px 25px -5px #0000001a);--bottom-nav-border-block-start-width:0px;--bottom-nav-padding-inline:var(--vds-space-2,.5rem)}@supports (color:lab(0% 0 0)){.vds-bottom-nav[data-variant=floating]{--bottom-nav-shadow:var(--vds-shadow-xl,0 20px 25px -5px lab(0% 0 0/.1))}}.vds-bottom-nav[data-variant=floating] .vds-bottom-nav__item{--bottom-nav-item-inset-radius:var(--vds-radius-inset,max(0px, calc(var(--bottom-nav-radius) - var(--bottom-nav-border-block-start-width) - var(--bottom-nav-padding-inline))));--item-radius:min(var(--vds-radius-nav-item,.375rem), var(--bottom-nav-item-inset-radius))}.vds-bottom-nav[data-variant=underline]{--bottom-nav-indicator-height:3px;--bottom-nav-indicator-radius:var(--vds-radius-full,9999px);--bottom-nav-indicator-position:top;--bottom-nav-indicator-inline-size:48%}.vds-bottom-nav[data-size=sm]{--bottom-nav-height:var(--vds-size-xl,2.75rem)}.vds-bottom-nav[data-size=sm] .vds-bottom-nav__item{--item-icon-size:1.25rem;--item-label-font-size:var(--vds-text-xs,.75rem)}.vds-bottom-nav[data-size=lg]{--bottom-nav-height:var(--vds-size-3xl,4rem)}.vds-bottom-nav[data-size=lg] .vds-bottom-nav__item{--item-icon-size:1.625rem;--item-label-font-size:var(--vds-text-sm,.875rem)}.vds-bottom-nav[data-elevated=true]{--bottom-nav-shadow:var(--vds-shadow-lg,0 10px 15px -3px #0000001a)}@supports (color:lab(0% 0 0)){.vds-bottom-nav[data-elevated=true]{--bottom-nav-shadow:var(--vds-shadow-lg,0 10px 15px -3px lab(0% 0 0/.1))}}.vds-bottom-nav__item:disabled,.vds-bottom-nav__item[aria-disabled=true]{--item-color:var(--item-color-disabled);--item-color-active:var(--item-color-disabled);--item-background-hover:transparent;--item-background-active:transparent}.vds-bottom-nav__fab{--fab-size:3.5rem;--fab-icon-size:1.5rem;--fab-radius:var(--vds-radius-full,9999px);--fab-translate-y:-40%;--fab-background:var(--vds-color-primary-solid,#6366f1);--fab-background-hover:var(--vds-color-primary-solid-hover,#4f46e5);--fab-background-active:var(--vds-color-primary-solid-active,#4338ca);--fab-color:var(--vds-color-on-primary,#fff);--fab-shadow:var(--vds-shadow-lg,0 10px 15px -3px #0000001a);--fab-ring-color:var(--vds-color-ring,#6366f1);--fab-ring-width:2px;--fab-ring-offset:3px;--fab-press-scale:.94}@supports (color:lab(0% 0 0)){.vds-bottom-nav__fab{--fab-shadow:var(--vds-shadow-lg,0 10px 15px -3px lab(0% 0 0/.1))}}.vds-bottom-nav__fab[data-color=accent]{--fab-background:var(--vds-color-accent-solid,#f97316);--fab-background-hover:var(--vds-color-accent-solid-hover,#ea580c);--fab-background-active:var(--vds-color-accent-solid-active,#c2410c);--fab-color:var(--vds-color-on-accent,#fff)}.vds-bottom-nav__fab[data-color=success]{--fab-background:var(--vds-color-success-solid,#16a34a);--fab-background-hover:var(--vds-color-success-solid-hover,#15803d);--fab-background-active:var(--vds-color-success-solid-active,#166534);--fab-color:var(--vds-color-on-success,#fff)}.vds-bottom-nav__badge{--badge-size:1rem;--badge-min-inline-size:1rem;--badge-dot-size:.5rem;--badge-padding-inline:.25rem;--badge-font-size:.625rem;--badge-font-weight:var(--vds-font-weight-semibold,600);--badge-radius:var(--vds-radius-full,9999px);--badge-background:var(--vds-color-danger-solid,#dc2626);--badge-color:var(--vds-color-on-danger,#fff);--badge-ring-color:var(--bottom-nav-background);--badge-ring-width:2px;--badge-offset-block:-.25rem;--badge-offset-inline:-.375rem;--badge-translate-x:50%;--badge-translate-y:-50%;--badge-dot-translate-x:50%;--badge-dot-translate-y:-50%}}
@layer design-system.components{.vds-bottom-nav{justify-content:stretch;align-items:stretch;gap:var(--bottom-nav-gap);inline-size:var(--bottom-nav-max-inline-size);max-inline-size:100%;block-size:calc(var(--bottom-nav-height) + var(--bottom-nav-padding-block) * 2);padding-inline:var(--bottom-nav-padding-inline);background-color:var(--bottom-nav-background);border-block-start:var(--bottom-nav-border-block-start-width) solid var(--bottom-nav-border-color);border-radius:var(--bottom-nav-radius);box-shadow:var(--bottom-nav-shadow);font-family:var(--bottom-nav-font-family);font-weight:var(--bottom-nav-font-weight);box-sizing:border-box;isolation:isolate;-webkit-tap-highlight-color:transparent;transition:transform var(--bottom-nav-transition-duration) var(--bottom-nav-transition-easing), box-shadow var(--bottom-nav-transition-duration) var(--bottom-nav-transition-easing);padding-block-start:var(--bottom-nav-padding-block);padding-block-end:calc(var(--bottom-nav-padding-block) + var(--bottom-nav-safe-area));display:flex}.vds-bottom-nav[data-position=fixed]{z-index:var(--bottom-nav-z-index);margin-inline:auto;position:fixed;inset-block-end:var(--bottom-nav-offset-block-end);inset-inline:0}.vds-bottom-nav[data-position=sticky]{z-index:var(--bottom-nav-z-index);position:sticky;inset-block-end:var(--bottom-nav-offset-block-end)}.vds-bottom-nav[data-position=static]{z-index:auto;position:relative}.vds-bottom-nav[data-variant=floating][data-position=fixed]{inset-inline:var(--vds-space-6,1.5rem);margin-inline:auto}.vds-bottom-nav[data-hidden=true]{transform:translateY(var(--bottom-nav-hide-translate))}.vds-bottom-nav__item{flex:var(--item-flex);min-inline-size:0;min-block-size:var(--item-min-touch);padding-inline:var(--item-padding-inline);padding-block:var(--item-padding-block);border-radius:var(--item-radius);background:var(--item-background);color:var(--item-color);font:inherit;cursor:pointer;-webkit-user-select:none;user-select:none;appearance:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:color var(--item-transition-duration) var(--item-transition-easing), background-color var(--item-transition-duration) var(--item-transition-easing), transform var(--item-transition-duration) var(--item-transition-easing);border:0;justify-content:center;align-items:center;text-decoration:none;display:inline-flex;position:relative}.vds-bottom-nav__item:hover:not(:disabled):not([aria-disabled=true]){background-color:var(--item-background-hover)}.vds-bottom-nav__item:active:not(:disabled):not([aria-disabled=true]){background-color:var(--item-background-active);transform:scale(var(--item-press-scale))}.vds-bottom-nav[data-variant=material] .vds-bottom-nav__item[data-active=true],.vds-bottom-nav[data-variant=underline] .vds-bottom-nav__item[data-active=true],.vds-bottom-nav[data-variant=floating] .vds-bottom-nav__item[data-active=true]{--item-background-hover:transparent;--item-background-active:transparent}.vds-bottom-nav__item:focus-visible{outline:var(--item-focus-ring-width) solid var(--item-focus-ring-color);outline-offset:var(--item-focus-ring-offset)}.vds-bottom-nav__item[data-active=true]{color:var(--item-color-active)}.vds-bottom-nav__item:disabled,.vds-bottom-nav__item[aria-disabled=true]{cursor:not-allowed;pointer-events:none;opacity:var(--vds-opacity-disabled,.5)}.vds-bottom-nav__item-inner{z-index:1;justify-content:center;align-items:center;gap:var(--item-gap);pointer-events:none;flex-direction:column;inline-size:100%;display:inline-flex;position:relative}.vds-bottom-nav__icon{inline-size:var(--item-icon-size);block-size:var(--item-icon-size);color:inherit;transition:color var(--item-transition-duration) var(--item-transition-easing);justify-content:center;align-items:center;display:inline-flex;position:relative}.vds-bottom-nav__icon>svg,.vds-bottom-nav__icon>img{block-size:100%;inline-size:100%}.vds-bottom-nav__label{display:var(--item-label-display);max-inline-size:100%;font-size:var(--item-label-font-size);line-height:var(--item-label-line-height);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.vds-bottom-nav[data-variant=material] .vds-bottom-nav__item[data-active=true] .vds-bottom-nav__icon:before{content:"";z-index:-1;background-color:var(--bottom-nav-indicator-color);border-radius:var(--bottom-nav-indicator-radius);transition:opacity var(--item-transition-duration) var(--item-transition-easing), transform var(--item-transition-duration) var(--item-transition-easing);position:absolute;inset-block:-.25rem;inset-inline:-1rem}.vds-bottom-nav[data-variant=underline] .vds-bottom-nav__item[data-active=true]:before{content:"";inline-size:var(--bottom-nav-indicator-inline-size);block-size:var(--bottom-nav-indicator-height);background-color:var(--item-color-active);border-radius:var(--bottom-nav-indicator-radius);position:absolute;inset-block-start:0;inset-inline-start:50%;translate:-50%}.vds-bottom-nav[data-animated-indicator=true][data-variant=material] .vds-bottom-nav__item[data-active=true] .vds-bottom-nav__icon:before,.vds-bottom-nav[data-animated-indicator=true][data-variant=underline] .vds-bottom-nav__item[data-active=true]:before{display:none}.vds-bottom-nav__sliding-indicator{z-index:0;background-color:var(--bottom-nav-indicator-color);border-radius:var(--bottom-nav-indicator-radius);pointer-events:none;opacity:0;position:absolute}.vds-bottom-nav__sliding-indicator[data-measured=true]{opacity:1}.vds-bottom-nav[data-variant=underline] .vds-bottom-nav__sliding-indicator{transition:inset-inline-start var(--bottom-nav-indicator-duration) var(--bottom-nav-indicator-easing), inline-size var(--bottom-nav-indicator-duration) var(--bottom-nav-indicator-easing), opacity var(--bottom-nav-indicator-duration) var(--bottom-nav-indicator-easing), background-color var(--bottom-nav-indicator-duration) var(--bottom-nav-indicator-easing)}.vds-bottom-nav[data-variant=material] .vds-bottom-nav__sliding-indicator[data-measured=true]{transform-origin:50%;animation:vds-bottom-nav-pill-open var(--bottom-nav-indicator-duration) var(--bottom-nav-indicator-easing) both}@keyframes vds-bottom-nav-pill-open{0%{opacity:0;transform:scaleX(.15)}to{opacity:1;transform:scaleX(1)}}.vds-bottom-nav[data-variant=material] .vds-bottom-nav__sliding-indicator{inset-block-start:0}.vds-bottom-nav[data-variant=underline] .vds-bottom-nav__sliding-indicator{block-size:var(--bottom-nav-indicator-height);background-color:var(--item-color-active,var(--vds-color-primary-solid));inset-block-start:0}.vds-bottom-nav__fab{inline-size:var(--fab-size);block-size:var(--fab-size);margin-inline:var(--vds-space-1,.25rem);border-radius:var(--fab-radius);background-color:var(--fab-background);color:var(--fab-color);box-shadow:var(--fab-shadow);cursor:pointer;-webkit-user-select:none;user-select:none;appearance:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transform:translateY(var(--fab-translate-y));transition:background-color var(--item-transition-duration) var(--item-transition-easing), transform var(--item-transition-duration) var(--item-transition-easing), box-shadow var(--item-transition-duration) var(--item-transition-easing);border:0;flex:none;justify-content:center;align-self:center;align-items:center;padding:0;display:inline-flex;position:relative}.vds-bottom-nav__fab:hover{background-color:var(--fab-background-hover)}.vds-bottom-nav__fab:active{background-color:var(--fab-background-active);transform:translateY(var(--fab-translate-y)) scale(var(--fab-press-scale))}.vds-bottom-nav__fab:focus-visible{outline:var(--fab-ring-width) solid var(--fab-ring-color);outline-offset:var(--fab-ring-offset)}.vds-bottom-nav__fab>svg{inline-size:var(--fab-icon-size);block-size:var(--fab-icon-size)}.vds-bottom-nav[data-has-fab-notch=true]{--fab-notch-radius:calc(var(--fab-size) / 2 + 6px);-webkit-mask-image:radial-gradient(circle var(--fab-notch-radius) at 50% 0, transparent 98%, #000 100%);mask-image:radial-gradient(circle var(--fab-notch-radius) at 50% 0, transparent 98%, #000 100%);-webkit-mask-image:radial-gradient(circle var(--fab-notch-radius) at 50% 0, transparent 98%, #000 100%)}.vds-bottom-nav__badge{transform:translate(var(--badge-translate-x), var(--badge-translate-y));min-inline-size:var(--badge-min-inline-size);block-size:var(--badge-size);padding-inline:var(--badge-padding-inline);background-color:var(--badge-background);color:var(--badge-color);border-radius:var(--badge-radius);box-shadow:0 0 0 var(--badge-ring-width) var(--badge-ring-color);font-size:var(--badge-font-size);font-weight:var(--badge-font-weight);pointer-events:none;white-space:nowrap;justify-content:center;align-items:center;line-height:1;display:inline-flex;position:absolute;inset-block-start:var(--badge-offset-block);inset-inline-end:var(--badge-offset-inline)}.vds-bottom-nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .vds-bottom-nav__badge{transform:translate(calc(var(--badge-translate-x) * -1), var(--badge-translate-y))}.vds-bottom-nav__badge[data-dot=true]{min-inline-size:var(--badge-dot-size);inline-size:var(--badge-dot-size);block-size:var(--badge-dot-size);transform:translate(var(--badge-dot-translate-x), var(--badge-dot-translate-y));padding-inline:0}.vds-bottom-nav:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .vds-bottom-nav__badge[data-dot=true]{transform:translate(calc(var(--badge-dot-translate-x) * -1), var(--badge-dot-translate-y))}@media (prefers-reduced-motion:reduce){.vds-bottom-nav,.vds-bottom-nav__item,.vds-bottom-nav__item:active,.vds-bottom-nav__icon,.vds-bottom-nav__fab,.vds-bottom-nav__fab:active,.vds-bottom-nav__sliding-indicator,.vds-bottom-nav[data-variant=material] .vds-bottom-nav__item[data-active=true] .vds-bottom-nav__icon:before{transition:none!important}}}