@import "minerva.variables";
@import "minerva.mixins";

.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: .5em;
			border-bottom: solid 1px @sectionBorderColor;
			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'] {
			max-width: 100%;
			background-color: transparent;
			border: none;
			padding: 0;
			font-size: inherit;
			// Defaults to right alignment when not explicitly set. Should be flippable.
			margin: .6em 0 .6em 1.4em;

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

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

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

			img {
				border: none;
			}

			figcaption {
				font-size: .8em;
				line-height: 1.5;
				padding: 0;
				color: @grayMedium;
			}
		}
	}

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

	.overlay-content .surface {
		overflow: hidden;
	}

	// Toolbar
	@baseIconSize: 24px;
	@targetIconSize: 32px;
	.overlay-header-container {
		.ve-init-mw-mobileArticleTarget-toolbar {
			// Everything is measured in ems so the easiest way to scale
			// is to change the base font size.
			font-size: unit( 0.8 * @targetIconSize / @baseIconSize, em );
			.oo-ui-iconElement-icon {
				/* We should be able to use 'contain' here, but some OOUI icon containers are oversized (T85139) */
				.background-size( @targetIconSize, @targetIconSize );
			}
		}
	}

	.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;
}