/* ==========================================================================
   Text Marquee shortcode styles
   ========================================================================== */

.qodef-text-marquee {
	@include qodefRelativeLayout();

	&.qodef-animation--reverse {

		.qodef-m-content {
			flex-direction: row-reverse;
		}
	}
	
	.qodef-m-content {
		display: flex;
		white-space: nowrap;
		font-size: 120px;
		font-family: $meta-font;
		line-height: 0.9125em;
		overflow: hidden;
		text-transform: uppercase;

		.qodef-m-text {
			padding: 0 .125em;
		}
	}
	
	.qodef-marquee-element {
		padding: 0 25px;
		will-change: transform;
	}

	.qodef-m-text--1 {
		color: $heading-color;
	}
	
	.qodef-m-text--2 {
		color: $heading-color;
	}
	
	.qodef-m-text--3 {
		color: $heading-color;
	}
}