@keyframes bar-animation-transform-1 {
  0% { transform: scaleY(0.33); }
  12.5% { transform: scaleY(1.66); }
  25% { transform: scaleY(0.33); }
  37.5% { transform: scaleY(1); }
  50% { transform: scaleY(0.33); }
  62.5% { transform: scaleY(1.66); }
  75% { transform: scaleY(0.33); }
  87.5% { transform: scaleY(1.66); }
  100% { transform: scaleY(0.33); }
}

@keyframes bar-animation-transform-2 {
  0% { transform: scaleY(1); }
  12.5% { transform: scaleY(0.33); }
  25% { transform: scaleY(1.66); }
  37.5% { transform: scaleY(0.33); }
  50% { transform: scaleY(1); }
  62.5% { transform: scaleY(0.33); }
  75% { transform: scaleY(1.66); }
  87.5% { transform: scaleY(0.33); }
  100% { transform: scaleY(1); }
}

.root {
  position: absolute;
  z-index: 1;
  right: 6px;
  bottom: 0;

  overflow: hidden;

  width: 20px;
  height: 20px;
  border: 2px solid var(--color-background);
  border-radius: 50%;

  background-color: #0ac630;
}

.indicator {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.indicatorInner {
  will-change: transform;

  transform: translateZ(0);

  width: 2px;
  height: 6px;
  margin: 1px;
  border-radius: 1px;

  background: var(--color-background);
}

.indicatorInner:nth-child(odd) {
  transform: scaleY(0.8);
}

.indicatorInner:nth-child(even) {
  transform: scaleY(1.33);
}

.selected {
  border-color: var(--color-chat-active);
  background-color: var(--color-white);

  .indicatorInner {
    background-color: var(--color-chat-active);
  }
}

.active {
  .indicatorInner:nth-child(odd) {
    animation: bar-animation-transform-2 3.2s normal infinite;
  }

  .indicatorInner:nth-child(even) {
    animation: bar-animation-transform-1 3.2s normal infinite;
  }
}