main#st-main
	button.material-button
		| Material Button

@import url(https://fonts.googleapis.com/css?family=Roboto:500)

*, *:after, *:before
	margin: 0
	padding: 0
	box-sizing: border-box

main#st-main
	background: #3F51B5
	width: 100%
	height: 100vh
	display: flex
	justify-content: center
	align-items: center
	
	.material-button
		padding: 25px 45px
		font-size: 1.8rem
		font-family: "Roboto", sans-serif
		position: relative
		user-select: none
		color: #fff
		background: #448AFF
		border: 0
		box-shadow: 0px 3px 6px rgba(0,0,0,0.3)
		transition: all 200ms ease-in-out
		cursor: pointer
		overflow: hidden
		&:hover
			box-shadow: 0px 6px 8px -3px rgba(0,0,0,0.3)
			transform: translateY(-5px)
		&:focus
			outline: none
.taint
	display: block
	position: absolute
	background: rgba(130, 177, 255, 0.5)
	border-radius: 100%
	transform: scale(0)
	&.drop
		animation: ripple 0.65s linear
		
	@keyframes ripple
		100% 
			opacity: 0
			transform: scale(2.5)

$(function() {
	var taint, d, x, y;
	$(".material-button").click(function(e){
		if ($(this).find(".taint").length == 0) {
			$(this).prepend("<span class='taint'></span>")
		}
		taint = $(this).find(".taint");
		taint.removeClass("drop");
		if(!taint.height() && !taint.width()) {
			d = Math.max($(this).outerWidth(), $(this).outerHeight());
		taint.css({height: d, width: d});
		}
		x = e.pageX - $(this).offset().left - taint.width()/2;
		y = e.pageY - $(this).offset().top - taint.height()/2;
		taint.css({top: y+'px', left: x+'px'}).addClass("drop");
	});
});