@namespace DeepDrftPublic.Client.Controls.AudioPlayerBar

<button class="lmf-fab-btn" type="button" @onclick="OnClick">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="lmf-icon" aria-hidden="true">
        <defs>
            <!-- Vertical gradient anchored to viewBox (userSpaceOnUse), bottom -> top.
                 y1=24 (bottom) is the green end; y2=0 (top) is the orange end. -->
            <linearGradient id="lmf-grad-@(IdSuffix)"
                            gradientUnits="userSpaceOnUse" x1="0" y1="24" x2="0" y2="0">
                <stop offset="0%"   stop-color="#2a883b" />
                <stop offset="17%"  stop-color="#2a883b" />
                <stop offset="23%"  stop-color="#2ECC71" />
                <stop offset="47%"  stop-color="#2ECC71" />
                <stop offset="53%"  stop-color="#F4C430" />
                <stop offset="72%"  stop-color="#F4C430" />
                <stop offset="78%"  stop-color="#FF6B35" />
                <stop offset="100%" stop-color="#FF6B35" />
            </linearGradient>

            <!-- The note silhouette, used to clip the fill rect. -->
            <clipPath id="lmf-clip-@(IdSuffix)">
                <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z" />
            </clipPath>
        </defs>

        <!-- Always-on dim silhouette: the idle look and the unfilled remainder. -->
        <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"
              fill="rgba(255,255,255,0.25)" />

        <!-- Clipped fill: a full-width rect revealed through the note shape. -->
        <g clip-path="url(#lmf-clip-@(IdSuffix))">
            <rect class="lmf-fill-rect"
                  x="0" width="24"
                  y="@FillY" height="@FillH"
                  fill="url(#lmf-grad-@(IdSuffix))" />
        </g>
    </svg>
</button>
