.status-indicator {
  display: flex;
  align-items: center;
  color: $core-fleet-blue;

  ::first-letter {
    text-transform: capitalize;
  }

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

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

  &--online,
  &--offline {
    .status-tooltip {
      display: block;
      white-space: normal;
      max-width: 308px;
      text-transform: none;
    }
  }

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