@if (type() === 'line') {
  <div class="flex items-center gap-2">
    <div class="h-2 flex-1 overflow-hidden rounded-full bg-surface-2">
      <div
        class="h-full rounded-full transition-[width] duration-200"
        [class]="lineColor[color()]"
        [style.width.%]="clamped()"
      ></div>
    </div>
    @if (showPivot()) {
      <span class="shrink-0 text-xs tabular-nums text-muted">{{ clamped() }}%</span>
    }
  </div>
} @else {
  <div class="relative inline-flex" [class]="circleColor[color()]">
    <svg viewBox="0 0 100 100" class="h-20 w-20">
      <circle cx="50" cy="50" r="45" fill="none" stroke="var(--surface-2)" stroke-width="8" />
      <circle
        cx="50"
        cy="50"
        r="45"
        fill="none"
        stroke="currentColor"
        stroke-width="8"
        stroke-linecap="round"
        [attr.stroke-dasharray]="circumference"
        [attr.stroke-dashoffset]="dashOffset()"
        transform="rotate(-90 50 50)"
      />
    </svg>
    @if (showPivot()) {
      <span class="absolute inset-0 flex items-center justify-center text-sm font-medium">{{ clamped() }}%</span>
    }
  </div>
}