@use "./ripple-effect.common";
@use "../../themes/ionic/ionic.globals.scss" as globals;

// Ionic Ripple Effect
// --------------------------------------------------

.ripple-effect {
  animation-name: rippleAnimation, fadeInAnimation;
}

.fade-out {
  animation-name: fadeOutAnimation;
}

@keyframes rippleAnimation {
  from {
    animation-timing-function: globals.$ion-transition-curve-expressive;

    transform: scale(1);
  }

  to {
    transform: translate(var(--translate-end)) scale(var(--final-scale, 1));
  }
}

@keyframes fadeInAnimation {
  from {
    animation-timing-function: linear;

    opacity: 0;
  }

  to {
    opacity: var(--ripple-opacity, 0.16);
  }
}

@keyframes fadeOutAnimation {
  from {
    animation-timing-function: linear;

    opacity: var(--ripple-opacity, 0.16);
  }

  to {
    opacity: 0;
  }
}