@keyframes disconnect {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes reconnect {
  0% { visibility: visible; opacity: 1; }
  50% { visibility: visible; opacity: 1; }
  100% { visibility: hidden; opacity: 0; }
}

.ember-view .offline-notification .fa-stack { //hack to override another hack, scared to change the other hack
  .fa-stack-1x {
    font-size: 1.4rem;
  }

  .fa-stack-2x {
    font-size: 2.1em;
  }
}

.offline-notification {
  visibility: hidden;
  overflow: hidden;
  float: right;
  opacity: 0;


  &__icon {
    color: $white;
    transition: all 1s ease;


    &:hover {
      color: $white;
    }

    &--ban {
      opacity: .7;
    }

    &--wifi {
      position: relative;
      top: 2px;
    }
  }

  &--visible {
    visibility: visible;
    opacity: 1;
    animation: disconnect 1s ease 1 normal;
  }

  &--hidden {
    visibility: hidden;
    opacity: 0;
    animation: reconnect 2s ease 1 normal;

    .offline-notification__icon--ban { // scss-lint:disable SelectorFormat
      opacity: 0;
    }
  }
}

// Site Header

$bg: #27283a;

@keyframes header-reconnect {
  0% { background-color: $danger; }
  50% { background-color: $success; }
  100% { background-color: $bg; }
}

// ---

$link: #7a7a7a;

@keyframes header-link-reconnect {
  0% { color: $white; }
  50% { color: $white; }
  100% { color: $link; }
}

.site-header {
  transition: all 1s ease;

  a {
    transition: all 1s ease;
  }
}

.site-header--offline {
  background-color: $danger;

  a {
    color: $white !important; // scss-lint:disable ImportantRule
  }
}

.site-header--online {
  animation: header-reconnect 2s ease 1 normal;

  a {
    animation: header-link-reconnect 2s ease 1 normal;
  }
}