{% # theme-check-disable MissingTemplate, LiquidTag %}

{% assign sect = section.settings %}

{% style %}
  .section-{{ section.id }}-container-padding {
    padding-right: {{ sect.mobile_horizontal_padding }}px;
    padding-left: {{ sect.mobile_horizontal_padding }}px;
    padding-top: {{ sect.mobile_vertical_padding }}px;
    padding-bottom: {{ sect.mobile_vertical_padding }}px;
  }

  .section-{{ section.id }}-container-margin {
    margin-right: {{ sect.mobile_margin_right }}px;
    margin-left: {{ sect.mobile_margin_left }}px;
    margin-top: {{ sect.mobile_margin_top }}px;
    margin-bottom: {{ sect.mobile_margin_bottom }}px;
  }

  .section-{{ section.id }}-content-padding {
    padding-right: {{ sect.mobile_content_horizontal_padding }}px;
    padding-left: {{ sect.mobile_content_horizontal_padding }}px;
    padding-top: {{ sect.mobile_content_vertical_padding }}px;
    padding-bottom: {{ sect.mobile_content_vertical_padding }}px;
  }

  .section-{{ section.id }}-container-background {
    background-color: {{ sect.container_bg_color }};
  }

  @media screen and (min-width: 768px) {
    .section-{{ section.id }}-container-padding {
      padding-right: {{ sect.tablet_horizontal_padding }}px;
      padding-left: {{ sect.tablet_horizontal_padding }}px;
      padding-top: {{ sect.tablet_vertical_padding }}px;
      padding-bottom: {{ sect.tablet_vertical_padding }}px;
    }

    .section-{{ section.id }}-container-margin {
      margin-right: {{ sect.tablet_margin_right }}px;
      margin-left: {{ sect.tablet_margin_left }}px;
      margin-top: {{ sect.tablet_margin_top }}px;
      margin-bottom: {{ sect.tablet_margin_bottom }}px;
    }

    .section-{{ section.id }}-content-padding {
      padding-right: {{ sect.tablet_content_horizontal_padding }}px;
      padding-left: {{ sect.tablet_content_horizontal_padding }}px;
      padding-top: {{ sect.tablet_content_vertical_padding }}px;
      padding-bottom: {{ sect.tablet_content_vertical_padding }}px;
    }

    .section-{{ section.id }}-content-background {
      background-color: {{ sect.content_bg_color }};
    }
  }

  @media screen and (min-width: 1024px) {
    .section-{{ section.id }}-container-padding {
      padding-right: {{ sect.desktop_horizontal_padding }}px;
      padding-left: {{ sect.desktop_horizontal_padding }}px;
      padding-top: {{ sect.desktop_vertical_padding }}px;
      padding-bottom: {{ sect.desktop_vertical_padding }}px;
    }

    .section-{{ section.id }}-container-margin {
      margin-right: {{ sect.desktop_margin_right }}px;
      margin-left: {{ sect.desktop_margin_left }}px;
      margin-top: {{ sect.desktop_margin_top }}px;
      margin-bottom: {{ sect.desktop_margin_bottom }}px;
    }

    .section-{{ section.id }}-content-padding {
      padding-right: {{ sect.desktop_content_horizontal_padding }}px;
      padding-left: {{ sect.desktop_content_horizontal_padding }}px;
      padding-top: {{ sect.desktop_content_vertical_padding }}px;
      padding-bottom: {{ sect.desktop_content_vertical_padding }}px;
    }
  }
{% endstyle %}

{% if sect.mobile_horizontal_padding_in_percentage > 0 %}
  {% style %}
    @media screen and (max-width: 767px) {
      .section-{{ section.id }}-container-padding {
        padding-right: {{ sect.mobile_horizontal_padding_in_percentage }}%;
        padding-left: {{ sect.mobile_horizontal_padding_in_percentage }}%;
      }
    }
  {% endstyle %}
{% endif %}

{% if sect.tablet_horizontal_padding_in_percentage > 0 %}
  {% style %}
    @media screen and (min-width: 768px) and (max-width: 1023px) {
      .section-{{ section.id }}-container-padding {
        padding-right: {{ sect.tablet_horizontal_padding_in_percentage }}%;
        padding-left: {{ sect.tablet_horizontal_padding_in_percentage }}%;
      }
    }
  {% endstyle %}
{% endif %}

{% if sect.desktop_horizontal_padding_in_percentage > 0 %}
  {% style %}
    @media screen and (min-width: 1024px) {
      .section-{{ section.id }}-container-padding {
        padding-right: {{ sect.desktop_horizontal_padding_in_percentage }}%;
        padding-left: {{ sect.desktop_horizontal_padding_in_percentage }}%;
      }
    }
  {% endstyle %}
{% endif %}

{% if sect.mobile_image_max_width_px != blank and sect.mobile_image_max_width_px != 0 %}
  {% style %}
    @media screen and (max-width: 767px) {
      .image-{{ section.id }}-image-max-width-settings {
        max-width: {{ sect.mobile_image_max_width_px }}px;
      }
    }
  {% endstyle %}
{% endif %}

{% if sect.tablet_image_max_width_px != blank and sect.tablet_image_max_width_px != 0 %}
  {% style %}
    @media screen and (min-width: 768px) and (max-width: 1023px) {
      .image-{{ section.id }}-image-max-width-settings {
        max-width: {{ sect.tablet_image_max_width_px }}px;
      }
    }
  {% endstyle %}
{% endif %}

{% if sect.desktop_image_max_width_px != blank and sect.desktop_image_max_width_px != 0 %}
  {% style %}
    @media screen and (min-width: 1024px) {
      .image-{{ section.id }}-image-max-width-settings {
        max-width: {{ sect.desktop_image_max_width_px }}px;
      }
    }
  {% endstyle %}
{% endif %}

{% capture image_width_height_settings %}
  {{ sect.image_height_setting }} {{ sect.image_width_setting }} image-{{ section.id }}-image-max-width-settings {{ sect.image_object_position }} {{ sect.image_object_fit }}
{% endcapture %}

{% capture container_styles %}
  section-{{ section.id }}-container-padding
  section-{{ section.id }}-container-margin
{% endcapture %}

{% capture content_styles %}
  section-{{ section.id }}-content-padding
{% endcapture %}

<div class="flex {{ container_styles }} section-{{ section.id }}-container-background">
  <div class="flex flex-col md:flex-row md:rounded-xl md:shadow-lg items-center w-full {{ content_styles }} section-{{ section.id }}-content-background">
    {% render 'hw_generic-image',
      image: sect.image,
      parent_id: section.id,
      styles: image_width_height_settings
    %}
    <div class="flex flex-col md:flex-row w-full justify-between items-center">
      {% liquid
        for block in section.blocks
          case block.type
            when 'text'
              render 'hw_block-text', settings: block.settings, section_id: section.id, block_id: block.id
            when 'button'
              render 'hw_block-button', settings: block.settings, section_id: section.id, block_id: block.id, right_icon: 'right', right_icon_color: 'var(--color-primary-800)'
          endcase
        endfor
      %}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Image & text horizontal",
  "class": "section",
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "Image"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "color-scheme-1",
          "label": "t:sections.all.settings.color_scheme.options__1.label"
        },
        {
          "value": "color-scheme-2",
          "label": "t:sections.all.settings.color_scheme.options__2.label"
        },
        {
          "value": "color-scheme-3",
          "label": "t:sections.all.settings.color_scheme.options__3.label"
        },
        {
          "value": "color-scheme-4",
          "label": "t:sections.all.settings.color_scheme.options__4.label"
        },
        {
          "value": "color-scheme-5",
          "label": "t:sections.all.settings.color_scheme.options__5.label"
        },
        {
          "value": "color-scheme-6",
          "label": "t:sections.all.settings.color_scheme.options__6.label"
        }
      ],
      "default": "color-scheme-3",
      "label": "t:sections.all.settings.color_scheme.label"
    },
    {
      "type": "color",
      "id": "container_bg_color",
      "default": "rgba(0, 0, 0, 0)",
      "label": "Content background color"
    },
    {
      "type": "color",
      "id": "content_bg_color",
      "default": "rgba(0, 0, 0, 0)",
      "label": "Content background color"
    },
    {
      "type": "header",
      "content": "Image settings (Optional)"
    },
    {
      "type": "select",
      "id": "image_width_setting",
      "options": [
        {
          "value": "",
          "label": "None"
        },
        {
          "value": "w-auto",
          "label": "Auto"
        },
        {
          "value": "w-full",
          "label": "Fill"
        }
      ],
      "default": "",
      "label": "Image width"
    },
    {
      "type": "select",
      "id": "image_height_setting",
      "options": [
        {
          "value": "",
          "label": "None"
        },
        {
          "value": "h-auto",
          "label": "Auto"
        },
        {
          "value": "h-full",
          "label": "Fill"
        }
      ],
      "default": "",
      "label": "Image height"
    },
    {
      "type": "select",
      "id": "image_object_position",
      "options": [
        {
          "value": "",
          "label": "None"
        },
        {
          "value": "object-bottom",
          "label": "Object Bottom"
        },
        {
          "value": "object-center",
          "label": "Object Center"
        },
        {
          "value": "object-left",
          "label": "Object Left"
        },
        {
          "value": "object-left-bottom",
          "label": "Object Left Bottom"
        },
        {
          "value": "object-left-top",
          "label": "Object Left Top"
        },
        {
          "value": "object-right",
          "label": "Object Right"
        },
        {
          "value": "object-right-bottom",
          "label": "Object Right Bottom"
        },
        {
          "value": "object-right-top",
          "label": "Object Right Top"
        },
        {
          "value": "object-top",
          "label": "Object Top"
        }
      ],
      "default": "",
      "label": "Image object position"
    },
    {
      "type": "select",
      "id": "image_object_fit",
      "options": [
        {
          "value": "",
          "label": "None"
        },
        {
          "value": "object-contain",
          "label": "Object Contain"
        },
        {
          "value": "object-cover",
          "label": "Object Cover"
        },
        {
          "value": "object-fill",
          "label": "Object Fill"
        },
        {
          "value": "object-none",
          "label": "Object None"
        },
        {
          "value": "object-scale-down",
          "label": "Object Scale Down"
        }
      ],
      "default": "",
      "label": "Image object fit"
    },
    {
      "type": "header",
      "content": "Image max width settings (Optional)"
    },
    {
      "type": "number",
      "id": "desktop_image_max_width_px",
      "label": "Image max width in px (Desktop)"
    },
    {
      "type": "number",
      "id": "tablet_image_max_width_px",
      "label": "Image max width in px (Tablet)"
    },
    {
      "type": "number",
      "id": "mobile_image_max_width_px",
      "label": "Image max width in px (Mobile)"
    },
    {
      "type": "header",
      "content": "Container Padding Settings in % (Optional)"
    },
    {
      "type": "number",
      "id": "desktop_horizontal_padding_in_percentage",
      "default": 0,
      "label": "Horizontal in % (Desktop)"
    },
    {
      "type": "number",
      "id": "tablet_horizontal_padding_in_percentage",
      "default": 0,
      "label": "Horizontal in % (Tablet)"
    },
    {
      "type": "number",
      "id": "mobile_horizontal_padding_in_percentage",
      "default": 0,
      "label": "Horizontal in % (Mobile)"
    },
    {
      "type": "header",
      "content": "Container Padding Settings"
    },
    {
      "type": "range",
      "id": "desktop_horizontal_padding",
      "min": 0,
      "max": 512,
      "step": 8,
      "unit": "px",
      "label": "Horizontal padding (Desktop)",
      "default": 0
    },
    {
      "type": "range",
      "id": "tablet_horizontal_padding",
      "min": 0,
      "max": 512,
      "step": 8,
      "unit": "px",
      "label": "Horizontal padding (Tablet)",
      "default": 0
    },
    {
      "type": "range",
      "id": "mobile_horizontal_padding",
      "min": 0,
      "max": 512,
      "step": 8,
      "unit": "px",
      "label": "Horizontal padding (Mobile)",
      "default": 0
    },
    {
      "type": "range",
      "id": "desktop_vertical_padding",
      "min": 0,
      "max": 512,
      "step": 8,
      "unit": "px",
      "label": "Vertical padding (Desktop)",
      "default": 0
    },
    {
      "type": "range",
      "id": "tablet_vertical_padding",
      "min": 0,
      "max": 512,
      "step": 8,
      "unit": "px",
      "label": "Horizontal padding (Tablet)",
      "default": 0
    },
    {
      "type": "range",
      "id": "mobile_vertical_padding",
      "min": 0,
      "max": 512,
      "step": 8,
      "unit": "px",
      "label": "Vertical padding (Mobile)",
      "default": 0
    },
    {
      "type": "header",
      "content": "Content Padding Settings"
    },
    {
      "type": "range",
      "id": "desktop_content_horizontal_padding",
      "min": 0,
      "max": 512,
      "step": 8,
      "unit": "px",
      "label": "Horizontal padding (Desktop)",
      "default": 0
    },
    {
      "type": "range",
      "id": "tablet_content_horizontal_padding",
      "min": 0,
      "max": 512,
      "step": 8,
      "unit": "px",
      "label": "Horizontal padding (Tablet)",
      "default": 0
    },
    {
      "type": "range",
      "id": "mobile_content_horizontal_padding",
      "min": 0,
      "max": 512,
      "step": 8,
      "unit": "px",
      "label": "Horizontal padding (Mobile)",
      "default": 0
    },
    {
      "type": "range",
      "id": "desktop_content_vertical_padding",
      "min": 0,
      "max": 512,
      "step": 8,
      "unit": "px",
      "label": "Vertical padding (Desktop)",
      "default": 0
    },
    {
      "type": "range",
      "id": "tablet_content_vertical_padding",
      "min": 0,
      "max": 512,
      "step": 8,
      "unit": "px",
      "label": "Vertical padding (Tablet)",
      "default": 0
    },
    {
      "type": "range",
      "id": "mobile_content_vertical_padding",
      "min": 0,
      "max": 512,
      "step": 8,
      "unit": "px",
      "label": "Vertical padding (Mobile)",
      "default": 0
    }
  ],
  "blocks": [
    {
      "type": "text",
      "name": "Text",
      "limit": 1,
      "settings": [
        {
          "type": "richtext",
          "id": "content",
          "default": "<p>Lorem Ipsum Text</p>",
          "label": "Text content"
        },
        {
          "type": "select",
          "id": "font_family",
          "options": [
            {
              "value": "font-primary",
              "label": "Primary font"
            },
            {
              "value": "font-display",
              "label": "Secondary font"
            }
          ],
          "default": "font-primary",
          "label": "Font family"
        },
        {
          "type": "select",
          "id": "desktop_text_position",
          "options": [
            {
              "value": "",
              "label": "None"
            },
            {
              "value": "lg:text-left",
              "label": "Left"
            },
            {
              "value": "lg:text-center",
              "label": "Centered"
            },
            {
              "value": "lg:text-right",
              "label": "Right"
            }
          ],
          "default": "",
          "label": "Text position (Desktop)"
        },
        {
          "type": "select",
          "id": "tablet_text_position",
          "options": [
            {
              "value": "",
              "label": "None"
            },
            {
              "value": "md:text-left",
              "label": "Left"
            },
            {
              "value": "md:text-center",
              "label": "Centered"
            },
            {
              "value": "md:text-right",
              "label": "Right"
            }
          ],
          "default": "",
          "label": "Text position (Tablet)"
        },
        {
          "type": "select",
          "id": "mobile_text_position",
          "options": [
            {
              "value": "",
              "label": "None"
            },
            {
              "value": "text-left",
              "label": "Left"
            },
            {
              "value": "text-center",
              "label": "Centered"
            },
            {
              "value": "text-right",
              "label": "Right"
            }
          ],
          "default": "",
          "label": "Text position (Mobile)"
        },
        {
          "type": "select",
          "id": "desktop_font_size",
          "options": [
            {
              "value": "lg:text-xs",
              "label": "Text 0.75rem"
            },
            {
              "value": "lg:text-sm",
              "label": "Text 0.875rem"
            },
            {
              "value": "lg:text-base",
              "label": "Text 1rem"
            },
            {
              "value": "lg:text-lg",
              "label": "Text 1.125rem"
            },
            {
              "value": "lg:text-xl",
              "label": "Text 1.25rem"
            },
            {
              "value": "lg:text-2xl",
              "label": "Text 1.5rem"
            },
            {
              "value": "lg:text-3xl",
              "label": "Text 1.875rem"
            },
            {
              "value": "lg:text-4xl",
              "label": "Text 2.25rem"
            },
            {
              "value": "lg:text-5xl",
              "label": "Text 3rem"
            },
            {
              "value": "lg:text-6xl",
              "label": "Text 3.75rem"
            },
            {
              "value": "lg:text-7xl",
              "label": "Text 4.5rem"
            },
            {
              "value": "lg:text-8xl",
              "label": "Text 6rem"
            },
            {
              "value": "lg:text-9xl",
              "label": "Text 8rem"
            }
          ],
          "default": "lg:text-base",
          "label": "Font size (Desktop)"
        },
        {
          "type": "select",
          "id": "tablet_font_size",
          "options": [
            {
              "value": "md:text-xs",
              "label": "Text 0.75rem"
            },
            {
              "value": "md:text-sm",
              "label": "Text 0.875rem"
            },
            {
              "value": "md:text-base",
              "label": "Text 1rem"
            },
            {
              "value": "md:text-lg",
              "label": "Text 1.125rem"
            },
            {
              "value": "md:text-xl",
              "label": "Text 1.25rem"
            },
            {
              "value": "md:text-2xl",
              "label": "Text 1.5rem"
            },
            {
              "value": "md:text-3xl",
              "label": "Text 1.875rem"
            },
            {
              "value": "md:text-4xl",
              "label": "Text 2.25rem"
            },
            {
              "value": "md:text-5xl",
              "label": "Text 3rem"
            },
            {
              "value": "md:text-6xl",
              "label": "Text 3.75rem"
            },
            {
              "value": "md:text-7xl",
              "label": "Text 4.5rem"
            },
            {
              "value": "md:text-8xl",
              "label": "Text 6rem"
            },
            {
              "value": "md:text-9xl",
              "label": "Text 8rem"
            }
          ],
          "default": "md:text-base",
          "label": "Font size (Tablet)"
        },
        {
          "type": "select",
          "id": "mobile_font_size",
          "options": [
            {
              "value": "text-xs",
              "label": "Text 0.75rem"
            },
            {
              "value": "text-sm",
              "label": "Text 0.875rem"
            },
            {
              "value": "text-base",
              "label": "Text 1rem"
            },
            {
              "value": "text-lg",
              "label": "Text 1.125rem"
            },
            {
              "value": "text-xl",
              "label": "Text 1.25rem"
            },
            {
              "value": "text-2xl",
              "label": "Text 1.5rem"
            },
            {
              "value": "text-3xl",
              "label": "Text 1.875rem"
            },
            {
              "value": "text-4xl",
              "label": "Text 2.25rem"
            },
            {
              "value": "text-5xl",
              "label": "Text 3rem"
            },
            {
              "value": "text-6xl",
              "label": "Text 3.75rem"
            },
            {
              "value": "text-7xl",
              "label": "Text 4.5rem"
            },
            {
              "value": "text-8xl",
              "label": "Text 6rem"
            },
            {
              "value": "text-9xl",
              "label": "Text 8rem"
            }
          ],
          "default": "text-base",
          "label": "Font size (Mobile)"
        },
        {
          "type": "select",
          "id": "desktop_font_weight",
          "options": [
            {
              "value": "lg:font-light",
              "label": "Font light"
            },
            {
              "value": "lg:font-normal",
              "label": "Font normal"
            },
            {
              "value": "lg:font-medium",
              "label": "Font medium"
            },
            {
              "value": "lg:font-semibold",
              "label": "Font semibold"
            },
            {
              "value": "lg:font-bold",
              "label": "Font bold"
            }
          ],
          "default": "lg:font-normal",
          "label": "Font weight (Desktop)"
        },
        {
          "type": "select",
          "id": "tablet_font_weight",
          "options": [
            {
              "value": "md:font-light",
              "label": "Font light"
            },
            {
              "value": "md:font-normal",
              "label": "Font normal"
            },
            {
              "value": "md:font-medium",
              "label": "Font medium"
            },
            {
              "value": "md:font-semibold",
              "label": "Font semibold"
            },
            {
              "value": "md:font-bold",
              "label": "Font bold"
            }
          ],
          "default": "md:font-normal",
          "label": "Font weight (Tablet)"
        },
        {
          "type": "select",
          "id": "mobile_font_weight",
          "options": [
            {
              "value": "font-light",
              "label": "Font light"
            },
            {
              "value": "font-normal",
              "label": "Font normal"
            },
            {
              "value": "font-medium",
              "label": "Font medium"
            },
            {
              "value": "font-semibold",
              "label": "Font semibold"
            },
            {
              "value": "font-bold",
              "label": "Font bold"
            }
          ],
          "default": "font-normal",
          "label": "Font weight (Mobile)"
        },
        {
          "type": "select",
          "id": "desktop_line_height",
          "options": [
            {
              "value": "lg:leading-p100",
              "label": "Line height 100%"
            },
            {
              "value": "lg:leading-p125",
              "label": "Line height 125%"
            },
            {
              "value": "lg:leading-p150",
              "label": "Line height 150%"
            },
            {
              "value": "lg:leading-p162_5",
              "label": "Line height 162.5%"
            },
            {
              "value": "lg:leading-p200",
              "label": "Line height 200%"
            }
          ],
          "default": "lg:leading-p100",
          "label": "Line height (Desktop)"
        },
        {
          "type": "select",
          "id": "tablet_line_height",
          "options": [
            {
              "value": "md:leading-p100",
              "label": "Line height 100%"
            },
            {
              "value": "md:leading-p125",
              "label": "Line height 125%"
            },
            {
              "value": "md:leading-p150",
              "label": "Line height 150%"
            },
            {
              "value": "md:leading-p162_5",
              "label": "Line height 162.5%"
            },
            {
              "value": "md:leading-p200",
              "label": "Line height 200%"
            }
          ],
          "default": "md:leading-p100",
          "label": "Line height (Tablet)"
        },
        {
          "type": "select",
          "id": "mobile_line_height",
          "options": [
            {
              "value": "leading-p100",
              "label": "Line height 100%"
            },
            {
              "value": "leading-p125",
              "label": "Line height 125%"
            },
            {
              "value": "leading-p150",
              "label": "Line height 150%"
            },
            {
              "value": "leading-p162_5",
              "label": "Line height 162.5%"
            },
            {
              "value": "leading-p200",
              "label": "Line height 200%"
            }
          ],
          "default": "leading-p100",
          "label": "Line height (Mobile)"
        },
        {
          "type": "color",
          "id": "text_font_color",
          "default": "rgba(0, 0, 0, 0)",
          "label": "Text font color"
        },
        {
          "type": "header",
          "content": "Margin settings"
        },
        {
          "type": "range",
          "id": "desktop_margin_left",
          "min": 0,
          "max": 512,
          "step": 8,
          "unit": "px",
          "label": "Left margin (Desktop)",
          "default": 0
        },
        {
          "type": "range",
          "id": "tablet_margin_left",
          "min": 0,
          "max": 512,
          "step": 8,
          "unit": "px",
          "label": "Left margin (Tablet)",
          "default": 0
        },
        {
          "type": "range",
          "id": "mobile_margin_left",
          "min": 0,
          "max": 512,
          "step": 8,
          "unit": "px",
          "label": "Left margin (Mobile)",
          "default": 0
        },
        {
          "type": "range",
          "id": "desktop_margin_right",
          "min": 0,
          "max": 512,
          "step": 8,
          "unit": "px",
          "label": "Right margin (Desktop)",
          "default": 0
        },
        {
          "type": "range",
          "id": "tablet_margin_right",
          "min": 0,
          "max": 512,
          "step": 8,
          "unit": "px",
          "label": "Right margin (Tablet)",
          "default": 0
        },
        {
          "type": "range",
          "id": "mobile_margin_right",
          "min": 0,
          "max": 512,
          "step": 8,
          "unit": "px",
          "label": "Right margin (Mobile)",
          "default": 0
        },
        {
          "type": "range",
          "id": "desktop_margin_top",
          "min": 0,
          "max": 512,
          "step": 8,
          "unit": "px",
          "label": "Top margin (Desktop)",
          "default": 0
        },
        {
          "type": "range",
          "id": "tablet_margin_top",
          "min": 0,
          "max": 512,
          "step": 8,
          "unit": "px",
          "label": "Top margin (Tablet)",
          "default": 0
        },
        {
          "type": "range",
          "id": "mobile_margin_top",
          "min": 0,
          "max": 512,
          "step": 8,
          "unit": "px",
          "label": "Top margin (Mobile)",
          "default": 0
        },
        {
          "type": "range",
          "id": "desktop_margin_bottom",
          "min": 0,
          "max": 512,
          "step": 8,
          "unit": "px",
          "label": "Bottom margin (Desktop)",
          "default": 0
        },
        {
          "type": "range",
          "id": "tablet_margin_bottom",
          "min": 0,
          "max": 512,
          "step": 8,
          "unit": "px",
          "label": "Bottom margin (Tablet)",
          "default": 0
        },
        {
          "type": "range",
          "id": "mobile_margin_bottom",
          "min": 0,
          "max": 512,
          "step": 8,
          "unit": "px",
          "label": "Bottom margin (Mobile)",
          "default": 0
        }
      ]
    },
    {
      "type": "button",
      "name": "Button settings",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "button_label",
          "default": "Button label",
          "label": "Button label"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Button link"
        },
        {
          "type": "select",
          "id": "mobile_button_position",
          "options": [
            {
              "value": "justify-start",
              "label": "Left"
            },
            {
              "value": "justify-center",
              "label": "Centered"
            },
            {
              "value": "justify-end",
              "label": "Right"
            }
          ],
          "default": "justify-center",
          "label": "Button position (Mobile)"
        },
        {
          "type": "select",
          "id": "button_type",
          "options": [
            {
              "value": "primary",
              "label": "Primary"
            },
            {
              "value": "secondary",
              "label": "Secondary"
            }
          ],
          "default": "primary",
          "label": "Button type"
        },
        {
          "type": "select",
          "id": "button_status",
          "options": [
            {
              "value": "filled",
              "label": "Filled"
            },
            {
              "value": "outline",
              "label": "Outline"
            },
            {
              "value": "ghost",
              "label": "Ghost"
            }
          ],
          "default": "filled",
          "label": "Button status"
        },
        {
          "type": "select",
          "id": "button_size",
          "options": [
            {
              "value": "xs",
              "label": "Extra Small"
            },
            {
              "value": "sm",
              "label": "Small"
            },
            {
              "value": "md",
              "label": "Medium"
            },
            {
              "value": "lg",
              "label": "Large"
            },
            {
              "value": "xl",
              "label": "Extra large"
            }
          ],
          "default": "md",
          "label": "Button size"
        },
        {
          "type": "header",
          "content": "Margin settings"
        },
        {
          "type": "range",
          "id": "desktop_margin_left",
          "min": 0,
          "max": 512,
          "step": 8,
          "unit": "px",
          "label": "Left margin (Desktop)",
          "default": 0
        },
        {
          "type": "range",
          "id": "tablet_margin_left",
          "min": 0,
          "max": 512,
          "step": 8,
          "unit": "px",
          "label": "Left margin (Tablet)",
          "default": 0
        },
        {
          "type": "range",
          "id": "mobile_margin_left",
          "min": 0,
          "max": 512,
          "step": 8,
          "unit": "px",
          "label": "Left margin (Mobile)",
          "default": 0
        },
        {
          "type": "range",
          "id": "desktop_margin_right",
          "min": 0,
          "max": 512,
          "step": 8,
          "unit": "px",
          "label": "Right margin (Desktop)",
          "default": 0
        },
        {
          "type": "range",
          "id": "tablet_margin_right",
          "min": 0,
          "max": 512,
          "step": 8,
          "unit": "px",
          "label": "Right margin (Tablet)",
          "default": 0
        },
        {
          "type": "range",
          "id": "mobile_margin_right",
          "min": 0,
          "max": 512,
          "step": 8,
          "unit": "px",
          "label": "Right margin (Mobile)",
          "default": 0
        },
        {
          "type": "range",
          "id": "desktop_margin_top",
          "min": 0,
          "max": 512,
          "step": 8,
          "unit": "px",
          "label": "Top margin (Desktop)",
          "default": 0
        },
        {
          "type": "range",
          "id": "tablet_margin_top",
          "min": 0,
          "max": 512,
          "step": 8,
          "unit": "px",
          "label": "Top margin (Tablet)",
          "default": 0
        },
        {
          "type": "range",
          "id": "mobile_margin_top",
          "min": 0,
          "max": 512,
          "step": 8,
          "unit": "px",
          "label": "Top margin (Mobile)",
          "default": 0
        },
        {
          "type": "range",
          "id": "desktop_margin_bottom",
          "min": 0,
          "max": 512,
          "step": 8,
          "unit": "px",
          "label": "Bottom margin (Desktop)",
          "default": 0
        },
        {
          "type": "range",
          "id": "tablet_margin_bottom",
          "min": 0,
          "max": 512,
          "step": 8,
          "unit": "px",
          "label": "Bottom margin (Tablet)",
          "default": 0
        },
        {
          "type": "range",
          "id": "mobile_margin_bottom",
          "min": 0,
          "max": 512,
          "step": 8,
          "unit": "px",
          "label": "Bottom margin (Mobile)",
          "default": 0
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Image & text horizontal",
      "blocks": [
        {
          "type": "text"
        },
        {
          "type": "button"
        }
      ]
    }
  ]
}
{% endschema %}