span[ data-mw-comment-start ] {
	// Give comment anchors a negative offset so we don't position
	// them right at the edge of the page when jumping to them
	position: relative;
	top: -40px;
}

// TODO: Remove dt- prefixed classes once HTML caches have cleared
.dt-init-replylink-buttons,
.ext-discussiontools-init-replylink-buttons {
	user-select: none;
	display: none;

	.mw-content-ltr & {
		/* @noflip */
		margin-left: 0.5em;
	}

	.mw-content-rtl & {
		/* @noflip */
		margin-right: 0.5em;
	}

	.dt-replytool-enabled &,
	.ext-discussiontools-replytool-enabled & {
		// Chromium bug (T260072): Element with `user-select: none` at the end of a paragraph causes
		// triple-click (to select the paragraph) to also select the first character of the next paragraph
		// https://bugs.chromium.org/p/chromium/issues/detail?id=1116214
		display: inline-flex;

		.client-nojs & {
			display: none;
		}
	}

	.dt-init-replylink,
	.ext-discussiontools-init-replylink {
		&-reply {
			cursor: pointer;
		}

		// Similar to mw-editsection-bracket
		&-bracket {
			color: #54595d;

			.mw-content-ltr &:first-of-type,
			.mw-content-rtl &:not( :first-of-type ) {
				/* @noflip */
				margin-right: 0.25em;
			}

			.mw-content-ltr &:not( :first-of-type ),
			.mw-content-rtl &:first-of-type {
				/* @noflip */
				margin-left: 0.25em;
			}
		}
	}

	&.ext-discussiontools-init-replylink-active {
		visibility: hidden;
	}

	.ext-discussiontools-init-replylink-open & > a {
		color: #72777d;
		pointer-events: none;
	}

	@media print {
		display: none;
	}
}

.ext-discussiontools-init-highlight {
	// Support: IE11
	// On supporting browsers, we instead use non-transparent color with mix-blend-mode.
	// Identical to #ffe29e on white background.
	background-color: rgba( 255, 198, 60, 0.5 );
	position: absolute;
	pointer-events: none;
	opacity: 0;
}

@supports ( mix-blend-mode: multiply ) {
	.ext-discussiontools-init-highlight-overlay {
		mix-blend-mode: multiply;
		// Support: Safari
		// Safari doesn't blend this overlay with the text unless GPU rendering is forced.
		transform: translateZ( 0 );
	}

	.ext-discussiontools-init-highlight {
		background-color: #ffe29e;
	}
}

.ext-discussiontools-init-highlight-fadein {
	opacity: 1;
}

.ext-discussiontools-init-highlight-fadeout {
	opacity: 0;
	transition: opacity 250ms ease-out;
}

// NB Directional properties for anything immediately visible
// in the header must be based on content direction.
.ext-discussiontools-section {
	&-subscribe {
		// Overridden in ext-discussiontools-topicsubscription-enabled
		display: none;
	}

	&-subscribe { /* stylelint-disable-line no-duplicate-selectors */
		font-weight: normal;
		background-repeat: no-repeat;
		width: 20px;
		height: 20px;
		align-self: flex-end;
		opacity: 0.6;
		font-size: 14px;
		line-height: 20px;
	}

	&-subscribe { /* stylelint-disable-line no-duplicate-selectors */
		cursor: pointer;

		&.oo-ui-image-progressive {
			opacity: 1;
		}
	}
}

.ext-discussiontools-topicsubscription-enabled {
	.ext-discussiontools-section {
		clear: both;
		display: flex;
		flex-flow: row wrap;

		h2 {
			flex: 1;
		}

		&-subscribe {
			display: block;
		}
	}
}