:root {
  --code-copy-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2' /%3e%3c/svg%3e");
  --code-copied-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4' /%3e%3c/svg%3e");
  --copy-code-color: var(--code-c-line-number, #9e9e9e);
  --copy-code-hover: var(--code-highlight-bg-color, rgb(0 0 0 / 50%));
}

.vp-copy-code-button {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  z-index: 5;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-width: 0;
  border-radius: 0.5rem;
  background: transparent;
  outline: none;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.4s;
}
@media print {
  .vp-copy-code-button {
    display: none;
  }
}
.vp-copy-code-button::before {
  content: "";
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0.625rem;
  background: currentcolor;
  color: var(--copy-code-color);
  font-size: 1.25rem;
  -webkit-mask-image: var(--code-copy-icon);
  mask-image: var(--code-copy-icon);
  -webkit-mask-position: 50%;
  mask-position: 50%;
  -webkit-mask-size: 1em;
  mask-size: 1em;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.vp-copy-code-button:focus, .vp-copy-code-button.copied {
  opacity: 1;
}
.vp-copy-code-button:hover, .vp-copy-code-button.copied {
  background: var(--copy-code-hover);
}
.vp-copy-code-button.copied::before {
  -webkit-mask-image: var(--code-copied-icon);
  mask-image: var(--code-copied-icon);
}
.vp-copy-code-button.copied::after {
  content: attr(data-copied);
  position: absolute;
  top: 0;
  right: calc(100% + 0.25rem);
  display: block;
  height: 1.25rem;
  padding: 0.625rem;
  border-radius: 0.5rem;
  background: var(--copy-code-hover);
  color: var(--copy-code-color);
  font-weight: 500;
  line-height: 1.25rem;
  white-space: nowrap;
}
.copy-code-disabled .vp-copy-code-button {
  display: none;
}

body:not(.copy-code-disabled) div[class*=language-]:hover::before {
  display: none;
}
body:not(.copy-code-disabled) div[class*=language-]:hover .vp-copy-code-button {
  opacity: 1;
}