@mixin variable-font-size($basesize) {
  font-size: $basesize;
  @media(max-width: $screen-lg) {
    font-size: #{$basesize * 0.9};
  }
  @media(max-width: $screen-md) {
    font-size: #{$basesize * 0.8};
  }
  @media(max-width: $screen-sm) {
    font-size: #{$basesize * 0.7};
  }
  @media(max-width: $screen-xs) {
    font-size: #{$basesize * 0.6};
  }
}

@mixin expand-editor($header-plus-footer) {
  $header-plus-footer: $header-plus-footer + 2px;   // add .main padding-top
  $editor-margin: $header-plus-footer
                  + 25px        // add .btn-open-dropzone height
                  + 30px;       // add .navbar-editor height

  .main {
    width: 100%;
    height: 100vh;
    margin-top: 0px !important;
    padding-top: 2px;
    padding-left: 0;
    padding-right: 0;

    &,
    .content-main,
    .tab-content {
      display: flex;
      flex-direction: column;
      flex: 1;

      .tab-pane#edit, .tab-pane#hackmd {
        min-height: calc(100vh - #{$header-plus-footer});   // for IE11
        height: calc(100vh - #{$header-plus-footer});
      }

      #page-editor {
        // right(preview)
        &,
        &>.row,
        .page-editor-preview-container,
        .page-editor-preview-body {
          min-height: calc(100vh - #{$header-plus-footer});   // for IE11
          height: calc(100vh - #{$header-plus-footer});
        }

        .navbar-editor {
          button {
            padding: 7px 8px;
            line-height: 1;
          }

          img {
            vertical-align: bottom;
          }
        }

        // left(editor)
        .page-editor-editor-container {
          min-height: calc(100vh - #{$header-plus-footer});   // for IE11
          height: calc(100vh - #{$header-plus-footer});

          .react-codemirror2, .CodeMirror, .CodeMirror-scroll,
          .textarea-editor {
            height: calc(100vh - #{$editor-margin});
          }

          @media (min-width: $screen-md) {
            padding-right: 0;
          }
        }
      }

      #page-editor-with-hackmd {
        &,
        .hackmd-preinit, #iframe-hackmd-container > iframe {
          width: 100vw;
          min-height: calc(100vh - #{$header-plus-footer});   // for IE11
          height: calc(100vh - #{$header-plus-footer});
        }
      }
    }
  }
}
