/* =============================================================================
- Auto Scrolling Images
============================================================================= */
.gwel-marquee-text {
	overflow: hidden;
	display: flex;
	.gwel-element-inner {
		position: relative;
	}
	.gwel-images-wrapper {
		display: flex;

		animation-duration: var(--gwel-text--animation-d, 20s);
		animation-timing-function: linear;
		animation-delay: 0s;
		animation-iteration-count: infinite;
		animation-direction: normal;
		animation-fill-mode: none;
		animation-play-state: running;
		animation-timeline: auto;
		animation-range-start: normal;

		flex-direction: row;
		animation-name: gwel-horizontal-image-anim;
		animation-direction: var(--gwel-text--item-direction, normal);
		padding-top: 0;
		padding-left: var(--gwel-auto-scrolling-space, 20px);
		gap: var(--gwel-auto-scrolling-space, 20px);

		&.gwel-copy-images {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			animation-name: gwel-horizontal-image-anim-copy;
			animation-direction: var(--gwel-text--item-direction, normal);
		}
	}
	.gwel-text-item {
		color: var(--gwel-text--item-c);
		white-space: nowrap;
		display: flex;
		flex-direction: var(--gwel-text--icon-p, row);
		gap: var(--gwel-text--icon-offset, 18px);
		align-items: center;
		a {
			color: var(--gwel-text--item-c);
			transition: color .3s ease;
		}
		.gwel-icon {
			line-height: 1;
			position: relative;
			color: var(--gwel-text--icon-c);
			font-size: var(--gwel-text--icon-s,120px);
			transform: translateY(var(--gwel-text--icon-vertical-p));
			i {
				font-size: 1em;
				width: 1em;
				height: 1em;
			}
			svg {
				display: block;
				width: 1em;
				height: auto;
				max-height: 1em;
				fill: var(--gwel-text--icon-c);
				g,
				path {
					fill: var(--gwel-text--icon-c);
				}
			}
		}
	}

	&.gwel-pause-on-hover:hover {
		.gwel-images-wrapper {
			animation-play-state: paused;
		}
	}

}

@keyframes gwel-horizontal-image-anim {
	0% {
		transform: translateX(0) translateZ(0)
	}

	100% {
		transform: translateX(100%) translateZ(0)
	}
}

@keyframes gwel-horizontal-image-anim-copy {
	0% {
		transform: translateX(-100%) translateZ(0)
	}

	100% {
		transform: translateX(0) translateZ(0)
	}
}