%healthcheck-status { border-width: 1px; } %healthcheck-status, %healthcheck-status pre { border-radius: $decor-radius-100; } %healthcheck-status dd:first-of-type { color: $gray-400; } %healthcheck-status pre { background-color: $black; color: $white; } %healthcheck-status.passing { /* TODO: this should be a frame-gray */ // @extend %frame-green-500; color: $gray-900; border-color: $gray-200; border-style: solid; } %healthcheck-status.warning { @extend %frame-yellow-500; color: $gray-900; } %healthcheck-status.critical { @extend %frame-red-500; color: $gray-900; } %healthcheck-status.passing::before { background-color: $color-success !important; } %healthcheck-status.critical::before { background-color: $color-danger !important; }