/* interwiki search results */
/*==========================*/

.iw-headline {
	font-weight: bold;
	font-size: 1rem;
	font-size: 16px;
	opacity: 0.7;
}

.iw-results {
	list-style: none;
	margin: 0;
}

.iw-resultset {
	margin-bottom: 1.2em;
	background-color: #f2f4f7;
	vertical-align: top;
	width: 100%;
	float: left;
	list-style-type: none;
	word-break: break-word;
}

/* clearfix */
.iw-result:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: ' ';
	clear: both;
	height: 0;
}

* html .interwiki-result { /* IE6 */
	zoom: 1;
}
*:first-child + html .iw-resultset { /* IE7 */
	zoom: 1;
}

/* padding each .iw-resultset section seperately.
This allows us greater flexibility in the design.
For example changing the background color on the
header and footer. */
.iw-result__header,
.iw-result__title,
.iw-result__content,
.iw-result__footer {
	padding: 0.25em 0.85em;
}

/* definition titles appear inline,
to resemble a traditional dictionary definition */
.iw-resultset--definition .iw-result__title {
	display: inline;
	padding: 0;
}

.iw-resultset > div:first-child {
	padding-top: 0.85em;
}

.iw-resultset > div:last-child {
	padding-bottom: 0.85em;
}

.iw-result__title {
	font-size: 16px; /* rem fallback */
	font-size: 1rem;
}

.iw-result__title a.extiw {
	font-weight: bold;
}

.iw-result__content:after { /* clearfix */
	visibility: hidden;
	display: block;
	font-size: 0;
	content: ' ';
	clear: both;
	height: 0;
}

.iw-result__footer {
	float: right;
}

.iw-result__icon {
	display: inline-block;
	width: 24px;
	height: 24px;
	vertical-align: middle;
	margin-right: 0.25em;
	background: url( images/special.search/definition-icon.svg ) no-repeat 0 0;
	background-size: 100% 100%;
}

@interwikiContentTypes: definition, travel, quotation, book, course, news, textbook, image;

.generate-iwIcons();

.generate-iwIcons( @i:1 ) when ( @i =< length( @interwikiContentTypes ) ) {
	@iwIcon: extract( @interwikiContentTypes, @i );

	.iw-result__icon--@{iwIcon} {
		/*  stylelint-disable-next-line function-url-quotes */
		background-image: url( 'images/special.search/@{iwIcon}-icon.png' );
		/*  stylelint-disable-next-line function-url-quotes */
		background-image: url( 'images/special.search/@{iwIcon}-icon.svg' );
	}

	.generate-iwIcons( @i + 1 );
}

/* image search result */
.iw-result__mini-gallery {
	position: relative;
	float: left;
	width: 60%;
	height: 200px;
	box-sizing: border-box;
	padding: 0.25rem;
}

/* second and third images are small */
.iw-result__mini-gallery:nth-child( 2 ),
.iw-result__mini-gallery:nth-child( 3 ) { /* stylelint-disable-line indentation */
	width: 40%;
	height: 100px;
}

.iw-result__mini-gallery__image {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.iw-result__mini-gallery__image > .iw-result__mini-gallery__caption { /* image gallery text */
	visibility: hidden;
	position: absolute;
	bottom: 0;
	left: 0;
	text-align: center;
	color: #fff;
	text-shadow: 0 0 10px rgba( 0, 0, 0, 0.4 ); /* improves legibility on white background */
	font-size: 0.8em;
	padding: 5px;
	background-color: rgba( 0, 0, 0, 0.5 );
}

.iw-result__mini-gallery__image:hover > .iw-result__mini-gallery__caption {
	visibility: visible;
}

/* different types of interwiki result boxes */
/* quotation box */
.iw-resultset--quotation .iw-result__content {
	border-left: 4px solid #afb1b5;
	margin-left: 1em;
	padding-top: 0;
	margin-top: 0.25em;
}
.iw-resultset--quotation .iw-result__title {
	margin-left: 1em;
}
.iw-result--quotation .iw-result__title:before {
	content: ' — ';
	display: inline-block;
}
.iw-result--quotation .iw-result__footer {
	text-align: right;
}

/* desktop only */

@media only screen and ( min-width: @deviceWidthTablet ) {

	#mw-interwiki-results {
		width: 30%;
		display: inline-block; /* used to align iw sidebar with the top of the main search results */
		margin-left: 10%;
	}
	.searchresults .mw-search-createlink,
	.searchresults .mw-search-nonefound,
	.searchresults .mw-search-results {
		float: left;
		width: 60%;
	}

}