// -------------------------------------------------------------------
// :: TOPBAR
// -------------------------------------------------------------------

$textshadow_default: 0 0 2px rgba(0, 0, 0, 0);
$textshadow_hover: 0 1px 2px rgba(0, 0, 0, 0.2);

.a-topbar {
	display: block;
	position: fixed;
	background: $aqua;
	transition: all 0.2s ease-in-out;
	text-shadow: $textshadow_default;
	top: 0;
	left: 0;
	right: 0;
	padding: rem(10px) 2rem;
	z-index: $z-index-header + 1;
	cursor: default;

	&:hover {
		background: darken($aqua, 10%);
		text-shadow: $textshadow_hover;

		:before {
			transform: scale(1.3);
		}
	}

	.a-link {
		color: $white;
		text-decoration: none;
		display: block;
		max-width: 90rem;
		margin: 0 auto;
		position: relative;
	}

	:before {
		display: block;
		position: absolute;
		right: 0;
		top: rem(5px);
		transition: all 0.2s ease-in-out;
		cursor: pointer;
	}

	a {
		text-decoration: underline;
		color: $white;

		&:hover {
			text-decoration: underline;
		}
	}
}

.styleguide .a-topbar {
	position: static;
}

body.has-topbar {
	margin-top: rem(47px);
}