.lui-ripple-circle {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0.7;
  @include transition(opacity 0.7s ease-out);

  .lui-ripple-circle-inner {
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.2);
    @include transform(scale(0));
    @include transition(transform 1.0s ease-out);
  }

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

    .lui-ripple-circle-inner {
      @include transform(scale(1));
    }
  }

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