.wp-block-storeengine-product-search {
	display: flex;
	align-items: stretch;
	gap: 0.5em;
	box-sizing: border-box;
	max-width: 100%;
}

/*
 * Editor only: the server preview prints the block again inside the editor's
 * own wrapper (without the block-support styles, which the outer one has).
 */
.wp-block-storeengine-product-search .wp-block-storeengine-product-search,
.wp-block-storeengine-product-search > .components-disabled {
	flex: 1 1 100%;
	min-width: 0;
	margin: 0;
}

.storeengine-product-search__field {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
}

.storeengine-product-search__input {
	flex: 1 1 auto;
	box-sizing: border-box;
	min-width: 0;
	padding: 0.6em 0.8em;
	border: 1px solid var(--storeengine-border-color, #e4e7ec);
	border-radius: var(--se-shop-button-radius, 6px);
	background: var(--storeengine-surface-color, #fff);
	color: inherit;
	font: inherit;
}

/*
 * The block's Text colour reaches the typed text: StoreEngine's form styles
 * colour every input[type=search] (one class + one attribute), which outranks
 * the rule above on its own.
 */
.wp-block-storeengine-product-search .storeengine-product-search__input {
	color: inherit;
}

/*
 * With a Background colour on the block, the field shows it instead of
 * painting the store's surface white over it (--storeengine-surface-color is
 * set on :root by the customization tokens). The block's own Field background, set
 * inline on the wrapper, still wins.
 */
.wp-block-storeengine-product-search.has-background .storeengine-product-search__input {
	background: transparent;
}

.wp-block-storeengine-product-search.has-background[style*="--storeengine-surface-color"] .storeengine-product-search__input {
	background: var(--storeengine-surface-color);
}

/* Browsers give ::placeholder its own grey; follow the block's text colour. */
.storeengine-product-search__input::placeholder {
	color: inherit;
	opacity: 0.6;
}

.storeengine-product-search__input:focus {
	border-color: var(--storeengine-primary-color, currentColor);
	outline: none;
}

.storeengine-product-search__button {
	flex: none;
	border-radius: var(--se-shop-button-radius, 6px);
	background-color: var(--storeengine-primary-color);
}

/* Button inside the field. */
.wp-block-storeengine-product-search.is-button-inside .storeengine-product-search__input {
	padding-inline-end: 6.5em;
}

.wp-block-storeengine-product-search.is-button-inside .storeengine-product-search__button {
	position: absolute;
	inset-block: 0.25em;
	inset-inline-end: 0.25em;
	padding-block: 0;
	padding-inline: 1em;
}