.waves {
	background: transparent;
	block-size: 4px;
	position: relative;
}
.waves::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	background-repeat: repeat;
	block-size: 10px;
	background-size: 20px 20px;
	background-image: radial-gradient(
		circle at 10px -5px,
		transparent 12px,
		var(--waves-color, var(--color-white)) 13px
	);
}
.waves::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	background-repeat: repeat;
	block-size: 15px;
	background-size: 40px 20px;
	background-image: radial-gradient(
		circle at 10px 15px,
		var(--waves-color, var(--color-white)) 12px,
		transparent 13px
	);
}

/* LARGE */
.waves-container {
	block-size: 30px;
	position: relative;
}
.waves--large {
	position: absolute;
	block-size: 30px;
	inline-size: 100%;
	background: var(--waves-color, var(--color-light));
	bottom: 0;
}

.waves--large::before,
.waves--large::after {
	content: "";
	display: block;
	position: absolute;
	border-radius: 100% 50%;
}

.waves--large::before {
	inline-size: 55%;
	block-size: 100%;
	background-color: var(--waves-color, var(--color-light));
	left: -1.5%;
	top: 40%;
}
.waves--large::after {
	inline-size: 55%;
	block-size: 109%;
	background-color: var(--waves-bg-color, var(--color-white));
	right: -1.5%;
	top: 60%;
}