Styles

/* ::: Search suggestions dropdown ::: */

.suggestions-dropdown {
	background-color: var( --background-color-base );
	display: inline-block;
	position: absolute;
	left: 0;
	z-index: 2;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0;
	border: var( --border-dialog );
	border-top: 0;
	box-shadow: var( --box-shadow-dialog );
	text-align: left;
	list-style-type: none;
	/* Overwrite hack of `.search-container fieldset` in '_search.css' */
	word-spacing: normal;
}

.suggestion-link {
	display: block;
	position: relative;
	box-sizing: border-box;
	min-height: 7rem;
	width: 100%;
	padding: 1rem 1rem 1rem 8.5rem;
	border-bottom: 1px solid var( --wmui-color-base80 );
	color: inherit;
	text-decoration: none;
	text-align: initial;
	white-space: normal;
}

.suggestion-link.active {
	background-color: var( --wmui-color-accent90 );
}

/* using element selector to override default anchor styles */
a.suggestion-link:hover {
	text-decoration: none;
}

a.suggestion-link:active,
a.suggestion-link:focus {
	outline: 0;
	white-space: normal;
}

.suggestion-thumbnail {
	background-color: var( --wmui-color-base80 );
	background-image: url( portal/wikipedia.org/assets/img/noimage.png );
	background-image: -webkit-linear-gradient( rgba( 0, 0, 0, 0 ), rgba( 0, 0, 0, 0 ) ), url( data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2056%2056%22%20enable-background%3D%22new%200%200%2056%2056%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23eee%22%20d%3D%22M0%200h56v56h-56z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23999%22%20d%3D%22M36.4%2013.5h-18.6v24.9c0%201.4.9%202.3%202.3%202.3h18.7v-25c.1-1.4-1-2.2-2.4-2.2zm-6.2%203.5h5.1v6.4h-5.1v-6.4zm-8.8%200h6v1.8h-6v-1.8zm0%204.6h6v1.8h-6v-1.8zm0%2015.5v-1.8h13.8v1.8h-13.8zm13.8-4.5h-13.8v-1.8h13.8v1.8zm0-4.7h-13.8v-1.8h13.8v1.8z%22%2F%3E%0A%3C%2Fsvg%3E%0A );
	background-image: -webkit-linear-gradient( transparent, transparent ), url( portal/wikipedia.org/assets/img/noimage.svg ) !ie;
	background-image: linear-gradient( rgba( 0, 0, 0, 0 ), rgba( 0, 0, 0, 0 ) ), url( data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2056%2056%22%20enable-background%3D%22new%200%200%2056%2056%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23eee%22%20d%3D%22M0%200h56v56h-56z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23999%22%20d%3D%22M36.4%2013.5h-18.6v24.9c0%201.4.9%202.3%202.3%202.3h18.7v-25c.1-1.4-1-2.2-2.4-2.2zm-6.2%203.5h5.1v6.4h-5.1v-6.4zm-8.8%200h6v1.8h-6v-1.8zm0%204.6h6v1.8h-6v-1.8zm0%2015.5v-1.8h13.8v1.8h-13.8zm13.8-4.5h-13.8v-1.8h13.8v1.8zm0-4.7h-13.8v-1.8h13.8v1.8z%22%2F%3E%0A%3C%2Fsvg%3E%0A );
	background-image: linear-gradient( transparent, transparent ), url( portal/wikipedia.org/assets/img/noimage.svg ) !ie;
	background-image: -o-linear-gradient( transparent, transparent ), url( portal/wikipedia.org/assets/img/noimage.png );
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-size: cover;
	height: 100%;
	width: 7rem;
	position: absolute;
	top: 0;
	left: 0;
}

.suggestion-title {
	margin: 0 0 0.78rem 0;
	color: var( --wmui-color-base20 );
	font-size: 1.6rem;
	line-height: 1.872rem;
}

.suggestion-link.active .suggestion-title {
	color: var( --wmui-color-accent50 );
}

.suggestion-highlight {
	font-style: normal;
	text-decoration: underline;
}

.suggestion-description {
	color: var( --wmui-color-base30 );
	margin: 0;
	font-size: 1.3rem;
	line-height: 1.43rem;
}