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

@use '../../../lib';

/* the "grass" size fix */
#mw-panel::before{
	padding: 0;
	left: 0;
}

#mw-panel{
	display: block;
	height: 41px;
	.menu-toggle{
		@include lib.mask-icon(var(--theme-heading-color), var(--icon-category), 20px 20px, center calc(50% + 1px));
		cursor: pointer;
		display: block;
		flex: 0 0 auto;
		width: 24px;
		height: 24px;
		margin: 9px 12px 6px;
	}

	.portal {
		display: none;
		background: var(--theme-dropdown-background);
		border-radius: 0;
		.vector-menu-heading{
			padding: 0 12px 4px;
			border: 0;
			display: block;
			background: none;
			//font-weight: bold;
			&::after{
				display: none;
			}

		}
		&.expanded .vector-menu-heading,
		&:hover .vector-menu-heading{
			background: none;
			color: var(--theme-heading-color);
		}
		.body{
			display: block !important; /* !important is required, since there is inline-css from sidebar collapse/expand */
			position: unset;
			border: 0;
			background: none;
			backdrop-filter: none;
			box-shadow: none;
			padding: 0 0 8px;
			width: 100%;
			ul{
				padding: 0 12px;
				display: flex;
				flex-wrap: wrap;
				justify-content: unset;
			}
			li a{
				padding: 4px 8px;
				white-space: nowrap;
			}
		}
		//&:last-child{
		//	padding-bottom: 12px;
		//	border-bottom: var(--theme-dropdown-border);
		//	border-radius: 0 0 var(--theme-box-border-radius) var(--theme-box-border-radius);
		//}

	}
	#p-logo + .portal .vector-menu-heading{
		padding-top: 8px;
	}

	.menu-toggle.expanded ~ .portal{
		display: block;
	}
	//.menu-toggle+.portal{
	//	padding-top: 12px;
	//	border-top: var(--theme-dropdown-border);
	//}

	#p-lang{
		/* "languages"*/
		display: block;
		justify-content: flex-end;
		position: absolute;
		left: 48px;
		top: 9px;
		background: none;
		.vector-menu-heading{
			margin: 0;
			padding: 0;
			width: 24px;
			height: 24px;
			span{
				display: none;
			}
			&::before{
				@include lib.pseudo-block;
				@include lib.mask-icon(var(--theme-heading-color), var(--icon-language), 20px 20px, center calc(50% + 1px));
				width: 24px;
				height: 24px;
				margin: 0;
			}
		}
		.body{
			display: none !important;
			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;
			margin-top: 6px;
			ul{
				display: block;
				padding: 4px 4px 0 4px;
			}
		}
		&.expanded .body{
			display: block !important;
		}
	}

}