.spinner {
  border-radius: 50%;
  animation: spin 1s linear infinite;
  background: conic-gradient(transparent 0deg, var(--dark-blue) 270deg);
  --mask: radial-gradient(farthest-side, transparent 75%, black 75%);
  -webkit-mask: var(--mask);
  mask: var(--mask);
  border-width: 2px;

  // Prevent flex containers from warping the spinner
  flex-shrink: 0;
  flex-grow: 0;

  // Ensure dimensions include border
  box-sizing: border-box;

  // Explicitly enforce square aspect ratio
  aspect-ratio: 1;

  &.standard {
    width: 16px;
    height: 16px;
  }
  &.large {
    width: 48px;
    height: 48px;
  }
}

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