{% comment %}
  Renders a checkbox button (type color)

  Accepts:
  - name: {string} Name of the checkbox button
  - value: {string} Value of the checkbox button
  - label: {string} Label of the checkbox button (optional)
  - checked: {Boolean} If the radio button is checked (optional)

  Usage:
  {% render 'field-checkbox-color',
    name: 'checkbox',
    value: 'checkbox',
    label: 'Checkbox',
  %}
{% endcomment %}
{% liquid
  assign variant_colors = settings.variant_color_swatches | newline_to_br | split: '<br />'
  assign color = value
  for item in variant_colors
    assign _item = item | replace: '\n', ''
    assign _color = ':' | append: color
    if _item contains color
      assign color = _item | split: ':'
      assign color = color[1] | strip
    endif
  endfor
%}
<label class='field-checkbox-color'>
  <input
    class='field-checkbox-color__input'
    type='checkbox'
    name='{{ name }}'
    value='{{ value | escape }}'
    xo-label='{{ label | escape }}'
    {% if checked %}
      checked
    {% endif %}
  >
  <div class='field-checkbox-color__item'>
    <span class='field-checkbox-color__content' style='--color:{{ color | downcase }}'></span>
  </div>
</label>
