.sf-spinner {
  position: relative;
  display: inline-flex;
  stroke: currentColor;
}
.sf-spinner-overlay {
  height: 100%;
  left: 0;
  position: absolute;
  text-align: center;
  top: 0;
  user-select: none;
  vertical-align: middle;
  width: 100%;
  z-index: 1000;
  background: transparent;
}
.sf-spinner-content {
  flex-direction: column;
  width: 100%;
  padding: var(--sf-spacing-8);
  gap: var(--sf-spacing-8);
  position: relative;
  height: 100%;
}
.sf-spinner-primary {
  color: rgb(var(--sf-color-primary));
}
.sf-spinner-secondary {
  color: rgb(var(--sf-color-secondary));
}
.sf-spinner-success {
  color: rgb(var(--sf-color-success));
}
.sf-spinner-warning {
  color: rgb(var(--sf-color-warning));
}
.sf-spinner-error {
  color: rgb(var(--sf-color-error));
}
.sf-spinner-info {
  color: rgb(var(--sf-color-info));
}
.sf-spinner-circle-inner,
.sf-spinner-singlecircle-inner {
  transform-origin: 50% 50%;
}
.sf-spinner-doublecircle-inner,
.sf-spinner-doublecircle-second-inner {
  position: absolute;
  width: 100%;
}
.sf-spinner-doublecircle-second-inner {
  transform: rotate(180deg);
}
.sf-spinner-cupertino-dots,
.sf-spinner-doublecircle {
  position: relative;
}
.sf-spinner-cupertino-dots-inner {
  border-radius: var(--sf-radius-full);
  position: absolute;
}
@keyframes spinner-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes spinner-dash {
  0% {
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dashoffset: 40;
  }
  100% {
    stroke-dashoffset: 0;
  }
}