@import '../variables.less';
@import '../mixins.less';

.citizen-typeahead {
	border-bottom-right-radius: var( --border-radius-medium );
	border-bottom-left-radius: var( --border-radius-medium );

	a {
		&:hover,
		&:focus {
			text-decoration: none;
		}
	}

	&-input {
		// Display overlay instead of the input, but keep the caret
		color: transparent;
		caret-color: var( --color-emphasized );

		&-group {
			position: relative;
			display: flex;
			flex-grow: 1;
		}

		&-overlay {
			position: absolute;
			inset: 0 var( --height-search-bar ) 0 0; // clear button
			display: flex;
			align-items: center;
			overflow: hidden;
			white-space: nowrap;
			pointer-events: none;

			&-query {
				color: var( --color-emphasized );
			}
		}
	}

	&__highlight {
		font-weight: var( --font-weight-medium );
		color: var( --color-subtle );
	}

	&__query {
		font-weight: var( --font-weight-semibold );
		color: var( --color-emphasized );
	}

	&__labelItem {
		display: flex;
		gap: var( --space-xxs );
		align-items: center;
		font-size: var( --font-size-x-small );
		color: var( --color-subtle );
	}
}

// HACK: Hide default MW search suggestion if it somehow loaded
// This should be removed when we switch to vue search
.suggestions {
	display: none !important;
}