/* Clipboard button styles */
.clipboard-btn {
	anchor-name: --clipboard-btn;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.25rem;

	border-radius: 0.25rem;

	color: var(--sl-color-gray-3);
	background-color: var(--sl-color-bg-sidebar);

	&:hover {
		color: var(--sl-color-accent);
	}
	svg {
		display: block;
	}
}

/* Styling for the "✓ Copied!" text */
#copied-popover {
	font-weight: 500;
	font-size: var(--sl-text-2xs);
	color: var(--sl-color-text);
	border: none;
	border-radius: 0.5rem;
	background: light-dark(#2bca80, #025d37);
	box-shadow: var(--sl-shadow-sm);

	opacity: 0;
	transition:
		display 0.2s allow-discrete,
		opacity 0.2s ease-in-out;

	position: absolute;
	position-anchor: --clipboard-btn;
	position-area: bottom span-all;
	top: 0.5em;

	&:popover-open {
		opacity: 1;
	}
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}