homepage/styles/components/_form-choices.scss

@use 'sass:math';
@use '../lib/colors';
@use '../lib/motion';
@use '../lib/layout';

.form-choices {
	@extend %narrow-content;
	margin-top: layout.$huge-gap;
	margin-bottom: layout.$huge-gap;
	list-style: none;
	text-align: center;

	> li {
		position: relative;

		&:before {
			content: '\2771';
			display: inline-block;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
		}

		&:not(:last-child) {
			&:before {
				top: calc(50% - #{math.div(layout.$large-gap, 2)});
			}

			&::after {
				content: '';
				display: block;
				margin: layout.$large-gap auto;
				width: 15rem;
				height: 1px;
				background-color: colors.$gray-300;
			}
		}

		> a {
			@extend %form-choice-link;
		}
	}

	&.narrow {
		margin-top: layout.$large-gap;
		margin-bottom: layout.$large-gap;

		> li::after {
			display: none;
		}
	}
}

%form-choice-link {
	padding: layout.$small-gap layout.$normal-gap;
	display: inline-block;
	line-height: 2.5;
	text-decoration: none;
	transition: motion.$subtle background-color, motion.$subtle box-shadow;

	@keyframes form-choice-hover {
		0% {
			background-position: -100% 0;
		}
		100% {
			background-position: 200% 0;
		}
	}

	&:hover,
	&:focus-visible {
		background-color: colors.$yellow-600;
		background-image: linear-gradient(
			-45deg,
			transparent 0%,
			#{transparentize(colors.$yellow-500, 0.6)} 50%,
			transparent 100%
		);
		background-size: 200% 100%;
		background-repeat: no-repeat;
		color: inherit;
		@include colors.card-shadow(colors.$yellow-500);
		animation: motion.$prominent 0s 1 normal both running form-choice-hover;

		> em {
			background-color: transparent;
		}
	}

	> em {
		padding-block: layout.$small-gap;
		font-style: inherit;
		background-color: colors.$yellow-600;
		transition: motion.$subtle background-color;
	}
}