<div class="scroll-hinter scroll-to-target {{ $scrollHinterClasses ?? '' }}" data-target="{{ $target or "scrollTarget"}}">
    <div class="sizer">

        <svg class="icon" id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 100">

            {{-- Mouse body --}}
            <path class="mouse-body" d="M16,47C7.2,47,0,39.8,0,31V16C0,7.2,7.2,0,16,0s16,7.2,16,16v15C32,39.8,24.8,47,16,47z M16,2C8.3,2,2,8.3,2,16
	v15c0,7.7,6.3,14,14,14s14-6.3,14-14V16C30,8.3,23.7,2,16,2z"/>

            {{-- Mouse wheel--}}
            <path class="mouse-wheel" d="M16,17.1c-0.6,0-1-0.5-1-1v-4c0-0.6,0.4-1,1-1s1,0.5,1,1v4C17,16.7,16.6,17.1,16,17.1z"/>

            {{-- Arrow --}}
            <path class="arrow" d="M22.7,56.9c-0.4-0.4-1-0.4-1.4,0L17,61.2v-8.4c0-0.6-0.4-1-1-1s-1,0.4-1,1v8.4l-4.3-4.3c-0.4-0.4-1-0.4-1.4,0
	s-0.4,1,0,1.4l5.9,5.9c0.1,0.1,0.1,0.1,0.2,0.2L16,65l0.6-0.6c0.1-0.1,0.1-0.1,0.2-0.2l5.9-5.9C23.1,57.9,23.1,57.3,22.7,56.9z"/>

        </svg>


    </div>
</div>