.with-ripple,
[with-ripple] {
  position: relative;
  overflow: hidden;
  &:not(:disabled):not(.disabled) {
    .ripple {
      display: block;
      position: absolute;
      background:rgba(255, 255, 255, 0.3);
      border-radius: 100%;
      pointer-events: none;
      transform: scale(0);

      &.animate {
        animation: ripple 0.65s linear;
      }

      @keyframes ripple {
        100% {
          opacity: 0;
          transform: scale(2.5);
        }
      }
    }
  }
  &.ripple-dark,
  &[ripple-dark] {
    &:not(:disabled):not(.disabled) {
      .ripple {
        background: rgba(0, 0, 0, .15) !important;
      }
    }
  }
  &.ripple-light,
  &[ripple-light] {
    &:not(:disabled):not(.disabled) {
      .ripple {
        background: rgba(255, 255, 255, .15) !important;
      }
    }
  }
}