.gf-code-editor {
  min-height: 36px;
  min-width: 280px;
  flex-grow: 1;
  margin-right: $space-xs;

  &.ace_editor {
    @include font-family-monospace();
    font-size: $font-size-md;
    min-height: 50px; // Include space for horizontal scrollbar

    @include border-radius($input-border-radius);
    border: $border-width solid $input-border-color;
  }

  .ace_content {
    z-index: 0;
  }
}

.ace_editor.ace_autocomplete {
  @include font-family-monospace();
  font-size: $font-size-md;

  // Ace editor adds <style> tag at the end of <head>, after grafana.css, so !important
  // is used for overriding styles with the same CSS specificity.
  background-color: $dropdownBackground !important;
  color: $dropdownLinkColor !important;
  border: 1px solid $dropdownBorder !important;
  width: 550px !important;

  .ace_scroller {
    .ace_selected,
    .ace_active-line,
    .ace_line-hover {
      color: $dropdownLinkColorHover;
      background-color: $dropdownLinkBackgroundHover !important;
    }

    .ace_line-hover {
      border-color: transparent;
    }

    .ace_completion-highlight {
      color: $yellow;
    }

    .ace_rightAlignedText {
      color: $text-muted;
      z-index: 0;
    }
  }
}

$doc-font-size: $font-size-sm;

.ace_tooltip.ace_doc-tooltip {
  @include font-family-monospace();
  font-size: $doc-font-size;

  background-color: $popover-help-bg;
  color: $popover-help-color;
  background-image: none;
  border: 1px solid $dropdownBorder;
  padding: $space-sm $space-md;

  hr {
    background-color: $popover-help-color;
    margin: $space-sm 0;
  }

  code {
    padding: 0px 1px;
    margin: 0px;
  }
}

.ace_tooltip {
  border-radius: 3px;
}

.ace_hidden-cursors .ace_cursor {
  opacity: 0 !important;
}