Color Swatches

<div role="listitem" class="radio-button-size w-dyn-item">
  <label 
    data-wf--filter-color-swatch--variant="100-circular"
    class="cc-radio-element w-variant-02eecf56-323b-4b55-1ee7-3408d1502cb5"
  >
    <input 
      type="radio"
      name="color"
      class="input w-variant-02eecf56-323b-4b55-1ee7-3408d1502cb5 color-radio"
      style="background-color: #ff3000;"
      fs-list-value="red"
      group="color"
      fs-list-field="color"
      title="Red"
      data-gtm-form-interact-field-id="0"
    >
  </label>
</div>

<label 
  data-wf--filter-color-swatch--variant="100-circular"
  class="cc-radio-element w-variant-02eecf56-323b-4b55-1ee7-3408d1502cb5"
>
  <img 
    src="https://cdn.prod.website-files.com/6456cd6f09c374a35490d289/65369a52a204f0002d71e0be_close_icon.svg" 
    loading="lazy" 
    alt="" 
    class="image"
  >
  <input 
    type="radio"
    name="color"
    class="input w-variant-02eecf56-323b-4b55-1ee7-3408d1502cb5 color-radio"
    style=""
    fs-list-value=""
    group="color"
    fs-list-field="color"
    title=""
    data-gtm-form-interact-field-id="3"
  >
</label>

<style>
input.color-radio {

  /* Reset native appearance */
  appearance: none;
  -webkit-appearance: none;
  background: none;
  outline: none;
  border: none;
  padding: 0;
  margin: 0;

  /* Custom style */
  cursor: pointer;
  transition: border 0.2s, box-shadow 0.2s;
  display: inline-block;
}

/* Style when selected */
input.color-radio:checked {
  border: 3px solid black;
  box-shadow: 0 0 0 2px white inset;
}

</style>