.connection-state-wrapper {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;

  width: 100%;

  opacity: 1;

  transition: transform 300ms ease, opacity 300ms ease;

  &:not(.open) {
    transform: translateY(-3rem);
    opacity: 0;
  }

  &:not(.shown) {
    display: none;
  }
}

#ConnectionStatusOverlay {
  display: flex;
  flex: 0 0 auto;
  align-items: center;

  height: 2.9375rem;
  margin: 0.375rem 0.5rem;
  padding: 0 0.75rem;
  border-radius: var(--border-radius-default);

  background: var(--color-yellow);

  &.interactive {
    cursor: var(--custom-cursor, pointer);
  }

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

  > .state-text {
    flex: 1;

    margin-inline-start: 1.875rem;
    padding-bottom: 0.0625rem;

    font-size: 0.9375rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-lighter);
    white-space: nowrap;
  }

  .Transition {
    width: 100%;
    // https://dfmcphee.com/flex-items-and-min-width-0/
    // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
    min-width: 0;

    > .Transition_slide {
      display: flex;
      align-items: center;
      width: 100%;
    }
  }

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