<div class="{% if section.settings.heading_divider == 'boxed' %} page-width{% endif %}"><div class="divider_wide"></div></div>
<style>
  /*===== START BORDER STYLE CSS =====*/
  #shopify-section-{{section.id}} .divider_wide {
    width:100%;
    {% if section.settings.divider_thick == 1 %}
    border-top:1px solid {{ settings.color_borders }};
    {% elsif section.settings.divider_thick == 2 %}
    border-top:1.6px solid {{ settings.color_borders }};
    {% elsif section.settings.divider_thick == 3 %}
    border-top:2.5px solid {{ settings.color_borders }};
    {% endif %}
  }
  /*===== END BORDER STYLE CSS =====*/
  </style>
{% schema %}
  {
    "name": "Divider",
    "class": "index-section",
    "settings": [
      {
        "type": "header",
        "content": "Divider [NEED HELP?](https:\/\/help.boostertheme.com\/hc\/en-us\/articles\/360002080814-How-to-setup-Divider-section-in-Booster-2-0)"
      },
      {
        "type": "select",
        "id": "heading_divider",
        "label": "Heading Divider",
        "default": "full",
        "options": [
          {
            "value": "full",
            "label": "Wide"
          },
          {
            "value": "boxed",
            "label": "boxed"
          }
        ]
      },
      {
        "type": "range",
        "id": "divider_thick",
        "label": "Divider Thickness",
        "min": 1,
        "max": 3,
        "step": 1,
        "default": 1
      }
    ],
    "presets": [
      {
        "name": "Divider",
        "category": "Divider"
      }
    ]
  }
{% endschema %}
