@import './core/variables.scss';

.vc-spinner {
  vertical-align: middle;
}

.vc-spinner-mat {
  // animation: vc-spin 2s linear infinite;
  // transform-origin: center center;

  .path {
    stroke-dasharray: 1, 200 #{'/* rtl:ignore */'};
    stroke-dashoffset: 0 #{'/* rtl:ignore */'};
    animation: vc-mat-dash 1.5s ease-in-out infinite;
  }
}

@keyframes vc-spin {
  0% {
    transform: rotate3d(0, 0, 1, 0deg) #{'/* rtl:ignore */'};
  }

  25% {
    transform: rotate3d(0, 0, 1, 90deg) #{'/* rtl:ignore */'};
  }

  50% {
    transform: rotate3d(0, 0, 1, 180deg) #{'/* rtl:ignore */'};
  }

  75% {
    transform: rotate3d(0, 0, 1, 270deg) #{'/* rtl:ignore */'};
  }

  100% {
    transform: rotate3d(0, 0, 1, 359deg) #{'/* rtl:ignore */'};
  }
}

@keyframes vc-mat-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }

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