pre:has(> code),
.editor {
  position: relative;
  &:hover,
  &:focus-within {
    & .copy-button {
      opacity: 0.3;
    }
  }
}

.copy-button {
  align-items: center;
  background: none;
  border-color: var(--fg);
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  color: var(--fg);
  cursor: pointer;
  display: inline-flex;
  font-size: 1rem;
  font-weight: normal;
  gap: 0.4em;
  letter-spacing: normal;
  line-height: normal;
  opacity: 0;
  padding-block: 0.3em;
  padding-inline: 0.3em;
  padding: 0.5em 1em;
  position: absolute;
  right: clamp(0.875rem, 0.8487rem + 0.1316vi, 0.9375rem);
  text-decoration: none;
  text-transform: uppercase;
  top: clamp(0.5625rem, 0.5362rem + 0.1316vi, 0.625rem);
  transition-duration: 300ms;
  white-space: nowrap;

  &:hover {
    border-color: var(--footnote-highlight);
    color: var(--footnote-highlight);
  }

  &:hover,
  &:focus {
    opacity: 1 !important;
  }

  &[aria-pressed='true'] {
    background-color: var(--bg);
    border-color: var(--bg);
    color: var(--fg);
    display: block;
    opacity: 1;
  }
}