// Skipnav
//
// A skipnav, sometimes known as a jumpnav, allows someone to skip sections of
// content that are repeated from page to page. An example of this is skipping
// the main navigation that is repeated on every page of this site.
//
// Skipnav is useful to people who use screen readers, as it allows them to
// quickly get to the main point of the page. It is also useful to people with
// motor control disabilities, as it lessens the amount of effort it takes to
// navigate.
//
// A skipnav that links to the main content of the page should typically be the
// first thing you put in the code for your page templates. For The A11Y
// Project, it is the first piece of code used after the opening `body` element.
//
// Markup:
// <a class="c-skipnav" href="#title">Skip to content.</a>
//
// Style guide: Components.skipnav
.c-skipnav {
	@include hide(visually);

	background-color: $color-white;
	border: $border-thinner solid $color-black;
	color: $color-black;
	font-family: $font-family-secondary;
	letter-spacing: $font-tracking-slight;
	padding: 1rem 2rem;
	text-decoration: none;
	transition:
		background-color $animation-duration-short $animation-easing-character,
		color $animation-duration-short $animation-easing-character;

	// States
	&:focus {
		outline: none;
		position: absolute;
			top: 6rem;
			left: map-get($global-bleed, large);
		z-index: 10;

		&:hover {
			background-color: $color-black;
			color: $color-white;
		}
	}

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