.mq-editable-field {
  .inline-block;
  .mq-cursor {
    border-left: 1px solid black;
    margin-left: -1px;
    position: relative;
    z-index: 1;
    padding: 0;
    .inline-block;

    &.mq-blink { visibility: hidden; }
  }
  // This is a workaround to override the
  // styles on .mq-math-mode *.
  // TODO: figure out a better way.
  &, .mq-math-mode & {
    border: 1px solid gray;

    &.mq-focused {
      .box-shadow(~"#8bd 0 0 1px 2px, inset #6ae 0 0 2px 0");
      border-color: #709AC0;
      border-radius: 1px;
    }
  }
// special styles for editables within static math
  .mq-math-mode & {
    margin: 1px;
  }

  ////
  // command input with \
  .mq-latex-command-input {
    color: inherit;
    font-family: @mono;
    border: 1px solid gray;
    padding-right: 1px;
    margin-right: 1px;
    margin-left: 2px;

    &.mq-empty {
      background: transparent;
    }

    // TODO: dasherize has-cursor
    &.mq-hasCursor {
      border-color: ActiveBorder;
    }
  }
}

// Keeps blocks from collapsing to zero width/height
// when empty by inserting invisible text.
// TODO: find a way to unify the three concepts below.
.mq-editable-field.mq-empty:after,
.mq-editable-field.mq-text-mode:after,
.mq-math-mode .mq-empty:after {
  visibility: hidden;
  content: 'c';
}

// separated from above because unrecognized pseudoclasses
// invalidate the entire selector
.mq-editable-field .mq-cursor:only-child:after,
.mq-editable-field .mq-textarea+.mq-cursor:last-child:after {
  visibility: hidden;
  content: 'c';
}

.mq-editable-field .mq-text-mode .mq-cursor:only-child:after {
  content: '';
}

.mq-editable-field.mq-text-mode {
  overflow-x: auto;

  // so IE8 won't show a vertical scrollbar
  overflow-y: hidden;
}