@mixin ripple-click($animation-name, $color) {
  @keyframes #{$animation-name} {
    0% { transform: scale(0); background-color: $transparent; }
    50% { background-color: $color; }
    100% { transform: scale(1); background-color: $transparent; }
  }
}

@mixin ripple-click-animation($animation-name, $size: 150px, $duration: 0.7s) {
  height: $size;
  width: $size;
  margin-top: (-1 * $size / 2);
  margin-left: (-1 * $size / 2);
  animation: $animation-name $duration;
}

// Animating using scale transforms causes ripple to ignore border radius
// overflow hidden so animate using width instead
@mixin ripple-click-alt($animation-name, $color, $size: 150px) {
  @keyframes #{$animation-name} {
    0% {background-color: $transparent; }
    50% { background-color: $color; }
    100% { width: $size; height: $size; background-color: $transparent; }
  }
}

@mixin ripple-click-alt-animation($animation-name, $duration: 0.7s) {
  animation: $animation-name $duration;
}

@mixin ripple-button-focus() {
  $top-offset: ($button-height / 2);
  margin-top: calc('-50% + $top-offset');
  top: 0;
  left: 0;
  height: 0;
  width: 100%;
  padding-bottom: 100%;
  padding-top: ($desktop-gutter-less * 2);

  @include pulsate-animation(
    $animation-name: "ripple-button-focus"
  );
}