Success Checkmark

---
/**
 * AnimatedCheckmark — A decorative SVG checkmark with a circular fill and draw animation.
 * 
 * @param {number|string} size - The width/height of the checkmark in pixels. Default is 56.
 * @param {string} color - The primary color of the success state. Default is '#7ac142'.
 */
interface Props {
  size?: number | string;
  color?: string;
}

const { size = 56, color = '#7ac142' } = Astro.props;
---

<div class="checkmark-container" style={`--check-size: ${size}px; --check-color: ${color};`}>
  <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
    <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/>
    <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
  </svg>
</div>

<style>
  .checkmark-container {
    width: var(--check-size);
    height: var(--check-size);
    margin: var(--sp-4, 1rem) auto;
  }
  
  .checkmark { 
    width: 100%; 
    height: 100%; 
    border-radius: var(--r-full, 50%); 
    display: block; 
    stroke-width: 2; 
    stroke: #fff; 
    stroke-miterlimit: 10; 
    box-shadow: inset 0px 0px 0px transparent; 
    animation: checkmark-fill .4s ease-in-out .4s forwards, checkmark-scale .3s ease-in-out .9s both; 
  }
  
  .checkmark__circle { 
    stroke-dasharray: 166; 
    stroke-dashoffset: 166; 
    stroke-width: 2; 
    stroke-miterlimit: 10; 
    stroke: var(--check-color); 
    fill: none; 
    animation: checkmark-stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; 
  }
  
  .checkmark__check { 
    transform-origin: 50% 50%; 
    stroke-dasharray: 48; 
    stroke-dashoffset: 48; 
    animation: checkmark-stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; 
  }
  
  @keyframes checkmark-stroke { 100% { stroke-dashoffset: 0; } }
  @keyframes checkmark-fill { 100% { box-shadow: inset 0px 0px 0px 30px var(--check-color); } }
  @keyframes checkmark-scale { 0%, 100% { transform: none; } 50% { transform: scale3d(1.1, 1.1, 1); } }
</style>