/* Ripple Active */
.ripple-active
{
	position: relative;
	background-clip: padding-box;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	transition: all .4s cubic-bezier(.25 , .8 , .25 , 1);
	overflow: hidden;
}

.ripple-active .ripple-container
{
	pointer-events: none;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	background-clip: padding-box;
	overflow: hidden;
	-webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC");
}

.ripple-active .ripple-container .ripple , .ripple-active .ripple-container .md-focus
{
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 50%;
	transition-duration: .8s;
	transition-timing-function: cubic-bezier(.25 , .8 , .25 , 1);
	transition-property: opacity , -webkit-transform;
	transition-property: opacity , transform;
	transition-property: opacity , transform , -webkit-transform;
}

.ripple-active .ripple-container .md-focus
{
	left: 50%;
	top: 50%;
	-webkit-animation: pulse 2.5s infinite;
	animation: pulse 2.5s infinite;
}

/* Radius of Ripple */
.ripple-active .ripple-container { border-radius: 2px; }

/* Ripple Color */
.ripple-active:not([disabled]) .ripple-container svg
{
	fill: var(--black);
	fill-opacity: .16;
}

.ripple-active.btn-light:not([disabled]) .ripple-container svg ,
.ripple-active.btn-primary:not([disabled]) .ripple-container svg ,
.ripple-active.btn-green:not([disabled]) .ripple-container svg ,
.ripple-active.btn-red:not([disabled]) .ripple-container svg ,
.ripple-active.btn-blue:not([disabled]) .ripple-container svg { fill: var(--white); }

/* Animations */
@-webkit-keyframes pulse
{
	0% { -webkit-transform: translate(-50% , -50%) scale(1 , 1); transform: translate(-50% , -50%) scale(1 , 1); }
	50% { -webkit-transform: translate(-50% , -50%) scale(.9 , .9); transform: translate(-50% , -50%) scale(.9 , .9); }
	100% { -webkit-transform: translate(-50% , -50%) scale(1 , 1); transform: translate(-50% , -50%) scale(1 , 1); }
}

@keyframes pulse
{
	0% { -webkit-transform: translate(-50% , -50%) scale(1 , 1); transform: translate(-50% , -50%) scale(1 , 1); }
	50% { -webkit-transform: translate(-50% , -50%) scale(.9 , .9); transform: translate(-50% , -50%) scale(.9 , .9); }
	100% { -webkit-transform: translate(-50% , -50%) scale(1 , 1); transform: translate(-50% , -50%) scale(1 , 1); }
}