{% comment %}
  Renders a product variant option as a set of radio buttons.

  Accepts:
  - option: {Object} The product variant option to render.
  - product: {Object} The product object.
  - color_use_image: {Boolean} Whether to use the variant's featured image as the color swatch.

  Usage:
  {% render 'product-variant', option: option %}
{% endcomment %}

<div class='xo-product-variant'>
  <xo-product-variant
    class='
      xo-product-variant__inner {% if modified %}
        xo-product-variant__inner--{{modified}}
      {% endif %}
 '
    {% if modified == 'style1' %}
      {% case settings.product_card_text_alignment %}
        {% when 'left' %}
          {% assign justify_variant = 'flex-start' %}
        {% when 'center' %}
          {% assign justify_variant = 'center' %}
        {% else %}
          {% assign justify_variant = 'right' %}
      {% endcase %}
      style='--justify_variant:{{justify_variant}}'
    {% endif %}
  >
    {% liquid
      for value in option.values
        assign value_check = ''
        for variant in product.variants
          assign value = value | escape
          assign checked = false
          if option.selected_value == value
            assign checked = true
          endif
          if variant.options contains value and value != value_check
            assign value_check = value
            render 'field-color', style: style, name: option.name, value: value, checked: checked, image: variant.featured_image, use_image: color_use_image, size: '1.4rem'
          endif

        endfor
     endfor
    %}
  </xo-product-variant>
</div>
