/**
 * Shared form presentation. Values come from settings.custom.form in theme.json,
 * which also makes them available to style variations and Global Styles.
 *
 * Button surfaces belong to theme.json's button element. inc/forms.php connects
 * plugin-rendered submit controls to it, so nothing here repaints a primary button.
 * Compact checkout, site search and quick rating keep their own fields.
 */

/* Tokens use light-dark(), so every control adapts on these native dark surfaces. */
:where(.has-custom-base-inverted-background-color, .has-custom-base-2-inverted-background-color, .has-custom-paper-inversed-gradient-background, .has-custom-pro-dark-gradient-background, .has-custom-studio-dark-gradient-background) {
	color-scheme: dark;
}

:is(.fp-form, .fp-ae-form, .fp-lc__modal-form, .fp-contact-form, .edd-reviews-area .edd-reviews-form, .fp-account-form .edd-blocks-form, .wp-block-edd-login .edd-blocks-form, .wp-block-edd-register .edd-blocks-form, .wp-block-edd-profile-editor .edd-blocks-form) {
	& :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="url"], select, textarea) {
		box-sizing: border-box;
		inline-size: 100%;
		min-block-size: 44px;
		padding: 10px 12px;
		border: 1px solid var(--wp--custom--form--field--border);
		border-radius: var(--wp--custom--form--field--radius);
		background-color: var(--wp--custom--form--field--background);
		color: var(--wp--custom--form--field--text);
		font: inherit;
		font-size: 1rem;
		line-height: 1.4;
		transition: border-color 120ms ease, box-shadow 120ms ease;

		&:hover:not(:disabled) {
			border-color: var(--wp--custom--form--field--border-hover);
		}

		/* A transparent outline survives forced-colors mode, which removes shadows. */
		&:focus {
			outline: 2px solid transparent;
			border-color: var(--wp--custom--form--action--accent);
			box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--custom--form--action--accent) 25%, transparent);
		}

		&::placeholder {
			color: var(--wp--custom--form--field--muted);
			opacity: 1;
		}

		&:disabled {
			border-color: var(--wp--custom--form--field--disabled-border);
			background-color: var(--wp--custom--form--field--disabled-background);
			color: var(--wp--custom--form--field--muted);
			cursor: not-allowed;
		}

		&[aria-invalid="true"] {
			border-color: var(--wp--custom--form--action--danger);
		}
	}

	& textarea {
		min-block-size: 120px;
		resize: vertical;
	}

	& select {
		appearance: none;
		padding-inline-end: 40px;
		background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
		background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
		background-repeat: no-repeat;
		background-size: 5px 5px;
	}

	& :is(input[type="checkbox"], input[type="radio"]) {
		inline-size: 20px;
		block-size: 20px;
		margin: 0;
		accent-color: var(--wp--custom--form--action--accent);
	}

	/* The browser owns this control's wording. Only its button can be styled. */
	& input[type="file"] {
		box-sizing: border-box;
		inline-size: 100%;
		padding: 10px 12px;
		border: 1px dashed var(--wp--custom--form--field--border);
		border-radius: var(--wp--custom--form--field--radius);
		background-color: var(--wp--custom--form--field--background);
		color: var(--wp--custom--form--field--muted);
		font: inherit;
		font-size: .875rem;
		cursor: pointer;

		&::file-selector-button {
			min-block-size: 40px;
			margin-inline-end: 12px;
			padding: 8px 18px;
			border: 1px solid var(--wp--custom--form--action--accent);
			border-radius: 9999px;
			background: transparent;
			color: var(--wp--custom--form--action--accent);
			font: inherit;
			font-weight: 600;
			cursor: pointer;
		}

		&:hover::file-selector-button {
			background: color-mix(in srgb, var(--wp--custom--form--action--accent) 10%, transparent);
		}

		&:focus-visible {
			outline: 2px solid var(--wp--custom--form--action--accent);
			outline-offset: 2px;
		}
	}

	& :is(label, .edd-label) {
		color: var(--wp--custom--form--field--text);
		font-size: .875rem;
		font-weight: 500;
		line-height: 1.4;
	}

	& :is(.edd-description, .description, .fp-contact-help, .fp-field-help, .fp-review-images-help) {
		color: var(--wp--custom--form--field--muted);
		font-size: .8125rem;
		line-height: 1.45;
	}

	/* Links in field copy follow their text, so they stay readable on any surface. */
	& :is(label, .edd-label, .edd-description, .description, .fp-contact-help, .fp-field-help, .fp-review-images-help) a {
		color: inherit;
	}

	& :is(.edd-required-indicator, .required) {
		color: var(--wp--custom--form--action--danger);
	}

	& .fp-contact-field-error {
		color: var(--wp--custom--form--action--danger);
		font-size: .8125rem;
		font-weight: 500;
	}

	/* Secondary actions stay transparent, so they work on any surface. */
	& :is(button.wp-generate-pw, .edd-button-secondary:not(.wp-hide-pw)) {
		min-block-size: 44px;
		padding: 10px 22px;
		border: 1px solid var(--wp--custom--form--action--accent);
		border-radius: 9999px;
		background: transparent;
		color: var(--wp--custom--form--action--accent);
		font: inherit;
		font-size: 1rem;
		font-weight: 600;
		line-height: 1.4;
		cursor: pointer;
		transform: none;

		&:hover {
			background: color-mix(in srgb, var(--wp--custom--form--action--accent) 10%, transparent);
			transform: none;
		}
	}

	/* The show/hide toggle sits inside the password field rather than beside it. */
	& .wp-pwd {
		position: relative;

		& input {
			padding-inline-end: 48px;
		}

		& .wp-hide-pw {
			position: absolute;
			inset-block-start: 0;
			inset-inline-end: 0;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			inline-size: 44px;
			block-size: 44px;
			padding: 0;
			border: 0;
			background: transparent;
			color: var(--wp--custom--form--field--text);
			cursor: pointer;
			transform: none;
		}
	}
}

