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

// These are set as !important since they have to override styles set in VisualEditor
// FIXME: Remove protected node once VE is correctly identifying which nodes are
// supported in mobile.
.ve-ce-alienNode-phantom,
.ve-ce-protectedNode-phantom {
	box-shadow: none !important;
	opacity: 0.5 !important;
	background-color: white !important;
}

.content {
	// VisualEditor doesn't have section_heading class, so we need to apply
	// heading styles to the header tags directly.
	h1, h2 {
		margin-bottom: .5em;
		border-bottom: solid 1px @sectionBorderColor;
	}

	figure[typeof*='mw:Image'] {
		&.mw-halign-left {
			margin-right: 1.4em;
		}

		&.mw-halign-right {
			margin-left: 1.4em;
		}

		.ve-ce-mwBlockImageNode-thumbimage {
			border: none;
		}
	}

	figure[typeof='mw:Image/Thumb'],
	figure[typeof='mw:Image/Frame'] {
		margin: 0.6em 0;
		max-width: 100%;
		background-color: transparent;
		border: none;
		padding: 0;
		font-size: inherit;
	}
}

.editor-overlay-ve {
	// Toolbar
	.overlay-header-container {
		.overlay-header > .toolbar {
			padding: 0;

			// FIXME: Remove most of these resets once oo-ui supports skinning
			// and no longer loads Vector-like styles by default in MediaWiki.
			.oo-ui-toolbar-bar {
				background-color: transparent;
				background-image: none;
				border-bottom: none;
				padding: 0;

				.oo-ui-toolGroup {
					margin: 0;
					border: none;
				}

				.oo-ui-toolbar-shadow {
					display: none;
				}
			}
		}

		.oo-ui-tool {
			height: @headerHeight;
			display: block;
			float: left;
			text-indent: -999px;
			width: 24px;
			padding: 0 12px;
			position: relative;
			// FIXME: Remove this reset once oo-ui supports skinning
			border: none;
			// FIXME: Remove this reset once oo-ui supports skinning
			border-radius: 0;
			margin: -@headerMargin 0 0 1em;

			&.oo-ui-tool-active {
				background-color: #EDF4FF;
			}

			* {
				position: absolute;
				right: 0;
				top: 0;
				left: 0;
				bottom: 0;
				display: block;
			}
		}

		// We may want to move these to an oojs-ui theme at some point. The down-side is
		// that we wouldn't be able to use the @headerHeight LESS variable.
		.oo-ui-barToolGroup {
			.oo-ui-tool-link {
				height: 100%;
				padding: 0;
				.box-sizing( border-box );

				.oo-ui-iconedElement-icon {
					width: @headerTitleFontSize + @headerTitleMarginV * 2;
					height: @headerTitleFontSize + @headerTitleMarginV * 2;
					margin-top: @headerMargin;
					.background-size( 32px, 32px );
				}
			}
		}

		// FIXME: Remove these resets once oo-ui supports skinning
		.oo-ui-tool-active:not(.oo-ui-widget-disabled) {
			box-shadow: none;
			border: none;
		}

		// FIXME: Remove these resets once oo-ui supports skinning
		.oo-ui-tool:hover:not(.oo-ui-widget-disabled) {
			border: none;
		}
	}
}