:where(.wp-block-caltrout-form),
:where(.caltrout-form) {
	display: grid;
	gap: var(--wp--preset--spacing--40, 1.25rem);
}

:where(.caltrout-form-field) {
	display: grid;
	gap: 0.45rem;
}

.caltrout-form-field label {
	font: inherit;
	font-weight: 600;
}

:where(.caltrout-form-field) input:not([type="checkbox"]),
:where(.caltrout-form-field) textarea,
:where(.caltrout-form-field) select {
	background: #fff;
	border: 1px solid currentColor;
	border-radius: 0;
	box-sizing: border-box;
	color: inherit;
	font: inherit;
	padding: 0.8em 0.9em;
	width: 100%;
}

/*
 * Core block supports put preset classes (has-*-color, has-background,
 * has-border-color) on our block wrapper. The actual form control is a child,
 * so deliberately pass only the visual values through to that control. This
 * keeps the wrapper available for layout without giving it a visible border or
 * background of its own.
 */
.wp-block-caltrout-form-text-field.has-text-color input,
.wp-block-caltrout-form-textarea.has-text-color textarea,
.wp-block-caltrout-form-select.has-text-color select {
	color: inherit !important;
}

.wp-block-caltrout-form-text-field.has-background input,
.wp-block-caltrout-form-textarea.has-background textarea,
.wp-block-caltrout-form-select.has-background select {
	background-color: inherit !important;
}

.wp-block-caltrout-form-text-field.has-border-color input,
.wp-block-caltrout-form-textarea.has-border-color textarea,
.wp-block-caltrout-form-select.has-border-color select {
	border-color: inherit !important;
}

.wp-block-caltrout-form-text-field input,
.wp-block-caltrout-form-textarea textarea,
.wp-block-caltrout-form-select select,
.wp-block-caltrout-form-submit .wp-element-button {
	border-radius: inherit;
}

.caltrout-form-field input::placeholder,
.caltrout-form-field textarea::placeholder {
	color: inherit;
	opacity: 0.65;
}

.editor-styles-wrapper .caltrout-form-field input[readonly],
.editor-styles-wrapper .caltrout-form-field textarea[readonly],
.editor-styles-wrapper .caltrout-form-field select[aria-disabled="true"] {
	cursor: default;
	opacity: 1;
}

.editor-styles-wrapper .caltrout-form-field select[aria-disabled="true"] {
	pointer-events: none;
}

.caltrout-form-field--checkbox label {
	align-items: flex-start;
	display: flex;
	gap: 0.65rem;
}

.caltrout-form-field__help,
.caltrout-form__status {
	font-size: 0.875em;
}

:where(.caltrout-form-submit) button {
	background: var(--wp--preset--color--ink, #162b2a);
	border: 1px solid transparent;
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	padding: 0.8em 1.25em;
}

/*
 * Existing saved Form Submit blocks stored native padding on their wrapper.
 * Preserve an editor's explicit padding choice against the global button
 * preset until that block is saved again, at which point editor.js writes the
 * padding directly on the button.
 */
.wp-block-caltrout-form-submit[style*="padding"] .wp-element-button {
	padding: inherit !important;
}

.wp-block-caltrout-form-submit.has-text-color .wp-element-button {
	color: inherit !important;
}

.wp-block-caltrout-form-submit.has-border-color .wp-element-button {
	border-color: inherit !important;
}

/* Outline intentionally stays transparent even when a background is selected. */
.wp-block-caltrout-form-submit.has-background:not(.is-style-outline) .wp-element-button {
	background: inherit !important;
}

:root :where(.wp-block-caltrout-form-submit.is-style-outline .wp-element-button) {
	background-color: transparent;
	background-image: none;
	border: 2px solid currentColor;
	color: currentColor;
}

.caltrout-form-submit button:disabled {
	cursor: wait;
	opacity: 0.65;
}

.caltrout-form__honeypot {
	left: -10000px !important;
	position: absolute !important;
}