.si-ripple-content {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;

	.si-ripple {
		position: absolute;
		width: 0;
		height: 0;
		opacity: 0;
		border-radius: 50%;
		background: radial-gradient(circle, hsla(var(--si-color), 0.05), hsla(var(--si-color), 0.6));
		transition: all 0.5s ease;
		transform: translate(-50%, -50%);
		&--solid {
			opacity: 1;
			background: hsl(var(--si-color));
		}
	}

	.si-ripple-invert {
		position: absolute;
		width: 0;
		height: 0;
		opacity: 0;
		border-radius: 50%;
		background-image: radial-gradient(circle, hsla(var(--si-color), 0.5), hsla(var(--si-color), 0));
		transition: all 0.5s ease;
		transform: translate(-50%, -50%);
	}

	.si-ripple-cut-1 {
		position: absolute;
		width: 0;
		height: 0;
		opacity: 0;
		background-image: linear-gradient(270deg, hsla(0, 0%, 100%, 0.25) 0%, hsla(0, 0%, 100%, 0) 100%);
		transition: all 0.6s ease;
		transform: translate(-100%, -50%) skew(20deg);
	}

	.si-ripple-cut-2 {
		position: absolute;
		width: 0;
		height: 0;
		opacity: 0;
		background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0.25) 0%, hsla(0, 0%, 100%, 0) 100%);
		transition: all 0.6s ease;
		transform: translate(0%, -50%) skew(20deg);
	}
}