homepage/styles/components/_form-elements.scss

@use '../lib/colors';
@use '../lib/layout';
@use '../lib/motion';
@use '../lib/typography';

%form-item {
	@extend %narrow-content-gutter;
	display: flex;
	flex-direction: column;
	align-items: stretch;

	@media screen and (min-width: layout.$breakpoint) {
		flex-direction: row;
		align-items: center;
	}
}

%form-label {
	font-weight: typography.$emphasized-weight;
	color: colors.$blue-800;
}

%base-form-input {
	background-color: transparent;
	border: 0.1rem solid colors.$blue-800;
}

%form-input {
	@extend %base-form-input;
	padding: layout.$small-gap;
	font: inherit;
	transition: motion.$subtle background-color;

	&:hover {
		background-color: colors.$gray-300;
	}

	&:focus-visible,
	&:active {
		outline: none;
		background-color: colors.$yellow-500;
	}
}

.form-input {
	@extend %form-item;

	> span {
		@extend %form-label;
		flex-grow: 1;

		@media screen and (min-width: layout.$breakpoint) {
			text-align: right;
		}
	}

	> input,
	> textarea {
		@extend %form-input;
		flex-basis: 60%;
		margin-top: layout.$small-gap;

		@media screen and (min-width: layout.$breakpoint) {
			margin-top: 0;
			margin-left: layout.$normal-gap;
		}
	}
}

.form-checkbox {
	$size: 2rem;
	$gap: layout.$small-gap;

	@extend %form-item;
	justify-content: flex-end;

	&:hover > div {
		background-color: colors.$gray-300;
	}

	> input {
		opacity: 0;

		&:checked + div::before {
			content: '\2713';
			font-size: 1.8rem;
			line-height: $size;
		}

		&:focus-visible + div {
			background-color: colors.$yellow-600;
		}
	}

	> div {
		@extend %base-form-input;
		width: $size;
		height: $size;
		text-align: center;
	}

	> span {
		@extend %form-label;
		flex-basis: calc(60% - #{$size + $gap});
		margin-left: $gap;
	}
}

.form-submit {
	@extend %form-item;
	justify-content: flex-end;

	> input {
		@extend %form-input;
		flex-basis: 60%;
	}
}