/*!
 * 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.
	*/

	&-selections {
		position: absolute;
		pointer-events: none;
		/* @noflip */
		left: 0;
		top: 0;

		.ve-ce-surface-selection {
			> div {
				position: absolute;
			}

			> .ve-ce-surface-selection-label {
				position: absolute;
				font-size: 0.8em;
				font-weight: bold;
				color: #fff;
				text-shadow: 0 0 1px #000;
				padding: 0.2em;
				margin-top: -1.4em;
				height: 1em;
				line-height: 1;
				white-space: nowrap;
				max-width: 10em;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		/* Deactivated selections */

		&-deactivated {
			opacity: 0.5;

			.ve-ce-surface-selection > div {
				background: #6da9f7;
				/* Increase vertical height to look more like a system selection */
				margin-top: -0.15em;
				padding: 0.15em 0;
			}

			&-showAsDeactivated {
				opacity: 0.15;

				.ve-ce-surface-selection > div {
					background: #000;
				}
			}

			&-collapsed {
				opacity: 1;
				/* Color is matched to font in ve.ce.Surface.js */
			}
		}

		&-otherUserSelection {
			opacity: 0.5;

			&-inactive {
				opacity: 0.25;
			}
		}

		&-otherUserCursor {
			.ve-ce-surface-selection > div:not( .ve-ce-surface-selection-label ) {
				width: 2px !important; /* stylelint-disable-line declaration-no-important */
			}

			&-inactive {
				opacity: 0.5;
			}
		}
	}

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

	&-paste {
		position: fixed;
		/* FIXME T126024: Stop the viewport scrolling when the paste target 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;
	}
}