/*!
 * VisualEditor UserInterface DiffElement styles.
 *
 * @copyright 2011-2020 VisualEditor Team and others; see http://ve.mit-license.org
 * @license The MIT License (MIT); see LICENSE.txt
 */

.ve-ui-diffElement {
	position: relative;
}

.ve-ui-diffElement:after {
	content: '';
	clear: both;
	display: block;
}

.ve-ui-diffElement-content {
	overflow-x: auto;
	position: relative;
	/* Render 5px padding so highlight outlines are visible */
	margin-left: -5px;
	padding-left: 5px;
}

.ve-ui-diffElement-hasDescriptions .ve-ui-diffElement-content {
	margin-right: 16em;
	padding-right: 1em;
	border-right: 1px solid #c8ccd1;
}

@media ( max-width: 400px ) {
	.ve-ui-diffElement-hasDescriptions .ve-ui-diffElement-content {
		margin-right: 6em;
	}
}

.ve-ui-diffElement-hasDescriptions .ve-ui-diffElement-sidebar {
	position: absolute;
	top: 0;
	right: 0;
	width: 15em;
}

@media ( max-width: 400px ) {
	.ve-ui-diffElement-hasDescriptions .ve-ui-diffElement-sidebar {
		width: 5em;
	}
}

.ve-ui-diffElement-overlays {
	position: absolute;
	opacity: 0.5;
	z-index: 2;
	pointer-events: none;
}

.ve-ui-diffElement-warning {
	font-style: italic;
}

.ve-ui-diffElement-warning > .oo-ui-iconWidget {
	margin-right: 0.3em;
}

.ve-ui-changeDescriptionsSelectWidget > .oo-ui-optionWidget {
	cursor: default;
	font-size: 0.92857143em; /* 13/14px */
}

.ve-ui-changeDescriptionsSelectWidget > .oo-ui-optionWidget-highlighted {
	background: #b6d4fb; /* #6da9f7 at 50% opacity */
}

.ve-ui-diffElement-highlight {
	position: absolute;
	/* background: #6da9f7; */
	outline: 3px solid #6da9f7;
	padding: 2px;
	margin: -2px 0 0 -2px;
	pointer-events: none;
}

.ve-ui-diffElement-attributeChange {
	color: #72777d;
}

.ve-ui-diffElement-attributeChange del {
	background-color: #f2c2bf;
	box-shadow: 0 0 0 1px #f2c2bf;
	text-decoration: line-through;
}

.ve-ui-diffElement-attributeChange del:hover {
	background-color: #f2c2bf;
	box-shadow: 0 0 0 1px #f2c2bf;
	text-decoration: none;
}

.ve-ui-diffElement-attributeChange ins {
	background-color: #c4ede4;
	box-shadow: 0 0 0 1px #c4ede4;
	text-decoration: none;
}

