.xtool-timeline {
	--xtl-line-color: #1B3A2B;
	--xtl-line-width: 1px;
	--xtl-dot-color: #1B3A2B;
	--xtl-dot-size: 14px;
	--xtl-ring-color: rgba(27, 58, 43, 0.12);
	--xtl-ring-width: 4px;
	--xtl-time-width: 90px;
	--xtl-row-gap: 40px;
	--xtl-col-gap: 24px;
	display: flex;
	flex-direction: column;
	gap: var(--xtl-row-gap);
	max-width: 100%;
}

.xtool-timeline__item {
	display: grid;
	grid-template-columns: var(--xtl-time-width) auto 1fr;
	align-items: center;
	column-gap: var(--xtl-col-gap);
}

.xtool-timeline__time {
	text-align: right;
	white-space: nowrap;
}

.xtool-timeline__dot-col {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
}

.xtool-timeline__dot {
	display: block;
	width: var(--xtl-dot-size);
	height: var(--xtl-dot-size);
	border-radius: 50%;
	background: var(--xtl-dot-color);
	box-shadow: 0 0 0 var(--xtl-ring-width) var(--xtl-ring-color);
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
}

/* The connecting line: starts at THIS row's dot center (top:50%, the dot
   column is stretched to the row's full height so 50% actually lands on
   the dot) and runs down through the row gap to the next row's dot — see
   the class docblock in class-timeline.php for why the dot column needs
   align-self:stretch for this math to work at all. */
.xtool-timeline__dot-col::after {
	content: '';
	position: absolute;
	top: 50%;
	bottom: calc(-1 * var(--xtl-row-gap));
	left: 50%;
	width: var(--xtl-line-width);
	background: var(--xtl-line-color);
	transform: translateX(-50%);
}

.xtool-timeline__item:last-child .xtool-timeline__dot-col::after {
	display: none;
}

.xtool-timeline__label {
	word-wrap: break-word;
}

@media (max-width: 480px) {
	.xtool-timeline {
		--xtl-time-width: 64px;
		--xtl-col-gap: 14px;
	}
}