---
interface Props {
  size?: number;
  color?: string; 
  bgColor?: string;
}

const {size = 200, color= "#cad3f5", bgColor} = Astro.props;
---

<div class="spinner">
  <div class="container">
    <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="">
      <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
      <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
      <g id="SVGRepo_iconCarrier">
        <path class="animation animation-normal" d="M4 24C4 35.0457 12.9543 44 24 44V44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4" stroke={color} stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>
        <path class="animation animation-reverse" d="M36 24C36 17.3726 30.6274 12 24 12C17.3726 12 12 17.3726 12 24C12 30.6274 17.3726 36 24 36V36" stroke={color} stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>
      </g>
    </svg>
  </div>
</div>
<style define:vars={{size: `${size}px`, bgColor: bgColor ?? "var(--prj-bg)"}}>
  .spinner {
    background: var(--bgColor);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    margin: 10px 0px -10px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }

  .container {
    width: var(--size);
  }

  .animation {
    animation: rotate 1.5s linear infinite;
    transform-box: fill-box;
    transform-origin: center;
  }

  .animation-normal {
    animation-direction: normal;
  }

  .animation-reverse {
    animation-direction: reverse;
  }

  @keyframes rotate {
    100% {
      transform: rotate(360deg);
    }
  }
</style>