.bottom-nav {
	$top-pad: 12px;

	// Put it on the bottom
	position: fixed;
	bottom: 0;
	background-color: darken($gray-dark, 6%);
	z-index: $header-z + 2; // to bump the bottom area above the sidebar by 1 index

	// Set a default color
	font-size: 16px;
	&, a { color: $nav-text; }

	// Give it a fixed size
	width: $sidebar-width;
	height: $footer-height;

	// Animate in on mobile
	left: 0;
	transition: left 250ms;
	&.show { left: 0; }
	@media(max-width:$screen-sm) {
		left: -$sidebar-width;
	}

	// Subtitle text
	.subtitle {
		font-size: 10px;
		&, a { color: #555; }
		a {
			&:hover { color: $nav-text-active; }
			&:active, &:focus { color: $theme-primary-color; }
		}
	}

	// The logout button and tagline
	.left {
		padding: $top-pad $nav-pad 0;

		// Logout link
		.logout {
			@include link-transitions;
			&:hover { color: $nav-text-active; }
			&:active, &:focus { color: $theme-primary-color; }
		}

		// Tweak positioning of icons
		.glyphicon-log-out {
			font-size: 12px;
			top: 0;
		}
		.glyphicon-heart {
			margin-right: 3px;
		}
	}

	// The link to the full site
	.right {
		display: block;
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		padding: $top-pad $nav-pad 0;
		text-align: center;

		// Tweak vertical position of globe
		.glyphicon-globe {
			top: 2px;
		}

		// Treat the whole right as a single button
		@include link-transitions;
		&:hover {
			background: darken($gray-dark, 3%);
			&, * { color: $nav-text-active; }
		}
		&:active, &:focus {
			background: $theme-primary-color;
			&, * { color: $theme-primary-inverse; }
		}
	}

	// on xtra small screens, make this area smaller
	// and more minimal, and kill the BKWLD cta
	@media(max-width: $screen-xs) {
		height: $nav-bottom-height-mobile;
		.subtitle { display: none; }
	}

}
