<style>
  #fshu_bar{
    display:{% if section.settings.fshu_enable == true %}
    block
  {% else %}
    none
  {% endif %};

      animation: grow 1s ease-in;
  }

    #fshu{
    display:flex;
      justify-content: space-between;
    text-align:center;
    font-weight: {{ section.settings.fshu_font_weight }} ;
    background-color:{{ section.settings.fshu_background_color }};
    padding:{{ section.settings.fshu_padding_vertical }}px {{ section.settings.fshu_padding_horizontal }}px;
  }

    @keyframes grow {
    from { max-height: 0; }
    to   { max-height: 150px; }
  }
  /* Firefox < 16 */
  @-moz-keyframes grow {
    from { max-height: 0; }
    to   { max-height: 150px; }
  }

    /* Safari, Chrome and Opera > 12.1 */
  @-webkit-keyframes grow {
    from { max-height: 0; }
    to   { max-height: 150px; }
  }

    /* Internet Explorer */
  @-ms-keyframes grow {
    from { max-height: 0; }
    to   { max-height: 150px; }
  }
  /* Opera < 12.1 */
  @-o-keyframes grow {
    from { max-height: 0; }
    to   { max-height: 150px; }
  }
  //@forward '';
  @keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

    /* Firefox < 16 */
  @-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

    /* Safari, Chrome and Opera > 12.1 */
  @-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

    /* Internet Explorer */
  @-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

    /* Opera < 12.1 */
  @-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  #fshu-closing{
    cursor:pointer;
    margin-right:5px;
    font-size:{{section.settings.fshu_font_size_lg}}px;
    color: {{ section.settings.fshu_font_color }};
  }

    #fshu .spacer{
    display: block !important;
  }

    #fshu-msg{
    color: {{ section.settings.fshu_font_color }};
    font-size:{{section.settings.fshu_font_size_lg}}px;
    text-decoration:none;
    animation: fadein 1s;
  }

    @media screen and (max-width: 750px) {
   #fshu-closing{
    cursor:pointer;
    margin-right:5px;
    font-size:{{section.settings.fshu_font_size_sm}}px;
  }



        #fshu-msg{
    font-size:{{section.settings.fshu_font_size_sm}}px;
    text-decoration:none
    } 
  }
  @media screen and (min-width: 750px) {
    .fshu-sticky{
        top:0;
        position: -webkit-sticky;
        position: sticky;
        z-index: 999;
    }
  }
</style>

 {% for block in section.blocks %}
  {% if block.type == 'html' %}
  <style>
  {{block.settings.fshu_css}}
  </style>
  {% elsif block.type == 'color'%}
    <style>
    #fshu {
	background: linear-gradient(-45deg, {{block.settings.fshu_background1}}, {{block.settings.fshu_background2}},{{block.settings.fshu_background3}});
	background-size: 300% 300%;
	animation: gradient {{block.settings.fshu_animationlength}}s ease infinite;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
  </style>
  {% endif %} {% endfor %}

<div class="fshu-settings"
id="fshu-settings"
data-showempty="{{ section.settings.fshu_show_empty}}"
data-position="{{ section.settings.fshu_position}}" 
data-targets= <%=fshu_targets%>
data-decimal="{{ section.settings.fshu_decimal}}"
data-shop="{{ shop.domain }}"
data-prefix="{{ section.settings.fshu_prefix }}"
data-suffix="{{ section.settings.fshu_suffix}}"
data-accmsg="{{ section.settings.fshu_accmsg}}"
data-acclink="{{ section.settings.fshu_acclink}}"
data-emptycartmsg="{{ section.settings.fshu_emptycartmsg}}"
data-emptycartlink="{{ section.settings.fshu_emptycartlink}}"
data-upselllink="{{ section.settings.fshu_upselllink}}"
data-showclose="{{ section.settings.fshu_show_close}}"
data-stickytop="{{ section.settings.fshu_stickytop}}"
>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
{% schema %}

