@keyframes beDot {
  0% {
    opacity: 0.8;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
  }
  100% {
    opacity: 0.8;
    transform: scale(0.5);
  }
}

.thinker {
  --dot-size: 0.5em;
  --animation-speed: 1s;
  z-index: 1000;
  display: none;
  position: fixed;
  top: 2em;
  right: calc(50% - var(--dot-size) * 3);
}

.thinker.is-active {
  display: block;
}

.thinker__dot-container {
  justify-content: space-between;
  width: calc(var(--dot-size) * 6);
  display: flex;
}

.thinker__dot {
  width: var(--dot-size);
  height: var(--dot-size);
  background: black;
  border-radius: 50%;
  animation: beDot linear var(--animation-speed) infinite alternate;
}

.thinker__dot:nth-child(1) {
  animation-delay: 0;
}

.thinker__dot:nth-child(2) {
  animation-delay: calc(var(--animation-speed) / 4);
}

.thinker__dot:nth-child(3) {
  animation-delay: calc(var(--animation-speed) / 2);
}