.timeline-slider {
	display: flex;
	overflow-x: scroll;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	width: 100%;

	* {
		box-sizing: border-box;
	}

	.tl-controls {
		font-size: 16px;

		> button {
			position: absolute;
			top: 0;
			width: 3em;
			height: 3em;
			font-family: "FontAwesome";
			font-size: clamp(0.875rem, 0.475rem + 2vw, 1.375rem);
			font-weight: bold;
			line-height: 3em;
			text-align: center;
			color: #666;
			cursor: pointer;
			border: none;
		}

		> button:hover {
			background-color: rgba(34, 34, 34, .3);
		}

		> button:active {
			color: #c40000;
		}

		.prev {
			left: 0;

			&::before {
				content: "\f104";
			}
		}

		.next {
			right: 0;

			&::before {
				content: "\f105";
			}
		}
	}

	.timeline[data-tl-init] {
		--timeline-bg-color: #eee;
		--timeline-border-color: #444;
		--timeline-progress-color: rgba(111, 50, 190, .75);
		--timeline-header-color: rgb(34, 34, 34);
		--timeline-text-color: #fafafa;
		--timeline-highlight-color: #c80000;
		--transition: .25s;
		margin: 0 auto 20px;
		padding: .5em 0;
		width: 100%;
		background-color: var(--timeline-bg-color);
		scroll-snap-align: start;
		display: inline-block;
		flex-shrink: 0;

		&:not(.active) .tl-progress {
			display: none;
		}

		&.active .tl-stage > div.current > div {
			font-weight: bold;
		}

		&.active .tl-stage > div.current > div.band:before {
			content: "\f04b  ";
			box-sizing: border-box;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			font: normal normal bold 14px / 1 FontAwesome;
			font-size: inherit;
			text-rendering: auto;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}

		> .tl-header {
			width: 100%;
			display: flex;
			flex-flow: row wrap;
			font-size: 1em;
			font-weight: bold;
			align-items: stretch;
			text-shadow: 0 1px 1px rgba(255, 255, 255, .75) !important;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;

			> div.break {
				flex-basis: 100%;
				height: 0;
			}

			> div.tl-spacer {
				width: 45px;
			}

			> :not(.tl-spacer, .break) {
				flex-grow: 1;
				flex-basis: 0;
				text-align: center;
				line-height: 3em;
				background-color: var(--timeline-bg-color);
				text-wrap: pretty;
				padding: 0 3px;
			}

			> h1.tl-title {
				font-size: clamp(0.75rem, 0.35rem + 2vw, 1.25rem);
				font-weight: bold;
				margin: 0;
			}

			> h2.tl-stage-title {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				font-size: clamp(0.625rem, 0.325rem + 1.5vw, 1rem);
				font-weight: bold;
				margin: 0;
				min-width: 0;
				max-height: 6em;
				overflow: hidden;
				text-overflow: ellipsis;
				line-clamp: 2;
				-webkit-line-clamp: 2;
				line-height: 1.5;
				padding-bottom: 10px;
			}

			> h2.tl-stage-title:nth-of-type(even) {
				background-color: #ddd;
			}
		}
		
		> .tl-container {
			position: relative;
			display: grid;
			grid-auto-flow: column;
			grid-template-columns: repeat(var(--stage-count), minmax(0, 1fr)) 45px;
			width: 100%;
			height: 550px;

			.tl-time-labels {
				position: relative;
				height: 100%;
				width: 45px;
				min-width: 45px;
				-webkit-transition: var(--transition);
				-moz-transition: var(--transition);
				-o-transition: var(--transition);
				transition: var(--transition);

				> time {
					position: absolute;
					font-size: .9em;
					color: #999;
					top: var(--tl-position);
					transform: translate(10%, -50%);
				}
			}

			&:has(.tl-stage > :not(.tl-spacer):hover) .tl-time-labels {
				opacity: .25;
			}

			.tl-progress {
				position: absolute;
				box-sizing: border-box;
				top: var(--tl-progress);
				left: 0;
				width: 100%;
				height: 2px;
				border-top: dashed 2px #b73948;
			}

			.tl-stage {
				display: flex;
				align-items: stretch;
				flex-flow: column nowrap;
				flex-grow: 1;
				flex-basis: 0;
				height: 100%;
				padding: 0 3px;

				&:nth-of-type(4n+1) {
					--gradient-start: #faa51a;
					--gradient-end: #f47a20;
					--gradient-hover-start: #f88e11;
					--gradient-hover-end: #f06015;
					--border-color: #da7c0c;
				}

				&:nth-of-type(4n+2) {
					--gradient-start: #7db72f;
					--gradient-end: #4e7d0e;
					--gradient-hover-start: #6b9d28;
					--gradient-hover-end: #436b0c;
					--border-color: #538312;
				}

				&:nth-of-type(4n+3) {
					--gradient-start: #00adee;
					--gradient-end: #0078a5;
					--gradient-hover-start: #0095cc;
					--gradient-hover-end: #00678e;
					--border-color: #0076a3;
				}

				&:nth-of-type(4n) {
					--gradient-start: #f16c7c;
					--gradient-end: #bf404f;
					--gradient-hover-start: #bf404f;
					--gradient-hover-end: #f16c7c;
					--border-color: #b73948;
				}

				&:nth-child(even) {
					background-color: #ddd;
				}

				> .tl-slot,
				> hr {
					height: var(--tl-duration);
				}

				> hr {
					margin: 0;
					border: 0;
				}

				> .tl-slot {
					display: flex;
					flex-flow: column;
					align-items: center;
					justify-content: center;
					padding: 0;
					overflow: hidden;
					cursor: pointer;
					background-image: -webkit-gradient(
						linear, left top, left bottom,
						from(var(--gradient-start)),
						to(var(--gradient-end))
					);
					background-image: -moz-linear-gradient(
						top, var(--gradient-start), var(--gradient-end)
					);
					background-image: linear-gradient(
						var(--gradient-start), var(--gradient-end)
					);
					border-right: solid 1px var(--border-color);
					border-left: solid 1px var(--border-color);

					> :not(time) {
						align-content: center;
						transition: all .25s ease-in-out;
						color: var(--timeline-text-color);
						text-align: center;
						font-size: clamp(0.625rem, 0.325rem + 1.5vw, 1rem);
						margin: 0;
					}

					> .band {
						height: 100%;
						overflow-y: hidden;
						text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
						color: var(--timeline-text-color);
						font-size: clamp(0.625rem, 0.325rem + 1.5vw, 1rem);
						line-height: 1.1;
						-webkit-user-select: all;
						-moz-user-select: all;
						-ms-user-select: all;
						user-select: all;
					}

					> .details {
						height: 0;
						line-height: 1em;
						text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
						color: var(--timeline-text-color);
						overflow: hidden;
						-webkit-user-select: none;
						-moz-user-select: none;
						-ms-user-select: none;
						user-select: none;
					}

					> .details > small:before {
						content: "\a";
						white-space: pre;
					}

					> time {
						display: none;
						position: absolute;
						top: var(--tl-position);
						right: 45px;
						font-size: .9em;
						-webkit-transition: var(--transition);
						-moz-transition: var(--transition);
						-o-transition: var(--transition);
						transition: var(--transition);
						color: #000;
						transform: translate(110%, -50%);
						-webkit-user-select: none;
						-moz-user-select: none;
						-ms-user-select: none;
						user-select: none;
					}
				}

				> .tl-slot:hover {
					background-image: -webkit-gradient(
						linear, left top, left bottom, 
						from(var(--gradient-hover-start)),
						to(var(--gradient-hover-end))
					);
					background-image: -moz-linear-gradient(
						top, var(--gradient-hover-start), var(--gradient-hover-end)
					);
					background-image: linear-gradient(
						var(--gradient-hover-start), var(--gradient-hover-end)
					);
					
					> .band {
						height: 0;
					}

					> .details {
						height: 100%;
					}

					> time {
						display: unset;
					}
				}
			}

			&:has(.tl-slot:hover) .tl-slot:not(:hover) {
				opacity: .5;
			}
		}
	}
}