{% comment %}
  Renders a sort by field for a collection or search object

  Accepts:
  - name: {String} Name of the field (optional)
  - value: {String} Value of the field (optional)
  - use_with: {String} Filters or product variant (optional)
  - placement: {String} Placement of the popover (optional)
  - width: {String} Width of popover trigger
  - height: {String} Height of popover trigger
  - style: {String} Modified style added
  Usage:
  {% render 'field-select-custom-variant' %}
{% endcomment %}

<div class='xo-field-select-custom-variant'>
  <xo-popover-trigger
    style='--height:{{ height | default:'4.5rem' }}; --width:{{ width | default:'fit-content' }}'
    class='xo-field-select-custom-variant__trigger {% if style %} xo-field-select-custom-variant__trigger--{{ style }} {% endif %}'
    xo-name='filter-select-custom-{{ name | escape }}'
  >
    <xo-product-variant-selected xo-name='{{ name | escape | remove: '-sticky'}}' class='xo-field-select-custom-variant__name'>
      {{ value | escape }}
    </xo-product-variant-selected>
    {% render 'icon', name: 'chevron-down', icon_size: '15' %}
  </xo-popover-trigger>
  <xo-popover
    class='xo-field-select-custom-variant__popover xo-scrollbar'
    xo-name='filter-select-custom-{{ name | escape }}'
    xo-placement='{{ placement | default: 'bottom-right' }}'
    xo-modal-scroll-selector='.xo-scrollbar'
  >
    {{ options }}
  </xo-popover>
</div>
