/*!
 * VisualEditor MediaWiki UserInterface MWReferenceResultWidget styles.
 *
 * @copyright 2011-2018 VisualEditor Team's Cite sub-team and others; see AUTHORS.txt
 * @license MIT
 */

@import 'mediawiki.skin.variables.less';

.ve-ui-mwReferenceResultWidget {
	padding: 1em;
	// Limit extremely large references to not overflow the dialog
	max-height: 12em;
	overflow: hidden;
	border-bottom: @border-width-base @border-style-base @border-color-muted;

	// Class applied only to subrefs
	&-sub .oo-ui-labelElement-label {
		margin-left: 2em;
	}

	&:last-child {
		border-bottom: 0;
	}

	&.oo-ui-optionWidget-highlighted {
		// OOUI's SearchWidget doesn't come with a style for this, so we copy MenuOptionWidget
		background-color: @background-color-interactive;
		color: @color-emphasized;
	}

	&.oo-ui-labelElement .oo-ui-labelElement-label {
		white-space: normal;
		// Ignore clicks on e.g. <a> elements that are part of the reference's text
		pointer-events: none;
		word-wrap: break-word;
	}

	// How the footnote marker appears in the text, e.g. [1]
	&-footnote {
		float: left;
		margin-right: 0.75em;
	}

	// A reference's unique identifier as provided via the name="…" attribute
	&-name {
		opacity: @opacity-medium;
		float: right;
		margin-left: 0.75em;
		margin-bottom: 0.05em;
		// Limit overly long names and push them to the side
		max-width: 40%;
		text-align: right;

		// Names like ":0" are less meaningful, still useful esp. when switching to wikitext
		&-autogenerated {
			opacity: @opacity-low;
		}
	}

	// Preview the reference's content with less whitespace, relevant when it contains e.g. tables
	.ve-ui-mwPreviewElement * {
		margin-bottom: 0;
		margin-top: 0;
	}
}

// FIXME: T375053 Should just be temporary to test some UI changes
.ve-ui-mwReferenceSearchReuseHacks .ve-ui-mwReferenceResultWidget {
	display: flex;

	.ve-ui-mwReferenceResultsReuseOptions .oo-ui-buttonElement-button:hover {
		border: @border-progressive;
	}

	.oo-ui-labelElement-label {
		flex-grow: 1;
	}

	// FIXME: Waiting on a design that accomodates the ref name.
	.ve-ui-mwReferenceResultWidget-name {
		display: none;
	}
}