/* ======================================================
   <!-- Wave Background -->
/* ====================================================== */
@import '@uixkit/core/_global/scss/mixins';
@import '@uixkit/core/_global/scss/functions';
@import '@uixkit/core/_global/scss/variables';
/*
 * 1. Wave Mask
 * 2. Pure Svg

*/

/*
 ---------------------------
 1. Wave Mask
 ---------------------------
 */
.uix-wave-bg__container {
	position: relative;
	height: 50px;
	z-index: 1;


}

.uix-wave-bg__svgmask {
	overflow: hidden;
	position: absolute;
	width: 140%;
	transform: translateY(-50%);
	color: #fff;
	margin-left: -20%;
	animation: 5s ease-in-out infinite alternate uix-cssAnim--wave;

	svg {
		fill: currentColor;
		width: 102%;
		margin-left: -1%;
		height: auto;

	}
}




@keyframes uix-cssAnim--wave {
    0% {
        transform: translate(-80px,-52%);
    }

    100% {
        transform: translate(80px,-50%);
    }
}



/*
 ---------------------------
 2. Pure Svg
 ---------------------------
 */

.uix-wave-bg__pureSvg{
	width: 100%;
	height: 300px;
	position: relative;

	.uix-wave-bg__parallax > use {
		animation: uix-cssAnim--wave2 14s linear infinite;

		&:nth-child(1) {
			animation-delay: -2s;
			animation-duration: 7s;
			fill-opacity: .2;
		}

		&:nth-child(2) {
			animation-delay: -3s;
			animation-duration: 12s;
			fill-opacity: 1;
		}
	}
}

  
@keyframes uix-cssAnim--wave2 {
	0% {
		transform: translate3d(-90px, 0, 0);
	}

	100% {
		transform: translate3d(85px, 0, 0);
	}
}