/* The icon button in the top right of an /mcp code block (copy_controller.js) */
.mcp-codeblock--copy {
  position: relative;

  & .mcp-codeblock-pre { padding-right: var(--spacing-32); }
}

.mcp-copy-button {
  position: absolute;
  top: var(--spacing-8);
  right: var(--spacing-8);
  display: inline-flex;
  padding: var(--spacing-4);
  border-radius: var(--corner-radius-xs);
  color: var(--text-tertiary);
  border: 0;
  background-color: var(--background-surface-2); /* covers code scrolled beneath it */
  cursor: pointer;

  &:hover, &:focus-visible {
    color: var(--text-primary);
    background-color: var(--background-hover);
  }
}

.mcp-copy-icon,
.mcp-copy-icon-done {
  width: var(--spacing-16);
  height: var(--spacing-16);
}

.mcp-copy-icon-done { display: none; }
.mcp-copy-button.is-copied {
  color: var(--text-primary);

  & .mcp-copy-icon { display: none; }
  & .mcp-copy-icon-done { display: block; }
}