.dig-ripple-circle {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0.7;
  @include ease-out($property: opacity, $duration: 2s);
  
  .dig-ripple-circle-inner {
    height: 100%;
    width: 100%;
    border-radius: 50%;
    transform: scale(0);
    background-color: rgba(0,0,0,0.2);
    @include ease-out($property: transform, $duration: 1s);
  }

  &.dig-is-started {
    opacity: 1;

    .dig-ripple-circle-inner {
      transform: scale(1);
    }
  }

  &.dig-is-ending {
    opacity: 0;
  }

}