.arrowSteps {
	display: flex;
	flex-wrap: wrap;
	gap: 5px 0;
	list-style-type: none;
	list-style-image: none;
	border: 1px solid #666;
	position: relative;
}

.arrowSteps li {
	float: left;
	padding: 0;
	margin: 0;
	border: 0 none;
	height: 50px;
	color: #54595d;
	background-color: #eaecf0;
	position: relative;
	/* JS will calculate an even width for all steps, but we'd rather use flex */
	width: auto !important; /* stylelint-disable-line declaration-no-important */
	flex: 1;
	list-style-type: none;
}

.arrowSteps li div {
	position: relative;
	top: 50%;
	transform: translateY( -50% );
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
}

.arrowSteps li.head {
	color: #36c;
	background-color: #eaf3ff;
	font-weight: bold;
}

.arrowSteps li::after,
.arrowSteps li::before {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: ' ';
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrowSteps li.arrow::after {
	border-left-color: #eaecf0;
	/* half the height of .arrowSteps li */
	border-width: 25px;
	margin-top: -25px;
	z-index: 1;
}

.arrowSteps li.arrow::before {
	border-left-color: #fff;
	/* half the height of .arrowSteps li + width of the arrow border */
	border-width: 30px;
	margin-top: -30px;
	z-index: 1;
}

.arrowSteps li.head::after {
	border-left-color: #eaf3ff;
}

/*
 * Arrow is added *after* the div with the content, so we need to push
 * the content slightly to the right (the previous one's arrow is
 * overlapped on this element) to make sure it remains balanced.
 * The width of the arrow is 25px + 5px separation = 30 in total.
 * Then adding a little more padding to ensure there's just a little
 * room in between the arrow and the text.
 */
.arrowSteps li:not( :first-child ):not( :last-child ) div {
	padding-left: 35px;
	padding-right: 0;
}

/*
 * First item has nothing on the left, so we don't need to pad it as
 * aggressively as the others in order not to overlap with the arrow;
 * we just need to move it a little bit so the text doesn't touch
 * the left edge.
 */
.arrowSteps li:first-child div {
	padding-left: 10px;
}

/* Last item: there is also an arrow poking into this one, so we do
 * want to apply that padding as well.
 * And just like the first one, we'll want to make sure it
 * doesn't reach the edge, albeit the one on the other side.
 */
.arrowSteps li:last-child div {
	padding-left: 35px;
	padding-right: 10px;
}