/* ------------------------------------------------------------------------------
 *
 *  # Timeline
 *
 *  Styles for timeline in 3 layouts: left, right and centered
 *
 * ---------------------------------------------------------------------------- */

// Check if component is enabled
@if $enable-timeline {

	// Base
	.timeline {
        --#{$prefix}timeline-content-padding-x: #{$timeline-content-padding-x};
        --#{$prefix}timeline-line-width: #{$timeline-line-width};
        --#{$prefix}timeline-line-color: #{$timeline-line-color};
        --#{$prefix}timeline-icon-bg: #{$timeline-icon-bg};
        --#{$prefix}timeline-icon-size: #{$timeline-icon-size};
        --#{$prefix}timeline-icon-border-width: #{$timeline-icon-border-width};

		position: relative;

		// Dots base
		&:before,
		&:after {
			content: "";
			position: absolute;
			left: 50%;
			margin-left: calc(var(--#{$prefix}timeline-line-width) * -1);
			background-color: var(--#{$prefix}timeline-line-color);
			z-index: 1;
			width: calc(var(--#{$prefix}timeline-line-width) * 2);
			height: calc(var(--#{$prefix}timeline-line-width) * 2);
			@include border-radius(var(--#{$prefix}border-radius-pill));
		}

		// Top dot
		&:before {
			top: calc(calc(var(--#{$prefix}timeline-line-width) * 2) * -1);
		}

		// Bottom dot
		&:after {
			bottom: calc(calc(var(--#{$prefix}timeline-line-width) * 2) * -1);
		}
	}

	// Container
	.timeline-container {
		position: relative;
		padding-top: calc(var(--#{$prefix}spacer) * .5);
		margin-top: calc(calc(var(--#{$prefix}spacer) * .5) * -1);
		padding-bottom: 1px;

		// Vertical line
		&:before {
			content: "";
			position: absolute;
			top: 0;
			left: 50%;
			margin-left: calc(calc(var(--#{$prefix}timeline-line-width) * .5) * -1);
			background-color: var(--#{$prefix}timeline-line-color);
			height: 100%;
			width: var(--#{$prefix}timeline-line-width);
		}
	}

	// Row
	.timeline-row {
		position: relative;
	}

	// Date
	.timeline-date {
		text-align: center;
		background-color: var(--#{$prefix}body-bg);
		position: relative;
		z-index: 1;
		padding-top: var(--#{$prefix}spacer);
		padding-bottom: var(--#{$prefix}spacer);
		margin-bottom: var(--#{$prefix}spacer);

		// Dots base
		&:before,
		&:after {
			content: "";
			position: absolute;
			left: 50%;
			margin-left: calc(var(--#{$prefix}timeline-line-width) * -1);
			background-color: var(--#{$prefix}timeline-line-color);
			z-index: 1;
			width: calc(var(--#{$prefix}timeline-line-width) * 2);
			height: calc(var(--#{$prefix}timeline-line-width) * 2);
			@include border-radius(var(--#{$prefix}border-radius-pill));
		}

		// Top dot
		&:before {
			top: 0;
		}

		// Bottom dot
		&:after {
			bottom: 0;
		}

		// Change bg color to card bg if inside card
		.card & {
			background-color: var(--#{$prefix}card-bg);
		}
	}

	// Time
	.timeline-time {
		text-align: center;
		padding-top: var(--#{$prefix}spacer);
		padding-bottom: var(--#{$prefix}spacer);
		background-color: var(--#{$prefix}body-bg);
		position: relative;
		margin-bottom: var(--#{$prefix}spacer);

		// Dots base
		&:before,
		&:after {
			content: "";
			position: absolute;
			left: 50%;
			margin-left: calc(var(--#{$prefix}timeline-line-width) * -1);
			background-color: var(--#{$prefix}timeline-line-color);
			width: calc(var(--#{$prefix}timeline-line-width) * 2);
			height: calc(var(--#{$prefix}timeline-line-width) * 2);
			@include border-radius(var(--#{$prefix}border-radius-pill));
		}

		// Top dot
		&:before {
			top: 0;
		}

		// Bottom dot
		&:after {
			bottom: 0;
		}

		// Change bg color to card bg if inside card
		.card & {
			background-color: var(--#{$prefix}card-bg);
		}

		// Hide dots no desktop
		@include media-breakpoint-up(md) {
			&:before,
			&:after {
				content: none;
			}
		}
	}

	// Icon and image
	.timeline-icon {
		margin: 0 auto var(--#{$prefix}spacer) auto;
		background-color: car(--#{$prefix}timeline-icon-bg);
		border: var(--#{$prefix}timeline-icon-border-width) solid var(--#{$prefix}body-bg);
		width: var(--#{$prefix}timeline-icon-size);
		height: var(--#{$prefix}timeline-icon-size);
		@include border-radius(var(--#{$prefix}border-radius-pill));

		// Change border color if it's inside card
		.card & {
			border-color: var(--#{$prefix}card-bg);
		}

		// Icon
		div {
			height: 100%;
			display: flex;
		    align-items: center;
		    justify-content: center;
			box-shadow: 0 0 0 var(--#{$prefix}timeline-line-width) var(--#{$prefix}timeline-line-color) inset;
			@include border-radius(var(--#{$prefix}border-radius-pill));

			// Hide border if icon wrapper has dark color
			&[class*=bg-]:not(.bg-white):not(.bg-light):not(.bg-transparent) {
				box-shadow: none;
			}
		}

		// Image
		img {
			width: calc(var(--#{$prefix}timeline-icon-size) - calc(var(--#{$prefix}timeline-icon-border-width) * 2));
			height: calc(var(--#{$prefix}timeline-icon-size) - calc(var(--#{$prefix}timeline-icon-border-width) * 2));
			@include border-radius(var(--#{$prefix}border-radius-pill));
		}
	}


	//
	// Responsive config
	//

	@include media-breakpoint-up(md) {


		// Positions
		// ------------------------------

		// Center layout
		.timeline-center {

			// Left blocks
			.timeline-row-start {
				margin-right: 50%;
				padding-right: calc(var(--#{$prefix}timeline-icon-size) - var(--#{$prefix}timeline-icon-border-width));
			}

			// Right blocks
			.timeline-row-end {
				margin-left: 50%;
				padding-left: calc(var(--#{$prefix}timeline-icon-size) - var(--#{$prefix}timeline-icon-border-width));
			}
		}

		// Left layout
		.timeline-start {

			// Vertical line
			.timeline-container:before,
			&:before,
			&:after,
			.timeline-date:before,
			.timeline-date:after {
				left: calc(var(--#{$prefix}timeline-icon-size) * .5);
			}

			// Content padding
			.timeline-row,
			.timeline-date {
				padding-left: calc(var(--#{$prefix}timeline-icon-size) + calc(var(--#{$prefix}timeline-content-padding-x) * .5));
			}
		}

		// Right layout
		.timeline-end {

			// Vertical line
			.timeline-container:before,
			&:before,
			&:after,
			.timeline-date:before,
			.timeline-date:after {
				left: auto;
				right: calc(var(--#{$prefix}timeline-icon-size) * .5);
			}

			// Adjust dots position
			&:before,
			&:after,
			.timeline-date:before,
			.timeline-date:after {
				margin-left: 0;
				margin-right: calc(calc(var(--#{$prefix}timeline-line-width) * .5) * -1);
			}

			// Content padding
			.timeline-row,
			.timeline-date {
				padding-right: calc(var(--#{$prefix}timeline-icon-size) + calc(var(--#{$prefix}timeline-content-padding-x) * .5));
			}
		}

		// Reduce date vertical spacing in both
		.timeline-start .timeline-date,
		.timeline-end .timeline-date {
			padding-top: calc(var(--#{$prefix}spacer) * .5);
			padding-bottom: calc(var(--#{$prefix}spacer) * .5);
		}


		// Icon
		// ------------------------------

		// Base
		.timeline-icon {
			position: absolute;
			top: calc(var(--#{$prefix}spacer) * .5);

			// Horizontal line base
			&:after {
				content: "";
				position: absolute;
				top: 50%;
				margin-top: calc(calc(var(--#{$prefix}timeline-line-width) * .5) * -1);
				height: var(--#{$prefix}timeline-line-width);
				width: calc(calc(var(--#{$prefix}timeline-icon-size) * .5) - calc(var(--#{$prefix}timeline-icon-border-width) * 2));
				background-color: var(--#{$prefix}timeline-line-color);
				z-index: 1;
			}
		}

		// In left layout
		.timeline-start {
			.timeline-icon {
				left: 0;

				// Right line
				&:after {
					left: 100%;
					margin-left: var(--#{$prefix}timeline-icon-border-width);
				}
			}
		}

		// In right layout
		.timeline-end {
			.timeline-icon {
				right: 0;

				// Left line
				&:after {
					right: 100%;
					margin-right: var(--#{$prefix}timeline-icon-border-width);
				}
			}
		}

		// In centered layout
		.timeline-center {

			// In left block
			.timeline-row-start {
				.timeline-icon {
					left: 100%;
					margin-left: calc(calc(var(--#{$prefix}timeline-icon-size) * .5) * -1);

					// Left horizontal line
					&:after {
						right: 100%;
						margin-right: var(--#{$prefix}timeline-icon-border-width);
					}
				}
			}

			// In right block
			.timeline-row-end {
				.timeline-icon {
					right: 100%;
					margin-right: calc(calc(var(--#{$prefix}timeline-icon-size) * .5) * -1);

					// Right horizontal line
					&:after {
						left: 100%;
						margin-left: var(--#{$prefix}timeline-icon-border-width);
					}
				}
			}

			// Full width post
			.timeline-row-full .timeline-icon {
				position: static;

				// Remove horizontal line
				&:after {
					content: none;
				}
			}
		}


		// Time
		// ------------------------------

		.timeline-time {
			padding: 0;
			text-align: inherit;
			background-color: transparent;

			// Hide dots
			&:before {
				content: none;
			}
		}

		// In left and right layouts
		.timeline-start,
		.timeline-end {
			.timeline-time {
				padding-top: calc(var(--#{$prefix}spacer) * .5);
				margin-bottom: var(--#{$prefix}spacer);
				padding-left: calc(var(--#{$prefix}timeline-content-padding-x) * .5);
			}
		}
		.timeline-end .timeline-time {
			text-align: right;
			padding-left: 0;
			padding-right: calc(var(--#{$prefix}timeline-content-padding-x) * .5);
		}

		// In center layout
		.timeline-center {
			.timeline-time,
			.timeline-row-full .timeline-time {
				position: absolute;
				left: 100%;
				top: calc(calc(var(--#{$prefix}spacer) * .5) + var(--#{$prefix}timeline-icon-border-width));
				width: 100%;
				padding-left: calc(var(--#{$prefix}timeline-icon-size) - var(--#{$prefix}timeline-icon-border-width));
			}

			// Right aligned post
			.timeline-row-end,
			.timeline-row-full {
				.timeline-time {
					left: auto;
					right: 100%;
					padding-left: 0;
					padding-right: calc(var(--#{$prefix}timeline-icon-size) - var(--#{$prefix}timeline-icon-border-width));
					text-align: right;
				}
			}

			// Full width post
			.timeline-row-full .timeline-time {
				right: 50%;
				top: var(--#{$prefix}timeline-icon-border-width);
			}
		}
	}
}