.navds-loader {
  width: 1.5rem;
  display: inline-block;
  position: relative;
  animation: loader-rotate 1.8s linear infinite;
  stroke-width: 6;

  --ac-loader-background-stroke-width: 5.9;
}

.navds-loader__foreground {
  animation: loader-dasharray 1.8s ease-in-out infinite;
  stroke-dasharray: 80px, 200px;
  stroke-dashoffset: 0;
  stroke: var(--ac-loader-stroke, var(--a-border-default));
  stroke-width: var(--ac-loader-background-stroke-width);
}

.navds-loader__background {
  stroke: var(--ac-loader-stroke-bg, var(--a-surface-active));
  stroke-width: var(--ac-loader-background-stroke-width);
}

.navds-loader--neutral .navds-loader__foreground {
  stroke: var(--ac-loader-neutral-stroke, var(--a-border-default));
}

.navds-loader--interaction .navds-loader__foreground {
  stroke: var(--ac-loader-interaction-stroke, var(--a-border-action));
}

.navds-loader--inverted .navds-loader__foreground {
  stroke: var(--ac-loader-inverted-stroke, var(--a-border-on-inverted));
}

.navds-loader--inverted .navds-loader__background {
  stroke: var(--ac-loader-inverted-stroke-bg, var(--a-border-on-inverted-subtle));
}

.navds-loader--transparent .navds-loader__background {
  stroke: var(--a-surface-transparent);
}

.navds-loader--3xlarge {
  width: 5.5rem;
  stroke-width: 5;

  --ac-loader-background-stroke-width: 4.8;
}

.navds-loader--2xlarge {
  width: 4rem;
  stroke-width: 6;

  --ac-loader-background-stroke-width: 5.8;
}

.navds-loader--xlarge {
  width: 2.5rem;
  stroke-width: 6;

  --ac-loader-background-stroke-width: 5.8;
}

.navds-loader--large {
  width: 2rem;
  stroke-width: 7;

  --ac-loader-background-stroke-width: 6.8;
}

.navds-loader--medium {
  width: 1.5rem;
  stroke-width: 7;

  --ac-loader-background-stroke-width: 6.8;
}

.navds-loader--small {
  width: 1.25rem;
  stroke-width: 8;

  --ac-loader-background-stroke-width: 7.8;
}

.navds-loader--xsmall {
  width: 1rem;
  stroke-width: 8;

  --ac-loader-background-stroke-width: 7.8;
}

@keyframes loader-rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loader-dasharray {
  0% {
    stroke-dasharray: 1px, 200px;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 100px, 200px;
    stroke-dashoffset: -15px;
  }

  100% {
    stroke-dasharray: 100px, 200px;
    stroke-dashoffset: -120px;
  }
}

@media (forced-colors: active) {
  .navds-loader__background {
    stroke: canvastext;
  }
}
