/**
 @prop --fw-spinner-color: Color of the spinner
*/

@media screen and (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
    @media screen and (prefers-reduced-motion: reduce) {
      & .path {
        animation: none;
      }
    }
  }
}

.spinner {
  animation: rotate 2s linear infinite;
  z-index: 2;
  @media screen and (prefers-reduced-motion: reduce) {
    & .path {
      stroke: var(--fw-spinner-color, $color-azure-800);
      stroke-linecap: round;
      animation: none;
    }
  }

  & .path {
    stroke: var(--fw-spinner-color, $color-azure-800);
    stroke-linecap: round;
    animation: dash 1s ease-in-out infinite;
  }
}

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

@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }

  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}
