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

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

  // New indicator styles
  &--success {
    &:before {
      background-color: $ui-success;
    }
  }

  &--warning {
    &:before {
      background-color: $ui-warning;
    }
  }

  &--error {
    &:before {
      background-color: $ui-error;
    }
  }

  &--indeterminate {
    &:before {
      background-color: $ui-offline;
    }
  }


  // NOTE: We will move away from styling the indicator status depending
  // on the value passed to the component. Instead we have added an `indicator`
  // prop that will allow us explicitly define the desired status. This makes
  // the component more flexible and easier to use. The next two blocks of
  // styles (host status and user status) will be removed in the future.

  // 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;
    }
  }
}