{# Make sure any variables are listed inside the following if statement #}
{% if context %}
  {% set type = context.type %}
  {% set text = context.text %}
  {% set scrollToId = context.scrollToId %}
  {% set example = context.example %}
{% endif %}

{# Determine text, if not explicitly set -#}
{% if not text %}
  {% set text = 'Back to top' %}
{% endif %}

{% if example == true %}
  <!-- this HTML is for example use only -->
  <div class="" style="position: relative;" id="top">
  {% render '@vf-content' %}
{% endif %}

<div class="vf-back-to-top vf-back-top--{{type}}" data-vf-js-back-to-top {% if type === 'floating'%} data-vf-js-back-to-top-floating {% endif %}>
  <a {% if scrollToId %}href="{{'#'+scrollToId}}" data-scroll-to-id="{{scrollToId}}" {% endif %}class="vf-button vf-button--secondary vf-button--sm" aria-label="{{text}}">
    <svg class="vf-icon vf-icon--search-btn | vf-button__icon" viewBox="0 0 140 140" width="16" height="16">
      <g transform="matrix(5.833333333333333,0,0,5.833333333333333,0,0)">
        <path d="M23.421,11.765,13.768.8A2.641,2.641,0,0,0,12,0a2.645,2.645,0,0,0-1.768.8L.579,11.765A1.413,1.413,0,1,0,2.7,13.632l7.45-8.466a.25.25,0,0,1,.437.166V22.587a1.413,1.413,0,1,0,2.826,0V5.332a.25.25,0,0,1,.438-.165L21.3,13.632a1.413,1.413,0,1,0,2.121-1.867Z" fill="#3b6fb6" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"></path>
      </g>
    </svg>
    {{text}}
  </a>
</div>

{% if example == true %}
  <!-- this HTML is for example use only -->
  </div>
{% endif %}