consul/ui/packages/consul-ui/app/styles/components/healthcheck-output/skin.scss

%healthcheck-output {
  border-width: 1px;
}
%healthcheck-output::before {
  @extend %as-pseudo;
  min-width: 20px;
  min-height: 20px;
  margin-right: 15px;
}
@media #{$--lt-spacious-healthcheck-output} {
  %healthcheck-output::before {
    min-width: 18px;
    min-height: 18px;
    margin-right: 8px;
  }
}
%healthcheck-output dd em {
  @extend %pill;
  background-color: $gray-100;
  /*TODO: Should this be merged into %pill? */
  cursor: default;
  font-style: normal;
  margin-top: -2px;
  margin-left: 0.5em;
}
%healthcheck-output.passing::before {
  @extend %with-check-circle-fill-color-icon;
}
%healthcheck-output.warning::before {
  @extend %with-alert-triangle-color-icon;
}
%healthcheck-output.critical::before {
  @extend %with-cancel-square-fill-color-icon;
}
%healthcheck-output,
%healthcheck-output pre {
  border-radius: $decor-radius-100;
}
%healthcheck-output dd:first-of-type {
  color: $gray-400;
}
%healthcheck-output pre {
  background-color: $gray-050;
  color: $gray-600;
}
%healthcheck-output {
  /* TODO: this should be a frame-gray */
  color: $gray-900;
  border-color: $gray-200;
  border-style: solid;

  border-left-width: 4px;
}
%healthcheck-output.passing {
  border-left-color: $green-500;
}
%healthcheck-output.warning {
  border-left-color: $yellow-500;
}
%healthcheck-output.critical {
  border-left-color: $red-500;
}