.ve-ui-diffElement-attributeChange.oo-ui-labelElement .oo-ui-labelElement-label {
	white-space: normal;
	word-break: break-word;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.ve-ui-diffElement-attributeChange.oo-ui-labelElement .oo-ui-labelElement-label ol,
.ve-ui-diffElement-attributeChange.oo-ui-labelElement .oo-ui-labelElement-label ul {
	margin-left: 1.8em;
}

[ data-diff-action='insert' ],
[ data-diff-action='remove' ],
[ data-diff-action='change-insert' ],
[ data-diff-action='change-remove' ] {
	text-decoration: inherit;
}

/* Prevent collapsing added/removed spaces (T170114), but only inline (T300444) */
ins[ data-diff-action='insert' ],
del[ data-diff-action='remove' ] {
	white-space: pre-wrap;
}

[ data-diff-action='insert' ],
/* elements using display:table-caption need separate backgrounds as they render outside the parent's bounding box */
[ data-diff-action='insert' ] > caption,
[ data-diff-action='insert' ] > figcaption {
	/* #7fd7c4 at 50% opacity */
	background-color: rgba( 0, 175, 137, 0.5 ) !important; /* stylelint-disable-line declaration-no-important */
	box-shadow: 0 0 0 1px rgba( 0, 175, 137, 0.5 );
}

[ data-diff-action='remove' ],
/* elements using display:table-caption need separate backgrounds as they render outside the parent's bounding box */
[ data-diff-action='remove' ] > caption,
[ data-diff-action='remove' ] > figcaption {
	/* #e88e89 at 50% opacity */
	background-color: rgba( 209, 29, 19, 0.5 ) !important; /* stylelint-disable-line declaration-no-important */
	box-shadow: 0 0 0 1px rgba( 209, 29, 19, 0.5 );
}

[ data-diff-action='change' ],
[ data-diff-action='change-insert' ] {
	/* #b6d4fb at 50% opacity */
	background-color: rgba( 109, 169, 247, 0.5 ) !important; /* stylelint-disable-line declaration-no-important */
	box-shadow: 0 0 0 1px rgba( 109, 169, 247, 0.5 );
}

[ data-diff-move ],
/* elements using display:table-caption need separate backgrounds as they render outside the parent's bounding box */
[ data-diff-move ] > caption,
[ data-diff-move ] > figcaption {
	/* #eaecf0 (base80) at 50% opacity */
	background: rgba( 213, 217, 225, 0.5 );
	outline: 5px solid rgba( 213, 217, 225, 0.5 );
}

[ data-diff-action='change-remove' ] {
	display: none;
}

[ data-diff-action='remove' ] {
	text-decoration: line-through;
}

[ data-diff-action='remove' ]:hover {
	text-decoration: none;
}

/* TODO: These sibling selectors still match when there is a text node in-between, should be fixed in JS */
[ data-diff-action='remove' ] + [ data-diff-action='insert' ],
[ data-diff-action='insert' ] + [ data-diff-action='remove' ],
[ data-diff-action='remove' ] + [ data-diff-action='change-insert' ],
[ data-diff-action='insert' ] + [ data-diff-action='change-remove' ] {
	margin-left: 4px;
}

[ data-diff-action='none' ]:not( [ data-diff-move ] ) {
	opacity: 0.4;
}

/* stylelint-disable no-descending-specificity */
[ data-diff-action='insert' ],
[ data-diff-action='remove' ],
[ data-diff-action='change-insert' ],
[ data-diff-action='change-remove' ],
[ data-diff-move ] {
	/* Create new stacking context to match one created by opacity on data-diff-action=none (T190916) */
	position: relative;
	z-index: 1;
}
/* stylelint-enable no-descending-specificity */

/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
@supports ( mix-blend-mode: darken ) {
	/* Blend contents into the background (I7a7e27b1218) */
	[ data-diff-action='insert' ] > *,
	[ data-diff-action='remove' ] > *,
	[ data-diff-action='change' ] > *,
	[ data-diff-action='change-insert' ] > *,
	[ data-diff-action='change-remove' ] > *,
	[ data-diff-move ] > * {
		/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
		mix-blend-mode: darken;
	}
}

.ve-ui-diffElement-moved-up,
.ve-ui-diffElement-moved-down {
	position: relative;
	padding-left: 1em;
}

.ve-ui-diffElement-moved-up:before,
.ve-ui-diffElement-moved-down:before {
	position: absolute;
	left: 0;
	line-height: 1;
}

.ve-ui-diffElement-moved-down:before {
	content: '↓';
}

.ve-ui-diffElement-moved-up:before {
	content: '↑';
}

[ data-diff-action='insert' ]:empty:before,
[ data-diff-action='remove' ]:empty:before,
[ data-diff-move ]:empty:before,
[ data-diff-action='insert' ] *:empty:before,
[ data-diff-action='remove' ] *:empty:before,
[ data-diff-move ] *:empty:before {
	content: url( data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 );
}

.ve-ui-diffElement-no-changes {
	color: #72777d;
	font-style: italic;
}

.ve-ui-diffElement-spacer {
	color: #72777d;
	clear: both;
}

.ve-ui-diffElement-internalListSpacer {
	list-style-type: none !important; /* stylelint-disable-line declaration-no-important */
}