:host {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: inline-flex;
  width: 44px;
  height: 44px;
  color: var(--progress-circle-color, var(--c-accent));
}

.progress-circle__svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.progress-circle__bg {
  stroke: currentColor;
  opacity: 0.2;
}

.progress-circle__progress {
  stroke: currentColor;
  transition: stroke-dashoffset 0.3s ease;
}

.progress-circle__pulse {
  stroke: currentColor;
  animation: progress-circle-pulse 2s ease-in-out infinite;
}

@keyframes progress-circle-pulse {
  0%,
  100% {
    opacity: 0.5;
    stroke-width: 2;
  }
  50% {
    opacity: 1;
    stroke-width: 2;
  }
}
