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

// mw-body-header class can be removed when language button is the default.
// e.g. upon removal of SkinVector::isLanguagesInHeader
.mw-body-header .mw-portlet-lang {
	.mw-ui-button-states();

	.vector-menu-heading {
		color: inherit;
		// In future this should use wvui
		.mw-ui-button();
		padding-right: 30px;
		// make sure label is center aligned.
		display: flex;
		align-items: center;

		&:after {
			top: 0;
		}

		&:hover,
		&:focus {
			color: inherit;
		}
	}

	.vector-menu-content {
		top: auto;
		right: 0;
		// align borders of open menu align with button
		box-sizing: border-box;
		max-height: 65vh;
		overflow: scroll;
		border-top-width: 1px;

		li a {
			font-size: inherit;
		}
	}

	.after-portlet {
		// ensure there is a visual separation between the language links and additional links.
		margin-top: 10px;
	}
}

// mw-body-header class can be removed when language button is the default.
// e.g. upon removal of SkinVector::isLanguagesInHeader
.client-js .mw-body-header {
	// The `.mw-interlanguage-selector` is toggled off through js if the
	// `ext.uls.interface` module is not being loaded.
	.mw-interlanguage-selector {
		// Remove the ULS language icon provided by ext.uls.compactlinks.less as we
		// are already providing no-js users an icon.
		background-image: none;

		&:after {
			// Don't show dropdown arrow.
			content: none;
		}
	}

	// When the ext.uls.interface module is loaded, we hide the fallback menu and
	// checkbox.
	.vector-menu--hide-dropdown {
		.vector-menu-checkbox,
		.vector-menu-content {
			display: none;
		}
	}
}