// Search container
// We have to put those styles outside `.skin-vector-search-vue`,
// as we can't address no-JS modern and Vue enhanced otherwise.
.vector-search-box {
	font-size: @font-size-small;
	// If this is a flex item, make sure it grows into available space.
	flex-grow: 1;

	.vector-typeahead-search-container {
		max-width: @max-width-search;
		margin-right: @margin-end-search;
	}

	.cdx-typeahead-search--show-thumbnail {
		&.cdx-typeahead-search--auto-expand-width:not( .cdx-typeahead-search--expanded ) {
			margin-left: @spacing-typeahead-search-focus-addition;
		}
	}
}

@media ( min-width: @min-width-breakpoint-desktop-wide ) {
	.client-js & .vector-search-box.vector-search-box-auto-expand-width {
		// Ensure search box is aligned with content when it auto-expands (i.e. search thumbnails).
		// Use `calc()` for negative calculation to not rely on Less, but standard CSS.
		margin-left: calc( -1 * @size-search-expand );
	}
}