.header-container {
	border-bottom: @border-subtle;
	padding: 0 @padding-content;

	&.header-chrome {
		background-color: var( --background-color-interactive );
		border: 0;
		box-shadow: inset 0 -1px 3px rgba( 0, 0, 0, 0.08 );
	}
}

.minerva-header {
	.navigation-drawer .toggle-list__toggle {
		.cdx-mixin-button-layout-flush( 'start', true, 'large' );
	}

	.branding-box {
		opacity: @opacity-icon-subtle; // T251135

		a {
			float: left;
			margin-left: 5px;
			font-size: 1em;
			text-decoration: none;
			color: var( --color-base );

			span {
				line-height: 0;
				font-size: inherit;
			}

			> * {
				float: left;
			}

			sup {
				color: var( --color-subtle );
				display: none;

				.beta & {
					display: initial;
				}
			}
		}
	}

	.search-box {
		// Search box should grow to fill rest of header
		flex: 1 0 auto;
		display: none;
	}

	// Fix cursor for Safari
	#searchInput { // stylelint-disable-line selector-max-id
		cursor: text;
	}
}

@media screen and ( min-width: @width-breakpoint-tablet ) {
	.minerva-header {
		.branding-box {
			// Handle logos that are larger than the set branding box width
			// This will also cause the searchbox overlay to be misaligned with the .minerva-heading searchbox
			min-width: @width-branding-box;
			width: auto;
		}

		.search-box {
			display: block;
			width: @width-search-box;
			max-width: @width-search-box;
		}
	}
}

// Night mode
html.skin-theme-clientpref-night {
	// The following icons use background-image instead of mask-image.
	// These can be removed if a fix for T358246 is found.
	.minerva-icon.minerva-icon--search-base20,
	.minerva-icon.minerva-icon--search,
	.page-actions-menu__list .minerva-icon,
	.mw-editsection .minerva-icon,
	.toggle-list .minerva-icon,
	.branding-box img {
		.night-mode-invert-image();
	}
}

@media ( prefers-color-scheme: dark ) {
	html.skin-theme-clientpref-os {
		.minerva-icon.minerva-icon--search-base20,
		.minerva-icon.minerva-icon--search,
		.page-actions-menu__list .minerva-icon,
		.mw-editsection .minerva-icon,
		.toggle-list .minerva-icon,
		.branding-box img {
			.night-mode-invert-image();
		}
	}
}