.citizen-header {
	--size-button--header: ~'calc( var( --height-header ) - 1rem )';
	--size-icon--header: 1.25rem;
	--margin-header: 0.5rem;
	--padding-header: ~'calc( var( --padding-page ) / 2 )';
	--size-dialog-min--header: 16rem;
	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;
		}

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

		// Background image icons
		&--icon:after {
			width: var( --size-icon--header );
			height: var( --size-icon--header );
			background-position: center;
			background-repeat: no-repeat;
			background-size: contain;
			content: '';
		}

		&Icon,
		&--icon:after {
			opacity: var( --opacity-icon-base );
			transition: @transition-transform, @transition-opacity;
		}

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

			.citizen-header__buttonIcon,
			&.citizen-header__button--icon:after {
				opacity: var( --opacity-icon-base--hover );
			}
		}

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

			.citizen-header__buttonIcon,
			&.citizen-header__button--icon:after {
				opacity: var( --opacity-icon-base--active );
			}
		}
	}

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

		.mw-checkbox-hack-checkbox:checked {
			~ .citizen-header__button {
				background-color: var( --background-color-primary--active );
			}
		}
	}

	&__start,
	&__end {
		display: flex;
	}

	&__start {
		min-width: 0;
		align-items: center;
	}

	&__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;
		}
	}

	// Reset
	ul {
		margin: 0;
		list-style: none;
	}
}

.citizen-title--hidden {
	.citizen-header {
		&__title {
			&--site {
				display: none;
			}

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

.skin-citizen-dark {
	.citizen-header__button {
		&Icon,
		&--icon:after {
			filter: invert( 1 );
		}
	}
}

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

// Reset hover styles if it is a touch device
// This is dumb but hover:hover overrides active states
@media ( hover: none ) {
	.citizen-header {
		&__button {
			&:hover {
				background-color: none;

				.citizen-header__buttonIcon,
				&.citizen-header__button--icon:after {
					opacity: var( --opacity-icon-base );
				}
			}
		}

		&__title {
			&:hover {
				background-color: none;
				color: var( --color-base );
			}
		}
	}
}