.m3.m3-ripple-domain
  position: absolute
  width: 100%
  height: 100%
  z-index: 20
  pointer-events: none

.m3.ripple
  position: absolute
  overflow: hidden
  pointer-events: none
  transform-origin: center
  opacity: 0
  z-index: 20
  aspect-ratio: 1
  border-radius: 50%
  animation-name: rippleAppearanceAnimation
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
  animation-duration: .55s
  transition: opacity, background, background-color, .55s cubic-bezier(0.4, 0, 0.2, 1)

  &.visible
    opacity: 1 !important

@keyframes rippleAppearanceAnimation
  0%
    transform: scale3d(0, 0, 0)
  100%
    transform: scale3d(1, 1, 1)