{
  "name": "Free Shipping Bar",
  "class": "smart-upsell-free-shipping-bar",
  "tag": "section",
  "presets": [
    {
      "name": "Smart Upsell Free Shipping Bar",
      "category": "Custom Content"
    }
  ],
  "blocks": [
    {
      "type": "html",
      "name": "CSS",
      "limit": 1,
      "settings": [
        {
          "type": "html",
          "id": "fshu_css",
          "label": "Own css",
          "placeholder": "Add your css code to override app defaults"
        }
      ]
    },
    {
      "type": "color",
      "name": "Animated background",
      "settings": [
        {
          "type": "color",
          "id": "fshu_background1",
          "label": "Background color 1",
          "default": "#2DE3B3"
        },
        {
          "type": "color",
          "id": "fshu_background2",
          "label": "Background color 2",
          "default": "#85FF00"
        },
        {
          "type": "color",
          "id": "fshu_background3",
          "label": "Background color 3",
          "default": "#00CCFF"
        },
        {
          "type": "range",
          "id": "fshu_animationlength",
          "min": 2,
          "max": 20,
          "step": 1,
          "unit": "s",
          "label": "Length of animation",
          "default": 10
        }
      ]
    }
  ],
  "settings": [
    {
      "type": "checkbox",
      "id": "fshu_enable",
      "default": false,
      "label": "Enable Free shipping bar"
    },
    {
      "type": "checkbox",
      "id": "fshu_show_empty",
      "default": false,
      "label": "Show when cart is empty"
    },
    {
      "type": "checkbox",
      "id": "fshu_show_close",
      "default": true,
      "label": "Closable bar"
    },
    {
      "type": "select",
      "id": "fshu_position",
      "label": "Position of the bar",
      "options": [
        {
          "value": "top",
          "label": "Top of the page"
        },
        {
          "value": "under",
          "label": "Under the header"
        }
      ],
      "default": "under"
    },
    {
      "type": "checkbox",
      "id": "fshu_decimal",
      "default": true,
      "label": "Decimal point"
    },
    {
      "type": "text",
      "id": "fshu_prefix",
      "label": "Prefix",
      "placeholder": "Missing..."
    },
    {
      "type": "text",
      "id": "fshu_suffix",
      "label": "Suffix",
      "placeholder": "to get free shipping"
    },
    {
      "type": "text",
      "id": "fshu_accmsg",
      "label": "Message for target achieved"
    },
    {
      "type": "text",
      "id": "fshu_acclink",
      "label": "Accomplished target link",
      "placeholder": "https://...collection",
      "default": "#"
    },
    {
      "type": "text",
      "id": "fshu_emptycartmsg",
      "label": "Empty cart message"
    },
    {
      "type": "text",
      "id": "fshu_emptycartlink",
      "label": "Empty cart link",
      "placeholder": "https://...collection",
      "default": "#"
    },
    {
      "type": "text",
      "id": "fshu_upselllink",
      "label": "Upsell collection link",
      "placeholder": "https://...collection",
      "default": "#"
    },
    {
      "type": "range",
      "id": "fshu_font_weight",
      "min": 100,
      "max": 900,
      "step": 100,
      "label": "Font weight",
      "default": 400
    },
    {
      "type": "range",
      "id": "fshu_font_size_lg",
      "min": 5,
      "max": 70,
      "step": 1,
      "unit": "px",
      "label": "Font size",
      "default": 12
    },
    {
      "type": "range",
      "id": "fshu_font_size_sm",
      "min": 5,
      "max": 70,
      "step": 1,
      "unit": "px",
      "label": "Font size mobile",
      "default": 12
    },
    {
      "type": "color",
      "id": "fshu_background_color",
      "label": "Background color",
      "default": "#2DE3B3"
    },
    {
      "type": "color",
      "id": "fshu_font_color",
      "label": "Font color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "fshu_padding_vertical",
      "min": 0,
      "max": 50,
      "step": 1,
      "unit": "px",
      "label": "Padding Top-Bottom",
      "default": 0
    },
    {
      "type": "range",
      "id": "fshu_padding_horizontal",
      "min": 0,
      "max": 50,
      "step": 1,
      "unit": "px",
      "label": "Padding Left-Right",
      "default": 0
    },
    {
      "type": "checkbox",
      "id": "fshu_stickytop",
      "default": false,
      "label": "Stick to the top on large screen"
    },
    {
      "type": "header",
      "content": {
        "en": "Custom CSS and Animation"
      }
    }
  ]
}



{% endschema %}