"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@gem-sdk/core"),a=require("../base/base.liquid.js"),t=require("../color/color.liquid.js"),i=require("../image/Image.liquid.js"),s=require("../image-shopify/ImageShopify.liquid.js"),l=require("@gem-sdk/system"),o=require("../../common/variants/classes.js"),d=require("../../common/variants/styles.js"),r=require("../../common/variants/attrs.js");exports.default=n=>{let{name:p,variantKey:u,value:c,id:h}=n,g="disable"===n.soldOutStyle,v=l.createClass(o.getVariantItemLabelClass({...n,available:!0})),f=l.createClass(o.getTooltipClass()),m=l.createClass(o.getTooltipSvgClass()),w=l.createClass(o.getVariantOptionClass()),$=l.createStyle(d.getLabelVariantStyle()),b=l.createAttr(r.getVariantOptionAttr(n,"Liquid"));return e.template`
    ${l.Liquid(`{%- liquid
      assign option_disabled = true
      for variantItem in product.variants
        case option.position
          when 1
            if variantItem.available and variantItem.option1 == value
              assign option_disabled = false
            endif
          when 2
            if variantItem.available and variantItem.option2 == value
              assign option_disabled = false
            endif
          when 3
            if variantItem.available and variantItem.option3 == value
              assign option_disabled = false
            endif
        endcase
      endfor
    -%}`)}
    ${l.If(!g,l.Liquid("{% assign option_disabled = false %}"))}
    <label
      id="${h}"
      for="{{product.id}}-${n.uid}-${u}"
      class="${v}"
      style="${$}"
    >
      <div class="${f}">
        <p class="gp-text-[#F9F9F9]">${c?.label}</p>
        <svg class="${m}" width="8" height="4" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M8 10L0 0L16 1.41326e-06L8 10Z" fill="#333333"/>
        </svg>
      </div>
      <input
        checked="${n.checked}"
        name="{{product.id}}-options-${p}"
        id="{{product.id}}-${n.uid}-${u}"
        value="${c?.label}"
        type="radio"
        class="gp-sr-only gp-absolute gp-bottom-0 gp-right-0"
      />
      <span class="gp-sr-only">${c?.label}</span>
      <div
        ${b}
        class="${w} ${l.LiquidIf("option_disabled == true",`${l.If(g,"gp-opacity-20"," ")}`)}">
        ${n.isRenderDefault?e.template`
    ${a.default({...n,isVariantOutStock:g,swatchValue:n.value,value:c})}
    `:e.template`
    {% case type %}
      {% when "rectangle_list" %}
      ${a.default({...n,isVariantOutStock:g,swatchValue:n.value,value:c,swatchHeight:{desktop:"45px"},swatchWidth:{desktop:""}})}
      {% when "color" %}
      ${t.default({...n,isVariantOutStock:g,swatchValue:n.value,value:c,swatchHeight:{desktop:"45px"},swatchWidth:{desktop:"45px"}})}
      {% when "image_shopify" %}
      ${s.default({...n,isVariantOutStock:g,swatchValue:n.value,value:c,swatchHeight:{desktop:"64px"},swatchWidth:{desktop:"64px"}})}
      {% when "image" %}
      ${i.default({...n,isVariantOutStock:g,swatchValue:n.value,value:c,swatchHeight:{desktop:"64px"},swatchWidth:{desktop:"64px"}})}
      {% else %}
    {% endcase %}
    `}
      </div>
    </label>`};
