.wp-block-image:has(.kb-image-source__toggle),
.wp-block-media-text__media:has(.kb-image-source__toggle),
.wp-block-cover:has(.kb-image-source__toggle),
.wp-block-post-featured-image {
	position: relative;
}

.kb-image-source { display: contents !important; }

.kb-image-source__toggle {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border: 0;
	border-radius: calc(infinity*1px);
	inset-inline-end: 0;
	inset-block-end: 0;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	background: radial-gradient(circle, #000 55%, transparent 55%); /* hard-edged circle, 80% of the 2.5rem box = a 2rem visual size, while the full box stays the (larger, easier to hit) tap target */
	color: #fff;
	cursor: pointer;
}

/* Inside a lightbox container, core's `.wp-lightbox-container button` rules
   outrank `.kb-image-source__toggle` and would style the Source toggle like the
   zoom button. Countered here instead of by raising the base rules' specificity,
   so overrides written against `.kb-image-source__toggle` keep working. */
.wp-lightbox-container .kb-image-source .kb-image-source__toggle {
	z-index: 2;
	inset-block-start: auto;
	inset-inline-start: auto;
	inset-inline-end: 0;
	inset-block-end: 0;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border-radius: calc(infinity*1px);
	opacity: 1;
	backdrop-filter: none;
	cursor: pointer;
}

/* Matches the specificity of core's `:not()` chain, which sets both of these. */
.wp-lightbox-container .kb-image-source .kb-image-source__toggle:not(:hover):not(:active):not(.has-background) {
	border: 0;
	background: radial-gradient(circle, #000 55%, transparent 55%);
}

.kb-image-source__icon {
	inline-size: 1rem;
	block-size: 1rem;
}

.kb-image-source__popover {
	z-index: 2;
	padding: .5em;
	border: none;
	border-radius: 2px;
	background: #000;
	color: #fff;
	font-size: .875rem;
	line-height: 1.5;
	max-inline-size: 70ch;
	margin-inline: .5rem;
}

.kb-image-source__popover::backdrop {
	background: transparent;
}

@supports ( position-anchor: --kb-image-source-support-check ) {
	.kb-image-source__popover {
		position: absolute;
		position-area: start;
		position-try-fallbacks: flip-inline;
	}

	.kb-image-source__toggle--anchored {
		inset-inline-end: anchor(end);
		inset-block-end: anchor(end);
	}

	/* Same reason as above: core's `right: 16px` outranks the plain
	   `--anchored` selector, so re-apply the anchoring inside a lightbox
	   container as well. */
	.wp-lightbox-container .kb-image-source .kb-image-source__toggle--anchored {
		inset-inline-end: anchor(end);
		inset-block-end: anchor(end);
	}
}