// Logo
//
// The logo is used to identify the website for branding purposes. It is made up
// of two parts: the Icon and the Wordmark. Both the Icon and the Wordmark are
// made out of inlined SVG.
//
// The Icon is a standalone graphic that can be used for things like the
// website's favicon, or for social media avatars. The Wordmark is the name of
// the website, with a branded treatment. Both the Icon and the Wordmark can be
// used in isolation, depending on the context it is supposed to be used for.
//
// On the website, the Wordmark is set to disappear when the viewport is
// narrow. This is to provide more room for the primary navigation, until the
// viewport is so narrow that a menu treatment must be used.
//
// The Icon will always be displayed, so it has a `title` element applied to
// its SVG. The Wordmark's presence is removed from assistive technology, so as
// to avoid redundant announcements when both it and the Icon are present.
// TODO: Add links
//
// Markup:
// <div id="logo" class="c-logo">
//     <a class="c-logo__link" href="index.html">
//     <svg class="c-logo__icon" role="img" width="51" height="51" xmlns="http://www.w3.org/2000/svg">
//         <title>The A11Y Project</title>
//         <path d="M25.5 0C11.417 0 0 11.417 0 25.5S11.417 51 25.5 51 51 39.583 51 25.5 39.583 0 25.5 0zm-.385 5.064a3.3 3.3 0 0 1 3.307 3.291 3.304 3.304 0 0 1-3.307 3.306 3.3 3.3 0 0 1-3.29-3.306 3.29 3.29 0 0 1 3.29-3.291zm14.289 10.652l-9.809 1.24.005 9.817 4.755 15.867a1.85 1.85 0 0 1-1.344 2.252c-.989.25-2.003-.3-2.252-1.298l-4.87-14.443h-1.498l-4.48 14.742c-.374.964-1.448 1.404-2.407 1.03-.954-.37-1.533-1.454-1.158-2.418l4.115-15.572v-9.978l-9.04-1.228c-.928-.075-1.558-.89-1.483-1.818.07-.934.914-1.628 1.838-1.554l10.982.944h4.815l11.69-.963a1.68 1.68 0 0 1 1.749 1.623c.04.924-.68 1.718-1.608 1.758z" />
//     </svg>
//     <svg class="c-logo__wordmark" aria-hidden="true" focusable="false" width="180" height="20" xmlns="http://www.w3.org/2000/svg">
//         <path d="M6.973 15H3.945V3.242H.068V.722H10.85v2.52H6.973V15zM24.746 15H21.73V8.838h-5.655V15h-3.027V.723h3.027v5.595h5.654V.723h3.018V15zM36.582 15h-8.223V.723h8.223v2.48h-5.195v3.135h4.834v2.48h-4.834V12.5h5.195V15zM53.506 15l-1.035-3.398h-5.205L46.23 15h-3.262L48.008.664h3.701L56.768 15h-3.262zm-1.758-5.938c-.957-3.079-1.497-4.82-1.621-5.224a16.453 16.453 0 0 1-.254-.957c-.215.833-.83 2.894-1.846 6.181h3.721zM64.756 15h-3.018V6.738v-.605l.02-.742c.013-.26.023-.521.03-.782.012-.26.022-.498.028-.713-.032.04-.088.098-.166.176l-.263.264-.303.283a5.13 5.13 0 0 1-.303.264L59.141 6.2l-1.465-1.816 4.6-3.662h2.48V15zM75.772 15h-3.018V6.738v-.605l.02-.742c.013-.26.022-.521.029-.782.013-.26.023-.498.029-.713-.032.04-.088.098-.166.176l-.264.264-.302.283a5.162 5.162 0 0 1-.303.264L70.157 6.2 68.69 4.385l4.6-3.662h2.48V15zM85.049 6.602l2.978-5.88h3.262l-4.736 8.721V15h-3.008V9.541L78.809.723h3.28l2.96 5.879zM101.309 7.441h.996c.931 0 1.627-.182 2.09-.546.462-.372.693-.909.693-1.612 0-.71-.195-1.234-.586-1.572-.384-.339-.99-.508-1.816-.508h-1.377v4.238zm6.836-2.265c0 1.536-.482 2.711-1.446 3.525-.957.814-2.321 1.22-4.092 1.22h-1.298V15h-3.028V.723h4.561c1.732 0 3.047.374 3.945 1.123.905.742 1.358 1.852 1.358 3.33zM113.867 7.06h.977c.957 0 1.663-.159 2.119-.478.456-.319.683-.82.683-1.504 0-.677-.234-1.159-.703-1.445-.462-.287-1.181-.43-2.158-.43h-.918v3.858zm0 2.461V15h-3.027V.723H115c1.94 0 3.376.354 4.307 1.064.931.703 1.396 1.774 1.396 3.213 0 .84-.231 1.589-.693 2.246-.462.651-1.117 1.162-1.963 1.533L122.246 15h-3.359l-3.408-5.479h-1.612zM137.002 7.842c0 2.363-.586 4.18-1.758 5.449-1.172 1.27-2.851 1.904-5.039 1.904-2.187 0-3.867-.635-5.039-1.904-1.172-1.27-1.758-3.092-1.758-5.469 0-2.376.586-4.19 1.758-5.44 1.178-1.256 2.865-1.884 5.059-1.884s3.87.632 5.029 1.895c1.165 1.263 1.748 3.079 1.748 5.449zm-10.42 0c0 1.595.303 2.796.908 3.603.606.808 1.511 1.211 2.715 1.211 2.415 0 3.623-1.605 3.623-4.814 0-3.216-1.201-4.824-3.603-4.824-1.205 0-2.113.406-2.725 1.22-.612.808-.918 2.009-.918 3.604zM138.467 19.2c-.684 0-1.279-.072-1.787-.216v-2.52c.521.131.996.196 1.425.196.665 0 1.14-.208 1.426-.625.287-.41.43-1.055.43-1.933V.722h3.027v13.36c0 1.667-.381 2.936-1.142 3.809-.762.872-1.888 1.308-3.379 1.308zM154.805 15h-8.223V.723h8.223v2.48h-5.196v3.135h4.834v2.48h-4.834V12.5h5.196V15zM163.857 3.037c-1.139 0-2.021.43-2.646 1.29-.625.852-.938 2.043-.938 3.573 0 3.184 1.195 4.776 3.584 4.776 1.003 0 2.217-.25 3.643-.752v2.539c-1.172.488-2.48.732-3.926.732-2.077 0-3.665-.628-4.765-1.885-1.101-1.263-1.651-3.072-1.651-5.43 0-1.484.27-2.782.811-3.896.54-1.12 1.315-1.976 2.324-2.568 1.016-.599 2.204-.898 3.564-.898 1.387 0 2.78.335 4.18 1.005l-.976 2.461a16.127 16.127 0 0 0-1.612-.664 4.806 4.806 0 0 0-1.592-.283zM176.055 15h-3.028V3.242h-3.877V.722h10.782v2.52h-3.877V15z" />
//     </svg>
//     </a>
// </div>
//
// Style guide: Components.logo
.c-logo__link {
	display: block;
	@include var(color, nav-link-text);

	// States
	&:hover,
	&:focus {
		.c-logo__icon {
			transform: scale(1.15);
			outline: $border-thin solid transparent;
		}
	}
}


.c-logo__lockup {
	// Supports
	@supports #{$supports-flex} {
		align-items: center; // Uses `.c-logo__logotype`'s bottom margin
		display: flex;
		flex-direction: row;
	}
}


.c-logo__icon {
	fill: $color-white;
	transition: transform $animation-duration-shortest $animation-easing-character; // SEE: `.c-logo__link`'s hover/focus states

	// User Queries
	@media screen and (prefers-reduced-motion: reduce) {
		transition: none;
	}
}


.c-logo__wordmark {
	fill: $color-white;
	margin-top: 0.25rem;
	margin-left: 0.5rem;
}
