:root {
  --vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%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");
  --vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%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");
}

:root {
  --vp-code-copy-code-border-color: #e2e2e3;
  --vp-code-copy-code-bg: #f6f6f7;
  --vp-code-copy-code-hover-border-color: #e2e2e3;
  --vp-code-copy-code-hover-bg: #fff;
  --vp-code-copy-code-active-text: rgba(60, 60, 67, 0.78);
  --vp-code-copy-copied-text-content: "Copied";
}

html[lang="zh-CN"] {
  --vp-code-copy-copied-text-content: "已复制";
}

.dark {
  --vp-code-copy-code-border-color: #2e2e32;
  --vp-code-copy-code-bg: #202127;
  --vp-code-copy-code-hover-bg: #1b1b1f;
  --vp-code-copy-code-hover-border-color: #2e2e32;
  --vp-code-copy-code-active-text: rgba(235, 235, 245, 0.6);
}

.copy-code-button {
  position: absolute;
  top: 12px;

  /* rtl:ignore */
  right: 12px;
  z-index: 3;
  width: 40px;
  height: 40px;
  cursor: pointer;
  background-color: var(--vp-code-copy-code-bg);
  background-image: var(--vp-icon-copy);
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 20px;
  border: 1px solid var(--vp-code-copy-code-border-color);
  border-radius: 4px;
  opacity: 0;
  transition:
    border-color 0.25s,
    background-color 0.25s,
    opacity 0.25s;

  /* rtl:ignore */
  direction: ltr;
}

[class*="language-"]:hover > .copy-code-button,
[class*="language-"] > .copy-code-button:focus,
[class*="language-"] > .copy-code-button.copied {
  opacity: 1;
}

[class*="language-"] > .copy-code-button:hover,
[class*="language-"] > .copy-code-button.copied {
  background-color: var(--vp-code-copy-code-hover-bg);
  border-color: var(--vp-code-copy-code-hover-border-color);
}

[class*="language-"] > .copy-code-button.copied,
[class*="language-"] > .copy-code-button:hover.copied {
  background-color: var(--vp-code-copy-code-hover-bg);
  background-image: var(--vp-icon-copied);

  /* rtl:ignore */
  border-radius: 0 4px 4px 0;
}

[class*="language-"] > .copy-code-button.copied::before,
[class*="language-"] > .copy-code-button:hover.copied::before {
  position: relative;
  top: -1px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: 40px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--vp-code-copy-code-active-text);
  text-align: center;
  white-space: nowrap;
  content: var(--vp-code-copy-copied-text-content);
  background-color: var(--vp-code-copy-code-hover-bg);
  border: 1px solid var(--vp-code-copy-code-hover-border-color);

  /* rtl:ignore */
  border-right: 0;
  border-radius: 4px 0 0 4px;

  /* rtl:ignore */
  transform: translateX(calc(-100% - 1px));
}
