.ripple {
	position: absolute;
	border-radius: 50%;
	background-color: hsla(0, 0%, 100%, .5);
	min-width: 20px;
	min-height: 20px;
	opacity: 0;
}

@each $type in (ripple) {
	.#{$type}-effect {
		@include animation($type);
	}
}

@-webkit-keyframes ripple {
	0% {
		-webkit-transform: scale(1);
		opacity: .4;
	}

	100% {
		-webkit-transform: scale(20);
		opacity: 0;
	}
}

@keyframes ripple {
	0% {
		transform: scale(1);
		opacity: .4;
	}

	100% {
		transform: scale(20);
		opacity: 0;
	}
}