{%- liquid
  assign body_font_bold = settings.type_body_font | font_modify: 'weight', 'bold'
  assign body_font_italic = settings.type_body_font | font_modify: 'style', 'italic'
  assign body_font_bold_italic = body_font_bold | font_modify: 'style', 'italic'
%}

{% style %}
  {% if settings.font_body_selection == 'shopify_fonts' %}
    {{ settings.type_body_font | font_face: font_display: 'swap' }}
    {{ body_font_bold | font_face: font_display: 'swap' }}
    {{ body_font_italic | font_face: font_display: 'swap' }}
    {{ body_font_bold_italic | font_face: font_display: 'swap' }}
  {% endif %}
  {% if settings.font_heading_selection == 'shopify_fonts' %}
    {{ settings.type_header_font | font_face: font_display: 'swap' }}
  {% endif %}
  {% if settings.font_custom_selection == 'shopify_fonts' %}
    {{ settings.type_custom_font | font_face: font_display: 'swap' }}
  {% endif %}

    {% for scheme in settings.color_schemes -%}
      {% assign scheme_classes = scheme_classes | append: ', .color-' | append: scheme.id %}
      {% if forloop.index == 1 -%}
        :root,
      {%- endif %}
      .color-{{ scheme.id }} {
        --color-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
      {% if scheme.settings.background_gradient != empty %}
        --gradient-background: {{ scheme.settings.background_gradient }};
      {% else %}
        --gradient-background: {{ scheme.settings.background }};
      {% endif %}
      --color-accent: {{ scheme.settings.accent.red }},{{ scheme.settings.accent.green }},{{ scheme.settings.accent.blue }};
      --color-foreground: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
      --color-shadow: {{ scheme.settings.shadow.red }},{{ scheme.settings.shadow.green }},{{ scheme.settings.shadow.blue }};
      --color-border: {{ scheme.settings.border.red }},{{ scheme.settings.border.green }},{{ scheme.settings.border.blue }};
      --color-button: {{ scheme.settings.button.red }},{{ scheme.settings.button.green }},{{ scheme.settings.button.blue }};
      --color-button-text: {{ scheme.settings.button_label.red }},{{ scheme.settings.button_label.green }},{{ scheme.settings.button_label.blue }};
      --color-secondary-button: {{ scheme.settings.secondary_button.red }},{{ scheme.settings.secondary_button.green }},{{ scheme.settings.secondary_button.blue }};
      --color-secondary-button-text: {{ scheme.settings.secondary_button_label.red }},{{ scheme.settings.secondary_button_label.green }},{{ scheme.settings.secondary_button_label.blue }};
      --color-tertiary-button: {{ scheme.settings.tertiary_button.red }},{{ scheme.settings.tertiary_button.green }},{{ scheme.settings.tertiary_button.blue }};
      --color-tertiary-button-text: {{ scheme.settings.tertiary_button_label.red }},{{ scheme.settings.tertiary_button_label.green }},{{ scheme.settings.tertiary_button_label.blue }};
      --color-gray-button: {{ scheme.settings.gray_button.red }},{{ scheme.settings.gray_button.green }},{{ scheme.settings.gray_button.blue }};
      --color-gray-button-text: {{ scheme.settings.gray_button_label.red }},{{ scheme.settings.gray_button_label.green }},{{ scheme.settings.gray_button_label.blue }};
      --color-dark-button: {{ scheme.settings.dark_button.red }},{{ scheme.settings.dark_button.green }},{{ scheme.settings.dark_button.blue }};
      --color-dark-button-text: {{ scheme.settings.dark_button_label.red }},{{ scheme.settings.dark_button_label.green }},{{ scheme.settings.dark_button_label.blue }};
      --color-light-button: {{ scheme.settings.light_button.red }},{{ scheme.settings.light_button.green }},{{ scheme.settings.light_button.blue }};
      --color-light-button-text: {{ scheme.settings.light_button_label.red }},{{ scheme.settings.light_button_label.green }},{{ scheme.settings.light_button_label.blue }};
      --color-link: {{ scheme.settings.button_label.red }},{{ scheme.settings.button_label.green }},{{ scheme.settings.button_label.blue }};
      --color-badge-foreground: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
      --color-badge-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
      --color-badge-border: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
      --payment-terms-background-color: rgb({{ scheme.settings.background.rgb }});
    }
    {% endfor %}

    {{ scheme_classes | prepend: 'body' }} {
      color: rgba(var(--color-foreground), 0.75);
      background-color: rgb(var(--color-background));
    }

    :root {
      --font-body-desktop-size: 1.6rem;
      --font-body-mobile-size: 1.5rem;
      --font-body-family: {% if settings.font_body_selection == 'shopify_fonts' %}{{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }}
      {% else %}{{ settings.font_body_selection }} {% endif %}, san-serif;
      --font-body-style: {{ settings.font_body_style }};
      --font-body-weight: {{ settings.font_body_weight }};
      --font-body-weight-bold: {{ settings.font_body_weight }};
                           /* HEADING */
      --font-heading-family: {% if settings.font_heading_selection == 'shopify_fonts' %}{{ settings.type_header_font.family }}, {{settings.type_header_font.fallback_families }}{% else %}{{ settings.font_heading_selection }} {% endif %}, san-serif;
      --font-heading-style: {{ settings.font_heading_style }};
      --font-heading-weight: {{ settings.font_heading_weight }};
      --font-body-scale: {{ settings.body_scale | divided_by: 100.0 }};
      --font-heading-scale: {{ settings.heading_scale | times: 1.0 | divided_by: settings.body_scale }};
                            /* CUSTOM */
      --font-custom-family: {% if settings.font_custom_selection == 'shopify_fonts' %}{{ settings.type_custom_font.family }}, {{settings.type_custom_font.fallback_families }}{% else %}{{ settings.font_custom_selection }} {% endif %}, san-serif;
      --media-padding: {{ settings.media_padding }}px;
      --media-border-opacity: {{ settings.media_border_opacity | divided_by: 100.0 }};
      --media-border-width: {{ settings.media_border_thickness }}px;
      --media-radius: {{ settings.media_radius }}px;
      --media-shadow-opacity: {{ settings.media_shadow_opacity | divided_by: 100.0 }};
      --media-shadow-horizontal-offset: {{ settings.media_shadow_horizontal_offset }}px;
      --media-shadow-vertical-offset: {{ settings.media_shadow_vertical_offset }}px;
      --media-shadow-blur-radius: {{ settings.media_shadow_blur }}px;
      --media-shadow-visible: {% if settings.media_shadow_opacity > 0 %}1{% else %}0{% endif %};

      --page-width: {{ settings.page_width | divided_by: 10 }}rem;
      --page-width-margin: {% if settings.page_width == '1600' %}2{% else %}0{% endif %}rem;

      --product-card-image-padding: {{ settings.product_card_image_padding | divided_by: 10.0 }}rem;
      --product-card-content-padding: {{ settings.product_card_content_padding | divided_by: 10.0 }}rem;
      --product-card-corner-radius: {{ settings.product_card_corner_radius | divided_by: 10.0 }}rem;
      --product-card-text-alignment: {{ settings.product_card_text_alignment }};
      --product-card-border-width: {{ settings.product_card_border_thickness | divided_by: 10.0 }}rem;
      --product-card-border-opacity: {{ settings.product_card_border_opacity | divided_by: 100.0 }};
      --product-card-shadow-opacity: {{ settings.product_card_shadow_opacity | divided_by: 100.0 }};
      --product-card-shadow-visible: {% if settings.product_card_shadow_opacity > 0 %}1{% else %}0{% endif %};
      --product-card-shadow-horizontal-offset: {{ settings.product_card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
      --product-card-shadow-vertical-offset: {{ settings.product_card_shadow_vertical_offset | divided_by: 10.0 }}rem;
      --product-card-shadow-blur-radius: {{ settings.product_card_shadow_blur | divided_by: 10.0 }}rem;

      --collection-card-image-padding: {{ settings.collection_card_image_padding | divided_by: 10.0 }}rem;
      --collection-card-content-padding: {{ settings.collection_card_content_padding | divided_by: 10.0 }}rem;
      --collection-card-corner-radius: {{ settings.collection_card_corner_radius | divided_by: 10.0 }}rem;
      --collection-card-text-alignment: {{ settings.collection_card_text_alignment }};
      --collection-card-border-width: {{ settings.collection_card_border_thickness | divided_by: 10.0 }}rem;
      --collection-card-border-opacity: {{ settings.collection_card_border_opacity | divided_by: 100.0 }};
      --collection-card-shadow-opacity: {{ settings.collection_card_shadow_opacity | divided_by: 100.0 }};
      --collection-card-shadow-visible: {% if settings.collection_card_shadow_opacity > 0 %}1{% else %}0{% endif %};
      --collection-card-shadow-horizontal-offset: {{ settings.collection_card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
      --collection-card-shadow-vertical-offset: {{ settings.collection_card_shadow_vertical_offset | divided_by: 10.0 }}rem;
      --collection-card-shadow-blur-radius: {{ settings.collection_card_shadow_blur | divided_by: 10.0 }}rem;

      --article-card-image-padding: {{ settings.article_card_image_padding | divided_by: 10.0 }}rem;
      --article-card-content-padding: {{ settings.article_card_content_padding | divided_by: 10.0 }}rem;
      --article-card-corner-radius: {{ settings.article_card_corner_radius | divided_by: 10.0 }}rem;
      --article-card-text-alignment: {{ settings.article_card_text_alignment }};
      --article-card-border-width: {{ settings.article_card_border_thickness | divided_by: 10.0 }}rem;
      --article-card-border-opacity: {{ settings.article_card_border_opacity | divided_by: 100.0 }};
      --article-card-shadow-opacity: {{ settings.article_card_shadow_opacity | divided_by: 100.0 }};
      --article-card-shadow-visible: {% if settings.article_card_shadow_opacity > 0 %}1{% else %}0{% endif %};
      --article-card-shadow-horizontal-offset: {{ settings.article_card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
      --article-card-shadow-vertical-offset: {{ settings.article_card_shadow_vertical_offset | divided_by: 10.0 }}rem;
      --article-card-shadow-blur-radius: {{ settings.article_card_shadow_blur | divided_by: 10.0 }}rem;

      --badge-corner-radius: {{ settings.badge_corner_radius | divided_by: 10.0 }}rem;

      --modal-border-width: {{ settings.modal_border_thickness }}px;
      --modal-border-opacity: {{ settings.modal_border_opacity | divided_by: 100.0 }};
      --modal-corner-radius: {{ settings.modal_corner_radius }}px;
      --modal-shadow-opacity: {{ settings.modal_shadow_opacity | divided_by: 100.0 }};
      --modal-shadow-horizontal-offset: {{ settings.modal_shadow_horizontal_offset }}px;
      --modal-shadow-vertical-offset: {{ settings.modal_shadow_vertical_offset }}px;
      --modal-shadow-blur-radius: {{ settings.modal_shadow_blur }}px;
      --modal-padding: {{ settings.modal_padding }}px;
      --modal-margin: {{ settings.modal_margin }}px;
      --modal-backdrop-opacity: {{ settings.modal_backdrop_opacity | divided_by: 100.0 }};
      --modal-backdrop-blur: {{ settings.modal_backdrop_blur }}px;

      --drawer-border-width: {{ settings.drawer_border_thickness }}px;
      --drawer-border-opacity: {{ settings.drawer_border_opacity | divided_by: 100.0 }};
      --drawer-corner-radius: {{ settings.drawer_corner_radius }}px;
      --drawer-shadow-opacity: {{ settings.drawer_shadow_opacity | divided_by: 100.0 }};
      --drawer-shadow-horizontal-offset: {{ settings.drawer_shadow_horizontal_offset }}px;
      --drawer-shadow-vertical-offset: {{ settings.drawer_shadow_vertical_offset }}px;
      --drawer-shadow-blur-radius: {{ settings.drawer_shadow_blur }}px;
      --drawer-padding: {{ settings.drawer_padding }}px;
      --drawer-margin: {{ settings.drawer_margin }}px;
      --drawer-backdrop-opacity: {{ settings.drawer_backdrop_opacity | divided_by: 100.0 }};
      --drawer-backdrop-blur: {{ settings.drawer_backdrop_blur }}px;

      --spacing-sections-desktop: {{ settings.spacing_sections }}px;
      --spacing-sections-mobile: {% if settings.spacing_sections < 24 %}{{ settings.spacing_sections }}{% else %}{{ settings.spacing_sections | times: 0.7 | round | at_least: 20 }}{% endif %}px;

      --grid-desktop-vertical-spacing: {{ settings.spacing_grid_vertical }}px;
      --grid-desktop-horizontal-spacing: {{ settings.spacing_grid_horizontal }}px;
      --grid-mobile-vertical-spacing: {{ settings.spacing_grid_vertical | divided_by: 2 }}px;
      --grid-mobile-horizontal-spacing: {{ settings.spacing_grid_horizontal | divided_by: 2 }}px;

      --text-boxes-border-opacity: {{ settings.text_boxes_border_opacity | divided_by: 100.0 }};
      --text-boxes-border-width: {{ settings.text_boxes_border_thickness }}px;
      --text-boxes-radius: {{ settings.text_boxes_radius }}px;
      --text-boxes-shadow-opacity: {{ settings.text_boxes_shadow_opacity | divided_by: 100.0 }};
      --text-boxes-shadow-visible: {% if settings.text_boxes_shadow_opacity > 0 %}1{% else %}0{% endif %};
      --text-boxes-shadow-horizontal-offset: {{ settings.text_boxes_shadow_horizontal_offset }}px;
      --text-boxes-shadow-vertical-offset: {{ settings.text_boxes_shadow_vertical_offset }}px;
      --text-boxes-shadow-blur-radius: {{ settings.text_boxes_shadow_blur }}px;

      --buttons-radius: {{ settings.buttons_radius }}px;
      --buttons-radius-outset: {% if settings.buttons_radius > 0 %}{{ settings.buttons_radius | plus: settings.buttons_border_thickness }}{% else %}0{% endif %}px;
      --buttons-border-width: {% if settings.buttons_border_opacity > 0 %}{{ settings.buttons_border_thickness }}{% else %}0{% endif %}px;
      --buttons-border-opacity: {{ settings.buttons_border_opacity | divided_by: 100.0 }};
      --buttons-shadow-opacity: {{ settings.buttons_shadow_opacity | divided_by: 100.0 }};
      --buttons-shadow-visible: {% if settings.buttons_shadow_opacity > 0 %}1{% else %}0{% endif %};
      --buttons-shadow-horizontal-offset: {{ settings.buttons_shadow_horizontal_offset }}px;
      --buttons-shadow-vertical-offset: {{ settings.buttons_shadow_vertical_offset }}px;
      --buttons-shadow-blur-radius: {{ settings.buttons_shadow_blur }}px;
      --buttons-border-offset: {% if settings.buttons_radius > 0 or settings.buttons_shadow_opacity > 0 %}0.3{% else %}0{% endif %}px;
      --buttons-background-opacity: {{ settings.buttons_background_opacity | divided_by: 100.0 }};
      --buttons-scale: {{ settings.buttons_scale | divided_by: 100.0 }};

      --inputs-radius: {{ settings.inputs_radius }}px;
      --inputs-border-width: {{ settings.inputs_border_thickness }}px;
      --inputs-border-opacity: {{ settings.inputs_border_opacity | divided_by: 100.0 }};
      --inputs-shadow-opacity: {{ settings.inputs_shadow_opacity | divided_by: 100.0 }};
      --inputs-shadow-background-opacity: {{ settings.inputs_shadow_background_opacity | divided_by: 100.0 }};
      --inputs-shadow-horizontal-offset: {{ settings.inputs_shadow_horizontal_offset }}px;
      --inputs-margin-offset: {% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_opacity > 0 %}{{ settings.inputs_shadow_vertical_offset | abs }}{% else %}0{% endif %}px;
      --inputs-shadow-vertical-offset: {{ settings.inputs_shadow_vertical_offset }}px;
      --inputs-shadow-blur-radius: {{ settings.inputs_shadow_blur }}px;
      --inputs-radius-outset: {% if settings.inputs_radius > 0 %}{{ settings.inputs_radius | plus: settings.inputs_border_thickness }}{% else %}0{% endif %}px;

      --variant-pills-radius: {{ settings.variant_pills_radius }}px;
      --variant-pills-border-width: {{ settings.variant_pills_border_thickness }}px;
      --variant-pills-border-opacity: {{ settings.variant_pills_border_opacity | divided_by: 100.0 }};
      --variant-pills-shadow-opacity: {{ settings.variant_pills_shadow_opacity | divided_by: 100.0 }};
      --variant-pills-shadow-horizontal-offset: {{ settings.variant_pills_shadow_horizontal_offset }}px;
      --variant-pills-shadow-vertical-offset: {{ settings.variant_pills_shadow_vertical_offset }}px;
      --variant-pills-shadow-blur-radius: {{ settings.variant_pills_shadow_blur }}px;
    }
{% endstyle %}

<script>



  window.settings = {
    {%- if settings.animate_duration %}
      animate_duration: {{ settings.animate_duration }},
    {%- endif -%}
    {%- if settings.animate_effect %}
      animate_effect: '{{ settings.animate_effect }}',
    {%- endif -%}
    {%- if settings.animate_strength %}
      animate_strength: {{ settings.animate_strength }},
    {%- endif -%}
    {%- if settings.modal_animate %}
      modal_animate: '{{ settings.modal_animate }}',
    {%- endif -%}
    {%- if settings.modal_easing %}
      modal_easing: '{{ settings.modal_easing }}',
    {%- endif -%}
    {%- if settings.modal_duration %}
      modal_duration: {{ settings.modal_duration }},
    {%- endif -%}
    {%- if settings.drawer_easing %}
      drawer_easing: '{{ settings.drawer_easing }}',
    {%- endif -%}
    {%- if settings.drawer_duration %}
      drawer_duration: {{ settings.drawer_duration }},
    {%- endif -%}
    {%- if settings.image_lazyload %}
      image_lazyload: {{ settings.image_lazyload }},
    {%- endif -%}
    {% if settings.color_schemes %}
      color_scheme_ids: [
        {% for scheme in settings.color_schemes -%}
          "{{ scheme.id }}",
        {% endfor -%}
      ],
    {% endif %}
    {% if settings.dark_mode_mapping %}
      dark_mode_mapping: `{{ settings.dark_mode_mapping }}`
    {% endif %}
  }
</script>
