@import './Animations';

#queue-button {
  width: 40px;
  height: 50px;
  background-size: 25px 25px;
  background-repeat: no-repeat;
  background-image: url(../assets/queue.png);
  background-position: center center;
  cursor: pointer;

  &:hover, &.open {
    background-image: url(../assets/queue-filled.png);
  }

  &.open {
    animation: queue-button-anim 3s forwards infinite;
  }

  &.notify {
    animation: bounce 1s ease 0s 1 forwards;
  }
}

.theme-dark, .theme-hc {
  #queue-button {
    background-image: url(../assets/dark/queue.png);

    &:hover, &.open {
      background-image: url(../assets/dark/queue-filled.png);
    }

    &.open {
      animation: queue-button-anim-dark 3s forwards infinite;
    }
  }
}

@keyframes queue-button-anim {
  30% {
    background-image: url(../assets/queue-filled-0.png);
  }
  60% {
    background-image: url(../assets/queue-filled-1.png);
  }
  90% {
    background-image: url(../assets/queue-filled-2.png);
  }
}

@keyframes queue-button-anim-dark {
  30% {
    background-image: url(../assets/dark/queue-filled-0.png);
  }
  60% {
    background-image: url(../assets/dark/queue-filled-1.png);
  }
  90% {
    background-image: url(../assets/dark/queue-filled-2.png);
  }
}