/*
 * "Copy link" icon on headings. assets/js/heading-anchor-links.js puts it in the heading, before or
 * after the text (modifier --before / --after).
 *
 * To use your own CSS instead: let the filter reader_experience/heading_anchors_load_css return
 * false and load a stylesheet for these classes yourself.
 */

.dwp-rx-heading-link {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent; /* see assets/css/base.css for the reason */

	/* Anchor for the toast. */
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;

	/*
	 * Fixed pixel values, deliberately not em: otherwise the icon scales with the heading's font
	 * (bigger on an h2 than on an h4) and looks like part of the typography.
	 */
	width: 20px;
	height: 20px;
	border-radius: 4px;
	color: var(--c-text-muted, GrayText);
	opacity: 0;
	transition: opacity 0.15s ease, color 0.15s ease;
}

/*
 * Before the text: "hanging" in the left margin. The negative margin pulls the icon to the left,
 * the positive margin after it makes up for that, so the heading text itself does not move. As it
 * is an inline element at the start of the heading, it lines up with the FIRST line, even when
 * the heading wraps over several lines.
 */
.dwp-rx-heading-link--before {
	margin-inline: -24px 4px;
}

/* After the text: inline, right after the last words. */
.dwp-rx-heading-link--after {
	margin-inline-start: 0.35em;
}

/*
 * On wide screens the icon after the text takes NO layout width: the negative end margin
 * cancels its own width (and the margin before it) exactly. Without this, when the last line of
 * a heading is almost full the icon wraps onto a line of its own, and because it also takes up
 * invisible space such a heading would permanently be one line taller. Now the icon follows the
 * text and, if needed, hangs a little outside the column, like --before does on the left. On
 * narrow screens that could cause a horizontal scrollbar, so the plain inline behaviour stays.
 */
@media (min-width: 601px) {
	.dwp-rx-heading-link--after {
		margin-inline: 0.35em calc(-20px - 0.35em);
	}
}

:is(h2, h3, h4):hover > .dwp-rx-heading-link,
.dwp-rx-heading-link:focus-visible {
	opacity: 1;
}

/*
 * Themes often style "button:hover" and "button:focus" (background, border, shadow). That
 * selector type outweighs a single class, so "all: unset" above does not beat it. A doubled
 * class makes these states win, without repeating "all: unset": that also reset the transition
 * and made the icon flicker.
 */
.dwp-rx-heading-link.dwp-rx-heading-link:hover,
.dwp-rx-heading-link.dwp-rx-heading-link:focus,
.dwp-rx-heading-link.dwp-rx-heading-link:active {
	background: transparent;
	border: 0;
	box-shadow: none;
	text-shadow: none;
	text-decoration: none;
	transform: none;
	color: var(--c-text, CanvasText);
}

.dwp-rx-heading-link.dwp-rx-heading-link:focus:not(:focus-visible) {
	outline: 0;
}

.dwp-rx-heading-link.dwp-rx-heading-link:focus-visible {
	outline: 2px solid var(--c-accent, Highlight);
	outline-offset: 1px;
}

/*
 * Confirmation after copying. Aligned to the start of the icon (not centred): with an icon in the
 * left margin a centred bubble could fall off screen. Typography is reset explicitly, because
 * this sits inside the heading and would otherwise inherit the heading style.
 */
.dwp-rx-heading-link__toast {
	position: absolute;
	inset-inline-start: 0;
	bottom: calc(100% + 6px);
	transform: translateY(4px);
	white-space: nowrap;
	padding: 3px 8px;
	border-radius: 6px;
	background: var(--c-text, #1f2328);
	color: var(--c-bg, #fff);
	font: 400 0.75rem/1.4 system-ui, sans-serif;
	letter-spacing: normal;
	text-transform: none;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.dwp-rx-heading-link__toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* A hanging icon needs room on the left; a narrow screen has none. */
@media (max-width: 600px) {
	.dwp-rx-heading-link--before {
		display: none;
	}
}

/* Without a mouse there is no hover: show the icon after the text softly at all times. */
@media (hover: none) {
	.dwp-rx-heading-link--after {
		opacity: 0.55;
	}
}