:is(.fp-form-error, .fp-contact-form-error, .fp-account-form .edd-alert-error, .wp-block-edd-login .edd-alert-error, .wp-block-edd-register .edd-alert-error, .wp-block-edd-profile-editor .edd-alert-error) {
	margin: 0 0 1rem;
	padding: 12px 14px;
	border: 1px solid var(--wp--custom--form--message--error-border);
	border-radius: var(--wp--custom--form--field--radius);
	background: var(--wp--custom--form--message--error-background);
	color: var(--wp--custom--form--message--error-text);
	font-size: .875rem;

	& :is(p, .edd_error) {
		margin: 0;
		color: inherit;
	}
}

:is(.fp-form-success, .fp-contact-form-success, .fp-account-form .edd-alert-success, .wp-block-edd-profile-editor .edd-alert-success) {
	margin: 0 0 1rem;
	padding: 12px 14px;
	border: 1px solid var(--wp--custom--form--message--success-border);
	border-radius: var(--wp--custom--form--field--radius);
	background: var(--wp--custom--form--message--success-background);
	color: var(--wp--custom--form--message--success-text);
	font-size: .875rem;
}

/* ---------------------------------------------------------------------------
 * Submit controls: same box whether idle or saving
 *
 * A 4px border is always present and painted over by the button's own fill, so the
 * box can never change size. Core's element padding is reduced to match. Saving
 * empties the fill and paints only the border, so the surface behind shows through
 * and the accent token keeps ring and label readable on light and dark.
 * ------------------------------------------------------------------------- */

@property --fp-saving-angle {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

@keyframes fp-saving {
	to {
		--fp-saving-angle: 360deg;
	}
}

/* Doubled class: the compiled theme surface sets a zero border at equal weight. */
form .wp-element-button.fp-form-submit.fp-form-submit {
	box-sizing: border-box;
	min-block-size: 44px;
	padding: calc(.667em - 2px) calc(1.333em - 2px);
	border: 4px solid transparent;
	cursor: pointer;
	appearance: none;
	transform: none;
	/* EDD transitions every property, which would fade the switch to hollow. */
	transition: box-shadow 180ms ease;

	/* Pointer focus draws no ring. Keyboard focus keeps the shared focus outline. */
	&:focus:not(:focus-visible) {
		outline: none;
	}

	&.is-saving {
		border-color: var(--wp--custom--form--action--accent);
		background: transparent;
		box-shadow: none;
		color: var(--wp--custom--form--action--accent);
		cursor: progress;
	}

	/* Without border-area support, the static outline above is the saving state. */
	@supports (background-clip: border-area) {
		&.is-saving {
			border-color: transparent;
			background-image: conic-gradient(from var(--fp-saving-angle), var(--wp--custom--form--action--accent) 0 28%, color-mix(in srgb, var(--wp--custom--form--action--accent) 25%, transparent) 28% 100%);
			background-origin: border-box;
			background-clip: border-area;
			animation: fp-saving 1.1s linear infinite;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	form .wp-element-button.fp-form-submit.fp-form-submit.is-saving {
		animation: none;
	}

	:is(.fp-form, .fp-ae-form, .fp-lc__modal-form, .fp-contact-form, .edd-reviews-form, .edd-blocks-form) :is(input, select, textarea) {
		transition: none;
	}
}

/* A secondary submit (core's outline button style) keeps its outline at the same box size. */
form .wp-block-button.is-style-outline > .wp-element-button.fp-form-submit.fp-form-submit:not(.is-saving) {
	padding: .667em 1.333em;
	border: 2px solid currentColor;
}