.shell-pane
	change-bg('bg-offset')
	@extend .clearfix
	position: fixed
	top: $shell-top-nav-height
	bottom: 0
	z-index: $zindex-shell-pane
	width: $shell-content-sidebar-width
	transition: transform 300ms $weak-ease-out
	will-change: transform

.shell-pane-left
	left: 0
	right: auto

	// Span the remaining width on xs devices, leaving a 50px buffer to allow clicking the backdrop.
	@media $media-xs
		width: unset
		max-width: $shell-content-sidebar-width
		right: 48px

.shell-pane-right
	left: auto
	right: 0

.right-pane-visible .shell-pane-left
	z-index: $zindex-shell-pane-under !important

// When we are hiding the pane and showing the content again, we want to also
// keep it visible during this time.
// To do that, we hook into the main shell removal animation.
#shell.left-pane-visible-remove .shell-pane
#shell.right-pane-visible-remove .shell-pane
	display: block

// Pane slide transitions
.shell-pane-left
	transform: translateX(-100%)

	.left-pane-visible &
		transform: translateX(0)

.shell-pane-right
	transform: translateX(100%)

	.right-pane-visible &
		transform: translateX(0)
