@import "mediawiki.mixins";

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

.mw-interlanguage-selector,
.mw-interlanguage-selector:active {
	cursor: pointer;
	padding: 4px 6px 4px 25px;
	font-size: 13px;
	font-weight: 400;
	.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: #555555;
	background-color: #cccccc;
}

.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: 24px;
	width: 24px;
	left: -13px;
	position: absolute;
	/* The dialog middle is positioned 250px away from the center of the trigger. Substract 12 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: 236px;
	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 );
}