{% liquid
  assign effect = 'hdt-reveal="slide-in" timeline'
  if section.id contains 'slideshow'
    assign effect = 'reval'
  endif   
%}
<a {{ effect }} id="block-{{ block.id }}" {% if block.settings.link == blank %}role="link" aria-disabled="true"{% else %}href="{{ block.settings.link }}"{% endif %} class="hdt-button-block hdt-btn hdt-relative hdt-oh hdt-font-{{ block.settings.font_weight }} hdt-btn--size-{{ block.settings.font_size }} hdt-btn-{{ block.settings.style_class }}{% if block.settings.full_width %} hdt-btn-full-width{% endif %}{% if block.settings.icon != "none" %} hdt-btn--with-icon  hdt-btn--pos-icon-{{ block.settings.icon_position }}{% endif %}"{% if block.settings.icon != "none" %} style="--gap-btn-icon: {{ block.settings.icon_spacing }}px; --height-btn-icon: {{ block.settings.icon_height }}px"{% endif %} {% if block.settings.open_in_new_tab %} target="_blank" rel="noopener noreferrer"{% endif -%} {{ block.shopify_attributes }}>
  {%- liquid
  if block.settings.icon != 'none'
    render 'icons', icon: block.settings.icon
  endif
  echo block.settings.label
  -%}
