@import '../less/variables/colors.less';
@import '../less/variables/effects.less';
@import '../less/variables/pages.less';
@import '../less/variables/z-index.less';

.c-site-header-image {
	height: @site-header-height;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: @z-index-site-header;

	// On short viewports, make the header smaller and scroll it with the page
	// instead of being fixed to the top of the screen.
	//
	// We don't want to go smaller if the screen is wider than 0.6 * 2800 px
	// because it will cause a horizontal tiling bug.
	@media (max-height: @vertical-breakpoint-sm) and (max-width: 1680px) {
		height: @site-header-height-small;
		position: absolute;
	}

	&.has-static-positioning {
		background-position: right;
		background-repeat: no-repeat;
		position: static;
		top: auto;

		@media (max-height: @vertical-breakpoint-sm) and (max-width: 1680px) {
			position: static;
		}
	}

	&.has-hidden-navbar {
		box-shadow: @navbar-box-shadow;
	}
}

.c-site-header-image__background-image {
	bottom: 0;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
}

.c-site-header-image__logo-image {
	height: 100%;
	object-fit: scale-down;
	object-position: left center;
	position: absolute;

	.has-static-positioning & {
		height: @site-header-height;
		position: static;

		@media (max-height: @vertical-breakpoint-sm) {
			height: @site-header-height-small;
		}
	}
}

.c-site-header-image__fallback-text {
	font-size: 24px;
	position: absolute;

	// Vertically center
	top: 50%;
	transform: translate(0, -50%);

	@media (max-height: @vertical-breakpoint-sm) {
		font-size: 18px;
	}

	.has-static-positioning & {
		height: @site-header-height;
		line-height: @site-header-height;
		position: static;
		top: auto;
		transform: none;
		white-space: nowrap;

		@media (max-height: @vertical-breakpoint-sm) {
			height: @site-header-height-small;
			line-height: @site-header-height-small;
		}
	}
}

// ------------------------------------------------------------------------------------------------------
// Site Header Navbar
// ------------------------------------------------------------------------------------------------------

// Setup the navbar height
@site-navbar-height: 50px;

.c-site-header-navbar {
	background-color: @color-gray-dark;
	box-shadow: @navbar-box-shadow;
	color: @color-gray-x-light;
	height: @site-navbar-height;
	left: 0;
	position: fixed;
	right: 0;
	top: @site-header-height;
	z-index: @z-index-site-navbar;

	// On short viewports, make the navbar scroll with the page instead of fixed.
	// Also, move it up to accommodate the smaller site header.
	//
	// We don't want to go smaller if the screen is wider than 0.6 * 2800 px
	// because it will cause a horizontal tiling bug.
	@media (max-height: @vertical-breakpoint-sm) and (max-width: 1680px) {
		position: absolute;
		top: @site-header-height-small;
	}

	&.has-static-positioning {
		position: static;

		@media (max-height: @vertical-breakpoint-sm) and (max-width: 1680px) {
			position: static;
			top: @site-header-height-small;
		}
	}
}

.c-site-header-navbar__container {
	display: flex;
}

// These items should be <a> tags which either do something or open a dropdown.
@site-navbar-item-padding: 15px;

.c-site-header-navbar__item {
	color: @color-gray-x-light;
	display: inline-block;
	height: @site-navbar-height;
	line-height: @site-navbar-height;

	// Wrap long text items (e.g., usernames) with ellipses.
	max-width: 240px;
	overflow: hidden;
	padding: 0 @site-navbar-item-padding;
	text-decoration: none;
	text-overflow: ellipsis;
	transition: all 0.3s;

	// Vertical align: top helps a weird issue with overflow: hidden. See:
	// http://stackoverflow.com/questions/20310690/overflowhidden-on-inline-block-adds-height-to-parent
	vertical-align: top;
	white-space: nowrap;

	&:hover,
	&:active {
		color: #fff;
	}

	&:focus {
		color: @color-gray-x-light;
	}

	@media (min-width: @grid-breakpoint-lg) { max-width: 375px; }

	// This needs to be a class because navbar items could be wrapped inside
	// dropdown lists or other tags such that :first-of-type or :first-child
	// won't be accurate.
	&.is-first-item {
		margin-left: -@site-navbar-item-padding;
	}

	&.has-open-dropdown {
		background-color: @color-gray-x-dark;
		color: #fff;
	}

	&.is-disabled {
		opacity: 0.5;
		pointer-events: none;
	}
}

.c-site-header-navbar__item__icon {
	@media (min-width: @grid-breakpoint-sm) {
		margin-right: 4px;
	}
}

.c-site-header-navbar__item__label {
	@media (max-width: @grid-breakpoint-sm) {
		display: none;
	}
}

// Override mediafly-bootstrap applying color change to focused <a> tags (!)
a.c-site-header-navbar__item:focus {
	color: @color-gray-x-light;
}