.legitRipple {
  position: relative;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  z-index: 0;
  /*
	Example for different transition-durations:

	&.longOpacity .legitRipple-ripple {
		transition-duration: .15s, .9s*4;
	}
	&.longDrop .legitRipple-ripple {
		transition-duration: .15s*5, .9s;
		transition-timing-function: linear, cubic-bezier(1, 0, 0.8, 0);
	}
	&.longOpacity.longDrop .legitRipple-ripple {
		transition-duration: .15s*5, .9s*4;
		transition-timing-function: linear, cubic-bezier(1, 0, 0.8, 0);
	}
	*/
}

.legitRipple-ripple {
  position: absolute;
  z-index: -1;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  pointer-events: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  will-change: transform, width, opacity;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  width: 0;
  opacity: 1;
  -webkit-transition: width 0.15s linear, opacity 0.9s ease-out;
  transition: width 0.15s linear, opacity 0.9s ease-out;
}

.legitRipple-ripple:before {
  content: "";
  padding-top: 100%;
  display: block;
}

img ~ .legitRipple-ripple {
  z-index: auto;
}

.legitRipple-template {
  display: none;
}

.legitRipple-custom {
  overflow: hidden;
}

.legitRipple-custom > * {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}