@push('footer-javascript')
    <script src="/web/themes/shella/js/product-color-size.js"></script>
@endpush

<div>
<label>{{ __('Color') }}:</label>
   <div class="product-options__section d-flex flex-wrap" data-style="image" data-property="color">
        @foreach($productColorVariants as $colorVariant)
            <div class="product-options__value product-options__value__color product-options__value--square text-hide cursor-pointer lazyload {{ $loop->first ? 'active' : '' }}"
                data-bg="url({{ $colorVariant['image'] }})"
                data-scale="2"
                data-js-tooltip
                data-tippy-content="{{ $colorVariant['color'] }}"
                data-tippy-placement="top"
                data-tippy-distance="6"
                onclick="loadColor(this, '{{ $colorVariant['slug'] }}')" 
            >
                {{ $colorVariant['color'] }}
            </div>
        @endforeach
  </div>
</div>
