.q-ripple

  &-container
    color inherit
    border-radius inherit
    position absolute
    left 0
    top 0
    width 100%
    height 100%
    overflow hidden
    z-index 0
    pointer-events none

  &-animation
    color inherit
    position absolute
    top 0
    left 0
    border-radius 50%
    background currentColor
    opacity 0
    transition .5s transform cubic-bezier(.2, .4, .4, .9), .3s opacity cubic-bezier(.2, .4, .4, .1)
    pointer-events none
    overflow hidden
    will-change opacity

    &-enter
      transition none

    &-visible
      opacity .3

.q-radial-ripple
  overflow hidden
  transform translate3d(-25%, -25%, 0)
  width 200%
  height 200%
  border-radius 50%
  pointer-events none

  &, &:after
    position absolute
    top 0
    right 0
    bottom 0
    left 0
  &:after
    content ''
    display block
    width 100%
    height 100%
    background-image radial-gradient(circle, currentColor 10%, transparent 10.01%)
    background-repeat no-repeat
    background-position 50%
    transform scale(10, 10)
    opacity 0
    transition transform .5s, opacity 1s

  &.active:after
    transform scale(0, 0)
    opacity .4
    transition 0s