/*
 * Search field as one pill: field and icon button inside a bordered shape.
 * Colours come from the palette (surface field, line border).
 */
.wp-block-search__button-inside .wp-block-search__inside-wrapper {
	min-height: 44px;
	align-items: center;
	padding: 0 4px 0 16px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--preset--border-radius--md);
	background-color: var(--wp--preset--color--surface);
	transition: border-color var(--wp--custom--motion--fast) ease;
}

.pst-search-large .wp-block-search__inside-wrapper {
	min-height: 56px;
}

.wp-block-search__button-inside .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--action);
	box-shadow: 0 0 0 1px var(--wp--preset--color--action);
}

.wp-block-search__button-inside .wp-block-search__input {
	min-width: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	outline: none;
}

.wp-block-search__button-inside .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

.wp-block-search__button-inside .wp-block-search__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border-radius: var(--wp--preset--border-radius--full);
	background: transparent;
	color: var(--wp--preset--color--muted);
}

.wp-block-search__button-inside .wp-block-search__button:hover {
	background-color: var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast);
}

.wp-block-search__button-inside .wp-block-search__button svg {
	width: 20px;
	height: 20px;
	fill: currentcolor;
}

/* The big search on the search results and 404 pages. */
.pst-search-large {
	max-width: 640px;
}

.pst-search-large .wp-block-search__input {
	font-size: var(--wp--preset--font-size--medium);
}

/* White field: core Search settings cannot style the inside-wrapper fill or
 * its control height. The registered variation works in the site and editor. */
.wp-block-search.is-style-white-field .wp-block-search__inside-wrapper {
	min-height: 48px;
	border-radius: var(--wp--preset--border-radius--md);
	background-color: var(--wp--preset--color--base);
}

.wp-block-search.is-style-white-field .wp-block-search__button {
	width: 40px;
	height: 40px;
	border-radius: var(--wp--preset--border-radius--sm);
}

/* Prominent: a tall white field and a square button in the action colour,
 * for the search at the top of a library page (the Guides directory). */
.wp-block-search.is-style-prominent .wp-block-search__inside-wrapper {
	min-height: 52px;
	padding: 0 6px 0 18px;
	border-color: var(--wp--preset--color--line-strong);
	border-radius: 12px;
	background-color: var(--wp--preset--color--base);
}

.wp-block-search.is-style-prominent .wp-block-search__input {
	font-size: var(--wp--preset--font-size--medium);
}

.wp-block-search.is-style-prominent .wp-block-search__button {
	width: 40px;
	height: 40px;
	border-radius: var(--wp--preset--border-radius--lg);
	background-color: var(--wp--preset--color--action);
	color: var(--wp--preset--color--on-action);
}

.wp-block-search.is-style-prominent .wp-block-search__button:hover {
	background-color: var(--wp--preset--color--action-strong);
	color: var(--wp--preset--color--on-action);
}

.wp-block-search.is-style-prominent .wp-block-search__button svg {
	width: 18px;
	height: 18px;
}

@media (max-width: 599px) {
	.wp-block-search.is-style-prominent .wp-block-search__inside-wrapper {
		min-height: 48px;
		padding: 0 4px 0 14px;
	}
}