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

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

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

	.mw-portlet-views {
		display: none;

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

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

		@media ( max-width: @width-breakpoint-tablet ) {
			display: block;
		}
	}

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

// FIXME: This can be merged with the above when cached HTML contains the vector-article-toolbar class.
.vector-article-toolbar .mw-article-toolbar-container {
	display: flex;
	@border-base-ems: unit( @border-width-base / @font-size-browser / @font-size-base, em );

	@media ( min-width: @width-breakpoint-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: @width-breakpoint-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: @width-breakpoint-desktop-wide ) {
			margin-left: @border-base-ems * 3;
		}
	}
}

// Currently when right navigation is empty and sidebar is open no
// border is shown. This can intentionally be removed at a later date but
// is preserved to reduce number of UI regressions in current release.
@media ( max-width: @width-breakpoint-tablet ) {
	#mw-sidebar-checkbox:checked ~ .mw-workspace-container #right-navigation.right-navigation-empty {
		border-bottom: 0;
	}
}