#mw-header-siteinfo {
	position: relative;
	display: inherit;
	overflow: hidden;
	flex-grow: 1;
	align-items: center;
	margin-right: 10px;

	a {
		transition: @transition-opacity-quick;

		&:hover {
			opacity: var( --opacity-icon-base--hover );
		}

		&:active {
			opacity: var( --opacity-icon-base--active );
		}
	}
}

#header {
	&-sitetitle {
		.mw-logo-wordmark {
			color: var( --color-base--emphasized );
			font-size: 16px;
			white-space: nowrap;
		}

		img.mw-logo-wordmark {
			width: auto;
			height: 14px;
		}
	}

	&-pagetitle {
		overflow: hidden;
		color: var( --color-base--emphasized );
		font-weight: 500;
		opacity: 0;
		pointer-events: none;
		text-overflow: ellipsis;
		visibility: hidden;
		white-space: nowrap;
	}
}

.skin-citizen--titlehidden {
	#header {
		&-sitetitle {
			position: absolute;
			opacity: 0;
			pointer-events: none;
			visibility: hidden;
		}

		&-pagetitle {
			opacity: 1;
			pointer-events: auto;
			visibility: visible;
		}
	}
}

.skin-citizen-dark {
	img.mw-logo-wordmark {
		filter: invert( 1 ) hue-rotate( 180deg );
	}
}