@import '../echo.variables';

.mw-echo-ui-specialHelpMenuWidget {
	.oo-ui-popupWidget-body {
		// Override clippable inline rules
		overflow-y: hidden !important;
		overflow-x: hidden !important;
	}

	&-markAllRead-label {
		&-title {
			display: block;
		}

		&-subtitle {
			display: block;
			color: @grey-light;
			margin-top: 0.2em;
		}
	}

	&-menu {
		.oo-ui-buttonWidget {
			display: block;
			padding: 0.5em;
			margin-right: 0;

			.oo-ui-buttonElement-button .oo-ui-iconElement-icon {
				// OOUI Apex sets 'display:block;' with a huge level of specificity
				// on this icon. We must override it otherwise it sticks on its
				// own line
				display: inline-block !important;
			}

			.oo-ui-labelElement-label {
				white-space: normal;
				// Width of the popup (300px) minus the
				// width of the icon (1.875em) minus the
				// padding of the button (0.5em * 2)
				width: ~'calc(300px - 1.875em - 1em)';
			}

			&:hover {
				background-color: #c8ccd1;
			}
		}
	}
}