.od-gradient-motion {
	background-size: var(--od-gradient-motion-background-size, 400% 400%) !important;
	animation-duration: var(--od-gradient-motion-duration, 10s);
	animation-direction: normal;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.od-gradient-motion--horizontal {
	animation-name: od-gradient-motion-horizontal;
}

.od-gradient-motion--vertical {
	animation-name: od-gradient-motion-vertical;
}

.od-gradient-motion--diagonal {
	animation-name: od-gradient-motion-diagonal;
}

.od-gradient-motion--shift {
	animation-name: od-gradient-motion-shift;
	animation-timing-function: linear;
}

.od-gradient-motion--direction-reverse {
	animation-direction: reverse;
}

.od-gradient-motion--direction-alternate {
	animation-direction: alternate;
}

@keyframes od-gradient-motion-horizontal {
	0%,
	100% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}
}

@keyframes od-gradient-motion-vertical {
	0%,
	100% {
		background-position: 50% 0%;
	}

	50% {
		background-position: 50% 100%;
	}
}

@keyframes od-gradient-motion-diagonal {
	0%,
	100% {
		background-position: 0% 0%;
	}

	50% {
		background-position: 100% 100%;
	}
}

@keyframes od-gradient-motion-shift {
	0% {
		background-position: 0% 50%;
	}

	100% {
		background-position: 100% 50%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.od-gradient-motion {
		animation: none;
	}
}