// Bootstrap has to be outside of our :global as it defines its own globals
@import "~bootstrap/less/bootstrap.less";

:global {
  @import "./caret.less";
  @import "./buttons.less";
  @import "./react-select.less";
  @import "palette.less";
  @import "fontawesome.less";
  @import "fonts.less";
  @import "mms-icons.less";

  // Configuration
  @import "./palette.less";
  @sidebar-width: 250px;

  // Tweaks to bootstrap
  @import "./message-background.less";

  html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    font-family: "Akzidenz", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: @gray1;
    -webkit-font-smoothing: antialiased;
  }

  * {
    user-select: text;
    -webkit-user-select: text;
  }
  // disable highlighting for most of the schema and document viewers
  .schema-field-list *, .document-list * {
    user-select: none;
    -webkit-user-select: none;
  }
  // re-enable field names and individual documents
  .schema-field-name > span, .document-property-body * {
    user-select: text;
    -webkit-user-select: text;
  }

  // make all help buttons consistent
  i.help,
  i.syntax-help {
    .fa-icon;
    margin: 0 5px;
    cursor: pointer;
    color: @gray5;

    &:hover {
      color: @alertOrange;
    }
    &:before {
      content: @fa-var-info-circle;
    }
  }

  .input-group.has-error {
    i.syntax-help {
      color: #a94442; // same color as bootstrap validation error borders
    }
  }

  //action-bar, just a drop-shadow for now but should think about where to put these styles eventually
  .action-bar {
    height: 32px;
    background: @gray8;
    border-bottom: 1px solid @gray7;
    padding-top: 4px;
    padding-left: 15px;
  }
}