@import "ui-variables";
@import "octicon-mixins.less";
@import "octicon-utf-codes.less";

@gutter-size: 0.7em;

// Styles for gutter glyphs.

.gutter[gutter-name=diagnostics-gutter] {
  width: @gutter-size;
}

// The gutter icon. If you make any edits here, make extra sure that the icon is
// still vertically centered within the line number and looks good next to the
// debugger breakpoint icon at all different editor font sizes. Probably,
// flexbox is the only way to reliably do this.
.diagnostics-gutter-ui-item {
  display: flex;

  .icon {
    display: flex;

    width: @gutter-size;
    height: @gutter-size;
    font-size: @gutter-size;
    align-self: center;

    &::before {
      width: 1em;
      height: 1em;
      font-size: 1em;
      margin: 0;

      align-self: center;
    }
  }

  &.diagnostics-gutter-ui-gutter-info,
  &.diagnostics-gutter-ui-gutter-review {
    color: @text-color-info;
  }
  &.diagnostics-gutter-ui-gutter-error {
    color: @text-color-error;
  }
  &.diagnostics-gutter-ui-gutter-action,
  &.diagnostics-gutter-ui-gutter-warning {
    color: @text-color-warning;
  }

  &.diagnostics-gutter-ui-gutter-stale {
    color: @text-color-subtle;
  }
}