.copy-code-button,
.copy-code-label {
  display: none;
}

:root {
  --copy-code-icon-size: 28px;

  @media (width >= 768px) {
    --copy-code-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='rgba(96,88,55,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M17 17h1l3-3V6l-3-3h-8a5 5 0 0 0-3 4m10 10v-7l-3-3H7m10 10v1l-3 3H6l-3-3v-8a5 5 0 0 1 4-3' /%3E%3C/svg%3E");
    --copy-code-copied-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='28' width='28' stroke='rgba(96,88,55,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M17 17h1l3-3V6l-3-3h-8a5 5 0 0 0-3 4m10 10v-7l-3-3H7m10 10v1l-3 3H6l-3-3v-8a5 5 0 0 1 4-3m0 7 2 2 4-4' /%3E%3C/svg%3E");
  }
}

@media (width >= 768px) {
  :root[data-theme='dark'] {
    --copy-code-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='rgba(198,191,154,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M17 17h1l3-3V6l-3-3h-8a5 5 0 0 0-3 4m10 10v-7l-3-3H7m10 10v1l-3 3H6l-3-3v-8a5 5 0 0 1 4-3' /%3E%3C/svg%3E");
    --copy-code-copied-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='28' width='28' stroke='rgba(198,191,154,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M17 17h1l3-3V6l-3-3h-8a5 5 0 0 0-3 4m10 10v-7l-3-3H7m10 10v1l-3 3H6l-3-3v-8a5 5 0 0 1 4-3m0 7 2 2 4-4' /%3E%3C/svg%3E");
  }

  .copy-code-label {
    position: absolute;
    inset-block-start: var(--space-xs);
    inset-inline-end: var(--space-m);
    display: flex;
    font: var(--font-2xs);
    color: var(--color-content-secondary);
    user-select: none;
    opacity: 100%;
    transition: opacity 250ms ease-in-out 250ms;
  }

  .copy-code-button {
    position: absolute;
    inset-block-start: var(--space-xs);
    inset-inline-end: var(--space-m);
    z-index: 1;
    display: flex;
    inline-size: var(--copy-code-icon-size);
    block-size: var(--copy-code-icon-size);
    padding: calc(var(--space-m) + var(--space-2xs));
    cursor: pointer;
    outline: none;
    background-color: var(--color-background-primary);
    background-image: var(--copy-code-icon);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: var(--copy-code-icon-size);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--border-radius);
    opacity: 0%;
    transition: all 250ms ease-in-out 0ms;

    @media (hover: hover) {
      &:hover {
        background-color: var(--color-background-primary-hover);
      }
    }

    &:focus-visible {
      box-shadow: 0 0 0 2px var(--color-border-brand);
      opacity: 100%;

      & + .copy-code-label {
        opacity: 0%;
        transition: none;
      }
    }
  }

  .copy-code-wrapper {
    position: relative;

    @media (hover: hover) {
      &:hover {
        .copy-code-button {
          opacity: 100%;
          transition: opacity 250ms ease-in-out 250ms;
        }

        .copy-code-label {
          visibility: hidden;
          opacity: 0%;
          transition: opacity 250ms ease-in-out 0ms;
        }
      }
    }
  }

  .copy-code-button-copied {
    background-image: var(--copy-code-copied-icon);
  }

  pre {
    display: flex;
    place-items: center;
    min-block-size: calc(
      var(--copy-code-icon-size) + calc(var(--space-m) + var(--space-2xs)) * 2
    );
  }
}
