/* WS Form skin (#29). WS Form sets its variables on :where([data-wsf-style-id]), so these win
   without !important and survive plugin updates. Loaded only when WS Form enqueues its base CSS. */

.wsf-form {
	--wsf-form-font-family: inherit;
	--wsf-form-font-size: var(--wp--preset--font-size--body);
	--wsf-form-color-base: var(--wp--preset--color--foreground);
	--wsf-form-color-primary: var(--wp--preset--color--foreground);
	--wsf-form-color-accent: var(--wp--preset--color--foreground);
	--wsf-form-color-danger: #bb0000;

	/* #33 row 31: radius 0. Black border kept from legacy (the #dedede `border` token is 1.3:1). */
	--wsf-field-border-radius: 0;
	--wsf-field-height: 50px;
	--wsf-field-padding-vertical: 11px; /* text inputs size by padding: 25.2 + 2 × 11 + 2 ≈ 50 px */
	--wsf-field-label-color: var(--wp--preset--color--foreground);
	--wsf-field-label-font-size: var(--wp--preset--font-size--body);
	--wsf-field-label-gap: 6px;
	--wsf-field-help-color: var(--wp--preset--color--muted);
	--wsf-field-help-font-size: var(--wp--preset--font-size--caption);
	--wsf-field-invalid-feedback-color: #bb0000;
	--wsf-field-checkbox-size: 20px;
	--wsf-field-radio-size: 20px;
	--wsf-field-box-shadow-width-focus: 0px;

	/* #2 `primary` button: black, 18 / 600 uppercase. */
	--wsf-field-button-border-radius: 0;
	--wsf-field-button-font-size: var(--wp--preset--font-size--caption);
	--wsf-field-button-font-weight: 600;
	--wsf-field-button-text-transform: uppercase;
	--wsf-field-button-letter-spacing: 0.5px;
	--wsf-field-button-primary-color-background: var(--wp--preset--color--foreground);
	--wsf-field-button-primary-border-color: var(--wp--preset--color--foreground);
	--wsf-field-button-primary-color-background-hover: #333;
	--wsf-field-button-primary-color-background-focus: #333;
	--wsf-field-button-color-background: var(--wp--preset--color--foreground);
	--wsf-field-button-border-color: var(--wp--preset--color--foreground);
	--wsf-field-button-color: var(--wp--preset--color--background);
	--wsf-field-button-color-background-hover: #333;
	--wsf-field-button-color-hover: var(--wp--preset--color--background);
	--wsf-field-button-color-background-focus: #333;
	--wsf-field-button-color-focus: var(--wp--preset--color--background);
}

/* Focus ring per #2 (the box-shadow ring is switched off above). */
.wsf-form :is(input, select, textarea, button):focus-visible {
	outline: 2px solid var(--wp--preset--color--foreground);
	outline-offset: 2px;
}

/* Snippet 14 ("Solis CSS") port. */
.wsf-form .not-allowed {
	background-color: var(--wp--preset--color--surface);
	cursor: not-allowed;
}

.wsf-form .wsf-section {
	margin-top: 5px;
	padding: 15px 15px 0;
}

.wsf-form button[type="submit"]:hover {
	text-decoration: underline;
}

.wsf-form label a {
	--wsf-form-color-accent: var(--wp--preset--color--accent);
	text-decoration: underline;
}

.wsf-form {
	--wsf-field-select-arrow-width: 12px;
	--wsf-field-select-arrow-height: 12px;
}

.wsf-form select.wsf-field:not([multiple]):not([size]):not([data-wsf-select2]) + span.wsf-select-arrow {
	width: 12px;
	height: 12px;
	border: 0;
	background: var(--wsf-field-select-arrow-color);
	mask: url("../icons/chevron.svg") center / contain no-repeat;
}