@keyframes progressBarAnimation {

	0% {
		transform: scaleY(1);
	}

	100% {
		transform: scaleY(0);
	}
}

.customer-journey-step {
	border-left-color: var(--wp--preset--color--secondary) !important;
	position: relative;
	box-sizing: border-box;
}

.customer-journey-step:focus-visible {
	outline: none;
	box-shadow: var(--wp--custom--focus-ring);
}

.customer-journey-step::before {
	content: "";
	position: absolute;
	left: -2px;
	top: 0;
	width: 2px;
	height: 100%;
	background-color: var(--wp--preset--color--accent);
	transform: scaleY(0);
	transform-origin: top; /* start from top by default */
	transition: transform 0.3s ease-in-out;
}

.pattern-customer-journey-block.running .customer-journey-step.active::before {
	transform: scaleY(1);
	transform-origin: top; /* grow from top */
	will-change: transform;
	animation: progressBarAnimation linear forwards;
	animation-duration: 8s; /* Matches JS interval time */
}

.customer-journey-step:not(.active) {
	gap: 0;
	border-left-color: var(--wp--preset--color--secondary) !important;
}

.pattern-customer-journey-block.paused .customer-journey-step.active::before {
	animation-play-state: paused !important;
}

.customer-journey-step .customer-journey-heading {
	color: var(--wp--preset--color--secondary);
	cursor: pointer;
}

.customer-journey-step.active .customer-journey-heading {
	color: var(--wp--preset--color--accent);
}

.customer-journey-description,
.customer-journey-link {
	transition:
		max-height 0.4s ease-in-out,
		opacity 0.4s ease-in-out,
		margin 0.3s ease-in-out,
		padding 0.3s ease-in-out,
		visibility 0.3s ease-in-out;
	overflow: hidden;
}

.customer-journey-link:focus-visible {
	outline: none;
	box-shadow: var(--wp--custom--focus-ring);
}

.is-style-inverse .customer-journey-description {
	color: var(--wp--preset--color--inverse-primary) !important;
}

.customer-journey-step.active .customer-journey-description,
.customer-journey-step.active .customer-journey-link {
	opacity: 1;
	visibility: visible;
}

.customer-journey-step.active .customer-journey-description {
	max-height: 12rem;
}

.customer-journey-step.active .customer-journey-link {
	max-height: 3rem;
}

.pattern-customer-journey-block.measure {
	height: auto !important;
}

.customer-journey-media {
	display: none;
	margin: 0;
}

.customer-journey-media.active {
	display: block;
}

.customer-journey-media img,
.customer-journey-media svg {
	display: block;
}

.pattern-customer-journey-block.measure .customer-journey-media {
	display: none !important;
}

.pattern-customer-journey-block.measure .customer-journey-step:not(.measuring) .customer-journey-description,
.pattern-customer-journey-block.measure .customer-journey-step:not(.measuring) .customer-journey-link {
	display: none;
	transition: none;
}

.pattern-customer-journey-block:not(.measure) .customer-journey-step:not(.active) .customer-journey-description,
.pattern-customer-journey-block:not(.measure) .customer-journey-step:not(.active) .customer-journey-link {
	max-height: 0;
	opacity: 0;
	visibility: hidden;
	margin: 0;
	padding: 0;
}

.pattern-customer-journey-block.measure .customer-journey-step.measuring .customer-journey-description,
.pattern-customer-journey-block.measure .customer-journey-step.measuring .customer-journey-link {
	opacity: 1;
	visibility: visible;
}

.pattern-customer-journey-block.measure .customer-journey-media.measuring {
	display: block !important;
}

.pattern-customer-journey-block.measure .customer-journey-step.measuring .customer-journey-description {
	max-height: 12rem;
}

.pattern-customer-journey-block.measure .customer-journey-step.measuring .customer-journey-link {
	max-height: 3rem;
}

.customer-journey-media-container:empty {
	display: none !important;
}

@media screen and (max-width: 980px) {

	.pattern-customer-journey-block {
		flex-direction: column;
	}

	.customer-journey-step {
		padding: var(--wp--preset--spacing--500) 0 !important;
		border-left: none;
	}

	.customer-journey-step::before {
		content: unset;
	}

	.customer-journey-heading {
		position: relative;
	}

	.customer-journey-heading::before {
		content: " ";
		background-color: var(--wp--preset--color--secondary);
		display: block;
		height: 1rem;
		width: 1rem;
		-webkit-mask: var(--wp--custom--icons--ui--plus) no-repeat center;
		mask: var(--wp--custom--icons--ui--plus) no-repeat center;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.customer-journey-step.active .customer-journey-heading::before {
		background-color: var(--wp--preset--color--accent);
		-webkit-mask: var(--wp--custom--icons--ui--minus) no-repeat center;
		mask: var(--wp--custom--icons--ui--minus) no-repeat center;
	}

	.customer-journey-media {
		margin-top: 0;
		padding-top: 0;
		padding-bottom: var(--wp--preset--spacing--600, 32px);
	}
}

@media (min-width: 980px) {

	.customer-journey-step-container,
	.customer-journey-media-container {
		display: flex;
		flex-direction: column;
		justify-content: center !important;
	}
}

@media (min-width: 980px) and (max-width: 1500px) {

	.customer-journey-media-container {
		transform: scale(1.15);
		transform-origin: center left;
	}
}

@media (max-width: 980px) {

	.customer-journey-step {
		margin-bottom: 0 !important;
	}

	.pattern-customer-journey-block {
		height: auto !important;
	}
}