<script lang="ts">
  let { size = '1em' }: { size?: string } = $props();
</script>

<span class="sp" style="--sp-size: {size}" aria-hidden="true"></span>

<style>
  /* A pure-CSS ring with a single gap (a ~3/4 arc) that rotates — no bundled graphics. It
     inherits the surrounding text colour via currentColor, so it works in any header/theme. */
  .sp {
    display: inline-block;
    width: var(--sp-size, 1em);
    height: var(--sp-size, 1em);
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    opacity: 0.85;
    vertical-align: -0.15em;
    animation: sp-spin 0.7s linear infinite;
  }
  @keyframes sp-spin {
    to {
      transform: rotate(360deg);
    }
  }
  /* Reduced motion: slow the rotation rather than freeze it (a still ring reads as broken). */
  @media (prefers-reduced-motion: reduce) {
    .sp {
      animation-duration: 1.8s;
    }
  }
</style>
