/* Patterns - Navigation - Timeline */
////
/// @group Patterns-Timeline
/// Patterns - Navigation - Timeline

///
.timeline {
	&-item {
		display: flex;
		justify-content: space-between;
		position: relative;

		.timeline-content {
			flex: 1;
			margin-bottom: var(--space-xl);
		}
	}

	&-icon {
		align-items: center;
		display: flex;
		flex-direction: column-reverse;
		position: relative;

		&-line {
			background-color: get-background-color('neutral-5');
			flex: 1;
			margin: var(--space-s) var(--space-none) var(--space-s);
			width: 1px;
		}

		&-container {
			align-items: center;
			border-radius: var(--border-radius-circle);
			color: get-text-color('neutral-0');
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			font-size: var(--font-size-xs);
			height: 24px;
			justify-content: center;
			margin: var(--space-none) var(--space-base);
			text-align: center;
			width: 24px;

			&:empty {
				height: 8px;
				margin-top: var(--space-xs);
				width: 8px;
			}
		}
	}

	&-right,
	&-content-inner {
		color: get-text-color('neutral-8');
	}
}

///
[data-block='Navigation.TimelineItem'] {
	&:last-of-type {
		.timeline-icon {
			flex-direction: column;
		}

		.timeline-icon-line {
			display: none;
		}
	}
}