:host {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.breathing-dot-inner {
  width: var(--breathing-dot-size, 144px);
  height: var(--breathing-dot-size, 144px);
  max-width: 100%;
  max-height: 100%;
  background-color: var(--c-primary);
  border-radius: 50%;
  animation: breathe 8s ease-in-out infinite;
  box-shadow: 0 0 40px var(--c-primary);

  &.is-paused {
    animation-play-state: paused;
  }
}

@keyframes breathe {
  50% {
    transform: scale(0.4);
    opacity: 0.1;
  }
  0%,
  100% {
    transform: scale(1);
    opacity: 0.4;
  }
}
