@import 'mediawiki.mixins.less';
@import 'mediawiki.ui/variables';

.editor-overlay-ve {
	.content {
		// We don't need display:table as there are no edit/collapse buttons
		// Also display:table causes CE issues in Mobile Safari (T202991)
		h1, h2, h3, h4, h5, h6 {
			display: block;
			// Match section edit icon from read mode
			// TODO: Move this to a Minerva-specific file
			min-height: 24px;
		}
	}

	.overlay-content {
		max-width: none;

		.surface {
			overflow: hidden;
		}
	}

	&.loading {
		background-color: rgba( 255, 255, 255, 0.5 );

		.overlay-content .surface {
			height: 0;
		}
	}

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

		.ve-init-mw-mobileArticleTarget-toolbar {
			// The border will only be visible on screens >1000px due to max-width set elsewhere.
			// On smallers screens, the negative margin will cause it to be outside of viewport.
			border-color: @colorGray12;
			border-style: solid;
			border-width: 0 1px;
			margin: 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;
		height: 3em;
	}
}

.overlay-header-container.toolbar-hidden {
	transform: translateY( -100% );
}

.overlay-header-container.toolbar-shown {
	transition: transform 250ms ease;
	transform: translateY( 0 );
	opacity: 1;
}

.overlay-header-container.toolbar-shown-done {
	/* Turn off transforms when done to avoid Safari rendering bugs (T202935) */
	transform: none;
}