:global(.ui-button) {
  &[data-state~='ripple'] {
    overflow: hidden;
    & :global(.ripple) {
      background-color: currentColor;
      border-radius: 100%;
      display: block;
      opacity: .16;
      pointer-events: none;
      position: absolute;
      transform: scale(0);
      will-change: transform;
      &:global(.animate) {
        animation: ripple 0.65s linear;
      }
    }
  }
}

@keyframes ripple {
  100% {
    opacity: 0;
    transform: scale(2.5);
  }
}