/**************************
 Media License - On Image Toggle
 © button in the bottom right of an image, opens a popup with the media license info
 to its left. Markup from media_license_on_image_toggle_get_markup()
**************************/

.media-license-toggle {
	/*
	 * public API: set --media-license-toggle-* to override the defaults below.
	 */
	--_media-license-toggle-background-color: var(--media-license-toggle-background-color, oklch(30% 0% 68deg / 65%));
	--_media-license-toggle-color-text: var(--media-license-toggle-color-text, oklch(80% 0% 68deg / 65%));
	--_media-license-toggle-font-family: var(--media-license-toggle-font-family, inherit);
	--_media-license-toggle-font-size: var(--media-license-toggle-font-size, 0.875rem);
	--_media-license-toggle-shadow: var(--media-license-toggle-shadow, 0 2px 8px rgb(0 0 0 / 0.25));
	--_media-license-toggle-border-radius: var(--media-license-toggle-border-radius, 0);
	--_media-license-toggle-padding-block: var(--media-license-toggle-padding-block, 6px);
	--_media-license-toggle-padding-inline: var(--media-license-toggle-padding-inline, 12px);
	--_media-license-toggle-offset: var(--media-license-toggle-offset, 15px);
	--_media-license-toggle-button-size: var(--media-license-toggle-button-size, 1.75rem);
	--_media-license-toggle-popup-max-width: var(--media-license-toggle-popup-max-width, 20rem);
	/* the popup has colors of its own, the two above are for the icon */
	--_media-license-toggle-popup-background-color: var(--media-license-toggle-popup-background-color, #000);
	--_media-license-toggle-popup-color-text: var(--media-license-toggle-popup-color-text, #fff);
	--_media-license-toggle-popup-arrow-size: var(--media-license-toggle-popup-arrow-size, 8px);

	position: absolute;
	right: var(--_media-license-toggle-offset);
	bottom: var(--_media-license-toggle-offset);
	/* above the overlay of the featured image block */
	z-index: 1;
}

/*
 * note: on images with core's lightbox ("Click to expand") core styles every button in
 * the figure - .wp-lightbox-container button { position: absolute; top: 16px; opacity: 0; … }.
 * Hence the element selector to match its specificity, the resets below and the
 * has-background class on the button, which opts it out of core's background rule.
 */
.media-license-toggle button.media-license-toggle__button {
	position: static;
	z-index: auto;
	display: grid;
	place-items: center;
	width: var(--_media-license-toggle-button-size);
	height: var(--_media-license-toggle-button-size);
	/* the icon is the whole button, see .media-license-toggle__icon */
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: transparent;
	color: var(--_media-license-toggle-color-text);
	box-shadow: none;
	backdrop-filter: none;
	opacity: 1;
	transition: none;
	cursor: pointer;

	&:hover,
	&:focus {
		border: 0;
		background-color: transparent;
		cursor: pointer;
		opacity: 1;
	}

	&:focus-visible {
		outline: 2px solid var(--_media-license-toggle-color-text);
		outline-offset: 2px;
	}
}

.media-license-toggle__icon {
	display: block;
	width: 100%;
	height: 100%;
}

/* disc in the background color, ring and "C" in the text color (currentColor of the button) */
.media-license-toggle__icon-disc {
	fill: var(--_media-license-toggle-background-color);
}

.media-license-toggle__popup {
	position: absolute;
	/* to the left of the button, vertically centered on it; the gap leaves room for the arrow */
	right: calc(100% + var(--_media-license-toggle-offset));
	top: 50%;
	transform: translateY(-50%);
	width: max-content;
	max-width: min(var(--_media-license-toggle-popup-max-width), 70vw);
	padding: var(--_media-license-toggle-padding-block) var(--_media-license-toggle-padding-inline);
	border-radius: var(--_media-license-toggle-border-radius);
	background-color: var(--_media-license-toggle-popup-background-color);
	color: var(--_media-license-toggle-popup-color-text);
	box-shadow: var(--_media-license-toggle-shadow);
	font-family: var(--_media-license-toggle-font-family);
	font-size: var(--_media-license-toggle-font-size);
	line-height: 1.4;
	text-align: left;

	&[hidden] {
		display: none;
	}

	/* arrow on the right edge, pointing at the button */
	&::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 100%;
		transform: translateY(-50%);
		border-block: var(--_media-license-toggle-popup-arrow-size) solid transparent;
		border-inline-start: var(--_media-license-toggle-popup-arrow-size) solid var(--_media-license-toggle-popup-background-color);
	}

	a {
		color: inherit;
		text-decoration: underline;
	}
}

/* core/image: the wrapper is as wide as the image, so the button sits on its corner */
.media-license-toggle-wrap {
	position: relative;
	width: fit-content;
	max-width: 100%;
}

/* images that stretch to the width of their figure have to keep doing so */
.alignwide > .media-license-toggle-wrap,
.alignfull > .media-license-toggle-wrap {
	width: auto;
}

/* core/post-featured-image: the button sits right inside the figure */
.wp-block-post-featured-image:has(> .media-license-toggle) {
	position: relative;
}