/*!
 * VisualEditor ContentEditable Surface styles.
 *
 * @copyright See AUTHORS.txt
 */

.ve-ce-surface {
	/* Create a new stacking context for elements inside the surface */
	position: relative;
	z-index: 0;
	/*
	Remember, don't set font-size here.
	Should be inherited from the VE target container.
	*/

	flex: 1;
	/*
	 * Override the flex box default which expands min-width to the content size:
	 * https://developer.mozilla.org/en-US/docs/Web/CSS/min-width#auto
	 *
	 * Without this the surface won't let itself be narrower than its
	 * widest content, causing issues with long lines of text,
	 * tables, floated elements, etc.
	 */
	min-width: 0;

	// Generic class for interface components embedded in the surface, e.g.
	//  - .ve-ce-branchNode-blockSlug
	//  - .ve-ce-focusableNode-invisibleIcon
	// Used to reset styles that might otherwise be inherited
	&-interface {
		font-weight: normal;
		font-style: normal;
		// Downstream users should set reset font-size and family.
	}

	&-dropMarker {
		height: 1px;
		background: #72777d;
		pointer-events: none;
		position: absolute;
	}

	/* Review mode */

	&-reviewMode {
		pointer-events: none;

		&-highlightNodes .ve-ce-attachedRootNode > :not( .ve-ce-surface-reviewMode-highlightNode ) {
			opacity: 0.5;
		}
	}

	&-paused {
		opacity: 0.5;
	}

	&-clipboardHandler {
		position: fixed;
		/* FIXME T126024: Stop the viewport scrolling when the clipboard handler is typed into */
		top: 3em;
		left: 0;
		/* Try to avoid wrapping by not setting a width because of https://code.google.com/p/chromium/issues/detail?id=318925 */
		height: 1px;
		opacity: 0;
		overflow: hidden;

		* {
			height: 1px !important; /* stylelint-disable-line declaration-no-important */
		}
	}
}

.ve-ce-cursorHolder {
	position: absolute;
	width: 0;
	height: 0;

	&-img {
		width: 0;
		height: 0;
	}

	&-debug {
		width: 2px;
		height: 1em;
		border: 1px solid #b32424;
	}
}