/* Prep our code blocks to host the copy button */
pre[id*='code-block-']:has(code) {
  position: relative;
  padding: 0;
  white-space: normal;

  & code {
    display: block;
    font-size: 1em;
    background-color: transparent;
    padding: var(--wa-space-m);
    white-space: pre;
    overflow-x: auto;
  }
}

wa-copy-button.copy-button {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-family: var(--wa-font-family-body);
  font-size: var(--wa-font-size-m);
  color: white;
  border-radius: var(--wa-border-radius-m);

  &::part(button) {
    aspect-ratio: 1;
    background-color: var(--wa-color-neutral-20);
    cursor: copy;
  }

  @media (hover: hover) {
    &:hover {
      &::part(button) {
        background-color: var(--wa-color-neutral-30);
      }
    }
  }

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

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

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