/**
 * SecurImage CAPTCHA field.
 *
 * Presents the challenge image and the answer input as a single joined control
 * group, the way the remote CAPTCHA providers are shown.
 *
 * Every value is read from a WPForms design token with a fallback, so the field
 * matches the active layout (modern or classic), the field size in use and any
 * theme styling a WPForms form. No Bootstrap or jQuery UI class is required,
 * which matters because WPForms is commonly dropped into themes far older than
 * the reference design this was modelled on.
 */

.wpforms-recaptcha-container.wpforms-is-securimage {
	margin: 0;
	padding: 0;
	clear: both;
}

/* Row that holds the image and the input. */

.wpforms-is-securimage .wpforms-securimage-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	max-width: 100%;
}

/* Image box: left half of the joined control. */

.wpforms-is-securimage .wpforms-securimage-image {
	flex: 0 0 auto;
	display: block;
	overflow: hidden;
	line-height: 0;
	background: var(--wpforms-field-background-color, #fff);
	border: var(--wpforms-field-border-size, 1px) var(--wpforms-field-border-style, solid) var(--wpforms-field-border-color, rgba(0, 0, 0, 0.25));
	border-right: 0;
	border-radius: var(--wpforms-field-border-radius, 3px) 0 0 var(--wpforms-field-border-radius, 3px);
}

/*
 * The challenge is generated at a larger size than the field, so scale it down
 * to the input height rather than shipping a bigger image. Scaling a PNG with
 * text is still legible at these dimensions and keeps the aspect ratio intact.
 */

.wpforms-is-securimage .wpforms-securimage {
	display: block;
	height: var(--wpforms-field-size-input-height, 43px);
	width: auto;
	max-width: 100%;
	border: 0;
}

/* Input: middle of the joined control. */

.wpforms-is-securimage .wpforms-securimage-input {
	flex: 1 1 auto;
	/* Beats the 60% max-width WPForms applies to a medium field. */
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0;
	border-left: 0;
	border-right: 0;
	border-radius: 0;
	/* Separated glyphs make a mistyped character obvious. */
	letter-spacing: 0.3em;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* "New image" button: last part of the joined control. */

.wpforms-is-securimage .wpforms-securimage-refresh {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--wpforms-field-size-input-height, 43px) + 4px);
	padding: 0;
	margin: 0;
	cursor: pointer;
	color: inherit;
	background: var(--wpforms-field-background-color, #fff);
	border: var(--wpforms-field-border-size, 1px) var(--wpforms-field-border-style, solid) var(--wpforms-field-border-color, rgba(0, 0, 0, 0.25));
	border-left: 0;
	border-radius: 0 var(--wpforms-field-border-radius, 3px) var(--wpforms-field-border-radius, 3px) 0;
	opacity: 0.75;
	transition: opacity 0.15s ease-in-out;
	-webkit-appearance: none;
	appearance: none;
}

.wpforms-is-securimage .wpforms-securimage-refresh:hover,
.wpforms-is-securimage .wpforms-securimage-refresh:focus {
	opacity: 1;
}

/* Only show the ring once a keyboard user is on the control. */

.wpforms-is-securimage .wpforms-securimage-refresh:focus {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

.wpforms-is-securimage .wpforms-securimage-refresh-icon {
	display: block;
	pointer-events: none;
}

/* Lift the focused input above the neighbouring box so the ring is not clipped. */

.wpforms-is-securimage .wpforms-securimage-input:focus {
	position: relative;
	z-index: 1;
}

/* Hint text, spaced like a normal field description. */

.wpforms-is-securimage .wpforms-field-description {
	margin-top: 5px;
}

/* Errors, using the same colour WPForms uses elsewhere. */

.wpforms-is-securimage .wpforms-error,
.wpforms-is-securimage .wpforms-error-container {
	margin-top: 5px;
}

/*
 * Below this width the three parts no longer fit on one line. The image takes a
 * full row of its own and the input and button share the row below it, which
 * wraps naturally because the row is allowed to wrap.
 */

@media (max-width: 400px) {

	.wpforms-is-securimage .wpforms-securimage-row {
		flex-wrap: wrap;
	}

	.wpforms-is-securimage .wpforms-securimage-image {
		width: 100%;
		border-right: var(--wpforms-field-border-size, 1px) var(--wpforms-field-border-style, solid) var(--wpforms-field-border-color, rgba(0, 0, 0, 0.25));
		border-bottom: 0;
		border-radius: var(--wpforms-field-border-radius, 3px) var(--wpforms-field-border-radius, 3px) 0 0;
	}

	.wpforms-is-securimage .wpforms-securimage {
		width: 100%;
		height: auto;
	}

	.wpforms-is-securimage .wpforms-securimage-input {
		border-left: var(--wpforms-field-border-size, 1px) var(--wpforms-field-border-style, solid) var(--wpforms-field-border-color, rgba(0, 0, 0, 0.25));
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}

	.wpforms-is-securimage .wpforms-securimage-refresh {
		border-left: 0;
		border-top-right-radius: 0;
		border-bottom-right-radius: var(--wpforms-field-border-radius, 3px);
	}
}

/* Mirror the join when the site runs right to left. */

body.rtl .wpforms-is-securimage .wpforms-securimage-image {
	border-right: 0;
	border-left: var(--wpforms-field-border-size, 1px) var(--wpforms-field-border-style, solid) var(--wpforms-field-border-color, rgba(0, 0, 0, 0.25));
	border-radius: 0 var(--wpforms-field-border-radius, 3px) var(--wpforms-field-border-radius, 3px) 0;
}

body.rtl .wpforms-is-securimage .wpforms-securimage-input {
	border-left: var(--wpforms-field-border-size, 1px) var(--wpforms-field-border-style, solid) var(--wpforms-field-border-color, rgba(0, 0, 0, 0.25));
	border-right: var(--wpforms-field-border-size, 1px) var(--wpforms-field-border-style, solid) var(--wpforms-field-border-color, rgba(0, 0, 0, 0.25));
	border-radius: 0;
}

body.rtl .wpforms-is-securimage .wpforms-securimage-refresh {
	border-right: 0;
	border-left: 0;
	border-right: var(--wpforms-field-border-size, 1px) var(--wpforms-field-border-style, solid) var(--wpforms-field-border-color, rgba(0, 0, 0, 0.25));
	border-radius: var(--wpforms-field-border-radius, 3px) 0 0 var(--wpforms-field-border-radius, 3px);
}