#citizen-body-header-sticky-sentinel {
	right: 0;
	left: 0;
	grid-area: content; // align right above content
	height: 1px;
	visibility: hidden;
	contain: strict;
}

.ve-activated,
.action-edit {
	// HACK: So sticky header will never trigger in edit action
	#citizen-body-header-sticky-sentinel {
		display: none;
	}
}

.citizen-body-header--sticky {
	.mw-body-header {
		flex-wrap: nowrap;
		padding-bottom: var( --space-md );
		white-space: nowrap;
		.citizen-sticky-header;

		.mw-indicators {
			display: none;
		}
	}

	.page-heading {
		position: relative;
		min-width: 0;
	}

	.firstHeading {
		overflow: hidden;
		font-size: var( --font-size-x-large );
		text-overflow: ellipsis;
	}

	.citizen-jumptotop {
		position: absolute;
		inset: 0 0 0 0;
		margin: ~'calc( var(  --space-xs ) * -1 )';
		border-radius: var( --border-radius--small );

		&:hover {
			background-color: var( --background-color-quiet--hover );
		}

		&:active {
			background-color: var( --background-color-quiet--active );
		}
	}
}

// Hide sticky header on scroll down on smaller screens
@media ( max-width: @max-width-breakpoint-tablet ) {
	.citizen-body-header--sticky {
		.mw-body-header .page-actions {
			transition: var( --transition-menu );
		}

		.mw-body-header {
			transition-property: transform;
		}

		// FIXME: Fine tune the animation, the position jump is annoying
		.page-actions {
			visibility: visible;
			opacity: 1;
			transition-property: opacity, visibility;
		}

		&.citizen-scroll--down {
			.mw-body-header {
				transform: translateY( -100% );
			}

			.page-actions {
				visibility: hidden;
				opacity: 0;
			}
		}
	}
}

// Make sticky header more compact if there are less screen estate
@media ( max-height: 800px ) {
	.citizen-body-header--sticky {
		.mw-body-header {
			padding-top: var( --space-sm );
			padding-bottom: var( --space-sm );
		}

		.firstHeading {
			font-size: var( --font-size-medium );
		}
	}
}