@require '~styles/variables'
@require '~styles-lib/mixins'

.page-header
	$spotlight-size = $page-header-spotlight-size + $page-header-spotlight-margin
	// Double the spotlight size since it will effectively take up the left AND
	// right side of screens since content is centered.
	$screen-lg-full = $screen-lg-min + ($spotlight-size * 2)
	$page-header-spotlight-breakpoint = media(min: $screen-sm-min, max: $screen-lg-full)

	&-cover.has-cover-image
		.page-header-cover-buttons
			.button
				margin: 0 5px

		.text-muted
			theme-prop('color', 'lightest')

		.link-muted
			color: rgba($white, 0.6)

		.tag, .user-dogtag
			text-shadow: none

		.meter-blip
			background-color: rgba($white, 0.5)
			box-shadow: 1px 1px 1px rgba($black, 0.3)

		.meter-blip-filled
			background-color: $white

	&-content
		h1, h2, h3
			margin: 0

			small
				color: $white

		a
			color: $white !important

			&:hover
				color: $white !important
				text-decoration: underline

		.meter
			display: inline-block
			vertical-align: middle

	&-nav
		nav
			margin-top: 11px !important

		nav.breadcrumb
			margin-bottom: 11px

		@media $media-lg
			.stat-list
				margin-top: 7px

			.platform-list
				margin-top: 11px !important

			../ .gj-scroll-affixed
				elevate-2()
				theme-prop('border-bottom-color', 'darker')
				change-bg('gray')
				border-bottom-width: 2px
				border-bottom-style: solid
				z-index: $zindex-nav-scroll-affixed
				margin-top: $shell-top-nav-height !important

				#shell.has-banner &
					margin-top: $shell-top-nav-height * 2 !important

				nav
					margin-left: 0

	&.has-spotlight &
		@media $media-sm-md
			&-controls
				margin-left: $spotlight-size

		// For when the page gets too small to float the spotlight off the left edge.
		@media $page-header-spotlight-breakpoint
			&-spotlight
				left: $page-header-spotlight-margin

			&-content
				padding-left: $spotlight-size

			&-nav nav
				margin-left: $spotlight-size
