@mixin overlay-processing-style($additionalSelector, $contentFontSize: inherit, $contentPadding: inherit) {
  .overlay.#{$additionalSelector} {
    background: rgba(255,255,255,0.5);

    .overlay-content {
      background: rgba(200,200,200,0.5);
      color: #444;
      font-size: $contentFontSize;
      padding: $contentPadding;
    }
  }
}

// overlay in .editor-container
.editor-container {
  .overlay {
    // layout
    display: flex;
    justify-content: center;
    align-items: center;

    position: absolute;
    z-index: 7;  // forward than .CodeMirror-vscrollbar
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    .overlay-content {
      padding: 0.5em;
    }
  }

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

}