/**
 * Shared search field chrome.
 *
 * API: .wsft-search, .wsft-search__inner, .wsft-search__input, .wsft-search__submit
 * Registered as `ws-form-search` in includes/blocks.php.
 */

.wsft-search {
	margin: 0;
}

.wsft-search__inner {
	position: relative;
}

.wsft-search__input {
	-webkit-appearance: none;
	appearance: none;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--border-radius, 0.125rem);
	box-sizing: border-box;
	color: var(--wp--preset--color--logo-blue);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.4;
	margin: 0;
	padding: 0.75rem 2.25rem 0.75rem 0.75rem;
	width: 100%;
}

.wsft-search__input:focus {
	border-color: var(--wp--preset--color--accent-blue);
	outline: none;
}

.wsft-search__submit {
	align-items: center;
	background: none;
	border: none;
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	min-height: 1.5rem;
	min-width: 1.5rem;
	padding: 0.25rem;
	position: absolute;
	right: 0.375rem;
	top: 50%;
	transform: translateY(-50%);
}

.wsft-search__submit:focus {
	outline: none;
}

.wsft-search__submit:focus-visible {
	border-radius: var(--wp--custom--border-radius, 0.125rem);
	box-shadow: 0 0 0 2px var(--wp--preset--color--logo-blue);
	outline: 2px solid transparent;
}

.wsft-search__submit .icon.search:before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23002e5d' d='M10.7 1.8C8.3-.6 4.3-.6 1.8 1.8c-2.4 2.4-2.4 6.4 0 8.9 2.2 2.2 5.2 2.6 7.7.9.1.2.5.3.7.5l3.6 3.6c.5.5 1.4.5 1.9 0s.5-1.4 0-1.9l-3.6-3.6c-.2-.2-.2-.6-.5-.6 1.7-2.5 1.3-5.6-.9-7.8zM9.6 9.6c-1.8 1.8-4.8 1.8-6.6 0C1.1 7.7 1.1 4.8 3 3c1.8-1.8 4.8-1.8 6.6 0 1.8 1.8 1.8 4.7 0 6.6z'%3E%3C/path%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 14px;
	content: '';
	display: inline-block;
	height: 14px;
	opacity: 0.55;
	vertical-align: baseline;
	width: 14px;
}

/* 404 — align core/search to shared search chrome. */
.wsft-404 .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--border-radius, 0.125rem);
	overflow: hidden;
	position: relative;
}

.wsft-404 .wp-block-search__input {
	border: 0;
	color: var(--wp--preset--color--logo-blue);
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.4;
	min-height: 0;
	padding: 0.75rem 2.25rem 0.75rem 0.75rem;
}

.wsft-404 .wp-block-search__input:focus {
	outline: 2px solid var(--wp--preset--color--accent-blue);
	outline-offset: -2px;
}

.wsft-404 .wp-block-search__button {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--wp--preset--color--logo-blue);
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	margin: 0;
	min-width: 2.25rem;
	padding: 0.5rem;
}

.wsft-404 .wp-block-search__button:hover,
.wsft-404 .wp-block-search__button:focus {
	background: transparent;
	color: var(--wp--preset--color--logo-blue);
}

.wsft-404 .wp-block-search__button:focus-visible {
	outline: 2px solid var(--wp--preset--color--logo-blue);
	outline-offset: 2px;
}

.wsft-404 .wp-block-search__button svg {
	fill: currentColor;
	opacity: 0.55;
}