</a>
{%- if block.settings.font_size == "custom custom-inline" -%}
  {%- style -%}
    #block-{{ block.id }} {
      --padding-button: 5px {{ block.settings.padding_btn }}px; --height-button: {{ block.settings.min_height_btn }}px; --font-size-button: {{ block.settings.font_size_btn }}px;--min-width-btn: {{ block.settings.min_width_btn }}px; --min-width-btn-dt: {{ block.settings.min_width_dt_btn }}px;
    }
  {%- endstyle -%}
{%- endif -%}
{% schema %}
{
  "name": "Button",
  "tag": null,
  "settings": [
    {
      "type": "text",
      "id": "label",
      "label": "Label",
      "default": "Button label"
    },
    {
      "type": "url",
      "id": "link",
      "label": "Link"
    },
    {
      "type": "checkbox",
      "id": "open_in_new_tab",
      "label": "Open this link in a new tab",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "full_width",
      "label": "Make button full width",
      "default": false
    },
    {
      "type": "select",
      "id": "style_class",
      "label": "Style",
      "options": [
        {
          "value": "solid",
          "label": "Solid"
        },
        {
          "value": "outline",
          "label": "Outline"
        },
        {
          "value": "link",
          "label": "Link"
        }/*,
        {
          "value": "3d",
          "label": "3D"
        }*/
      ],
      "default": "solid"
    },
    
    {
      "type": "select",
      "id": "font_size",
      "label": "Size",
      "options": [
        {
          "value": "xs",
          "label": "Extra small"
        },
        {
          "value": "s",
          "label": "Small"
        },
        {
          "value": "m",
          "label": "Medium"
        },
        {
          "value": "l",
          "label": "Large"
        },
        {
          "value": "xl",
          "label": "Extra Large"
        },
        {
          "value": "custom hdt-btn--size-custom-1",
          "label": "Custom size default"
        },
        {
          "value": "custom custom-inline",
          "label": "Custom size inline"
        }
      ],
      "default": "m"
    },
    {
      "type": "select",
      "id": "font_weight",
      "label": "Font weight",
      "options": [
        {
          "value": "light",
          "label": "Light"
        },
        {
          "value": "normal",
          "label": "Normal"
        },
        {
          "value": "medium",
          "label": "Medium"
        },
        {
          "value": "semibold",
          "label": "Semibold"
        },
        {
          "value": "bold",
          "label": "Bold"
        },
      ],
      "default": "normal"
    },
    {
      "type": "header",
      "content": "Custom size options"
    },
    {
      "type": "range",
      "id": "font_size_btn",
      "min": 10,
      "max": 50,
      "step": 1,
      "unit": "px",
      "label": "Font size",
      "default": 14
    },
    {
      "type": "range",
      "id": "padding_btn",
      "min": 5,
      "max": 80,
      "step": 1,
      "unit": "px",
      "label": "Horizontal space",
      "default": 30
    },
    {
      "type": "range",
      "id": "min_width_btn",
      "min": 100,
      "max": 300,
      "step": 2,
      "unit": "px",
      "label": "Min width",
      "default": 100
    },
    {
      "type": "range",
      "id": "min_width_dt_btn",
      "min": 100,
      "max": 300,
      "step": 2,
      "unit": "px",
      "label": "Min width (Desktop)",
      "default": 100
    },
    {
      "type": "range",
      "id": "min_height_btn",
      "min": 25,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "Min height",
      "default": 40
    },
    {
      "type": "header",
      "content": "Icon"
    },
    {
      "type": "select",
      "id": "icon",
      "label": "t:blocks.icon.settings.icon.label",
      "options": [
        {
          "value": "none",
          "label": "None"
        },
        {
          "value": "arrow_right",
          "label": "Arrow"
        },
        {
          "value": "arrow_simple",
          "label": "Arrow simple"
        },
        {
          "value": "arrow_bottom",
          "label": "Arrow bottom"
        },
        {
          "value": "arrow_stretch",
          "label": "Arrow stretch"
        },
        {
          "value": "car",
          "label": "t:blocks.icon.settings.icon.options__1.label"
        },
        {
          "value": "truck",
          "label": "t:blocks.icon.settings.icon.options__2.label"
        },
        {
          "value": "diamond",
          "label": "t:blocks.icon.settings.icon.options__3.label"
        },
        {
          "value": "door-lock",
          "label": "t:blocks.icon.settings.icon.options__4.label"
        },
        {
          "value": "gym",
          "label": "t:blocks.icon.settings.icon.options__5.label"
        },
        {
          "value": "hammer",
          "label": "t:blocks.icon.settings.icon.options__6.label"
        },
        {
          "value": "headphones",
          "label": "t:blocks.icon.settings.icon.options__7.label"
        },
        {
          "value": "helm",
          "label": "t:blocks.icon.settings.icon.options__8.label"
        },
        {
          "value": "hourglass",
          "label": "t:blocks.icon.settings.icon.options__9.label"
        },
        {
          "value": "map",
          "label": "t:blocks.icon.settings.icon.options__10.label"
        },
        {
          "value": "piggy",
          "label": "t:blocks.icon.settings.icon.options__11.label"
        },
        {
          "value": "refesh",
          "label": "t:blocks.icon.settings.icon.options__12.label"
        },
        {
          "value": "rocket",
          "label": "t:blocks.icon.settings.icon.options__13.label"
        },
        {
          "value": "shield",
          "label": "t:blocks.icon.settings.icon.options__14.label"
        },
        {
          "value": "shield2",
          "label": "t:blocks.icon.settings.icon.options__15.label"
        },
        {
          "value": "smile",
          "label": "t:blocks.icon.settings.icon.options__16.label"
        },
        {
          "value": "scissors",
          "label": "t:blocks.icon.settings.icon.options__17.label"
        },
        {
          "value": "shuffle",
          "label": "t:blocks.icon.settings.icon.options__18.label"
        },
        {
          "value": "cloud_upload",
          "label": "t:blocks.icon.settings.icon.options__19.label"
        },
        {
          "value": "cash",
          "label": "t:blocks.icon.settings.icon.options__20.label"
        },
        {
          "value": "way",
          "label": "t:blocks.icon.settings.icon.options__21.label"
        },
        {
          "value": "wristwatch",
          "label": "t:blocks.icon.settings.icon.options__22.label"
        },
        {
          "value": "world",
          "label": "t:blocks.icon.settings.icon.options__23.label"
        },
        {
          "value": "wallet",
          "label": "t:blocks.icon.settings.icon.options__24.label"
        },
        {
          "value": "unlock",
          "label": "t:blocks.icon.settings.icon.options__25.label"
        },
        {
          "value": "umbrella",
          "label": "t:blocks.icon.settings.icon.options__26.label"
        },
        {
          "value": "repeat",
          "label": "t:blocks.icon.settings.icon.options__27.label"
        },
        {
          "value": "refesh-2",
          "label": "t:blocks.icon.settings.icon.options__28.label"
        },
        {
          "value": "medal",
          "label": "t:blocks.icon.settings.icon.options__29.label"
        },
        {
          "value": "portfolio",
          "label": "t:blocks.icon.settings.icon.options__30.label"
        },
        {
          "value": "like",
          "label": "t:blocks.icon.settings.icon.options__31.label"
        },
        {
          "value": "plance",
          "label": "t:blocks.icon.settings.icon.options__32.label"
        },
        {
          "value": "map-maker",
          "label": "t:blocks.icon.settings.icon.options__33.label"
        },
        {
          "value": "help",
          "label": "t:blocks.icon.settings.icon.options__34.label"
        },
        {
          "value": "gift",
          "label": "t:blocks.icon.settings.icon.options__35.label"
        },
        {
          "value": "cart",
          "label": "t:blocks.icon.settings.icon.options__36.label"
        },
        {
          "value": "box",
          "label": "t:blocks.icon.settings.icon.options__37.label"
        },
        {
          "value": "back",
          "label": "t:blocks.icon.settings.icon.options__38.label"
        },
        {
          "value": "back2",
          "label": "t:blocks.icon.settings.icon.options__39.label"
        }
      ],
      "default": "none"
    },
    {
      "type": "select",
      "id": "icon_position",
      "label": "Icon position",
      "options": [
        {
          "value": "before",
          "label": "Before"
        },
        {
          "value": "after",
          "label": "After"
        }
      ],
      "default": "after"
    },
    {
      "type": "range",
      "id": "icon_height",
      "min": 0,
      "max": 50,
      "step": 1,
      "unit": "px",
      "label": "Icon size",
      "default": 14
    },
    {
      "type": "range",
      "id": "icon_spacing",
      "min": 0,
      "max": 50,
      "step": 1,
      "unit": "px",
      "label": "Icon spacing",
      "default": 5
    }
  ],
  "presets": [
    {
      "name": "Button"
    }
  ]
}
{% endschema %}
