/* some variables are not defined on purpose to allow plugin authors to more easily provide overrides */

/* use `body` prefix for more specificity: */
body .bytm-ripple {
  position: relative;
  overflow: hidden;
  width: var(--bytm-ripple-width, auto);
  height: var(--bytm-ripple-height, auto);
}

body .bytm-ripple.faster {
  --bytm-ripple-anim-duration: 0.15s;
}

body .bytm-ripple.fast {
  --bytm-ripple-anim-duration: 0.35s;
}

body .bytm-ripple.slow {
  --bytm-ripple-anim-duration: 0.75s;
}

body .bytm-ripple.slower {
  --bytm-ripple-anim-duration: 1s;
}

.bytm-ripple-area {
  --bytm-ripple-min-size: 100px;
  position: absolute;
  background: var(--bytm-ripple-color, rgba(255, 255, 255, 0.175));
  transform: translate(-50%, -50%);
  pointer-events: none;
  border-radius: 50%;
  animation: bytm-scale-ripple var(--bytm-ripple-anim-duration, 0.55s)
    cubic-bezier(0.375, 0.33, 0.225, 0.93);
}

@keyframes bytm-scale-ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    /* Variable is added to .bytm-ripple by JS at runtime since there's no better way of getting the parent's width inside of here */
    width: calc(
      max(
        var(--bytm-ripple-cont-width, var(--bytm-ripple-min-size)) * 2,
        var(--bytm-ripple-min-size)
      )
    );
    height: calc(
      max(
        var(--bytm-ripple-cont-width, var(--bytm-ripple-min-size)) * 2,
        var(--bytm-ripple-min-size)
      )
    );
    opacity: 0;
  }
}
