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

@prefix: ~'ext-cirrus__xplr';

.mw-search-results > li {
	padding: 0.5em;
	position: relative;
	left: -0.5em;
	top: -0.5em;
	padding-bottom: 0;
	margin-bottom: 0.8em; // replaces default padding-bottom
	width: 100%;
}

.mw-search-results > li .@{prefix}__buttons {
	display: inline;
}

.mw-search-results li.@{prefix}--active {
	box-shadow: 0 30px 90px -20px rgba( 0, 0, 0, 0.3 ), 0 0 1px rgba( 0, 0, 0, 0.5 );
	z-index: 2;
}

.mw-search-result-data {
	line-height: 1.6em;
	white-space: nowrap;
}

.@{prefix}__content-wrapper {
	color: @colorText;
	width: 100%;
	position: absolute;
	background-color: #fff;
	box-shadow: 0 30px 90px -20px rgba( 0, 0, 0, 0.3 ), 0 0 1px rgba( 0, 0, 0, 0.5 );
	/* stylelint-disable-next-line unit-blacklist */
	padding: 0 0.5rem 0.5rem 0.5rem;
	border-radius: 0 0 @borderRadius @borderRadius;
	left: 0;
	top: 97%; //overlaps button and content to prevent triggering mouseleave
	z-index: 1;
	font-size: inherit;
	box-sizing: border-box;
	clip: rect( 0, 6000px, 6000px, -100px );
	white-space: normal;
}

.@{prefix}__buttons {
	display: none;
	padding-left: 1em;
}

.@{prefix}__button {
	color: @colorNeutral;
	padding-left: 0.2em;
}

.@{prefix}__button__icon {
	width: 1em;
	height: 1em;
	display: inline-block;
	margin-right: 0.5em;
	vertical-align: middle;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-image: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="%2372777d" d="M11 7.974l-.965 1.052L6 5.168 2.053 9.026 1 7.974l5-5 5 5"/></svg>' );
	transition: transform 160ms ease-out;
	transform: rotate( 0 );
}

.ext-cirrus__xplr__button[data-es-content='languages']:before {
	content: '';
	display: inline-block;
	height: 15px;
	width: 19px;
	margin-right: 2px;
	background-image: linear-gradient( transparent, transparent ), url( data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13%2019l.8-3h5.3l.9%203h2.2l-4.2-13h-3l-4.2%2013h2.2zm3.5-11l2%206h-4l2-6z%22%20fill%3D%22%23707070%22%2F%3E%3Cpath%20d%3D%22M5%204l.938%201.906h-4.938v2.094h1.594c.6%201.8%201.406%203.206%202.406%204.406-1.1.7-4.313%201.781-4.313%201.781l1.313%201.813s3.487-1.387%204.688-2.188c1%20.7%202.319%201.188%203.719%201.688l.594-2c-1-.3-1.988-.688-2.688-1.188%201.1-1.1%201.9-2.506%202.5-4.406h2.188l.5-2h-5.563l-.938-1.906h-2zm-.188%204h3.781c-.4%201.3-.906%202-1.906%203-1.1-1-1.475-1.7-1.875-3z%22%20fill%3D%22%23707070%22%2F%3E%3C%2Fsvg%3E%0A );
}

.@{prefix}__content {
	margin: 0;
	padding: 0;
	/* stylelint-disable-next-line unit-blacklist */
	padding-bottom: 1rem;
}

.@{prefix}__content:after {
	content: '';
	display: table;
	clear: both;
}

.@{prefix}__categories a {
	display: inline-block;
	line-height: 1.2em;
	margin-bottom: 0.5em;
}

.@{prefix}__content__title {
	float: left;
	width: 100%;
	clear: both;
	margin: 0.5em 0;
}

.@{prefix}__related-page {
	width: 32.33%;
	height: 4em;
	padding: 0.5em;
	line-height: 1.2em;
	float: left;
	box-shadow: 0 0 0.5px rgba( 0, 0, 0, 0.5 );
	color: @colorText;
	box-sizing: border-box;
	overflow: hidden;
	// since using % width, % margin too.
	margin-right: 1.5%;
}

.@{prefix}__related-page:hover {
	text-decoration: none;
	background-color: #eaf3ff;
}

.@{prefix}__related-page:last-child {
	margin-right: 0;
}

.@{prefix}__related-page__thumb {
	width: 3.14em;
	height: 3.14em;
	background-size: cover;
	background-position: center center;
	float: left;
	border-radius: @borderRadius;
	margin-right: 0.5em;
	margin-bottom: 1em;
	font-size: 14px;
}

.@{prefix}__related-page:hover .@{prefix}__related-page__title {
	color: @colorProgressive;
	text-decoration: underline;
}

.@{prefix}__related-page p {
	margin: 0;
	font-size: 0.82em;
	color: @colorTextLight;
}

.@{prefix}__related-page:hover p {
	text-decoration: none;
}

.@{prefix}__content__columns {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	-moz-columns: 3;
	-webkit-columns: 3;
	columns: 3;
}

.@{prefix}__content--languages__link {
	float: left;
	width: 33.333%;
	line-height: 1.2em;
	margin-bottom: 0.5em;
}

.@{prefix}__content--languages__link div {
	color: @colorTextLight;
}

.@{prefix}__content--languages li {
	/* stylelint-disable-next-line unit-blacklist */
	padding: 0 1.5rem 0.5rem 0;
	display: block;
	line-height: 1.3;
}

.@{prefix}__button--active-slow .@{prefix}__button__icon {
	transition: transform 350ms ease-out;
	transform: rotate( 180deg );
}

.@{prefix}__button--active .@{prefix}__button__icon {
	transform: rotate( 180deg );
}