.ripple {
	position: absolute;
	border-radius: 50%;
	background: radial-gradient(
		circle, 
		rgba(255, 255, 255, 0.18) 0%, 
		rgba(255, 255, 255, 0.08) 50%, 
		rgba(255, 255, 255, 0) 75%
	);
	transform: scale(0);
	animation: md3-ripple-grow 1.35s cubic-bezier(0.2, 0, 0, 1) forwards;
	pointer-events: none;
	z-index: 1;
}

.ripple.fade-out {
	opacity: 0;
	transition: opacity 0.4s ease-out;
}

@keyframes md3-ripple-grow {
	to {
		transform: scale(4);
	}
}