button {
  position: relative;
  overflow: hidden;
  .transparentTapColor(black, 0);

  &:after {
    content: '';
    display: block;
    position: absolute;
    left: -50%;
    top: 100%;
    width: 200%;
    height: 0;
    padding: 200% 0 0 0;
    margin: -100% 0 0 0;
    .transparentBackgroundColor(@secondary_color, 0.2);
    border-radius: 100%;
    opacity: 1;

    transform: scaleX(0) scaleY(0) scaleZ(1);
  }

  &.button-raised:after {
    .transparentBackgroundColor(@primary_color, 0.2);
  }

  &.button-fill:after {
    .transparentBackgroundColor(black, 0.2);
  }

  &:not(:active):after {
    animation: ripple 1s ease-in-out;
  }

  &:after {
    visibility: hidden;
  }

  &:focus:after {
    visibility: visible;
  }
}


@keyframes ripple {
  0% {
    transform: scaleX(0) scaleY(0) scaleZ(1);
  }
  20% {
    transform: scaleX(1) scaleY(1) scaleZ(1);
  }
  100% {
    opacity: 0;
    transform: scaleX(1) scaleY(1) scaleZ(1);
  }
}