.mwe-popups.mwe-popups-type-reference {
	.mwe-popups-title {
		margin-top: @popupPadding;

		.mw-ui-icon {
			vertical-align: middle;

			&.mw-ui-icon-element {
				min-width: @iconSize;
				width: @iconSize;

				&:before {
					margin: 0;
				}
			}

			&.mw-ui-icon-reference-generic {
				/* align narrow icon with the text */
				margin-left: -2px;
			}
		}
	}

	.mwe-popups-extract {
		margin-bottom: 2.75 * @lineHeight;
		// Reference previews should have a "lighter" appearence than page previews, where the
		// maximum is 7 lines.
		max-height: 5 * @lineHeight;
		// Reference previews can be smaller than page previews, where the minimum is 2 lines.
		min-height: @lineHeight;

		&:after {
			width: 100%;
			bottom: -@lineHeight;
			background-color: transparent;
			background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) );
			background-image: -moz-linear-gradient( top, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) );
			background-image: linear-gradient( rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) );
			.transition( bottom 250ms ease );
		}

		&.mwe-popups-fade-out {
			&:after {
				bottom: 0;
			}
		}

		.mw-parser-output {
			max-height: inherit;
			overflow: auto;
		}
	}

	.mwe-popups-read-link {
		// Same font size as the read link in disambiguation popups
		font-size: 12px;
	}
}