@mixin overlay-processing-style($additionalSelector, $contentFontSize: inherit, $contentPadding: inherit) {
  .overlay.#{$additionalSelector} {
    background: rgba(255, 255, 255, 0.5);
    .overlay-content {
      padding: $contentPadding;
      font-size: $contentFontSize;
      color: #444;
      background: rgba(200, 200, 200, 0.5);
    }
  }
}

// overlay in .editor-container
.editor-container {
  .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 7; // forward than .CodeMirror-vscrollbar
    display: flex;
    align-items: center;
    justify-content: center;
  }

  // loading keymap
  @include overlay-processing-style(overlay-loading-keymap, 2.5em, 0.3em);

  // cheat sheat
  .overlay.overlay-gfm-cheatsheet {
    align-items: flex-end;
    justify-content: flex-end;

    pointer-events: none;

    .panel.gfm-cheatsheet {
      box-shadow: unset;
      opacity: 0.6;
      .panel-body {
        min-width: 30em;
        font-family: monospace;
        color: $text-muted;
      }
      ul > li {
        list-style: none;
      }
    }

    .gfm-cheatsheet-modal-link {
      color: $text-muted;
      pointer-events: all;
      cursor: pointer;

      opacity: 0.6;

      &:hover,
      &:focus {
        opacity: 1;
      }
    }

    // hide on smartphone
    @media (max-width: $screen-xs) {
      display: none;
    }
  }
}

.modal-gfm-cheatsheet .modal-body {
  .hljs {
    font-family: $font-family-monospace;
  }
}