.hljs-copy-wrapper {
    position: relative;
    overflow: hidden;
}

.hljs-copy-container {
    position: absolute;
    top: 0;
    right: 0;
}

.hljs-copy-button {
    position: relative;
    margin-top: 0.3em;
    margin-right: 0.6em;
    width: 24px;
    height: 24px;
    font-size: 0.8125rem;
    text-indent: -9999px;
    color: #373441;
    border-radius: 0rem;
    border: 0px solid;
    background-color: transparent;
    transition: none;
    overflow: hidden;
}

.hljs-copy-button:not([data-copied="true"])::before {
    content: "";
    width: 1rem;
    height: 1rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    background-color: currentColor;
    mask: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-copy" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z"/> </svg>');
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center center;
}

.hljs-copy-button:hover {
    color: #E2B2EB;
}

.hljs-copy-button:active {
    color: #DDDDED;
}

.hljs-copy-button[data-copied="true"] {
    text-indent: 0;
    width: auto;
}

.hljs-copy-wrapper:focus-within .hljs-copy-container {
    transition: none;
    /* transform: translateX(0); */
}

.hljs-copy-wrapper:hover .hljs-copy-container {
    /* transform: translateX(0); */
}

.hljs-copy-alert {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}