{% comment %}
  Renders a carousel navigation.
  Accepts:
   - display_navigation_desktop: {string} Disable/enable the carousel navigation on desktop (optional)
   - display_navigation_mobile: {string} Disable/enable the carousel navigation on mobile (optional)
  Usage:
  {% render 'carousel-navigation-style1',
    display_navigation_desktop: display_navigation_desktop,
    display_navigation_mobile: display_navigation_mobile,
  %}
{% endcomment %}

<xo-carousel-prev
  class='carousel-navigation-style1__arrow carousel-navigation-style1__arrow--left'
  style='--display-desktop: {{ display_navigation_desktop }}; --display-mobile: {{ display_navigation_mobile }}'
  ><button aria-label='{{ 'general.slider.previous_slide' | t }}'>{% render 'icon', name: 'arrow-left', icon_size: '16' %}</button></xo-carousel-prev
>
<xo-carousel-next
  class='carousel-navigation-style1__arrow carousel-navigation-style1__arrow--right'
  style='--display-desktop: {{ display_navigation_desktop }}; --display-mobile: {{ display_navigation_mobile }}'
  ><button aria-label='{{ 'general.slider.next_slide' | t }}'>{% render 'icon', name: 'arrow-right', icon_size: '16' %}</button></xo-carousel-next
>
