@import 'mediawiki.mixins';

/* stylelint-disable selector-no-id */

#p-lang .body ul .uls-trigger,
#p-lang .pBody ul .uls-trigger {
	background-image: none;
	padding: 0;
}

/* stylelint-enable selector-no-id */

.mw-interlanguage-selector,
.mw-interlanguage-selector:active {
	cursor: pointer;
	padding: 4px 6px 4px 25px;
	font-size: 13px;
	font-weight: normal;
	.background-image-svg( '../images/compact-links-trigger.svg', '../images/compact-links-trigger.png' );
	background-size: 18px;
	background-repeat: no-repeat;
	background-position: left 4px center;
	margin: 4px 0;
	text-align: left;
}

.mw-interlanguage-selector:active,
.mw-interlanguage-selector.selector-open {
	color: #555;
	background-color: #ccc;
}

.interlanguage-uls-menu:before {
	background: none repeat scroll 0 0 #fcfcfc;
	border-left: 1px solid rgba( 0, 0, 0, 0.2 );
	border-top: 1px solid rgba( 0, 0, 0, 0.2 );
	box-shadow: -2px -2px 2px rgba( 0, 0, 0, 0.1 );
	content: '';
	height: 16px;
	width: 16px;
	left: -9px;
	position: absolute;
	/* The dialog middle is positioned 250px away from the center of the trigger. Substract 8 for
	 * half of the box height to center middle of the box rather than the top.  The remaining 2 are
	 * either for top-margin of the menu and border of this box, or because we use do not account
	 * for the margin of the trigger when we use $.fn.outerWidth without true as a parameter.
	 */
	top: 240px;
	transform: rotate( -45deg );
	-webkit-transform: rotate( -45deg );
	-moz-transform: rotate( -45deg );
	-o-transform: rotate( -45deg );
	-ms-transform: rotate( -45deg );
	background-clip: padding-box;
}

body.rtl .interlanguage-uls-menu:before {
	transform: rotate( 45deg );
	-webkit-transform: rotate( 45deg );
	-moz-transform: rotate( 45deg );
	-o-transform: rotate( 45deg );
	-ms-transform: rotate( 45deg );
}
