.pattern-preview.ripple-preview{position:relative;display:grid;align-content:center;place-items:center;padding:18px;height:180px;overflow:hidden;isolation:isolate}.pattern-preview.ripple-preview.pattern-preview--inspector{height:auto;min-height:220px;gap:14px;padding:32px}.ripple-preview__hint{margin:0;font-size:.78rem;color:rgba(203,213,225,.72);text-align:center}.ripple-button{position:relative;overflow:hidden;background:var(--ripple-backdrop);color:white;border:0;border-radius:999px;padding:12px 22px;font-size:.9rem;font-weight:600;cursor:pointer;isolation:isolate}.ripple-button:after{content:"";position:absolute;left:var(--ripple-x,50%);top:var(--ripple-y,50%);width:var(--ripple-spread);height:var(--ripple-spread);margin-left:calc(var(--ripple-spread) / -2);margin-top:calc(var(--ripple-spread) / -2);border-radius:50%;background:radial-gradient(circle,var(--ripple-accent) 0,transparent 70%);opacity:0;transform:scale(.2);transition:opacity var(--ripple-duration) ease-out,transform var(--ripple-duration) ease-out,left var(--ripple-duration) ease-out,top var(--ripple-duration) ease-out;pointer-events:none;z-index:-1}.ripple-button.is-rippling:after{opacity:1;transform:scale(1)}.ripple-preview:not(.pattern-preview--inspector) .ripple-button:after{animation:stageRippleExpand 2s ease-out infinite}.ripple-preview--pointer:not(.pattern-preview--inspector) .ripple-button{--ripple-x:28%;--ripple-y:42%}.ripple-preview--burst:not(.pattern-preview--inspector) .ripple-button:after{animation:stageAmbientBurst 2s ease-in-out infinite}@keyframes stageRippleExpand{0%{opacity:0;transform:scale(0)}15%{opacity:.9;transform:scale(.4)}85%,to{opacity:0;transform:scale(1.4)}}@keyframes stageAmbientBurst{0%,to{opacity:.55;transform:scale(.92)}50%{opacity:1;transform:scale(1.06)}}@media (prefers-reduced-motion:reduce){.ripple-button:after{transition-duration:0s}.ripple-preview:not(.pattern-preview--inspector) .ripple-button:after{animation:none}}