@import "~scss/variables.scss";

#connection-indicator {
  text-transform: uppercase;
  font-size: 80%;

  margin-right: 1em;

  color: $navbar-dark-color;

  /* Connection status circle */
  &.connection-connected::after {
    content: " ";

    border-radius: 50px;

    display: inline-block;

    width: 0.75em;
    height: 0.75em;
    margin-left: 0.5em;

    vertical-align: middle;

    /* TODO: animation */
    background-color: $success;
    box-shadow: 0 0 0 3px rgba($success, 0.3);
  }

  // Hide on mobile
  @include media-breakpoint-down(md) {
    display: none;
  }
}