/* stylelint-disable no-duplicate-selectors */
/* stylelint-disable no-descending-specificity */
/* stylelint-disable font-family-no-missing-generic-family-keyword */
/* stylelint-disable declaration-property-value-disallowed-list */
/* stylelint-disable scss/selector-no-redundant-nesting-selector */
/* stylelint-disable order/properties-alphabetical-order */
@mixin gfm-code-base-styles($background: #f6f8fa, $background-dark: #242e34, $text: inherit) {
  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;
    word-wrap: normal;
  }

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

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

  pre > code {
    background: 0 0;
    border: 0;
    font-size: 100%;
    margin: 0;
    padding: 0;
    white-space: pre;
    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: 85%;
    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;
  }

  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 copy-code-button {
  button.rdmd-code-copy {
    appearance: unset;
    background: inherit;
    background: var(--md-code-background, inherit);
    border: none;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(#aaa, 0.66), -1px 2px 6px -3px rgba(black, 0.1);
    color: inherit;
    color: var(--md-code-text, inherit);
    cursor: copy;
    display: none !important; // hide by default
    font: inherit;
    margin: 0.5em 0.6em 0 0;
    outline: none !important;
    padding: 0.25em 0.7em;
    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, 17.5%);

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

    &::before,
    &::after {
      display: inline-block;
      font: normal normal normal 1em/1 'Font Awesome 5 Free', FontAwesome;
      font-family: ReadMe-Icons;
      font-feature-settings: 'liga';
      font-variant-ligatures: discretionary-ligatures;
      line-height: 2;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
    }

    &::before {
      content: '\e6c9';
      font-weight: 800;
      transition: 0.3s 0.15s ease;
    }

    &::after {
      // @todo why are these !important @rafe, you dumbell?
      content: '\e942' !important;
      font-weight: 900 !important;
      left: 50%;
      opacity: 0 !important;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%) scale(0.33);
      transition: 0.3s 0s ease;
    }

    &_copied {
      pointer-events: none;

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

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

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

  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) {
        opacity: 0 !important;
      }
    }
  }
}

.markdown-body {
  // --md-code-background: #F6F8FA;
  @include gfm-code-base-styles;
  @include copy-code-button;
}