@utility touch-ripple-* {
  --k-touch-ripple-color: color-mix(
    in oklab,
    --value(--color-*) 15%,
    transparent 0%
  );
}

:root {
  --k-touch-ripple-opacity: 0.15;
  --k-touch-ripple-black: rgba(0, 0, 0, var(--k-touch-ripple-opacity));
  --k-touch-ripple-white: rgba(255, 255, 255, var(--k-touch-ripple-opacity));
  --k-touch-ripple-color: var(--k-touch-ripple-black);
}
.k-touch-ripple-wave {
  left: 0;
  top: 0;
  position: absolute !important;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  padding: 0;
  margin: 0;
  font-size: 0;
  transform: translate3d(0px, 0px, 0) scale(0);
  background-color: var(--k-touch-ripple-color);
  animation: k-touch-ripple-in 200ms forwards;
  display: block !important;
  &.k-touch-ripple-wave-out {
    transform: var(--k-ripple-transform);
    animation: k-touch-ripple-out 300ms forwards;
  }
}
@keyframes k-touch-ripple-in {
  from {
    transform: translate3d(0px, 0px, 0) scale(0);
  }
  to {
    transform: var(--k-ripple-transform);
  }
}
@keyframes k-touch-ripple-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}