Content Marquee Text

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";

.wp-block-group {
	--bg-color: #{$primary};

	.block-marquee-text {
		&.bg--primary,
		&.bg--secondary {
			--bg-color: #{$white};
		}

		&:after {
			width: 80%;
			max-width: rem-calc(1420);
			height: 1px;
			content: '';
			background-color: var(--bg-color);
			position: absolute;
			bottom: 0;
			left: 50%;
			pointer-events: none;
			transform: translate3d(-50%,0,0);
		}
	}
}

.block-marquee-text {
	width: 100%;
	position: relative;
	overflow: hidden;

	--gap: 4rem;
	position: relative;
	display: flex;
	overflow: hidden;
	gap: var(--gap);

	&:not([class*=pad-]) {
		@include padding( rem-calc(24 0) );
	}

	&.inview,
	&.aos-animate {
		.content-container {
			animation: marquee 12s linear infinite;

			.left-to-right & {
				background-color: red;
			}
		}
	}

	&.left-to-right {
		&.inview,
		&.aos-animate {
			.content-container {
				animation: marquee 12s linear infinite;
				animation-direction: reverse;
			}

			&:hover {
				.content-container {
					animation-play-state: paused;
				}
			}
		}
	}

	&:hover {
		.content-container {
			animation-play-state: paused;
		}
	}

	.content-container {
		flex-shrink: 0;
		display: flex;
		justify-content: space-around;
		gap: var(--gap);
		min-width: 100%;
	}

	p {
		margin-bottom: 0;
		font-weight: 800;
		text-transform: uppercase;
		line-height: 1;
		white-space: nowrap;
		@include fluid-type(48, 140);
	}
}

@keyframes marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(calc(-100% - var(--gap)));
	}
}

.site-footer {
	.block-marquee-text {
		//
	}
}