[effect=ripple],
[effect=ripple-light],
[effect=ripple-gold],
[effect=ripple-blue],
[effect=ripple-red] {
  cursor: pointer;
  overflow: hidden;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

[effect=ripple]:before,
[effect=ripple-light]:before,
[effect=ripple-gold]:before,
[effect=ripple-blue]:before,
[effect=ripple-red]:before {
  content: "";
  display: block;
  border-radius: 50%;
  position: absolute;
  pointer-events: none;
  transform-origin: center;
  top: calc(var(--y) * 1px);
  left: calc(var(--x) * 1px);
  width: calc(var(--d) * 1px);
  height: calc(var(--d) * 1px);
  transform: translate(-50%, -50%) scale(var(--s, 1));
  opacity: calc(var(--o, 1) * var(--ripple-opacity, 0.3));
  transition: calc(var(--t, 0) * var(--ripple-duration, 600ms)) var(--ripple-easing, linear);
}

[effect=ripple]:before {
  background: var(--ripple-background, #808080);
}

[effect=ripple-gold]:before {
  background: var(--rk-gold-6);
}

[effect=ripple-blue]:before {
  background: var(--rk-blue-4);
}

[effect=ripple-red]:before {
  background: #712f32;
}