.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%);
  }