.q-scope{--scope-idx:0;--scope-count:3;background:var(--q-bg-elev-1);border:1px solid var(--q-rule);border-radius:var(--q-radius-pill);box-shadow:var(--q-shadow-1);align-self:flex-end;padding:4px;display:inline-flex;position:relative}.q-scope__pill{width:calc((100% - 8px)/var(--scope-count));transform:translateX(calc(var(--scope-idx) * 100%));background:var(--q-accent);border-radius:var(--q-radius-pill);transition:transform .32s var(--q-ease-out);position:absolute;top:4px;bottom:4px;left:4px;box-shadow:0 1px #0000000d,0 2px 8px #1b2a4e2e}.q-scope__opt{z-index:1;color:var(--q-text-muted);font-family:var(--q-font-body);letter-spacing:-.005em;cursor:pointer;border-radius:var(--q-radius-pill);transition:color .22s var(--q-ease);background:0 0;border:0;padding:7px 16px;font-size:13px;font-weight:500;position:relative}.q-scope__opt.is-on{color:var(--q-bg-elev-1)}.q-scope__opt:hover:not(.is-on){color:var(--q-text)}.q-scope--sm .q-scope__opt{padding:5px 12px;font-size:12px}