webawesome/docs/assets/styles/copy-code.css

wa-copy-button.copy-button {
  --background-color: var(--wa-color-gray-20);
  --background-color-hover: color-mix(in oklab, var(--background-color), white 5%);
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  font-family: var(--wa-font-family-body);
  color: var(--wa-color-gray-80);
  border-radius: var(--wa-border-radius-m);
  padding: 0.25rem;

  &:hover {
    color: white;
  }

  &:focus-visible {
    outline: var(--wa-focus-ring);
  }
}

@media (hover: hover) {
  .copy-button:not(:focus-within) {
    opacity: 0;
  }

  pre:hover > .copy-button {
    opacity: 1;
  }
}

.block-link-icon {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: calc(100% + var(--wa-space-s));

  transition: var(--wa-transition-slow);

  &:not(:hover, :focus) {
    opacity: 50%;
  }

  :not(:hover, :focus-within) > & {
    opacity: 0;
  }
}