// ============================================================================
// :: Logo
// ============================================================================
.a-logo {
	position: relative;

	width: 8.2rem;
	min-width: 8.2rem;
	height: 2.2rem;

	margin-top: -0.8rem;

	@include respond-at($screen-medium-base) {
		width: 12.9rem;
		min-width: 12.9rem;
		height: 3.2rem;
	}
}

// ============================================================================
// :: Elements
// ============================================================================
.a-logo__link {
	display: block;

	&:focus:not(:hover) {
		@include outline();
	}
}

.a-logo__image {
	z-index: $z-index-base;

	width: 100%;

	max-width: 100%;
}

// ============================================================================
// :: Modifiers
// ============================================================================
.a-logo__image--inverted {
	position: absolute;
	top: 0;
	left: 0;
	z-index: $z-index-base + 1;

	opacity: 0;

	transition: opacity 0.3s ease-in-out;
}

.a-logo--inverted {

	.a-logo__image {
		opacity: 0;
	}

	.a-logo__image--inverted {
		opacity: 1;
	}
}