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;

	@include colors.coderdojo-theme {
		color: colors.$brown-800;
	}
}

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

	@include colors.coderdojo-theme {
		border-color: colors.$brown-800;
	}
}

%focused-form-input {
	outline: none;
	background-color: colors.$yellow-500;

	@include colors.coderdojo-theme {
		background-color: colors.$green-500;
	}
}

%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 {
		@extend %focused-form-input;
	}
}

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

	&.isolated {
		position: absolute;
		top: -100%;
		opacity: 0;
		pointer-events: none;
	}

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

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

	> :last-child {
		@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;
		}
	}
}

.radio-input {
	position: absolute;
	opacity: 0;

	+ .form-input > label {
		position: relative;
		color: colors.$gray-800;

		&::before {
			content: '\2771';
			display: inline-block;
			position: absolute;
			left: #{layout.$large-gap * -1};
			top: 50%;
			transform: translateY(-50%);
			opacity: 0.3;
		}
	}

	&:checked {
		+ .form-input > label {
			font-weight: typography.$emphasized-weight;
			color: colors.$teal-800;
			border-color: colors.$teal-800;

			@include colors.coderdojo-theme {
				color: colors.$orange-500;
			}

			&::before {
				opacity: 1;
			}
		}
	}

	&:focus-visible + .form-input > label {
		@extend %focused-form-input;
	}
}

.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;

			@include colors.coderdojo-theme {
				background-color: colors.$green-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%;
	}
}