@import '../../common/variables.less';

@border-base-ems: unit( @border-width-base / @font-size-browser / @font-size-base, em );

.vector-article-toolbar .mw-article-toolbar-container {
	display: flex;
	border-bottom: @border-tabs;

	a {
		// The hover effect is on `li` elements.
		&:hover,
		&:focus {
			text-decoration: none;
		}
	}

	@media ( min-width: @min-width-desktop-wide ) {
		padding-right: @padding-horizontal-tabs - 1px;
	}

	#right-navigation {
		display: flex;
		flex-grow: 1;
		justify-content: end;
		// Layout correction - as it was before introduce of flex box.
		margin-right: -1px;

		@media ( min-width: @min-width-desktop-wide ) {
			margin-right: -@border-base-ems * 3;
		}
	}

	#left-navigation {
		display: flex;

		// Layout correction - as it was before introduce of flex box.
		@media ( min-width: @min-width-desktop-wide ) {
			margin-left: @border-base-ems * 3;
		}
	}

	.mw-portlet-views {
		display: none;

		@media ( min-width: @min-width-tablet ) {
			&:not( .emptyPortlet ) {
				display: block;
			}
		}
	}

	.vector-more-collapsible-item {
		display: block;

		@media ( min-width: @min-width-tablet ) {
			display: none;
		}
	}

	// Make sure pcactions is displayed (even if .emptyPortlet present)
	.vector-has-collapsible-items {
		@media ( max-width: @max-width-mobile ) {
			display: block;
		}
	}
}