fleet/frontend/components/TableContainer/DataTable/StatusCell/_styles.scss

.data-table__status {
  display: flex;
  align-items: center;
  color: $core-fleet-blue;
  text-transform: capitalize;

  &:before {
    border-radius: 100%;
    content: " ";
    display: inline-block;
    margin-right: $pad-small;
    height: 8px;
    width: 8px;
    margin-bottom: 1px;
  }

  // host status
  &--online:before,
  &--enabled:before,
  &--on:before {
    background-color: $ui-success;
  }
  &--offline:before,
  &--disabled:before,
  &--mia:before,
  &--off:before {
    background-color: $ui-offline;
  }
  &--mia {
    text-transform: uppercase;
  }

  // policy status
  &--yes:before {
    padding-right: 10px;
    content: url(../assets/images/icon-check-circle-green-16x16@2x.png);
    transform: translate(-4px, -6px) scale(0.5);
  }
  &--no:before {
    padding-right: 8px;
    content: url(../assets/images/icon-action-fail-16x16@2x.png);
    transform: translate(-4px, -6px) scale(0.5);
  }
  &--indeterminate {
    color: $ui-fleet-black-50;
    &:before {
      height: 0;
      width: 0;
      margin: 0;
    }
  }

  // user status
  &--active {
    &:before {
      background-color: $ui-success;
    }
  }
  &--no-access {
    &:before {
      background-color: $ui-offline;
    }
  }
  &--invite-pending {
    &:before {
      background-color: $ui-warning;
    }
  }
}