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

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

html:not( .ve-activated ) .citizen-body-header--sticky {
	.mw-body-header {
		position: sticky;
		top: ~'calc( var( --header-size ) - 1px )';
		padding: var( --space-md ) var( --padding-page ) var( --space-sm );
		border-bottom: 1px solid var( --border-color-base );
		margin: ~'0 calc( var( --padding-page ) * -1 )';
		transition: @transition-transform; // Hide sticky header on scroll down

		// HACK: Hide overflow
		// This has an issue if parent has overflow set
		&::before {
			position: absolute;
			z-index: -1;
			top: 0;
			right: 0;
			left: 0;
			height: 100%;
			-webkit-backdrop-filter: saturate( 50% ) blur( 16px );
			backdrop-filter: saturate( 50% ) blur( 16px );
			background-color: var( --background-color-overlay );
			content: '';
		}

		.mw-indicators {
			display: none;
		}
	}

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

	.firstHeading {
		overflow: hidden;
		font-size: var( --font-size-h3 );
		text-overflow: ellipsis;
		white-space: nowrap;
	}

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

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

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

	// Hide sticky header on scroll down
	// &.citizen-scroll--down {
	// 	.mw-body-header {
	// 		transform: ~'translateY( calc( -1 * var( --header-size ) ) )';
	// 	}
	// }
}

// Make sticky header more compact if there are less screen estate
@media ( max-width: @width-breakpoint-tablet ), ( max-height: 800px ) {
	.citizen-body-header--sticky {
		#siteSub {
			display: none;
		}

		.page-actions {
			display: none;
		}
	}
}
