{% # theme-check-disable UndefinedObject %}

{% comment %}
  NOTE(Tayfun): This component is not "generic component" and is used only by section blocks.
{% endcomment %}

{% comment %} Heading block related margin styles {% endcomment %}
{% liquid
  assign sect = settings

  assign text_font_color = blank
  if font_color != blank
    assign text_font_color = font_color
  else
    assign text_font_color_key = settings_prefix | append: 'text_font_color'
    assign text_font_color = settings[text_font_color_key]
  endif
%}
{% if text_font_color != blank and text_font_color.alpha != 0 %}
  {%- style -%}
    .section-{{ section_id }}-{{ block_id }}-text-color {
      color: {{ text_font_color }}
    }
  {%- endstyle -%}
{% endif %}

{% liquid
  assign block_font_settings = blank
  if font_settings != blank
    assign block_font_settings = font_settings
  endif

  assign heading_content = settings.content
  if body != blank
    assign heading_content = body
  endif
%}

{% if block_font_settings == blank %}
  {% liquid
    assign desktop_text_poisition_key = settings_prefix | append: 'desktop_text_position'
    assign tablet_text_position_key = settings_prefix | append: 'tablet_text_position'
    assign mobile_text_position_key = settings_prefix | append: 'mobile_text_position'
    assign font_family_key = settings_prefix | append: 'font_family'
    assign desktop_font_size_key = settings_prefix | append: 'desktop_font_size'
    assign tablet_font_size_key = settings_prefix | append: 'tablet_font_size'
    assign mobile_font_size_key = settings_prefix | append: 'mobile_font_size'
    assign desktop_font_weight_key = settings_prefix | append: 'desktop_font_weight'
    assign tablet_font_weight_key = settings_prefix | append: 'tablet_font_weight'
    assign mobile_font_weight_key = settings_prefix | append: 'mobile_font_weight'
    assign desktop_line_height_key = settings_prefix | append: 'desktop_line_height'
    assign tablet_line_height_key = settings_prefix | append: 'tablet_line_height'
    assign mobile_line_height_key = settings_prefix | append: 'mobile_line_height'
  %}
  {% capture block_font_settings %}
      {{ settings[desktop_text_poisition_key] }} 
      {{ settings[tablet_text_position_key] }}
      {{ settings[mobile_text_position_key] }}
      {{ settings[font_family_key] }}
      {{ settings[desktop_font_size_key] }}
      {{ settings[tablet_font_size_key] }}
      {{ settings[mobile_font_size_key] }}
      {{ settings[desktop_font_weight_key] }}
      {{ settings[tablet_font_weight_key] }}
      {{ settings[mobile_font_weight_key] }}
      {{ settings[desktop_line_height_key] }}
      {{ settings[tablet_line_height_key] }}
      {{ settings[mobile_line_height_key] }}
    {% endcapture %}
{% endif %}

{% liquid
  assign mobile_margin_top_key = settings_prefix | append: 'mobile_margin_top'
  assign mobile_margin_bottom_key = settings_prefix | append: 'mobile_margin_bottom'
  assign tablet_margin_top_key = settings_prefix | append: 'tablet_margin_top'
  assign tablet_margin_bottom_key = settings_prefix | append: 'tablet_margin_bottom'
  assign desktop_margin_top_key = settings_prefix | append: 'desktop_margin_top'
  assign desktop_margin_bottom_key = settings_prefix | append: 'desktop_margin_bottom'
  assign mobile_margin_left_key = settings_prefix | append: 'mobile_margin_left'
  assign mobile_margin_right_key = settings_prefix | append: 'mobile_margin_right'
  assign tablet_margin_left_key = settings_prefix | append: 'tablet_margin_left'
  assign tablet_margin_right_key = settings_prefix | append: 'tablet_margin_right'
  assign desktop_margin_left_key = settings_prefix | append: 'desktop_margin_left'
  assign desktop_margin_right_key = settings_prefix | append: 'desktop_margin_right'

  assign desktop_horizontal_padding_percentage_key = settings_prefix | append: 'desktop_horizontal_padding_percentage'
  assign tablet_horizontal_padding_percentage_key = settings_prefix | append: 'tablet_horizontal_padding_percentage'
  assign mobile_horizontal_padding_percentage_key = settings_prefix | append: 'mobile_horizontal_padding_percentage'
%}

{% style %}
  .section-{{ section_id }}-{{ block_id }}-heading-top-margin {
    margin-top: {{ sect[mobile_margin_top_key] | default: 0 }}px;
  }

  .section-{{ section_id }}-{{ block_id }}-heading-bottom-margin {
    margin-bottom: {{ sect[mobile_margin_bottom_key] | default: 0 }}px;
  }

  .section-{{ section_id }}-{{ block_id }}-heading-left-margin {
    margin-left: {{ sect[mobile_margin_left_key] | default: 0 }}px;
  }

  .section-{{ section_id }}-{{ block_id }}-heading-right-margin {
    margin-right: {{ sect[mobile_margin_right_key] | default: 0 }}px;
  }

  @media screen and (min-width: 768px) {
    .section-{{ section_id }}-{{ block_id }}-heading-top-margin {
      margin-top: {{ sect[tablet_margin_top_key] | default: 0 }}px;
    }

    .section-{{ section_id }}-{{ block_id }}-heading-bottom-margin {
      margin-bottom: {{ sect[tablet_margin_bottom_key] | default: 0 }}px;
    }

    .section-{{ section_id }}-{{ block_id }}-heading-left-margin {
      margin-left: {{ sect[tablet_margin_left_key] | default: 0 }}px;
    }

    .section-{{ section_id }}-{{ block_id }}-heading-right-margin {
      margin-right: {{ sect[tablet_margin_right_key] | default: 0 }}px;
    }
  }

  @media screen and (min-width: 1024px) {
    .section-{{ section_id }}-{{ block_id }}-heading-top-margin {
      margin-top: {{ sect[desktop_margin_top_key] | default: 0 }}px;
    }

    .section-{{ section_id }}-{{ block_id }}-heading-bottom-margin {
      margin-bottom: {{ sect[desktop_margin_bottom_key] | default: 0 }}px;
    }

    .section-{{ section_id }}-{{ block_id }}-heading-left-margin {
      margin-left: {{ sect[desktop_margin_left_key] | default: 0 }}px;
    }

    .section-{{ section_id }}-{{ block_id }}-heading-right-margin {
      margin-right: {{ sect[desktop_margin_right_key] | default: 0 }}px;
    }   
  }
{% endstyle %}

{% if sect[mobile_horizontal_padding_percentage_key] != blank and sect[mobile_horizontal_padding_percentage_key] > 0 %}
  {% style %}
    @media screen and (max-width: 767px) {
      .section-{{ section_id }}-{{ block_id }}-horizontal-padding {
        padding-left: {{ sect[mobile_horizontal_padding_percentage_key] }}%;
        padding-right: {{ sect[mobile_horizontal_padding_percentage_key] }}%;
      }
    }
  {% endstyle %}
{% endif %}

{% if sect[tablet_horizontal_padding_percentage_key] != blank and sect[tablet_horizontal_padding_percentage_key] > 0 %}
  {% style %}
    @media screen and (min-width: 768px) and (max-width: 1023px) {
      .section-{{ section_id }}-{{ block_id }}-horizontal-padding {
        padding-left: {{ sect[tablet_horizontal_padding_percentage_key] }}%;
        padding-right: {{ sect[tablet_horizontal_padding_percentage_key] }}%;
      }
    }
  {% endstyle %}
{% endif %}

{% if sect[desktop_horizontal_padding_percentage_key] != blank and sect[desktop_horizontal_padding_percentage_key] > 0 %}
  {% style %}
    @media screen and (min-width: 1024px) {
      .section-{{ section_id }}-{{ block_id }}-horizontal-padding {
        padding-left: {{ sect[desktop_horizontal_padding_percentage_key] }}%;
        padding-right: {{ sect[desktop_horizontal_padding_percentage_key] }}%;
      }
    }
  {% endstyle %}
{% endif %}

{% capture block_margin_settings %}
  section-{{ section_id }}-{{ block_id }}-heading-top-margin 
  section-{{ section_id }}-{{ block_id }}-heading-bottom-margin  
  section-{{ section_id }}-{{ block_id }}-heading-left-margin 
  section-{{ section_id }}-{{ block_id }}-heading-right-margin
{% endcapture %}

{% capture block_padding_settings %}
  section-{{ section_id }}-{{ block_id }}-horizontal-padding
{% endcapture %}

<h2
  class="{{ block_font_settings | strip | strip_newlines }} {{ block_margin_settings | strip | strip_newlines }} {{ block_padding_settings | strip }} section-{{ section_id }}-{{ block_id }}-text-color"
>
  {{ heading_content | escape }}
</h2>