/**
 * Timeline Block styles.
 */

// Variables.
$timeline-width: 36px;
$timeline-gutter: 24px;
$timeline-border-width: 4px;

// Styles shared between editor and frontend.
.wp-block-jetpack-timeline {

	// This padding needs extra specificity.
	&.wp-block-jetpack-timeline {
		padding: 0;
	}

	li.wp-block-jetpack-timeline-item {
		list-style-type: none;
		position: relative;
		padding: 1em 2em;

		// Make the spacing between items consistent so we can connect the timeline
		margin-bottom: $timeline-width;

		// Make room for the timeline.
		margin-left: $timeline-width;

		// Draw the line connecting to the timeline.
		.timeline-item__bubble {
			display: block;
			width: $timeline-width;
			height: $timeline-border-width;
			background-color: currentColor;
			position: absolute;
			top: 50%;
			transform: translateY(-($timeline-border-width * 0.5));
			left: -$timeline-width;
		}

		// Draw the vertical timeline line.
		.timeline-item::after {
			content: "";
			display: block;
			background: currentColor;
			position: absolute;
			left: -$timeline-width;
			top: -$timeline-width;
			bottom: -$timeline-width;
			width: $timeline-border-width;
		}
	}

	// Add special timeline starting point and end point.
	[data-type="jetpack/timeline-item"]:first-child .timeline-item::after,
	& > li.wp-block-jetpack-timeline-item:first-child .timeline-item::after { // Frontend
		top: 50%;
	}

	[data-type="jetpack/timeline-item"]:nth-last-child(2)  .timeline-item::after,
	& > li.wp-block-jetpack-timeline-item:last-child .timeline-item::after { // Frontend
		bottom: 50%;
	}

}


/**
 * Alternating Bubbles
 */


@media only screen and (min-width: 640px) {
	ul.wp-block-jetpack-timeline.is-alternating {
		display: flex;
		flex-direction: column;

		// Bubbles.
		.wp-block-jetpack-timeline-item {
			width: calc(50% - #{ $timeline-width } + #{ $timeline-border-width * 0.5 });
			box-sizing: border-box;
		}

		// Left aligned.
		.wp-block-jetpack-timeline-item.is-left.is-left.is-left,
		[data-type="jetpack/timeline-item"]:nth-child(odd) .wp-block-jetpack-timeline-item:not(.is-right),
		& > .wp-block-jetpack-timeline-item:nth-child(odd):not(.is-right) { // Frontend
			margin-left: 0;
			margin-right: auto;

			// Adjust the the line connecting to the timeline.
			.timeline-item__bubble {
				left: auto;
				right: -$timeline-width;
			}

			// Adjust the vertical line.
			.timeline-item::after {
				left: auto;
				right: -$timeline-width;
			}
		}

		// Right aligned.
		.wp-block-jetpack-timeline-item.is-right.is-right.is-right,
		[data-type="jetpack/timeline-item"]:nth-child(even) .wp-block-jetpack-timeline-item:not(.is-left),
		.wp-block-jetpack-timeline-item:nth-child(even):not(.is-left) { // Frontend
			margin-left: auto;
			margin-right: 0;
		}
	}
}