.citizen-header {
	--margin-header-item: 8px;
	--padding-header-icon: ~'calc( ( var( --height-header ) - var( --size-icon ) - var( --margin-header-item ) * 2 ) / 2 )';

	--size-button--header: ~'calc( var( --height-header ) - 1rem )';
	--size-icon--header: 1.25rem;
	--margin-header: 0.5rem;
	--padding-header: ~'calc( var( --padding-page ) / 2 )';
	position: fixed;
	z-index: 4;
	top: 0;
	right: 0;
	left: 0;
	display: flex;
	height: var( --height-header );
	justify-content: space-between;
	padding: 0 var( --padding-header );

	&:before {
		position: absolute;
		z-index: -1;
		top: 0;
		right: 0;
		bottom: ~'calc( var( --height-header ) / -2 )';
		left: 0;
		background: var( --color-surface-0 );
		content: '';
		-webkit-mask-image: linear-gradient( 180deg, #000, transparent );
		mask-image: linear-gradient( 180deg, #000, transparent );
		pointer-events: none;
	}

	&__item {
		display: flex;
		align-items: center;
	}

	&__button {
		display: grid;
		width: var( --size-button--header );
		height: var( --size-button--header );
		border-radius: var( --border-radius--small );
		place-items: center;

		// Used in checkbox hack
		&Checkbox {
			position: absolute;
			display: block;
			width: inherit;
			height: inherit;
		}

		&Icon {
			overflow: hidden; // Sometimes CSS animation can clip
			width: var( --size-icon--header );
			height: var( --size-icon--header );
		}

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

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

	&__inner {
		display: flex;
		min-width: 0;
		flex-grow: 1;
		justify-content: space-between;
	}

	&__start,
	&__end {
		display: flex;
		align-items: center;
	}

	&__start {
		min-width: 0;
	}

	&__title {
		display: flex;
		min-width: 0;
		height: var( --size-button--header );
		align-items: center;
		padding: 0 0.5rem;
		border-radius: var( --border-radius--small );
		color: var( --color-base--emphasized );
		font-weight: 500;
		white-space: nowrap;

		> div {
			overflow: hidden;
			text-overflow: ellipsis;
		}

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

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

		&--page {
			display: none;
		}
	}
}

.skin-citizen--titlehidden {
	.citizen-header {
		&__title {
			&--site {
				display: none;
			}

			&--page {
				display: grid;
			}
		}
	}
}

.mw-header {
	ul {
		list-style: none;
	}

	ul,
	li {
		display: block;
		margin: 0;
	}

	&-button {
		width: var( --size-icon );
		height: var( --size-icon );
		padding: var( --padding-header-icon );
		margin-top: var( --margin-header-item );
		margin-bottom: var( --margin-header-item );
		background-color: transparent;
		border-radius: var( --border-radius--small );
		cursor: pointer;

		&:active {
			// Override hover style
			background-color: var( --background-color-quiet--active ) !important;
		}
	}
}

// User icon bar
#p-personal-extra {
	ul {
		display: flex;
		height: var( --height-header );
		align-items: center;
	}
}

@media ( hover: hover ) {
	.mw-header-button:hover {
		background-color: var( --background-color-quiet--hover );
	}
}