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

.language-searcher {
	ul,
	ol {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.panel {
		background-color: @background-color-base;
		padding: 0.5em;
	}

	.search-box {
		// Always show the language search input
		display: block;
		// Make sure the absolutely positioned search icon overlaps the search input
		position: relative;
	}

	.search {
		font: inherit;
		box-shadow: none;
		width: 100%;
		height: 2.25em;
		border: 1px solid @border-color-inverted;
		padding: 7px 0 7px 2.0625em;
	}

	.list-header {
		font-family: sans-serif;
		font-weight: normal;
		letter-spacing: 1px;
		padding: 2em 1em 0.5em;
		text-transform: uppercase;
	}

	ol.site-link-list {
		list-style: none;
	}

	.site-link-list {
		li {
			background-color: @background-color-base;
			padding: 0;
		}

		[ dir='ltr' ] {
			/* @noflip */
			text-align: left;
		}

		[ dir='rtl' ] {
			/* @noflip */
			text-align: right;
		}

		a {
			border-top: @border-width-base @border-style-base @border-color-muted;
			cursor: pointer;
			display: block;
			padding: 0.75em 1em;

			span {
				font-size: 0.9em;
			}

			.autonym,
			.title {
				display: block;
			}

			.autonym {
				// FIXME: Does this really need to be emphasized?
				color: @color-emphasized; // TODO
				font-weight: bold;
			}

			.title {
				color: @color-subtle;
				padding-top: 0.5em;
			}
		}
	}

	.empty-results {
		margin: 1em 2.5em;

		.empty-results-body {
			margin: 1em 0;
		}
	}
}

@media all and ( min-width: @min-width-breakpoint-tablet ) {
	.language-searcher {
		.site-link-list {
			padding-left: 0;
			padding-right: 0;
		}
	}
}
