/*
  *= require_tree ./editor
  *= require ./console
*/

.codesync-editor {
  height: 400px;
  width: 100%;
  margin: 0px;
  padding: 0px;
  position: relative;
  z-index: 0;

  .document-tabs-container {
    position: absolute;
    width: 100%;
  }

  .codesync-asset-editor {
    z-index: 90;
    margin: 0px auto;
    width: 100%;
    position: absolute;
    .CodeMirror {
      height: 375px;
    }
  }

  .toolbar-wrapper {
    position: absolute;
    z-index: 9000;
    color: #fff;
    top: 10px;
    right: 10px;

    .config-select {
      float: right;
      margin-top: -4px;
    }

    .button {
      float: left;
      margin: 0px 4px;
      cursor: pointer;
      border-radius: 3px;
      border: 1px solid #a3a3a3;
      font-size: 12px;
      line-height: 18px;
      padding: 0px 4px;
    }
  }

  .status-message {
    position: absolute;
    top: 50%;
    width: 50%;
    margin: 0px auto;
    z-index: 8000;
    padding: 6px;
    border-radius: 3px;
    box-shadow: 0 0 3px #fff;
    color: #fff;
    &.error {
      background-color: rgba(235,90,90,0.3);
    }
    &.success {
      background-color: rgba(90,235,90,0.3);
    }
  }

}

.codesync-editor.top-positioned[data-visible] {
  .codesync-asset-editor {
    box-shadow: 0px 4px 6px rgba(0,0,0,0.8);
  }
}

.codesync-editor.top-positioned, .codesync-editor.bottom-positioned {
  position: fixed;
  z-index: 30000;
  width: 100%;
}

.codesync-editor.top-positioned {
  border-radius: 0px 0px 4px 4px;
  bottom: auto;
  top: 0px;

  .codesync-asset-editor {
    top: 0px;
    bottom: auto;
  }

  .document-tabs-container {
    top: auto;
    bottom: -8px;

    .document-tab {
      border-radius: 0px 0px 4px 4px;
    }
  }
}

.codesync-editor.bottom-positioned {
  border-radius: 4px 4px 0px 0px;
  bottom: 0px;
  top: auto;

  .codesync-asset-editor {
    top: 26px;
  }

  .document-tabs-container {
    top: 0px;
    bottom: auto;

    .document-tab {
      border-radius: 4px 4px 0px 0px;
    }
  }
}

// support for the light theme
.codesync-editor[data-theme="xq-light"] {
  .toolbar-wrapper {
    .button {
      background-color: #777;
      color: #ffffff;
    }
  }
  .document-tabs-container {
    .document-tab {
      background-color: #fff;
      color: #777;
    }
  }
  .status-message.error {
    color: lighten(red,20);
  }
}