@import 'mediawiki.skin.variables.less';

.vector-search-box {
	.vector-typeahead-search-container {
		.vector-typeahead-search-wrapper {
			display: flex;
			flex-direction: row;
		}

		.cdx-button:enabled {
			border-color: @border-color-base;
		}

		.cdx-text-input input {
			border-color: @border-color-base;
			font-size: @font-size-small;
			line-height: @line-height-small;
			letter-spacing: -0.03em;
		}

		.vector-typeahead-search-scope-select {
			position: relative;
			z-index: 1;
			min-width: 0;
			width: 0;
			overflow: clip;
			transition: all @transition-duration-base linear;

			.cdx-select {
				min-width: auto;
				max-width: 11em;
			}

			.cdx-select-vue {
				width: 100%;

				div {
					min-width: auto;
				}
			}

			.cdx-select-vue--enabled .cdx-select-vue__handle {
				border-color: @border-color-base;
				border-top-right-radius: @border-radius-sharp;
				border-bottom-right-radius: @border-radius-sharp;
			}
		}

		.vector-typeahead-search-scope-select.active {
			min-width: 11em;
			width: auto;
			overflow: inherit;
		}

		form > div.cdx-search-input__input-wrapper {
			display: flex;
			flex-direction: row;
		}

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

		.cdx-typeahead-search--show-thumbnail .cdx-typeahead-search__search-footer__icon {
			min-width: 1.25rem;
			width: 1.25rem;
			margin-right: 0.5rem;
			margin-left: -2px;
		}

		.cdx-text-input {
			width: 100%;
		}

		.cdx-typeahead-search {
			width: 100%;
			margin-left: -1px;
		}
	}
}