// Should not be over 750ms, due to timeout function (Button.jsx)
// that destroyes the animated div after 750ms
time-ripple-effect = 750ms

.ripple-effect
  position: relative
  border-radius: 50%
  width: 5px
  height: 5px
  background-color: color-button-text-default
  animation-name: ripple
  animation-duration: time-ripple-effect
  animation-timing-function: ease
  animation-fill-mode: forwards
  z-index: 0 !important
  &.outline
    background-color: color-button-background-hover !important

@keyframes ripple
  0%
    transform: scale(0.1)
    opacity: 1.0
  100%
    transform: scale(100)
    opacity: 0