@import "../../themes/native/native.globals";

// Material Design Ripple Effect
// --------------------------------------------------

$scale-duration: 225ms;
$fade-in-duration: 75ms;
$fade-out-duration: 150ms;

:host {
  @include position(0, 0, 0, 0);

  position: absolute;

  contain: strict;
  pointer-events: none;
}

:host(.unbounded) {
  contain: layout size style;
}

.ripple-effect {
  @include border-radius(50%);

  position: absolute;

  // Should remain static for performance reasons
  background-color: currentColor;
  color: inherit;

  contain: strict;
  opacity: 0;
  animation: $scale-duration rippleAnimation forwards, $fade-in-duration fadeInAnimation forwards;

  will-change: transform, opacity;
  pointer-events: none;
}

.fade-out {
  transform: translate(var(--translate-end)) scale(var(--final-scale, 1));
  animation: $fade-out-duration fadeOutAnimation forwards;
}

@keyframes rippleAnimation {
  from {
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    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: 0.16;
  }
}

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

    opacity: 0.16;
  }

  to {
    opacity: 0;
  }
}