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

$-scroll-affixed-spacing = ($grid-gutter-width / 2)

html
	// Firefox uses this color to blank the screen before it renders. It's
	// better to use this than constantly flicker black while rendering.
	change-bg('bg')

body
	change-bg('darkest', true)

#shell-top-nav
	top: 0
	// If we used `right: 0` instead, the top nav would flex off the screen if
	// a horizontal scrollbar became visible. Doing it this way ensures it's
	// always the correct width.
	width: 100vw
	max-width: 100%

#shell-cbar
	top: $shell-top-nav-height
	left: 0
	bottom: 0

#shell-body
	padding-top: $shell-top-nav-height

#shell-banner
	top: 0
	left: 0
	right: 0

#shell-hot-bottom
	bottom: 0
	left: 0
	right: 0

.growl-container
	bottom: 10px

.chat-window-wrap
	top: 0
	left: 0
	right: 0
	bottom: 0

	@media $media-sm-up
		top: $shell-top-nav-height + 10px
		left: $shell-content-sidebar-width + $shell-cbar-width + 10px

//
// And now for the long list of positioning shell elements.
//

// Affixed components should be shifted down from the top of the shell to make room
// for the top nav.
.gj-scroll-affixed.-anchor-top
	margin-top: $shell-top-nav-height + $-scroll-affixed-spacing

#shell
	position: relative
	// TODO: We should get the shell components using these instead of all the manual stuff below.
	--shell-top: $shell-top-nav-height
	--shell-bottom: 0
	--shell-left: 0
	--shell-right: 0

	&.has-banner
		--shell-top: $shell-top-nav-height * 2

		#shell-top-nav
			top: $shell-top-nav-height

		.shell-pane
		#shell-cbar
			top: $shell-top-nav-height * 2

		#shell-body
			padding-top: $shell-top-nav-height * 2

		@media $media-sm-up
			.chat-window-wrap
				top: $shell-top-nav-height * 2 + 10px

		.gj-scroll-affixed.-anchor-top
			margin-top: $shell-top-nav-height * 2 + $-scroll-affixed-spacing

	&.has-cbar
		--shell-left: $shell-cbar-width

		#shell-body
			padding-left: $shell-cbar-width

	&.has-cbar
	&.has-cbar-mobile
		.shell-pane-left
		#shell-sidebar
			left: $shell-cbar-width

		#shell-cbar
			transform: translateX(0)

body.has-hot-bottom
	--shell-bottom: $status-bar-height

	#shell-body
		padding-bottom: $status-bar-height

	.shell-pane
	#shell-cbar
		bottom: $status-bar-height

	.growl-container
		bottom: $status-bar-height + 10px

#shell-body.has-content-sidebar
	#footer
		margin-left: $shell-content-sidebar-width

	&.has-cbar
		#footer
			margin-left: $shell-content-sidebar-width + $shell-cbar-width
