:local(.LintingStatusBarItem) {
  --icon-margin: 6px;

  &.btn {
    display: flex;
    align-items: center;
  }

  svg {
    fill: currentColor;
    margin-right: var(--icon-margin);
  }

  .errors,
  .warnings,
  .infos {
    display: inline-flex;
    align-items: center;
  }

  .warnings {
    margin-left: var(--icon-margin);
  }

  .infos {
    margin-left: var(--icon-margin);
  }

  &:not(.has-errors) .errors {
    svg path:first-child {
      fill: var(--status-bar-icon-font-color) !important;
    }
  }

  .warnings {
    svg path:first-child {
      fill: transparent !important;
    }
  }

  &:not(.has-warnings) .warnings {
    svg path:first-child {
      fill: transparent !important;
    }

    svg path:last-child {
      fill: var(--status-bar-icon-font-color) !important;
    }
  }

  .infos {
    svg path:first-child {
      fill: transparent !important;
    }
  }

  &:not(.has-infos) .infos {
    svg path:first-child {
      fill: transparent !important;
    }

    svg path:last-child {
      fill: var(--status-bar-icon-font-color) !important;
    }
  }
}
