{%- style -%}
  .scrolling-ticker-bar-{{ block.id }} {
    overflow: hidden;
    background-color: {{ block.settings.bg_color }};
    padding: {{ block.settings.padding_top }}px 0 {{ block.settings.padding_bottom }}px;
    {% if is_cart %}
      margin: {{ block.settings.margin_top }}px 0 {{ block.settings.margin_bottom }}px;
    {% else %}
      margin-top: {{ block.settings.margin_top | divided_by: 10.0 }}rem;
      margin-bottom: {{ block.settings.margin_bottom | divided_by: 10.0 }}rem;
    {% endif %}
    {% unless block.settings.full_width %}
      border-radius: {{ block.settings.border_radius }}px;
    {% endunless %}
  }
  {% if block.settings.full_width %}
    {% if is_cart %}
      .scrolling-ticker-bar-{{ block.id }} {
        margin-left: -1.5rem;
        margin-right: -1.5rem;
      }
    {% else %}
      .scrolling-ticker-bar-{{ block.id }} {
        margin-left: calc(-1 * var(--page-width-margin, 0px) - 1.5rem);
        margin-right: calc(-1 * var(--page-width-margin, 0px) - 1.5rem);
      }
    {% endif %}
  {% endif %}
  .scrolling-ticker-bar-{{ block.id }} .scrolling-ticker-bar__track {
    display: flex;
    width: max-content;
    animation: scrollingTickerBar{{ block.id }} {{ 30 | divided_by: block.settings.speed }}s linear infinite {{ block.settings.direction }};
  }
  .scrolling-ticker-bar-{{ block.id }}:hover .scrolling-ticker-bar__track {
    animation-play-state: paused;
  }
  .scrolling-ticker-bar-{{ block.id }} .scrolling-ticker-bar__set {
    display: flex;
    align-items: center;
    gap: {{ block.settings.gap }}px;
    padding: 0 {{ block.settings.gap | divided_by: 2 }}px;
    flex-shrink: 0;
  }
  .scrolling-ticker-bar-{{ block.id }} .scrolling-ticker-bar__item {
    display: inline-flex;
    align-items: center;
    gap: {{ block.settings.icon_gap }}px;
    flex-direction: {% if block.settings.icon_position == 'right' %}row-reverse{% else %}row{% endif %};
    font-size: {{ block.settings.text_size | divided_by: 10.0 }}rem;
    color: {{ block.settings.text_color }};
    white-space: nowrap;
    margin: 0;
    line-height: 1.2;
  }
  .scrolling-ticker-bar-{{ block.id }} .scrolling-ticker-bar__item .material-symbols-rounded {
    font-size: calc({{ block.settings.text_size | divided_by: 10.0 }}rem * {{ block.settings.icon_scale | divided_by: 100.0 }});
    color: {{ block.settings.text_color }};
  }
  @keyframes scrollingTickerBar{{ block.id }} {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
{%- endstyle -%}

<div class="scrolling-ticker-bar-{{ block.id }}{% unless is_cart %} {{ block.settings.visibility }}{% endunless %}" {{ block.shopify_attributes }}>
  <div class="scrolling-ticker-bar__track">
    {% for set in (1..2) %}
      <div class="scrolling-ticker-bar__set">
        {% for i in (1..4) %}
          {% liquid
            case i
              when 1
                assign _text = block.settings.item_1_text
                assign _icon = block.settings.item_1_icon
                assign _filled = block.settings.item_1_icon_filled
                assign _custom_icon = block.settings.item_1_custom_icon
              when 2
                assign _text = block.settings.item_2_text
                assign _icon = block.settings.item_2_icon
                assign _filled = block.settings.item_2_icon_filled
                assign _custom_icon = block.settings.item_2_custom_icon
              when 3
                assign _text = block.settings.item_3_text
                assign _icon = block.settings.item_3_icon
                assign _filled = block.settings.item_3_icon_filled
                assign _custom_icon = block.settings.item_3_custom_icon
              when 4
                assign _text = block.settings.item_4_text
                assign _icon = block.settings.item_4_icon
                assign _filled = block.settings.item_4_icon_filled
                assign _custom_icon = block.settings.item_4_custom_icon
            endcase
          %}
          {% if _text != blank %}
            <p class="scrolling-ticker-bar__item">
              {% if _custom_icon != blank %}
                <img
                  src="{{ _custom_icon | image_url }}"
                  alt=""
                  role="presentation"
                  width="auto"
                  height="auto"
                  loading="lazy"
                  style="height: calc({{ block.settings.text_size | divided_by: 10.0 }}rem * {{ block.settings.icon_scale | divided_by: 100.0 }}); width: auto;"
                >
              {% elsif _icon != blank %}
                <span>{% render 'material-icon', icon: _icon, filled: _filled %}</span>
              {% endif %}
              <span>{{ _text }}</span>
            </p>
          {% endif %}
        {% endfor %}
      </div>
    {% endfor %}
  </div>
</div>