/**
 * Shared marquee for a Divi Group/Row with the class pwf-marquee and for [pwf_ticker].
 * Duration, gap, edge fade, mark size and focus ring come from custom properties.
 * The plugin prints the defaults; a Divi selector rule overrides them.
 * Shift is half the track so the cloned set meets the original with no jump.
 */

.pwf-marquee {
	--pwf-marquee-shift: -50%;
	position: relative;
	display: block;
	inline-size: 100%;
	max-inline-size: 100%;
	overflow: hidden;
	color: inherit;
	background: transparent;
	line-height: var(--pwf-marquee-line-height, 1.5em);
	--pwf-marquee-height: calc(var(--pwf-marquee-line-height, 1.5em) + (var(--pwf-marquee-padding, 0px) * 2));
	block-size: var(--pwf-marquee-height);
	min-block-size: var(--pwf-marquee-height);
	padding-block: var(--pwf-marquee-padding, 0px);
	box-sizing: border-box;
}

[dir="rtl"] .pwf-marquee,
.rtl .pwf-marquee {
	--pwf-marquee-shift: 50%;
}

.pwf-marquee__track {
	display: flex;
	inline-size: max-content;
	animation-name: pwf-marquee;
	animation-duration: var(--pwf-marquee-duration);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	will-change: transform;
}

.pwf-marquee__set {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--pwf-marquee-gap);
	padding-inline-start: var(--pwf-marquee-start, 0px);
	padding-inline-end: var(--pwf-marquee-gap);
	margin: 0;
	min-inline-size: max-content;
}

.pwf-marquee__set > .pwf-marquee__item,
.pwf-marquee__set > .et_pb_module {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	inline-size: max-content;
	max-inline-size: none;
	margin: 0;
	white-space: nowrap;
	line-height: var(--pwf-marquee-line-height, 1.5em);
}

.pwf-marquee .et_pb_text_inner,
.pwf-marquee .pwf-marquee__item {
	white-space: nowrap;
	line-height: var(--pwf-marquee-line-height, 1.5em);
}

.pwf-marquee--sep-dot .pwf-marquee__set > .pwf-marquee__item::before,
.pwf-marquee--sep-dot .pwf-marquee__set > .et_pb_module::before,
.pwf-marquee--sep-diamond .pwf-marquee__set > .pwf-marquee__item::before,
.pwf-marquee--sep-diamond .pwf-marquee__set > .et_pb_module::before,
.pwf-marquee--sep-bar .pwf-marquee__set > .pwf-marquee__item::before,
.pwf-marquee--sep-bar .pwf-marquee__set > .et_pb_module::before {
	content: "";
	flex: none;
	inline-size: var(--pwf-marquee-mark);
	block-size: var(--pwf-marquee-mark);
	background: currentColor;
	opacity: var(--pwf-marquee-mark-opacity);
}

.pwf-marquee--sep-dot .pwf-marquee__set > .pwf-marquee__item::before,
.pwf-marquee--sep-dot .pwf-marquee__set > .et_pb_module::before {
	border-radius: 50%;
}

.pwf-marquee--sep-diamond .pwf-marquee__set > .pwf-marquee__item::before,
.pwf-marquee--sep-diamond .pwf-marquee__set > .et_pb_module::before {
	border-radius: var(--pwf-marquee-mark);
	transform: rotate(45deg);
}

.pwf-marquee--sep-bar .pwf-marquee__set > .pwf-marquee__item::before,
.pwf-marquee--sep-bar .pwf-marquee__set > .et_pb_module::before {
	inline-size: var(--pwf-marquee-bar);
	block-size: var(--pwf-marquee-bar-size);
	border-radius: 0;
}

.pwf-marquee--fade {
	--pwf-marquee-start: var(--pwf-marquee-fade);
	-webkit-mask-image: linear-gradient(to right, transparent, rgb(0 0 0 / 1) var(--pwf-marquee-fade), rgb(0 0 0 / 1) calc(100% - var(--pwf-marquee-fade)), transparent);
	mask-image: linear-gradient(to right, transparent, rgb(0 0 0 / 1) var(--pwf-marquee-fade), rgb(0 0 0 / 1) calc(100% - var(--pwf-marquee-fade)), transparent);
}

.pwf-marquee a {
	color: inherit;
	text-decoration-line: none;
}

.pwf-marquee a:hover,
.pwf-marquee a:focus-visible {
	text-decoration-line: underline;
	text-underline-offset: var(--pwf-marquee-focus);
}

.pwf-marquee a:focus-visible {
	outline: var(--pwf-marquee-focus) solid currentColor;
	outline-offset: var(--pwf-marquee-focus);
}

.pwf-marquee--pause:hover .pwf-marquee__track,
.pwf-marquee--pause:focus-within .pwf-marquee__track {
	animation-play-state: paused;
}

@keyframes pwf-marquee {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(var(--pwf-marquee-shift), 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pwf-marquee {
		overflow-x: auto;
		scrollbar-width: none;
		overscroll-behavior-x: contain;
	}

	.pwf-marquee::-webkit-scrollbar {
		display: none;
	}

	.pwf-marquee__track {
		animation: none;
		will-change: auto;
		transform: none;
	}

	.pwf-marquee__set[aria-hidden="true"] {
		display: none;
	}
}