/*
* Style Works for both Editor and Frontend
*/

.wp-block-atlb-timeline-block {
	position: relative;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	.wp-block-atlb-single-timeline-item {
		display: grid;
		position: relative;
		z-index: 9;
	}

	.timeline__marker {
		order: 2;
		line-height: 1;
		box-sizing: border-box;
		i {
			text-align: center;
			background: #fff;
		}
	}

	.timeline__content {
		box-sizing: border-box;
		order: 1;
		position: relative;
		&.box__shadow {
			box-shadow: 0 0 5px rgb(0 0 0 / 10%);
		}
	}
	.timeline__date {
		display: flex;
		box-sizing: border-box;
	}

	.time__date_content {
		&.enabled__box_shadow {
			box-shadow: 0 0 5px rgb(0 0 0 / 10%);
		}
	}

	.event__date {
		margin: 0 !important;
	}

	.timeline__bar {
		position: absolute;
		top: 0;
		bottom: 0;
		z-index: 0;
		height: 100%;
	}
}

// Desktop view
@media screen and (min-width: 1025px) {
	.wp-block-atlb-timeline-block {
		&.desk_center_layout {
			.wp-block-atlb-single-timeline-item {
				grid-template-columns: 1fr auto 1fr;
				align-items: center;
				.timeline__bar {
					left: 50%;
				}
				.timeline__marker {
					margin: 0 15px;
				}
			}
			:nth-child(2n + 1) {
				.timeline__date {
					justify-content: flex-start;
					order: 3;
				}
				.timeline__content {
					order: 1;
				}
			}
			:nth-child(2n) {
				.timeline__date {
					text-align: right;
					justify-content: flex-end;
					order: 1;
				}
				.timeline__content {
					order: 3;
				}
			}
			.timeline__bar {
				left: 50%;
			}
		}

		&.desk_right_layout {
			.wp-block-atlb-single-timeline-item {
				grid-template-columns: 1fr;
				align-items: flex-end;
				padding-right: 30px;
				.timeline__content {
					text-align: right;
				}
				.timeline__date {
					margin-bottom: 10px;
					justify-content: flex-end;
				}
				.timeline__marker {
					position: absolute;
					right: 0;
					top: 50%;
				}
			}
			.timeline__bar {
				right: 0;
			}
		}

		&.desk_left_layout {
			.wp-block-atlb-single-timeline-item {
				grid-template-columns: 1fr;
				align-items: flex-start;
				padding-left: 30px;
				.timeline__date {
					margin-bottom: 10px;
				}
				.timeline__marker {
					position: absolute;
					left: 0;
					top: 50%;
				}
			}
			.timeline__bar {
				left: 0;
			}
		}
	}
}

// tablet view
@media screen and (min-width: 768px) and (max-width: 1024px) {
	.wp-block-atlb-timeline-block {
		&.tab_center_layout {
			.wp-block-atlb-single-timeline-item {
				grid-template-columns: 1fr auto 1fr;
				align-items: center;
				.timeline__bar {
					left: 50%;
				}
				.timeline__marker {
					margin: 0 15px;
				}
			}
			:nth-child(2n + 1) {
				.timeline__date {
					justify-content: flex-start;
					order: 3;
				}
				.timeline__content {
					order: 1;
				}
			}
			:nth-child(2n) {
				.timeline__date {
					text-align: right;
					justify-content: flex-end;
					order: 1;
				}
				.timeline__content {
					order: 3;
				}
			}
			.timeline__bar {
				left: 50%;
			}
		}
		&.tab_right_layout {
			.wp-block-atlb-single-timeline-item {
				grid-template-columns: 1fr;
				align-items: flex-end;
				padding-right: 30px;
				.timeline__content {
					text-align: right;
				}
				.timeline__date {
					margin-bottom: 10px;
					justify-content: flex-end;
				}
				.timeline__marker {
					position: absolute;
					right: 0;
					top: 50%;
				}
			}
			.timeline__bar {
				right: 0;
			}
		}
		&.tab_left_layout {
			.wp-block-atlb-single-timeline-item {
				grid-template-columns: 1fr;
				align-items: flex-start;
				padding-left: 30px;
				.timeline__date {
					margin-bottom: 10px;
				}
				.timeline__marker {
					position: absolute;
					left: 0;
					top: 50%;
				}
			}
			.timeline__bar {
				left: 0;
			}
		}
	}
}

// mobile view
@media screen and (max-width: 767px) {
	.wp-block-atlb-timeline-block {
		&.mob_center_layout {
			.wp-block-atlb-single-timeline-item {
				grid-template-columns: 1fr auto 1fr;
				align-items: center;
				.timeline__bar {
					left: 50%;
				}
				.timeline__marker {
					margin: 0 15px;
				}
			}
			:nth-child(2n + 1) {
				.timeline__date {
					justify-content: flex-start;
					order: 3;
				}
				.timeline__content {
					order: 1;
				}
			}
			:nth-child(2n) {
				.timeline__date {
					text-align: right;
					justify-content: flex-end;
					order: 1;
				}
				.timeline__content {
					order: 3;
				}
			}
			.timeline__bar {
				left: 50%;
			}
		}
		&.mob_right_layout {
			.wp-block-atlb-single-timeline-item {
				grid-template-columns: 1fr;
				align-items: flex-end;
				padding-right: 20px;
				.timeline__content {
					text-align: right;
				}
				.timeline__date {
					margin-bottom: 10px;
					justify-content: flex-end;
				}
				.timeline__marker {
					position: absolute;
					right: 0;
					top: 50%;
				}
			}
			.timeline__bar {
				right: 0;
			}
		}
		&.mob_left_layout {
			.wp-block-atlb-single-timeline-item {
				grid-template-columns: 1fr;
				align-items: flex-start;
				padding-left: 20px;
				.timeline__date {
					margin-bottom: 10px;
				}
				.timeline__marker {
					position: absolute;
					left: 0;
					top: 50%;
				}
			}
			.timeline__bar {
				left: 0;
			}
		}
	}
}