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: 0.2rem solid colors.$yellow-600;

	@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;
		cursor: pointer;
	}

	&: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.$gray-50;
			background-color: colors.$gray-600;

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

			&::before {
				opacity: 1;
				color: colors.$gray-600;
			}
		}
	}

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

	&:disabled + .form-input > label {
		color: colors.$gray-600;
		border-color: colors.$gray-600;
		border: 1px solid colors.$gray-300;

		&:hover {
			cursor: default;
			background-color: colors.$gray-50;
		}
	}
}

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

.blanked-out-form {
	position: relative;
	padding: layout.$large-gap 0;
	pointer-events: none;

	&::after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		opacity: 0.6;
		background-image: repeating-linear-gradient(
			-45deg,
			transparent 0rem,
			transparent 2rem,
			colors.$gray-100 2.2rem,
			colors.$gray-100 2.4rem,
			colors.$yellow-300 2.4rem,
			colors.$yellow-300 2.8rem,
			colors.$yellow-500 3rem,
			colors.$yellow-300 3.2rem,
			colors.$yellow-300 3.6rem,
			colors.$gray-100 3.6rem,
			colors.$gray-100 3.8rem
		);
		mask-image: linear-gradient(
			transparent 0%,
			black #{layout.$large-gap},
			black calc(100% - #{layout.$large-gap}),
			transparent 100%
		);
	}
}