@include pulsate(
  $animation-name: "focus-ripple-pulsate",
  $start-size: 0.75,
  $end-size: 0.85
);

.dig-focus-ripple {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  
  @include ease-out();
  transform: scale(0);
  opacity: 0;

  .dig-focus-ripple-inner {
    @include pulsate-animation("focus-ripple-pulsate");
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.1);
  }

  &.dig-is-shown {
    transform: scale(1);
    opacity: 1;
  }
}