{% comment %}
  block, margins (boolean), block_attributes (boolean)
{% endcomment %}
{% liquid
  assign item_count = 0
  if block.settings.text_2 != blank or block.settings.show_shipping_time
    assign item_count = item_count | plus: 1
  endif
%}
<div
  class="product__text-container product__text-container--{{ block.settings.alignment }}{% if mobile_align %} product__text-container--mobile-{{ block.settings.mobile_alignment }}{% endif %} product__text-container--{{ block.settings.direction }} product__text-container--{{ block.settings.width }} product__text-container--styling-container{% if block.settings.enable_bg %} product__text-container--background{% endif %}{% if item_count > 1 %} product__text-container--multiple{% endif %}{% if block.settings.width == 'full_negative' %} side-margins-negative{% endif %} {{ block.settings.visibility }}"
  style="--item-count:{{ item_count }};--mobile-text-size: {{ block.settings.mobile_text_size | divided_by: 10.0 }}rem;--desktop-text-size: {{ block.settings.desktop_text_size | divided_by: 10.0 }}rem;--icon-scale:{{ block.settings.icon_scale | divided_by: 100.0 }};--column-gap:{{ block.settings.column_gap | divided_by: 2.0 }}em;--row-gap:{{ block.settings.column_gap | divided_by: 5.0 }}em;--padding:{{ block.settings.padding | divided_by: 7.0 }}em;--bg-color:{{ block.settings.bg_color }};--corner-radius:{{ block.settings.corner_radius | divided_by: 100.0 }}em;--border-size:{{ block.settings.border_size }}px;--border-color:{{ block.settings.border_color }};{% if block.settings.dashedborder %}border-style: dashed;{% endif %}--margin-top: {{ block.settings.margin_top | divided_by: 10.0 }}rem;--margin-bottom: {{ block.settings.margin_bottom | divided_by: 10.0 }}rem;"
  {% if block_attributes %}
    {{- block.shopify_attributes -}}
  {% endif %}
>
  <div class="product__text-wrapper" style="display: flex; align-items: center; justify-content: space-between; width: 100%; {% if block.settings.layout_order == 'flipped' %}flex-direction: row-reverse;{% endif %}">
    <span
      class="product__text product__text-{{ block.settings.alignment }}{% if mobile_align %} product__text-mobile-{{ block.settings.mobile_alignment }}{% endif %}"
      style="--text-color:{{ block.settings.text_color }};--icon-color:{{ block.settings.icon_color }};"
    >
      <div class="sfrom_text_newblock">
        {{ block.settings.dot_text }}
      </div>
    </span>
    
    {% if block.settings.show_shipping_time %}
      <span
        class="product__text product__text-{{ block.settings.alignment }}{% if mobile_align %} product__text-mobile-{{ block.settings.mobile_alignment }}{% endif %}"
        style="--text-color:{{ block.settings.text_color }};--icon-color:{{ block.settings.icon_color }};"
      >
        {% if block.settings.custom_icon_2 != blank %}
          <img
            class="icon-align"
            src="{{ block.settings.custom_icon_2 | image_url }}"
            alt="{{ block.settings.custom_icon_2.alt }}"
            width="auto"
            height="auto"
            loading="lazy"
          >
        {% elsif block.settings.icon_2 != blank %}
          <span class="icon-align">
            {% render 'material-icon', icon: block.settings.icon_2, filled: block.settings.filled_icon_2 %}
          </span>
        {% endif %}
        <dynamic-dates
          class="estimated-shipping"
          data-date-format="{{ block.settings.date_format }}"
          data-day-labels="{{ block.settings.days_labels }}"
          data-month-labels="{{ block.settings.months_labels }}"
        >
          <span
            class="estimated-shipping__text new"
            style="margin:auto;"
            data-dynamic-date="true"
            data-text="{{ block.settings.arrivesdays }}"
            data-min-days="{{ block.settings.min_shipping_days }}"
            data-max-days="{{ block.settings.max_shipping_days }}"
          >
            {{- block.settings.arrivesdays | replace: '[start_date]' | replace: '[end_date]' -}}
          </span>
        </dynamic-dates>
      </span>
    {% elsif block.settings.text_2 != blank %}
      <span
        class="product__text product__text-{{ block.settings.alignment }}{% if mobile_align %} product__text-mobile-{{ block.settings.mobile_alignment }}{% endif %}"
        style="--text-color:{{ block.settings.text_color }};--icon-color:{{ block.settings.icon_color }};"
      >
        {% if block.settings.custom_icon_2 != blank %}
          <img
            class="icon-align"
            src="{{ block.settings.custom_icon_2 | image_url }}"
            alt="{{ block.settings.custom_icon_2.alt }}"
            width="auto"
            height="auto"
            loading="lazy"
          >
        {% elsif block.settings.icon_2 != blank %}
          <span class="icon-align">
            {% render 'material-icon', icon: block.settings.icon_2, filled: block.settings.filled_icon_2 %}
          </span>
        {% endif %}
        <span>{{- block.settings.text_2 -}}</span>
      </span>
    {% endif %}
  </div>
  <style>
    .sfrom_text_newblock p:before {
      position: relative;
      display: inline-block;
      content: "";
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: {{ block.settings.dot_color }};
      margin-right: 5px;
      animation: blink 1.5s infinite;
    }
    .sfrom_text_newblock p {
      display: flex;
      align-items: center;
      gap: 5px;
      line-height: 1;
      margin: 0;
      position: relative;
      font-weight: 400;
      color: {{ block.settings.dot_textcolor }};
    }
    @keyframes blink {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 0.5;
      }
      100% {
        opacity: 1;
      }
    }
  </style>
</div>