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

/* With a width set, the box sits on the left, centre or right of its row. */
.wp-block-academy-course-search.is-justified-center {
	margin-inline: auto;
}

.wp-block-academy-course-search.is-justified-right {
	margin-inline-start: auto;
	margin-inline-end: 0;
}

.academy-course-search__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.6em 0.8em;
	border: 1px solid var(--academy-border-color, #d8dbe2);
	border-radius: 6px;
	background: var(--academy-surface-color, #fff);
	color: inherit;
	font: inherit;
}

/* `color: inherit` above covers text actually typed into the field, but
 * browsers give ::placeholder its own default muted-gray color regardless —
 * it never picks up the input's own `color`. Without this, the block's
 * Typography "Color" control had no visible effect on the placeholder text.
 * Dimmed via opacity (not a fixed gray) so it still reads as a placeholder
 * rather than looking like real entered text, whatever color is chosen. */
.academy-course-search__input::placeholder {
	color: inherit;
	opacity: 0.6;
}

.academy-course-search__button {
	flex: none;
}

/* Style presets. */
.wp-block-academy-course-search.is-style-rounded .academy-course-search__input,
.wp-block-academy-course-search.is-style-rounded .academy-course-search__button {
	border-radius: 999px;
}

.wp-block-academy-course-search.is-style-rounded .academy-course-search__input {
	padding-inline: 1.1em;
}

.wp-block-academy-course-search.is-style-underline .academy-course-search__input {
	padding-inline: 0;
	border-width: 0 0 2px;
	border-radius: 0;
	background: transparent;
}

.wp-block-academy-course-search.is-style-underline .academy-course-search__input:focus {
	border-color: var(--academy-primary-color, currentColor);
	outline: none;
}

.wp-block-academy-course-search.is-style-joined {
	gap: 0;
}

.wp-block-academy-course-search.is-style-joined.has-button .academy-course-search__input {
	border-start-end-radius: 0;
	border-end-end-radius: 0;
}

.wp-block-academy-course-search.is-style-joined .academy-course-search__button {
	border-start-start-radius: 0;
	border-end-start-radius: 0;
}

/* In the editor the preview sits inside the block's own wrapper: let it take
   the whole row so a percentage width means the same as on the page. */
.wp-block-academy-course-search > div[inert] {
	flex: 1 1 100%;
	min-width: 0;
}