.connected-status-indicator {
  display: flex;
  align-items: center;
  place-self: center start;
  background: none;
  font-size: inherit;
  padding: 8px;
  border-radius: 100px;

  &:hover,
  &:active {
    background-color: var(--color-background-alternative);
  }

  &__inner-circle {
    border-radius: 4px;
    height: 4px;
    width: 4px;
    background-color: transparent;
  }

  &__green-circle,
  &__yellow-circle,
  &__grey-circle {
    border-radius: 4px;
    height: 8px;
    width: 8px;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__green-circle {
    border-color: var(--color-success-default);
  }

  &__green-circle &__inner-circle {
    background-color: var(--color-success-default);
  }

  &__yellow-circle {
    border-color: var(--color-warning-default);
  }

  &__grey-circle {
    border-color: var(--color-border-default);
  }

  &__text {
    @include H8;

    color: var(--color-text-alternative);
    margin-left: 6px;
    white-space: nowrap;
  }
}