/* figma-account-email — the in-workshop Figma account step.
   Geometry only; color and type come from tokens and voices.
   Markup: templates/components/figma-account-email.php */

figma-account-email {
	display: block;
	max-width: 36em;
	padding: 1.25em 1.5em;
	border: 1px solid var(--stroke-secondary);
	border-radius: var(--control-radius);

	> [data-when] {
		display: none;
	}

	&[data-state='none'] > [data-when='none'],
	&[data-state='pending'] > [data-when='pending'],
	&[data-state='saved'] > [data-when='saved'] {
		display: grid;
		gap: 0.75em;
	}

	.figma-email-form {
		display: grid;
		gap: 0.75em;
		justify-items: start;
	}

	.confirm {
		display: flex;
		align-items: center;
		gap: 0.5em;
	}

	/* The email field and Save appear once "I've made my Figma account" is ticked. */
	.figma-email-form:not(:has(.confirm input:checked)) {
		.email-field,
		button {
			display: none;
		}
	}

	.change {
		display: grid;
		gap: 0.75em;
	}
}