.dropzone-container {
  .overlay {
    // layout
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 15px;
  }

  .overlay-content {
    padding: 0.5em;
  }

  .page-editor-editor-container {
    .overlay-content {
      font-size: 2.5em;
    }
  }

  .comment-form {
    .overlay {
      // style
      margin-right: 15px;
      margin-top: 55px;
      margin-bottom: 55px;
    }
    .overlay-content {
      font-size: 1.8em;
    }
  }


  @mixin overlay-processing-style() {
    .overlay {
      background: rgba(255,255,255,0.5);
    }
    .overlay-content {
      padding: 0.3em;
      background: rgba(200,200,200,0.5);
      color: #444;
    }
  }
  // add icon on cursor
  .autoformat-markdown-table-activated .CodeMirror-cursor {
    &:after {
      font-family: 'FontAwesome';
      content: '\f0ce';
    }
  }

  // for Dropzone
  .dropzone {
    @mixin insertSimpleLineIcons($code) {
      &:before {
        margin-right: 0.2em;
        font-family: 'simple-line-icons';
        content: $code;
      }
    }

    // unuploadable or rejected
    &.dropzone-unuploadable, &.dropzone-rejected {
      .overlay {
        background: rgba(200,200,200,0.8);
      }
      .overlay-content {
        color: #444;
      }
    }
    // uploading
    &.dropzone-uploading {
      @include overlay-processing-style();
    }

    // unuploadable
    &.dropzone-unuploadable {
      .overlay-content {
        // insert content
        @include insertSimpleLineIcons("\e617");  // icon-exclamation
        &:after {
          content: "File uploading is disabled";
        }
      }
    }
    // uploadable
    &.dropzone-uploadable {
      // accepted
      &.dropzone-accepted:not(.dropzone-rejected) {
        .overlay {
          border: 4px dashed #ccc;
        }
        .overlay-content {
          // insert content
          @include insertSimpleLineIcons("\e084");  // icon-cloud-upload
          &:after {
            content: "Drop here to upload";
          }
          // style
          color: #666;
          background: rgba(200,200,200,0.8);
        }
      }
      // file type mismatch
      &.dropzone-rejected:not(.dropzone-uploadablefile) .overlay-content {
        // insert content
        @include insertSimpleLineIcons("\e032");  // icon-picture
        &:after {
          content: "Only an image file is allowed";
        }
      }
      // multiple files
      &.dropzone-accepted.dropzone-rejected .overlay-content {
        // insert content
        @include insertSimpleLineIcons("\e617");  // icon-exclamation
        &:after {
          content: "Only 1 file is allowed";
        }
      }
    }
  } // end of.dropzone

  .textarea-editor {
    border: none;
    font-family: monospace;
  }

  .loading-keymap {
    @include overlay-processing-style();
  }
}