@mixin gfmCodeBaseStyles($background: #f6f8fa, $background-dark: #242e34, $text: inherit) {
  --font-size: 90%;

  code,
  kbd,
  pre {
    font-family:
      SFMono-Regular,
      Consolas,
      Liberation Mono,
      Menlo,
      Courier,
      monospace;
    font-family: var(--md-code-font, SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace);
    font-size: 1em;
  }

  code,
  pre {
    font-size: 12px;
  }

  pre {
    margin-bottom: 0;
    margin-top: 0;
  }

  code {
    background-color: $background;
    background-color: var(--md-code-background, $background);
    border-radius: 3px;
    color: var(--md-code-text);
    font-size: var(--font-size);
    margin: 0;
    padding: 0.2em 0.4em;

    > div[class*='cm-'] {
      display: inherit;
    }
  }

  pre {
    word-wrap: normal;
  }

  pre > code {
    background: 0 0;
    border: 0;
    font-size: 100%;
    margin: 0;
    padding: 0;
    text-wrap: wrap;
    white-space: pre-wrap;
    word-break: normal;
  }

  pre {
    background-color: $background;
    background-color: var(--md-code-background, $background);
    color: $text;
    color: var(--md-code-text, $text);
    border-radius: 3px;
    border-radius: var(--markdown-radius, 3px);
    border-radius: var(--md-code-radius, var(--markdown-radius, 3px));
    font-size: var(--font-size);
    line-height: 1.45;
    overflow: auto;
    padding: 1em;
  }

  pre code.theme-dark {
    background-color: $background-dark;
    background-color: var(--md-code-background, $background-dark);
  }

  pre code {
    background-color: transparent;
    border: 0;
    display: inline;
    line-height: inherit;
    margin: 0;
    max-width: auto;
    overflow: visible;
    padding: 0;
    word-wrap: normal;
  }

  pre.mermaid {
    &_single {
      background: none;
    }
  }

  kbd {
    background-color: $background;
    background-color: var(--d-code-background, $background);
    border: 1px solid #d1d5da;
    border-bottom-color: #c6cbd1;
    border-radius: 3px;
    box-shadow: inset 0 -1px 0 #c6cbd1;
    color: #444d56;
    display: inline-block;
    font-size: 11px;
    line-height: 10px;
    padding: 3px 5px;
    vertical-align: middle;
  }
}

@mixin copyCodeButton {
  button.rdmd-code-copy {
    display: none !important; // hide by default

    & {
      -webkit-appearance: unset;
      margin: 0.5em 0.6em 0 0;
      padding: 0.25em 0.7em;
      cursor: copy;
      color: inherit;
      color: var(--md-code-text, inherit);
      border: none;
      border-radius: 3px;
      outline: none !important;
      background: inherit;
      background: var(--md-code-background, inherit);
      box-shadow:
        inset 0 0 0 1px rgba(#aaa, 0.66),
        -1px 2px 6px -3px rgba(black, 0.1);
      transition: 0.15s ease-out;
    }

    &:not(:hover) {
      &:before,
      &:after {
        opacity: 0.66;
      }
    }

    &:hover {
      &:not(:active) {
        box-shadow:
          inset 0 0 0 1px rgba(#8b8b8b, 0.75),
          -1px 2px 6px -3px rgba(black, 0.2);
      }
    }

    &:active {
      box-shadow:
        inset 0 0 0 1px rgba(#8b8b8b, 0.5),
        inset 1px 4px 6px -2px rgba(0, 0, 0, 0.175);

      &:before,
      &:after {
        opacity: 0.75;
      }
    }

    &:before,
    &:after {
      display: inline-block;
      font-family: 'Font Awesome 6 Pro';
    }

    &:before {
      content: '\f24d';
      transition: 0.3s 0.15s ease;
    }

    &:after {
      content: '\f00c';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.33);
      opacity: 0 !important;
      transition: 0.3s 0s ease;
    }

    &_copied {
      pointer-events: none;

      &,
      * {
        color: green !important;
        color: var(--md-code-text, green) !important;
        opacity: 1;
      }

      &:before {
        transition: 0.3s 0s ease;
        transform: scale(0.33);
        opacity: 0 !important;
      }

      &:after {
        transition: 0.3s 0.15s ease;
        transform: translate(-50%, -50%) scale(1);
        opacity: 1 !important;
      }
    }
  }

  pre {
    position: relative;

    > code {
      background: inherit;
    }

    > code.theme-dark {
      color: white;
    }

    button.rdmd-code-copy {
      display: inline-block !important;
      position: absolute;
      right: 0;
      top: 0;
    }

    // manage overflow scrolling
    & {
      overflow: hidden;
      padding: 0;

      > code {
        display: block !important;
        overflow: auto;
        padding: 1em;
        max-height: 90vh;
      }
    }

    // manage copied state style
    & {
      &:hover button.rdmd-code-copy:not(:hover) {
        transition-delay: 0.4s;
      }

      &:not(:hover) button.rdmd-code-copy:not(.rdmd-code-copy_copied):not(:focus) {
        opacity: 0 !important;
      }
    }
  }
}

.markdown-body {
  // --md-code-background: #F6F8FA;
  @include gfmCodeBaseStyles;
  @include copyCodeButton;
}