@mixin timeline-style() {
	> [component="post"], .timeline-event {
		position: relative;	// for absolutely positioned pseudo-element, below
		border-left: 2px solid lighten($primary, 30%);
		margin-left: 1.5rem;

		&:not(:last-child) {
			padding-bottom: $post-padding;
		}
		&:not(:first-child) {
			padding-top: $post-padding;
		}

		> div:not(.content) {
			margin-left: -1.5rem;
		}

		.icon .avatar, .timeline-badge {
			// Opaque ring
			position: relative;
			z-index: 1;
			box-shadow: 0 0 0 4px var(--bs-body-bg);
		}

		[component="user/locality"] {
			transform: translate(-75%, -100%);
			z-index: 2;
			background-color: $body-bg;
			font-size: .75rem;
			margin-left: -15px;
		}

		[component="user/status"] {
			transform: translate(-80%, -100%);
			z-index: 2;
			margin-left: -15px;
		}
	}

	@include media-breakpoint-down(sm) {
		[component="post"] {
			border: 0;
			padding: $post-padding 0;

			margin-left: initial;
			> div:not(.content) {
				margin-left: 0;
			}
		}

		[component="post"]:last-child:after {
			display: none;
		}

		.timeline-event {
			margin-left: 1rem;

			&:before, &+:not(.timeline-event):before {
				content: '';
				width: 1rem;
				position: absolute;
				top: 0;
				left: calc(-0.5rem - 1px);
				border-bottom: 2px solid lighten($primary, 30%);
			}

			&+:not(.timeline-event):before {
				left: calc(.5rem + 1px);
			}

			&+.timeline-event:before {
				display: none;
			}

			.timeline-text.timeago {
				display: none;
			}
		}
	}

	@include media-breakpoint-up(sm) {
		.timeline-event {
			[component="topic/event/delete"] {
				visibility: hidden;
			}

			&:hover {
				[component="topic/event/delete"] {
					visibility: visible;

					&:hover {
						color: $danger;
					}
				}
			}

			[component="user/status"] {
				padding: 5px;
				top: 36px;
				left: 36px;
			}

			[component="user/locality"] {
				font-size: .75rem;
			}
		}
	}

	.necro-post {
		border-left-style: dashed;
	}

	> [component="post"]:last-child:after {
		content: '';
		width: 1rem;
		position: absolute;
		bottom: 0;
		left: calc(-0.5rem - 1px);
		border-bottom: 2px solid lighten($primary, 30%);
	}

	[component="topic/event"], [component="topic/necro-post"] {
		&.timeline-event {
			text-align: left;
			justify-content: left;
			font-size: 1em;

			.timeline-badge {
				float: left;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;

				width: 32px;
				height: 32px;
				padding: 0;
				margin-left: -17px;
				margin-right: 17px;
				color: lighten($primary, 30%);
				background-color: $body-bg;
				border: 2px solid lighten($primary, 30%);
				border-radius: 50%;
			}

			.timeline-text {
				line-height: 32px;
				text-transform: initial;
			}
		}
	}
}