#ConnectionState {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin: 0 0.5rem 0.5rem;
  padding: 0.75rem;
  background: var(--color-yellow);
  border-radius: var(--border-radius-default);

  > .Spinner {
    --spinner-size: 1.75rem;
  }

  > .state-text {
    color: var(--color-text-lighter);
    font-weight: 500;
    line-height: 2rem;
    margin-inline-start: 1.875rem;
    white-space: nowrap;
  }

  @media (max-width: 950px) {
    > .state-text {
      margin-inline-start: 1.25rem;
    }
  }
}