<div class="{{ block.settings.visibility }}"
  {{ block.shopify_attributes }}
  style="--margin-top: {{ block.settings.margin_top | divided_by: 10.0 }}rem;--margin-bottom: {{ block.settings.margin_bottom | divided_by: 10.0 }}rem;"
>
  <div
    class="fit-indicator"
    style="background-color: {{ block.settings.background_color }};border-radius:{{ block.settings.border_radius }}px;"
  >
    <p class="fit-indicator__title" style="color: {{ block.settings.text_color }};">
      {% if block.settings.title_prefix != blank %}{{ block.settings.title_prefix }}{% endif %}
    </p>

    <div class="fit-indicator__bar" style="background: {{ block.settings.bar_color }};">
      <div
        class="fit-indicator__slider"
        style="background: {{ block.settings.slider_color }}; left: {{ block.settings.fit_size_value }}%;"
      >
        &nbsp;
      </div>
    </div>

    <div class="fit-indicator__labels" style="color: {{ block.settings.text_color }};">
      <span>
        {%- if block.settings.small_label != blank %}{{ block.settings.small_label }}{% else %}&nbsp;{% endif -%}
      </span>
      <span>
        {%- if block.settings.true_size_label != blank -%}
          {{- block.settings.true_size_label -}}
        {%- else -%}
          &nbsp;
        {%- endif -%}
      </span>
      <span>
        {%- if block.settings.large_label != blank %}{{ block.settings.large_label }}{% else %}&nbsp;{% endif -%}
      </span>
    </div>
  </div>
</div>
