/**
 * Rotating Text — phrases that take turns in one line.
 *
 * One phrase is in the layout at a time (.is-current); .is-shown fades it in.
 * The fade length comes from --mlsg-rotate-fade on the element's root.
 */

.mlsg-gb-rotate {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	text-align: center;
}

.mlsg-gb-rotate__text {
	align-self: stretch;
	margin: 0;
}

.mlsg-gb-rotate__stage {
	display: inline-block;
	max-width: 100%;
}

.mlsg-gb-rotate__phrase {
	display: none;
	max-width: 100%;
	opacity: 0;
	transition:
		opacity var(--mlsg-rotate-fade, 600ms) ease,
		transform var(--mlsg-rotate-fade, 600ms) ease;
}

.mlsg-gb-rotate__phrase.is-current {
	display: inline-block;
}

.mlsg-gb-rotate__phrase.is-shown {
	opacity: 1;
	transform: none;
}

.mlsg-gb-rotate--fade-up .mlsg-gb-rotate__phrase {
	transform: translateY(0.4em);
}

.mlsg-gb-rotate--fade-down .mlsg-gb-rotate__phrase {
	transform: translateY(-0.4em);
}

.mlsg-gb-rotate--zoom .mlsg-gb-rotate__phrase {
	transform: scale(0.94);
}

.mlsg-gb-rotate--fade-up .mlsg-gb-rotate__phrase.is-shown,
.mlsg-gb-rotate--fade-down .mlsg-gb-rotate__phrase.is-shown,
.mlsg-gb-rotate--zoom .mlsg-gb-rotate__phrase.is-shown {
	transform: none;
}

.mlsg-gb-rotate__pause {
	display: inline-flex;
	align-self: var(--mlsg-rotate-x, center);
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	margin-top: 0.25rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font-size: 0.875rem;
	opacity: 0.75;
	cursor: pointer;
}

.mlsg-gb-rotate__pause:hover,
.mlsg-gb-rotate__pause:focus-visible {
	opacity: 1;
}

.mlsg-gb-rotate__pause:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.mlsg-gb-rotate__phrase {
		transition: none;
	}
}