{%- doc -%}
  Intended for use in a block similar to the button block.

  @param {string} link - link to render
  @param {object} [block] - The block

  @example
  {% render 'button', link: '/collections/all' %}
{%- enddoc -%}

{% assign block_settings = block.settings %}

{% capture icon %}
  {% render 'icon-or-image',
    icon: block_settings.icon,
    image_upload: block_settings.image_upload,
    width: block_settings.icon_width,
    class_name: icon_block_class,
    attributes: block.shopify_attributes
  %}
{% endcapture %}

<a id="{{ block_settings.id }}"
  {% if link == blank %}
    role="link"
    aria-disabled="true"
  {% else %}
    href="{{ link }}"
  {% endif %}
  class=" {{ block_settings.css }}
  custom-button 
    size-style
    {{ block_settings.style_class }}
    {{ block_settings.style_class }}--{{ block.id }}
  "
  style="{% render 'size-style', settings: block_settings %}"
  {%- if block_settings.open_in_new_tab -%}
    target="_blank"
    rel="noopener noreferrer"
  {%- endif -%}
  {{ block.shopify_attributes }}
>
  <span>{{ block_settings.label }} </span> {% if block.settings.icon != 'none' %}<span class="svg-wrapper icon-animated">
        {{icon}}
      </span>{% endif %}
</a>

{% stylesheet %}
  .link {
    text-decoration: none;
    text-decoration-color: currentcolor;

    &:hover {
      color: var(--color-primary-hover);
      text-decoration-color: transparent;
    }
  }
  .custom-button{
    display:flex;
    flex-direction: row;
    gap:5px;
    align-items: center !important;
    justify-content: center;
  }
{% endstylesheet %}
