@use '../../styles/mixins';

@keyframes spin {
  0% {
    stroke-dashoffset: 280;
  }
  50% {
    stroke-dashoffset: 70;
  }
  100% {
    stroke-dashoffset: 280;
    transform: rotate(360deg);
  }
}

.spinner {
  display: inline-block;
  overflow: hidden;

  svg {
    @include mixins.square(40px);
    fill: none;
    stroke: var(--primary-color, #016197);
    stroke-width: 7;
    stroke-dasharray: 280;
    stroke-dashoffset: 280;
    transform-origin: center;
    animation: spin 1.4s ease-in-out infinite;
  }
}