@import 'mediawiki.mixins.less';
@import 'minerva.variables';

.editor-overlay-ve {
	.content {
		// VisualEditor doesn't have collapsible-heading class, so we need to apply
		// heading styles to the header tags directly.
		h1, h2 {
			margin-bottom: 0.5em;
			border-bottom: solid 1px @colorGray14;
			overflow: hidden;
		}

		// Styling for images (as output by Parsiod)
		// These styles are mostly derived from content.parsoid.less, which the Minerva skin
		// opts out of (since the styles are largely Vectorish).
		// FIXME: Once Parser and Parsoid output are synchronized, we'll want to move these
		// from here into the regular Minerva content styles.
		figure[typeof*='mw:Image'],
		figure[typeof*='mw:Video'],
		figure[typeof*='mw:Audio'] {
			max-width: 100%;
			// Defaults to right alignment when not explicitly set. Should be flippable.
			margin: 0.6em 0 0.6em 1.4em;

			&.mw-halign-left {
				/* @noflip */
				margin: 0.6em 1.4em 0.6em 0;
				/* @noflip */
				clear: left;
				/* @noflip */
				float: left;
			}

			&.mw-halign-right {
				/* @noflip */
				margin: 0.6em 0 0.6em 1.4em;
				/* @noflip */
				clear: right;
				/* @noflip */
				float: right;
			}

			&.mw-halign-center {
				margin: 0.6em auto 0.6em auto;
				clear: none;
				float: none;
			}
		}
	}

	.overlay-content {
		// prevent disappearing after scrolling when -webkit-overflow-scrolling: touch
		// is used (http://stackoverflow.com/a/10170170)
		* {
			-webkit-transform: translate( 0, 0 );
		}

		.surface {
			overflow: hidden;
		}

		.ve-init-mw-target-surface > .ve-ui-debugBar {
			margin: 0 -@contentMargin;
		}
	}

	// Toolbar
	@targetIconSize: 20px;
	.overlay-header-container {
		box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.1 );

		.ve-init-mw-mobileArticleTarget-toolbar {
			/* Account for difference in height between MF toolbar (3.35em) and VE toolbar (3em) */
			font-size: ( 3.35em / 3 );

			@media all and ( min-width: @wgMFDeviceWidthDesktop ) {
				border-color: @colorGray12;
				border-style: solid;
				border-width: 0 1px;
			}

			.oo-ui-iconElement-icon {
				/* Overwrite `contain` value here, as we're 16px base sized */
				.background-size( @targetIconSize, @targetIconSize );
			}

			.oo-ui-toolbar-bar {
				border: 0;
				box-shadow: none;
			}
		}
	}

	.overlay-header {
		/* Reset unwanted header styles */
		border-collapse: separate;
		border: 0;
	}
}

.ve-ui-overlay {
	/* enough to cover .overlay-header-container with z-index: 5 */
	z-index: 6;
}