@switch (type) {
  <!-- Light Theme -->
  @case ('light') {
    <div class="flex items-center relative">
      <div
        class="flex-shrink-0 {{ color.text }} font-medium mr-2
             text-opacity-100 !text-slate-800"
        data-cy="progressPercentage"
      >
        {{ progress }}%
      </div>
      <div class="flex-grow h-[4px] w-[52px] {{ color.outerBar }} rounded-full">
        <div
          [style.width.%]="progress"
          class="{{ color.innerBar }} transition-width duration-500
               ease-in-out rounded-full shadow-sm w-[52px] h-[4px]"
        ></div>
      </div>
    </div>
  }
  <!-- Default / Primary / Secondary Themes -->
  @default {
    <div class="flex h-full {{ color.outerBar }} rounded-t-lg rounded-b-lg">
      <div
        [style.width.%]="progress"
        class="flex {{ color.innerBar }} my-1 mx-1 transition-width
               duration-500 ease-in-out rounded-t-md rounded-b-md shadow-xl"
      >
        <div
          class="flex items-center pl-2 py-1 {{ color.text }} font-bold text-4"
        >
          {{ progress }}%
        </div>
      </div>
    </div>
  }
}