app/common/styles/elements/status.scss

//status light states
@mixin status-light-before {
  content: '';
  display: inline-block;
  margin-right: -12%;
  transform: translateY(-2px);
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  position: absolute;
}

@mixin status-light-header {
  padding-left: 1.6em;
  margin-top: .7em;
  position: relative;
}
@mixin status-light__good {
  @include status-light-before;
}

@mixin status-light__error {
  @include status-light-before;
}

@mixin status-light__disabled {
  @include status-light-before;
}

@mixin status-light__warn {
  @include status-light-before;

}

.status-light__disabled,
.status-light__off{
  @include status-light-header;
  &::before {
    @include status-light__disabled;
    @extend .icon__off;
  }
}

.status-light__good {
  @include status-light-header;
  &::before {
    @include status-light__good;
    @extend .icon__good;
  }
}

.status-light__error {
  @include status-light-header;
  &::before {
    @include status-light__error;
    @extend .icon__critical;
  }

}

.status-light__warn {
  @include status-light-header;
  &::before {
    @include status-light__warn;
    @extend .icon__warning;
  }
}