.header-container {
	border-bottom: 1px solid @colorGray12;
	padding: 0 @contentPadding;

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

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

		a {
			float: left;
			margin-left: 5px;
			font-size: 1em;
			text-decoration: none;
			color: @colorGray2;

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

			> * {
				float: left;
			}

			sup {
				color: @colorGray5;
				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: @brandingBoxWidth;
			width: auto;
		}

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