.status-indicator {
  display: flex;
  align-items: center;

  &: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;
  }

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

  .component__tooltip-wrapper__tip-text {
    text-align: center;
  }
}