MediaWiki:Common.css/src/interface/responsive/1366px/sidebar.scss

@use '../../../lib';
/* re-style navbar */
#mw-panel{
	flex-direction: row;
	align-items: flex-end;
	align-self: end;
	height: min-content;
	padding: 0 4px;
	@include lib.widget-style(var(--theme-background));
	/* Make #p-logo be positioned relative to #mw-panel. By this way, we can safely apply filter/backdrop-filter on #mw-panel */
	position: relative;
	z-index: 100;
	.portal{
		background: none;
		box-shadow: none;
		border: 0;
		margin: 0;
		padding: 0;
		position: relative;
		.vector-menu-heading{
			padding: 12px 8px 9px;
			border: 0;
			border-radius: 0;
			background: none;
			&::after{
				transform: scaleY(1);/* normalize arrow direction */
				margin-left: 3px;
			}
		}
		.body{
			display: none !important; /*<< !important is required, since there is inline-css from sidebar collapse/expand */
			position:absolute;
			left: 0;
			top: 100%;
			width: max-content;
			min-width: 8em;
			border-width: var(--theme-dropdown-border-width);
			border-color: var(--theme-dropdown-border-color);
			border-style: var(--theme-dropdown-border-style);
			border-radius: var(--theme-dropdown-border-radius);
			background: var(--theme-dropdown-background);
			box-shadow: var(--theme-widget-shadow);
			border-top-left-radius: 0;
			border-top-right-radius: 0;
			&::before{
				display: none;
			}
			li{
				line-height: unset;
				a{
					padding: 6px 12px;
				}
			}
		}
		&.expanded,	&:hover{
			.vector-menu-heading{
				background: var(--theme-highlight-background);
				border-radius: 0;
				&::after{
					transform: scaleY(-1);
				}
			}
			.body{
				display: block !important;
			}
		}
	}
	#p-logo + .portal::before{
		/* hide the "grass" for first section */
		display: none;
	}
	&::before{
		content: '';
		display: block;
		box-sizing: content-box;
		@include lib.the-grass();
		padding: 0 1px; /*<< compensate .portal border width */
		margin-top: -1px; /*<< compensate .portal border width */
		left: -1px;
		z-index: 1;
	}

	//#p-lang{
	//	/* "languages" to right */
	//	margin-left: auto;
	//	display: flex;
	//	justify-content: flex-end;
	//	.body{
	//		left: auto;
	//		right: 0;
	//	}
	//}
}