{% comment %}
  Renders a divider line

  Accepts:
  - id {id}: Unique ID of block or section
{% endcomment %}

{% stylesheet %}
  .divider {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: var(--divider-justify-content);
  }

  .divider__line {
    border-bottom: var(--divider-border-thickness) solid var(--color-border);
    border-right: var(--divider-border-thickness) solid var(--color-border);
    border-radius: calc(var(--style-border-radius-sm) * var(--divider-border-rounded));
    flex-basis: var(--divider-flex-basis);
    min-height: var(--divider-flex-basis);
  }
{% endstylesheet %}

<div
  class="divider divider-{{ id }} spacing-style"
  style="
    --divider-justify-content: {{ settings.alignment_horizontal | default: 'center' }};
    {% render 'spacing-style', settings: settings %}
  "
  {% if attributes %}
    {{- block.shopify_attributes -}}
  {% endif %}
>
  <span
    class="divider__line"
    style="
      --divider-border-thickness: {{ settings.thickness }}px;
      {% unless full_width %}
        --divider-border-rounded: {% if settings.corner_radius == 'rounded' %}1{% else %}0{% endif %};
      {% endunless %}
      --divider-flex-basis: {{ settings.width_percent }}%;
    "
  ></span>
</div>
