:root {
	--copy-anchor-background: rgba(150, 150, 150, 0.07);
	--copy-anchor-hover-background: rgba(100, 100, 100, 0.07);
	--copy-anchor-radius: 4px;
	--copy-anchor-padding: 2px;
	--copy-anchor-icon-size: 16px;
	--copy-anchor-icon-color: #333;
	--copy-anchor-icon-background: rgba(235, 235, 235, 0.9);
	--copy-anchor-icon-border: rgba(0, 0, 0, 0.12);
	--copy-anchor-icon-padding: 4px 6px;
	--copy-anchor-icon-radius: 6px;
	--copy-anchor-icon-gap: 6px;
	--flash-overlay-background: rgba(100, 100, 100, 0.6);
	--flash-overlay-color: #fff;
	--flash-overlay-radius: 16px;
	--flash-overlay-padding: 18px 28px;
	--flash-overlay-max-width: min(90vw, 640px);
	--flash-overlay-title-font: 600 24px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--flash-overlay-detail-font: 12px Menlo, Monaco, Consolas, monospace;
	--flash-overlay-detail-gap: 6px;
	--flash-overlay-duration: 1.6s;
}

.copy-anchor-links-enabled .copy-anchor:not(:target) {
	background-color: var(--copy-anchor-background);
	border-radius: var(--copy-anchor-radius);
	box-shadow: 0 0 0 var(--copy-anchor-padding) var(--copy-anchor-background);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	cursor: pointer;
}

.copy-anchor-links-enabled .copy-anchor.is-hovered:not(:target) {
	background-color: var(--copy-anchor-hover-background);
	box-shadow: 0 0 0 var(--copy-anchor-padding) var(--copy-anchor-hover-background);
}

.copy-anchor-icon {
	position: absolute;
	z-index: 10;
	display: none;
	padding-right: calc(var(--copy-anchor-icon-gap) + var(--copy-anchor-padding));
	transform: translate(-100%, -50%);
	cursor: pointer;
}

.copy-anchor-links-enabled .copy-anchor-icon.is-visible {
	display: block;
}

.copy-anchor-icon span {
	display: block;
	padding: var(--copy-anchor-icon-padding);
	border: 1px solid var(--copy-anchor-icon-border);
	border-radius: var(--copy-anchor-icon-radius);
	background-color: var(--copy-anchor-icon-background);
	color: var(--copy-anchor-icon-color);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.copy-anchor-icon svg {
	display: block;
	width: var(--copy-anchor-icon-size);
	height: var(--copy-anchor-icon-size);
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.flash-overlay {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 1000;
	box-sizing: border-box;
	max-width: var(--flash-overlay-max-width);
	padding: var(--flash-overlay-padding);
	border-radius: var(--flash-overlay-radius);
	background-color: var(--flash-overlay-background);
	color: var(--flash-overlay-color);
	text-align: center;
	transform: translate(-50%, -50%);
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.flash-overlay.is-visible {
	visibility: visible;
	animation: flash-overlay var(--flash-overlay-duration) ease-in-out;
}

.flash-overlay-title {
	font: var(--flash-overlay-title-font);
}

.flash-overlay-detail {
	margin-top: var(--flash-overlay-detail-gap);
	font: var(--flash-overlay-detail-font);
	overflow-wrap: anywhere;
}

.flash-overlay-detail:empty {
	display: none;
}

@keyframes flash-overlay {
	0% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.95);
	}

	12% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}

	75% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}

	100% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(1);
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--copy-anchor-background: rgba(175, 175, 175, 0.14);
		--copy-anchor-hover-background: rgba(200, 200, 200, 0.21);
		--copy-anchor-icon-color: #eee;
		--copy-anchor-icon-background: rgba(70, 70, 70, 0.9);
		--copy-anchor-icon-border: rgba(255, 255, 255, 0.15);
		--flash-overlay-background: rgba(70, 70, 70, 0.8);
	}
}

@media (any-hover: hover) {
	:root {
		--copy-anchor-background: transparent;
	}
}