// Get Started
//
// The Get Started call-to-action provides a large guiding prompt for a person
// who is interested in learning about accessibility, but may not know where to
// begin.
//
// Markup:
// <p class="c-cta-get-started">
//   <a class="c-cta-get-started__link" href="">How do I get started?</a>
// </p>
//
// Style guide: Components.get-started
.c-cta-get-started {
	position: relative;
		bottom: 2rem;
	text-align: center;

	@include mappy-bp(lap-large) {
		bottom: 2.25rem;
	}

	// Supports
	@supports #{$supports-grid} {
		display: grid;
		grid-template-columns: map-get($global-bleed, small) 1fr map-get($global-bleed, small);
		grid-template-areas: ". get-started .";

		// Breakpoints
		@include mappy-bp(palm-medium) {
			grid-template-columns: 1fr minmax(0, 60vw) 1fr;
			grid-template-areas: ". get-started .";
		}

		@include mappy-bp(lap-medium) {
			grid-template-columns: 1fr minmax(0, 45vw) 1fr;
		}
	}
}


.c-cta-get-started__link {
	@include var(background-color, button-background);
	border: $border-thick solid;
	@include var(border-color, body-background);
	@include var(color, button-text);
	font-family: $font-family-secondary;
	font-size: $font-size-body;
	letter-spacing: $font-tracking-slight;
	line-height: $line-height-tight;
	padding: 0.75rem 1rem;
	text-align: center;
	text-decoration: none;
	transition:
		background-color $animation-duration-shorter $animation-easing-character,
		color $animation-duration-shorter $animation-easing-character,
		letter-spacing $animation-duration-shorter $animation-easing-character;

	// States
	&:hover,
	&:focus {
		@include var(background-color, button-focus-background);
		outline: $border-thin solid transparent;
	}

	&:focus {
		letter-spacing: $font-tracking-loose;
	}

	// Breakpoints
	@include mappy-bp(wrist-large) {
		font-size: $font-size-body-medium;
		padding: 1rem 2rem;
	}

	// Supports
	@supports #{$supports-grid} {
		grid-area: get-started;
	}

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