{"version":3,"file":"ripple.module.mjs","names":[],"sources":["../../../../package/common/ripple/ripple.module.pcss"],"sourcesContent":[".ripple {\n  background: rgb(255 255 255 / 20%);\n  border-radius: 1000px;\n  width: 100%;\n  aspect-ratio: 1;\n  position: absolute;\n  left: 0;\n  top: 0;\n  transform: translate(-50%, -50%) scale(0);\n  animation: ripple var(--ripple-animation-length) linear forwards;\n\n  &-container {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    border-radius: inherit;\n    user-select: none;\n    pointer-events: none;\n  }\n\n  @keyframes ripple {\n    to {\n      transform: translate(-50%, -50%) scale(4);\n      opacity: 0;\n    }\n  }\n}\n\n/* The ripple is nothing but the animation, and it starts at scale(0), so this leaves no ink at\n   all rather than a dot parked under the cursor. The element is removed on a timer either way. */\n@media (prefers-reduced-motion: reduce) {\n  .ripple {\n    animation: none;\n  }\n}\n"],"mappings":""}