// packages imported from node_modules are prefixed with ~
@import "~angular-ui-layout/src/ui-layout.css";
@import "~jsonformatter/dist/json-formatter.css";
@import "~json-schema-view-js/dist/style.css";
@import "~bootstrap/less/bootstrap.less";
@import "~font-awesome/less/font-awesome.less";
@import "~source-code-pro/source-code-pro.css";
@import "~open-sans-fontface/open-sans.less";

@import "./fonts";
@import "./buttons";
@import "./components";
@import "./markdown";
@import "./print";
@import "./colors";

@splitter-width: 4px;

html, body {
  height: 100%;
  font-family: sans-serif;
}

/*
  Layout
*/
main {
  position: fixed;
  top: 30px;
  bottom: 0;
  right: 0;
  left: 0;

  .ui-layout-column .ui-splitbar {
    background: @main-splitbar;
    
    /* IE10 fixes*/
    display: -ms-flexbox;
    -ms-flex-pack: center;
    -ms-flex-direction: column;
  }

  .pane.editor {
    >div, .editor-wrapper {
      height: 100%;
    }
  }

  &.preview-wrapper, .preview-wrapper {
    overflow: auto;
    margin: .5em 1em;
  }

  &.dragover {
    .file-drag {
      display: flex;
    }
  }

  .file-drag {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: lightgray;
    z-index: 10000;
    align-items: center;

    .dash {
      border: 10px dashed @dragover-dash;
      border-radius: 30px;
      width: 60%;
      height: 40%;
      margin: auto;
      display: flex;

      p {
        margin: auto;
        font-size: 50px;
        font-weight: 100;
      }
    }
  }
}

/*
 Reset
*/
a {
  cursor: pointer;
}