@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-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: #ddd;
			}
		}
	}
}