@import "ui-variables";

// The height of the gutter glyph.
@glyph-height: 15px;

// Styles for gutter glyphs.

.nuclide-diagnostics-gutter-ui-gutter-error,
.nuclide-diagnostics-gutter-ui-gutter-warning {
  font-family: "Octicons Regular";
}

.nuclide-diagnostics-gutter-ui-gutter-error {
  color: @text-color-error;
}

.nuclide-diagnostics-gutter-ui-gutter-warning {
  color: @text-color-warning;
}

// Styles for popup triggered by mousing over the gutter glyph.

.nuclide-diagnostics-gutter-ui-popup {
  background: @app-background-color;
  box-shadow: 0px 1px 4px 0px rgba(0,0,0,1);
  position: absolute;
  padding-right: 10px;
  padding-left: 10px;

  // Many themes set the editor's scrollbars to z-index: 3. We wish to appear
  // above the scrollbars because we appear at the atom-workspace's root, which
  // means we may span multiple panes and hence overlap the leftmost scrollbar.
  z-index: 4;
}

.nuclide-diagnostics-gutter-ui-popup-header {
  display: flex;
  justify-content: space-between;
  margin-left: -10px;
  margin-right: -10px;
  padding: 4px 10px;
}

.nuclide-diagnostics-gutter-ui-popup-diagnostic {
  color: @text-color;
  font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}

.nuclide-diagnostics-gutter-ui-popup-error
  .nuclide-diagnostics-gutter-ui-popup-header {
    background-color: fade(@text-color-error, 20%);
}

.nuclide-diagnostics-gutter-ui-popup-warning
  .nuclide-diagnostics-gutter-ui-popup-header {
    background-color: fade(@text-color-warning, 20%);
}

.nuclide-diagnostics-gutter-ui-popup-message {
  padding-top: 4px;
  padding-bottom: 4px;
}