/* Search
--------------------------------------------- */

.wp-block-search__input:focus {
	border: none !important;
}

.wp-block-search__inside-wrapper {
	outline: none !important;
}

.wp-block-search__inside-wrapper .wp-block-search__input {
	color: var(--wp--preset--color--shark);
}

.wp-block-search__button-inside .wp-block-search__inside-wrapper {
	padding: 0;
	position: relative;
}

.wp-block-search__button-only .wp-block-search__input {
	height: 32px;
	padding: 0 var(--wp--preset--spacing--16);
}

.wp-block-search__button-inside .wp-block-search__input {
	height: 44px;
	padding: 0 var(--wp--preset--spacing--64) 0 var(--wp--preset--spacing--24);
}

.wp-block-search__button-only .wp-block-search__button,
.wp-block-search__button-inside .wp-block-search__button {
	align-items: center;
	background-color: transparent !important;
	border: none;
	box-shadow: none !important;
}

.wp-block-search__button-only .wp-block-search__button {
	padding: 0 !important;
}

.wp-block-search__button-only:not(.wp-block-search__searchfield-hidden)
	.wp-block-search__inside-wrapper {
	gap: var(--wp--preset--spacing--16);
}

.wp-block-search__button-inside .wp-block-search__button {
	bottom: 0;
	display: flex;
	height: 44px;
	justify-content: center;
	padding: var(--wp--preset--spacing--16) !important;
	position: absolute;
	right: 0;
	top: 0;
}

.wp-block-search__button-inside .wp-block-search__button:hover {
	border-color: transparent;
}

body:not(.wp-admin, .block-editor-iframe__body)
	.has-black-background-color
	.wp-block-search__button-inside
	.wp-block-search__button:focus {
	outline: 2px solid var(--wp--preset--color--black) !important;
	outline-offset: -4px !important;
}

.wp-block-search__button-only .wp-block-search__button svg,
.wp-block-search__button-inside .wp-block-search__button svg {
	fill: var(--wp--preset--color--black);
	transform: rotateY(180deg);
}

.wp-block-search__button-only .wp-block-search__button svg {
	fill: var(--wp--preset--color--white);
	min-height: 32px;
	min-width: 32px;
}

.wp-block-search__button-inside .wp-block-search__button svg {
	min-height: 30px;
	min-width: 30px;
}

/* Resource Search (hero on the resources archives)
 *
 * The halo surface treatment — blurred, translucent, rounded — applied to the
 * field itself. The tint is white-trn-30 (70% white) rather than the surface's
 * 10% deep purple, which all but vanishes against the video; the blur and
 * radius carry the family resemblance, and the light fill takes dark text for
 * contrast. The existing focus rule strips the border, so focus is an outline.
--------------------------------------------- */

/* Specific enough to beat the site-wide form input rule in assets/style.css, which
   otherwise paints every input white, or emerald-tinted inside an emerald block. */
body:not(.has-no-blocks) .wp-site-blocks .wp-block-search.is-style-resource-search .wp-block-search__inside-wrapper .wp-block-search__input {
	backdrop-filter: blur(var(--wp--custom--blur--surface));
	background-color: var(--wp--preset--color--white-trn-30);
	border: 1px solid var(--wp--preset--color--white-trn-30);
	border-radius: 8px;
	color: var(--wp--preset--color--shark);
	font-size: var(--wp--preset--font-size--x-small);
	height: 52px;
	/* Founders Grotesk sits high in its line box, so the text needs nudging down
	   to look centred in the field. */
	padding: 4px var(--wp--preset--spacing--20) 0;
}

.wp-block-search.is-style-resource-search .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--abbey);
	opacity: 1;
}

.wp-block-search.is-style-resource-search .wp-block-search__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--emerald);
	outline-offset: 2px;
}