/* Aniyab UI — Button Loading spinner
 * From Figma: Components / Button Loading
 *
 * Colors: White | Brand (#0545A6) | Grey (#404040)
 * Sizes:  Large 24px (tip 3.6) | Small 16px (tip 2.4)
 *
 * Usage:
 *   <span class="ay-spinner ay-spinner--lg ay-spinner--white" aria-hidden="true"></span>
 *   <span class="ay-spinner ay-spinner--sm ay-spinner--brand" aria-hidden="true"></span>
 *   <span class="ay-spinner ay-spinner--lg ay-spinner--grey" aria-hidden="true"></span>
 */

.ay-spinner {
  --ay-spinner-size: 24px;
  --ay-spinner-tip: 3.6px;
  --ay-spinner-color: #FFFFFF;

  box-sizing: border-box;
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--ay-spinner-size);
  height: var(--ay-spinner-size);
  vertical-align: middle;
  animation: ay-spinner-rotate 0.75s linear infinite;
}

.ay-spinner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 180deg at 50% 50%,
    var(--ay-spinner-color) 0deg,
    var(--ay-spinner-color) 63.24deg,
    rgba(255, 255, 255, 0) 360deg
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--ay-spinner-tip)),
    #000 calc(100% - var(--ay-spinner-tip) + 0.25px)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--ay-spinner-tip)),
    #000 calc(100% - var(--ay-spinner-tip) + 0.25px)
  );
}

/* Leading tip (Ellipse 1 in Figma) */
.ay-spinner::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: var(--ay-spinner-tip);
  height: var(--ay-spinner-tip);
  margin-left: calc(var(--ay-spinner-tip) / -2);
  border-radius: 50%;
  background: var(--ay-spinner-color);
}

/* Sizes */
.ay-spinner--lg {
  --ay-spinner-size: 24px;
  --ay-spinner-tip: 3.6px;
}

.ay-spinner--sm {
  --ay-spinner-size: 16px;
  --ay-spinner-tip: 2.4px;
}

/* Colors */
.ay-spinner--white {
  --ay-spinner-color: #FFFFFF;
}

.ay-spinner--brand {
  --ay-spinner-color: var(--ay-brand-primary-light, #0545A6);
}

.ay-spinner--grey {
  --ay-spinner-color: var(--ay-text-main, #404040);
}

@keyframes ay-spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ay-spinner {
    animation-duration: 1.5s;
  }
}