:host {
  --md-progress-circular-active-indicator-color: var(--md-sys-color-primary);
  --md-progress-circular-track-color: var(--md-sys-color-secondary-container);

  display: inline-flex;
  position: relative;
}

.progress-circular__svg {
  display: inline-block;
  width: 1em;
  height: 1em;
}

.progress-circular__svg_indeterminate {
  animation: progress-circular-rotate 1.5s linear infinite;
}

:where(.progress-circular__svg:not(.progress-circular__svg_indeterminate)) {
  transform: rotate(-90deg);
}

.progress-circular__track {
  stroke: var(--md-progress-circular-track-color);
}

.progress-circular__circle {
  stroke: var(--md-progress-circular-active-indicator-color);
  stroke-linecap: round;
  transition: stroke-dasharray 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-circular__svg_indeterminate .progress-circular__circle {
  animation: progress-circular-dash 1.5s ease-in-out infinite;
}

@keyframes progress-circular-rotate {
  100% {
    transform: rotate(1turn);
  }
}

@keyframes progress-circular-dash {
  0% {
    stroke-dasharray: 1, 282.743;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 141.372, 141.372;
    stroke-dashoffset: -70.686;
  }

  100% {
    stroke-dasharray: 1, 282.743;
    stroke-dashoffset: -282.743;
  }
}