.k2-timelinespan__item *:first-child {
	margin-top: 0;
}

.k2-timelinespan__item *:last-child {
	margin-bottom: 0;
}

:where(.k2-timelinegroup) {
	/* LOCAL VARIABLES */
	--_gap-x: calc(2rem * 2);
	--_gap-y: 2rem;
	--_item-left-text-align: left;
	--_item-right-text-align: left;
	--_item-align: start;
	--_beam-color: #e2e2e2;
	--_beam-width: 2px;
	--_beam-extra-height: 0px;
	--_beam-height: calc(100% + var(--_beam-extra-height));
	--_beam-roundness: 0;
	--_point-color: var(--wp--preset--color--primary);
	--_point-size: 1.5rem;
	--_point-roundness: 50%;
}

:where(.k2-timelinegroup) {
	display: flex;
	gap: var(--_gap-y);
	flex-direction: column;
	align-items: center;
	position: relative;
}

.k2-timelinegroup--beam-left, .k2-timelinegroup--beam-right {
	width: fit-content;
	margin-inline: auto;
}

/* beam center timelinespan*/
:where(.k2-timelinespan) {
	display: flex;
	position: relative;
	width: 100%;
	padding-left: calc(var(--_beam-width) + var(--_gap-x) / 2);
	flex-direction: row;
	justify-content: var(--_item-align);
}

/* beam left timelinespan*/
.k2-timelinegroup--beam-left .k2-timelinespan, #editor#editor .k2-timelinegroup--beam-left .k2-timelinespan {
	--_item-align: flex-start;
	--_item-left-text-align: left;
	--_item-right-text-align: left;

	padding-left: calc(var(--_beam-width) + var(--_gap-x) / 2);
}

/* beam right timelinespan*/
.k2-timelinegroup--beam-right .k2-timelinespan, #editor#editor .k2-timelinegroup--beam-right .k2-timelinespan {
	--_item-align: flex-end;
	--_item-left-text-align: left;
	--_item-right-text-align: left;
	padding-right: calc(var(--_beam-width) + var(--_gap-x) / 2);
}

/* beam center */
:where(.k2-timelinegroup)::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: var(--_beam-height);
	width: var(--_beam-width);
	background-color: var(--_beam-color);
	border-radius: var(--_beam-roundness);
}

/* beam left */
.k2-timelinegroup--beam-left::before {
	left: 0;
	right: unset;
}

/* beam right */
.k2-timelinegroup--beam-right::before {
	right: 0;
	left: unset;
}

/* beam center point */
:where(.k2-timelinespan)::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	translate: calc(-50% + var(--_beam-width) / 2) 0;
	height: var(--_point-size);
	width: var(--_point-size);
	background-color: var(--_point-color);
	border-radius: var(--_point-roundness);
}

/* beam left point */
.k2-timelinegroup--beam-left .k2-timelinespan::before {
	left: 0;
	translate: calc(-50% + var(--_beam-width) / 2) 0;
}

/* beam right point */
.k2-timelinegroup--beam-right .k2-timelinespan::before {
	left: 100%;
	translate: calc(-50% - var(--_beam-width) / 2) 0;
}

:where(.k2-timelinespan__item) {
	position: relative;
	width: 100%;
}