@property --gap-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 30deg;
}
@property --alpha {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

.fcr-icon-animation__apply-loading {
  width: 20px;
  height: 20px;
}

.fcr-icon-animation__apply-loading-loader {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(66, 98, 255, var(--alpha)) 0deg calc(360deg - var(--gap-angle) - 8deg),
    rgba(66, 98, 255, var(--alpha)) calc(360deg - var(--gap-angle) - 8deg)
      calc(360deg - var(--gap-angle)),
    transparent calc(360deg - var(--gap-angle)) calc(360deg - 8deg),
    transparent calc(360deg - 8deg),
    rgba(66, 98, 255, var(--alpha)) 360deg
  );
  -webkit-mask: radial-gradient(circle, transparent 8px, black 8px);
  mask: radial-gradient(circle, transparent 8px, black 8px);
  animation:
    fcr-icon-animation__apply-loading-rotate 0.8s infinite linear,
    fcr-icon-animation__apply-loading-gap-pulse 0.5s infinite ease-in-out,
    fcr-icon-animation__apply-loading-alpha-pulse 0.5s infinite ease-in-out;
}

.fcr-icon-animation__apply-loading-paused .fcr-icon-animation__apply-loading-loader {
  animation-play-state: paused !important;
}

.fcr-icon-animation__apply-loading-stop .fcr-icon-animation__apply-loading-loader {
  animation: none !important;
}

@keyframes fcr-icon-animation__apply-loading-rotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes fcr-icon-animation__apply-loading-gap-pulse {
  50% {
    --gap-angle: 90deg;
  }
}

@keyframes fcr-icon-animation__apply-loading-alpha-pulse {
  50% {
    --alpha: 0.5;
  }
}