<LumexCard Blurred="@true"
           Shadow="@Shadow.Large"
           Class="bg-background/20 rounded-2xl">
    <LumexCardHeader Class="justify-between">
        <LumexButton Size="@Size.Small"
                     Variant="@Variant.Flat"
                     Class="h-8 w-8 min-w-8 px-0 bg-background/40 rounded-full">
            <LumexIcon Icon="@Icons.Rounded.Timer"
                       Class="text-foreground" />
        </LumexButton>
        <LumexButton Size="@Size.Small"
                     Variant="@Variant.Flat"
                     Class="h-8 w-8 min-w-8 px-0 bg-background/40 rounded-full">
            <LumexIcon Icon="@Icons.Rounded.DirectionsRun"
                       Class="text-foreground" />
        </LumexButton>
    </LumexCardHeader>
    <LumexCardBody>
        <div class="grid grid-cols-4">
            <div class="col-span-3">
                <div class="relative w-40 h-40">
                    <div class="absolute w-40 h-40 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-pink-950">
                        <svg class="absolute w-40 h-40 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
                            <linearGradient id="progress-1" x1="0%" y1="0%" x2="0%" y2="100%">
                                <stop offset="0%" stop-color="#ec4899" />
                                <stop offset="100%" stop-color="#9d174d" />
                            </linearGradient>
                            <circle class="rotate-[270deg] origin-center"
                                    stroke-width="16"
                                    stroke-linecap="round"
                                    stroke="url(#progress-1)"
                                    fill="transparent"
                                    r="72"
                                    cx="80"
                                    cy="80"
                                    style="stroke-dashoffset: 65.942; stroke-dasharray: 451.658, 451.658;">
                            </circle>
                        </svg>
                    </div>
                    <div class="absolute w-32 h-32 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-lime-950">
                        <svg class="absolute w-32 h-32 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
                            <linearGradient id="progress-2" x1="0%" y1="0%" x2="0%" y2="100%">
                                <stop offset="0%" stop-color="#cff542" />
                                <stop offset="100%" stop-color="#6ad847" />
                            </linearGradient>
                            <circle class="rotate-[270deg] origin-center"
                                    stroke-width="16"
                                    stroke-linecap="round"
                                    stroke="url(#progress-2)"
                                    fill="transparent"
                                    r="56"
                                    cx="64"
                                    cy="64"
                                    style="stroke-dashoffset: 31.224; stroke-dasharray: 351.289, 351.289;">
                            </circle>
                        </svg>
                    </div>
                    <div class="absolute w-24 h-24 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-sky-950">
                        <svg class="absolute w-24 h-24 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
                            <linearGradient id="progress-3" x1="0%" y1="0%" x2="0%" y2="100%">
                                <stop offset="0%" stop-color="#6ee7b7" />
                                <stop offset="100%" stop-color="#22d3ee" />
                            </linearGradient>
                            <circle class="rotate-[270deg] origin-center"
                                    stroke-width="16"
                                    stroke-linecap="round"
                                    stroke="url(#progress-3)"
                                    fill="transparent"
                                    r="40"
                                    cx="48"
                                    cy="48"
                                    style="stroke-dashoffset: 62.73; stroke-dasharray: 250.921, 250.921;">
                            </circle>
                        </svg>
                    </div>
                    <div class="absolute w-16 h-16 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-black"></div>
                </div>
            </div>
            <div class="col-span-1 font-bold text-right text-xl drop-shadow-lg">
                <p class="text-foreground">7:26</p>
                <p class="text-pink-800">427</p>
                <p class="text-lime-400">41</p>
                <p class="text-cyan-400">9</p>
            </div>
        </div>
    </LumexCardBody>
    <LumexCardFooter Class="justify-center">
        <LumexIcon Icon="@Icons.Rounded.Favorite"
                   Size="@new("16")"
                   Class="text-foreground" />
        <p class="font-medium text-sm text-foreground">
            82 BPM, 4min ago
        </p>
    </LumexCardFooter>
</LumexCard>
