.snd[data-state]{color:var(--color-text-tertiary);transition:color var(--duration-sm) var(--ease-reveal), border-color var(--duration-sm) var(--ease-reveal), background-color var(--duration-sm) var(--ease-reveal);position:relative}.snd[data-state=pending]{color:var(--color-text-secondary)}.snd[data-state=starting],.snd[data-state=on]{color:var(--color-text-primary)}.snd svg{flex:none;display:block;overflow:visible}.snd-ico{display:inline-flex}.snd-slash,.snd-knock{opacity:0;transition:opacity var(--duration-sm) var(--ease-reveal)}.snd[data-state=off] .snd-slash,.snd[data-state=off] .snd-knock{opacity:1}.snd--pill[data-state]{justify-content:center;width:40px;padding:0}.snd--sheet[data-state]{gap:4px;padding-left:5px}.snd--sheet:before{content:"";position:absolute;inset:-7px 0}.snd--sheet .snd-lbl{color:var(--color-text-primary)}.snd--footer[data-state]{min-height:44px;font-family:var(--font-text);white-space:nowrap;cursor:pointer;background:0 0;border:0;align-items:center;gap:8px;padding:0;font-weight:500;line-height:1;display:inline-flex}.snd--footer .snd-lbl{color:var(--color-text-secondary);transition:color var(--duration-sm) var(--ease-reveal)}.snd--footer:hover .snd-lbl{color:var(--color-text-primary)}.snd-tip{z-index:1;border:1px solid rgb(var(--color-text-primary-rgb) / .12);border-radius:var(--radius-sm);background:var(--color-surface-2);color:var(--color-text-body);font:400 12px/1.35 var(--font-text);letter-spacing:normal;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--duration-sm) var(--ease-reveal), translate var(--duration-sm) var(--ease-reveal);padding:7px 10px;position:absolute}.snd--pill .snd-tip{top:calc(100% + 8px);left:50%;translate:-50% -3px}.snd--footer .snd-tip{bottom:calc(100% + 4px);left:0;translate:0 3px}@media (hover:hover){.snd--pill:hover .snd-tip{opacity:1;translate:-50%}.snd--footer:hover .snd-tip{opacity:1;translate:0}}.snd--pill:focus-visible .snd-tip{opacity:1;translate:-50%}.snd--footer:focus-visible .snd-tip{opacity:1;translate:0}.snd[data-tip-off] .snd-tip{opacity:0}:root[data-motion=reduced] .snd-tip{transition:opacity var(--duration-sm) linear}:root[data-motion=reduced] .snd--pill .snd-tip{translate:-50%}:root[data-motion=reduced] .snd--footer .snd-tip{translate:0}
