@use '~/styles/mixins' as ms;
@use '~/styles/bootstrap/init' as bs;
@use './page-editor-inheritance';


.editor-container :global {
  // overlay in .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 ms.overlay-processing-style(overlay-loading-keymap, 2.5em, 0.3em);

  // for Dropzone
  .dropzone {
    position: relative; // against .overlay position: absolute

    @include ms.overlay-processing-style(overlay-dropzone-active, 2.5em, 0.5em);

    // unuploadable or rejected
    &.dropzone-unuploadable,
    &.dropzone-rejected {
      .overlay.overlay-dropzone-active {
        background: rgba(200, 200, 200, 0.8);

        .overlay-content {
          color: bs.$gray-300;
        }
      }
    }

    // uploading
    &.dropzone-uploading {
      @include ms.overlay-processing-style(overlay-dropzone-active, 2.5em, 0.5em);
    }

    // unuploadable
    &.dropzone-unuploadable {
      .overlay.overlay-dropzone-active {
        .overlay-content {
          // insert content
          @include ms.insertSimpleLineIcons('\e617'); // icon-exclamation

          &:after {
            content: 'File uploading is disabled';
          }
        }
      }
    }

    // uploadable
    &.dropzone-uploadable {
      // accepted
      &.dropzone-accepted:not(.dropzone-rejected) {
        .overlay.overlay-dropzone-active {
          border: 4px dashed bs.$gray-300;

          .overlay-content {
            // insert content
            @include ms.insertSimpleLineIcons('\e084'); // icon-cloud-upload

            &:after {
              content: 'Drop here to upload';
            }

            // style
            color: bs.$secondary;
            background: rgba(200, 200, 200, 0.8);
          }
        }
      }

      // file type mismatch
      &.dropzone-rejected:not(.dropzone-uploadablefile) {
        .overlay.overlay-dropzone-active {
          .overlay-content {
            // insert content
            @include ms.insertSimpleLineIcons('\e032'); // icon-picture

            &:after {
              content: 'Only an image file is allowed';
            }
          }
        }
      }

      // multiple files
      &.dropzone-accepted.dropzone-rejected {
        .overlay.overlay-dropzone-active {
          .overlay-content {
            // insert content
            @include ms.insertSimpleLineIcons('\e617'); // icon-exclamation

            &:after {
              content: 'Only 1 file is allowed';
            }
          }
        }
      }
    }

    /* end of.dropzone */
  }

  .btn.btn-open-dropzone {
    z-index: 2;
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: small;
    border: none;
    border-top: 1px dotted bs.$gray-300;
    border-bottom: none;

    &:hover,
    &:focus {
      border-bottom: none;
    }
  }

  // for Navbar editor
  .navbar-editor {
    height: page-editor-inheritance.$navbar-editor-height;
    padding: 0;

    border-bottom: 1px solid transparent;

    li {
      display: inline-block;
      i {
        font-size: 16px;
      }
    }

    button {
      padding: 0px;
      margin: 0 2px;
      font-size: 1rem;
      line-height: 1;
      background-color: transparent;
      border: none;
    }

    img {
      vertical-align: bottom;
    }
  }
}