@import 'mediawiki.skin.variables.less';
@import '../../../mobile.less/mobile.variables.less';
@import 'mediawiki.mixins.less';

@drawerPadding: 20px;

.drawer.references-drawer {
	background-color: #000; // Fixed colors, don't use color design tokens
	color: #c8ccd1; // Fixed colors, don't use color design tokens
	max-height: 50%; // on tablet this will become capped at 400px
	overflow-y: auto;
	padding: @drawerPadding/2 @drawerPadding @drawerPadding @drawerPadding;

	a {
		color: #69f;
	}

	a.new {
		color: @color-link-red;
	}

	img {
		// Invert MathML images to ensure formulas
		// appear as white on dark background T366220
		filter: invert( 1 );
	}

	.references-drawer__header {
		.flex-display();
		align-items: center;
		padding-bottom: @drawerPadding;
	}

	.references-drawer__title {
		color: @color-subtle;
		cursor: default;
		letter-spacing: 0.2em;
		font-size: 0.75em;
		text-transform: uppercase;
		margin-left: 1em;
		flex-grow: 1;
	}

	.main-reference-content {
		display: inline;
		margin-left: 0.2em;
		word-break: break-word;
	}
}

@media all and ( min-width: @min-width-breakpoint-tablet ) {
	.drawer.references-drawer {
		max-height: 400px;
	}
}

.mf-icon-reference {
	.cdx-mixin-css-icon( @cdx-icon-reference, @param-is-button-icon: false,
	@param-fill-color: @color-subtle, @param-size-icon: @size-icon-small );
}

.mf-icon-close-small {
	.cdx-mixin-css-icon( @cdx-icon-close, @param-is-button-icon: false,
	@param-fill-color: #a2a9b1, @param-size-icon: @size-icon-small );
}