/*!
 * VisualEditor ContentEditable FocusableNode styles.
 *
 * @copyright 2011-2020 VisualEditor Team and others; see http://ve.mit-license.org
 */

.ve-ce-focusableNode {
	cursor: default;
}

/* We previously applied -moz-user-select: none to all descendants of focuasbleNode
   to prevent them from ever taking a cursor (T70537) but that causes FF to create
   multi-range selections (T214976) which is worse */

.ve-ce-focusableNode-highlight {
	background: #6da9f7;
	box-shadow: inset 0 0 0 1px #4c76ac;
	position: absolute;
	/* Clip extra span added for selectability */
	overflow: hidden;
}

.ve-ce-focusableNode-highlight-error {
	background: #d33;
}

.ve-ce-focusableNode-highlight-selectable {
	position: absolute;
	top: -1000px;
}

.ve-ce-focusableNode-invisible {
	display: inline-block;
	vertical-align: middle;
	/* Negative margins ensure button height doesn't exceed line height */
	margin: -0.7em 0 -0.6em 0;
	width: auto;
}

.ve-ce-focusableNode-invisibleIcon {
	opacity: 0.5;
}

.ve-ce-focusableNode-invisibleIcon > .oo-ui-buttonElement-button {
	/* Button can sometimes be exposed (T198912), but it shouldn't interact like one */
	cursor: default;
}

.ve-ce-focusableNode-invisibleIcon.oo-ui-labelElement {
	width: auto;
}

.ve-ce-focusableNode-invisibleIcon.oo-ui-labelElement .oo-ui-labelElement-label {
	max-width: 15em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: inline-block;
}

/* Requires high specificity to override OOUI */
.ve-ce-focusableNode-invisibleIcon.oo-ui-iconElement.oo-ui-buttonElement-frameless.oo-ui-iconElement:first-child {
	margin-left: 0;
}

/* Highlights group opacity */

.ve-ce-surface-highlights-focused .ve-ce-focusableNode-highlights {
	opacity: 0.5;
}

.ve-ce-surface-highlights-blurred .ve-ce-focusableNode-highlights {
	opacity: 0.15;
}

.ve-ce-surface-highlights-focused .ve-ce-focusableNode-highlights-deactivated {
	opacity: 0.15;
}

.ve-ce-focusableNode-highlights-deactivated .ve-ce-focusableNode-highlight {
	background: #000;
}

/* Support: IE, Edge */
/* Set opacity directly on the highlights, rather than their containers,
   otherwise the opacity isn't applied at all */
.ve-init-target-ie-or-edge .ve-ce-surface-highlights-focused .ve-ce-focusableNode-highlight {
	opacity: 0.5;
}

.ve-init-target-ie-or-edge .ve-ce-surface-highlights-blurred .ve-ce-focusableNode-highlight {
	opacity: 0.15;
}