.sd-on{--bar:#232323;--fg:#e5e5e5;--mute:#8e8e8e;--line:#ffffff14;--on-fg:#0b0b0b}.sd-on[data-fill=light]{--on-fg:#fff;--bar:#fff;--fg:#222;--mute:#777;--line:#00000014}.sd-on__bar{background:var(--bar);box-shadow:inset 0 0 0 1px var(--line), 0 18px 40px -18px #000000b3;border-radius:999px;gap:4px;padding:6px;display:flex}.sd-on[data-shape=squircle] .sd-on__bar,.sd-on[data-shape=squircle] .sd-on__tab{border-radius:16px}.sd-on__tab{height:48px;color:var(--mute);border-radius:999px;align-items:center;padding:0 14px;transition:background-color .35s,color .25s,padding .45s cubic-bezier(.2,1.2,.3,1);display:flex}.sd-on__tab[aria-selected=true]{background:var(--on-accent);color:var(--on-fg);padding:0 18px 0 14px}.sd-on__tab:not([aria-selected=true]):hover{color:var(--fg)}.sd-on__tab:focus-visible{outline:2px solid var(--fg);outline-offset:2px}.sd-on__icon{width:22px;height:22px;display:grid;position:relative}.sd-on__icon svg{fill:none;stroke:currentColor;stroke-width:1.7px;stroke-linecap:round;stroke-linejoin:round;width:22px;height:22px}.sd-on__badge{color:#fff;text-align:center;min-width:18px;height:18px;box-shadow:0 0 0 2px var(--bar);background:#f43f5e;border-radius:99px;padding:0 5px;font-size:11px;font-weight:700;line-height:18px;position:absolute;top:-6px;right:-8px}.sd-on__label{grid-template-columns:0fr;transition:grid-template-columns .45s cubic-bezier(.2,1.2,.3,1);display:grid}.sd-on__label>span{white-space:nowrap;padding-left:0;font-size:15px;font-weight:600;transition:padding .45s;overflow:hidden}.sd-on__tab[aria-selected=true] .sd-on__label{grid-template-columns:1fr}.sd-on__tab[aria-selected=true] .sd-on__label>span{padding-left:8px}@media (prefers-reduced-motion:reduce){.sd-on *{transition:none!important}}