$_c-input-margin-top: 1.5rem;


.c-form {
	margin-top: 1rem;
}


.c-form__label {
	display: inline-block;
	font-weight: $font-weight-bold;
	margin-top: $_c-input-margin-top;
	padding-bottom: 0.25rem;
}


.c-form__input {
	@include var(background-color, body-background);
	@include var(color, body-text);
	border: $border-thinnest solid;
	@include var(border-color, input-border);
	line-height: $line-height-single;
	padding: 0.5rem;
	transition: background-color $animation-duration-shorter $animation-easing-character;
	width: 100%;

	&:hover,
	&:active {
		@include var(background-color, input-hover-background);
	}

	&:focus {
		@include var(border-color, input-focus-border);
		outline: $border-thinner solid;
		@include var(outline-color, input-focus-border);
	}

	&:active {
		transition: none;
	}

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


.c-form__input--multiline {
	line-height: $line-height-loose;
	min-height: 15rem;
}


.c-form__button {
	@include var(background-color, button-background);
	border: none;
	border-radius: 0.25rem;
	@include var(color, button-text);
	cursor: pointer;
	font-family: $font-family-secondary;
	margin-top: $_c-input-margin-top * 1.5;
	min-width: 20ch;
	padding: 0.75rem 1.25rem;
	text-transform: uppercase;
	transition: background-color $animation-duration-shorter $animation-easing-character;

	// States
	&:hover {
		@include var(background-color, button-focus-background);
	}

	&:focus {
		@include var(background-color, button-focus-background);
		box-shadow:
			0 0 0 em(2) var(--color-body-background),
			0 0 0 em(4) var(--color-button-background);
		outline: $border-thin solid transparent;
	}

	&:active {
		@include shift-click();
	}

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


.c-form__vendor {
	@include link-states(body-text);

	&:hover,
	&:focus {
		text-decoration: none;
	}
}


.c-form__instructions {
	position: relative;
		bottom: 1rem;
}


.c-form__error-wrapper {
	border: $border-thin solid;
	@include var(border-color, error);
	padding: 0.5rem;

	.c-form__error-list {
		padding: 0 1rem;
	}

	.c-form__error-message {
		font-size: 0.75rem;
		padding-top: 0.25rem;
	}
}

.c-form__input[aria-invalid]{
	border: $border-thinner solid;
	@include var(border-color, error);
}

.c-form__progress {
	@include var(background-color, progress-background);
	min-height: 2rem;
	margin-bottom: 3rem;
	max-width: 68ch;

	// Supports
	@supports #{$supports-flex} {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
}


.c-form__progress-fill {
	@include var(background-color, progress-bar);
}


.c-form__progress-label {
	@include var(background-color, body-background);
	font-family: $font-family-secondary;
	margin-top: 0;
	padding-left: 1rem;
}


.c-form__legal {
	margin-top: 0.25rem !important;
}
