{% style %}
.hdt-separator--{{ block.id }}{
  border-color: {{ block.settings.color }};
  border-style: {{ block.settings.style_class }};
  border-width: {{ block.settings.thickness }}px 0 0 0;
}
.hdt-separator-block > hr {
  min-width: 25px;
}
#{{ block.id }}{
    --section-pt: {{ block.settings.padding_top }}px;
    --section-pb: {{ block.settings.padding_bottom }}px; 
    --section-prate: {{ block.settings.padding_rate }};
}
@media (min-width:768px) and (max-width:1149px){
  .hdt-separator-tb-true{
    display:none;
  }
}
@media(max-width:767px){
  .hdt-separator-mb-true{
    display:none;
  }
}
{% endstyle %}
<div id="{{ block.id }}" class="hdt-separator-block hdt-separator--{{ block.id }} hdt-separator-block--horizontal hdt-separator-mb-{{ block.settings.hide_line_mb }} hdt-separator-tb-{{ block.settings.hide_line_tb }} hdt-section-spacing" {{ block.shopify_attributes }}>
</div>

{% schema %}
{
  "name": "Separator line",
  "tag": null,
  "settings": [
    {
      "type":"checkbox",
      "id":"hide_line_tb",
      "label":"Hidden on tablet",
      "default":false
    },
    {
      "type":"checkbox",
      "id":"hide_line_mb",
      "label":"Hidden on mobile",
      "default":false
    },
    /*{
      "type": "select",
      "id": "direction",
      "label": "Direction",
      "options": [
        {
          "value": "horizontal",
          "label": "Horizontal"
        },
        {
          "value": "vertical",
          "label": "Vertical"
        }
      ],
      "info": "The separator is always horizontal on mobile.",
      "default": "horizontal"
    },*/
    {
      "type": "color",
      "id": "color",
      "label": "Color",
      "default": "#000000"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 52
    },
    {
      "type": "range",
      "id": "padding_rate",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "%",
      "label": "t:sections.all.padding.padding_rate",
      "default": 75
    },
    {
      "type": "select",
      "id": "thickness",
      "label": "Thickness",
      "options": [
        {
          "value": "1",
          "label": "Thin"
        },
        {
          "value": "3",
          "label": "Medium"
        },
        {
          "value": "5",
          "label": "Thick"
        }
      ],
      "default": "1"
    },
    {
      "type": "select",
      "id": "style_class",
      "label": "Style",
      "options": [
        {
          "value": "solid",
          "label": "Solid"
        },
        {
          "value": "dotted",
          "label": "Dotted"
        },
        {
          "value": "dashed",
          "label": "Dashed"
        }
      ],
      "default": "solid"
    }
  ],
  "presets": [
    {
      "name": "Separator"
    }
  ]
}
{% endschema %}
