{% if section.settings.italic_font_family == 'georgia-pro'
  or section.settings.italic_font_family == 'bodoni-moda'
  or section.settings.italic_font_family == 'instrument-serif'
  or section.settings.italic_font_family == 'custom_google_font'
%}
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  {% if section.settings.italic_font_family == 'georgia-pro' %}
    <link
      href="https://fonts.googleapis.com/css2?family=Georgia+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap"
      rel="stylesheet"
    >
  {% endif %}
  {% if section.settings.italic_font_family == 'bodoni-moda' %}
    <link
      href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;1,6..96,400;1,6..96,500;1,6..96,600;1,6..96,700&display=swap"
      rel="stylesheet"
    >
  {% endif %}
  {% if section.settings.italic_font_family == 'instrument-serif' %}
    <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
  {% endif %}
  {% if section.settings.italic_font_family == 'custom_google_font'
    and section.settings.custom_google_font_name != blank
  %}
    <link
      href="https://fonts.googleapis.com/css2?family={{ section.settings.custom_google_font_name | replace: ' ', '+' }}:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap"
      rel="stylesheet"
    >
  {% endif %}
{% endif %}

{%- style -%}
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
      padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
    }

    @media screen and (min-width: 750px) {
      .section-{{ section.id }}-padding {
        padding-top: {{ section.settings.padding_top }}px;
        padding-bottom: {{ section.settings.padding_bottom }}px;
      }
    }

    .color-scheme-{{ section.id }}.color-custom {
      --color-background: {{ section.settings.custom_colors_background.red }}, {{ section.settings.custom_colors_background.green }}, {{ section.settings.custom_colors_background.blue }};
      --gradient-background: {% if section.settings.custom_gradient_background != blank %}{{ section.settings.custom_gradient_background }}{% else %}{{ section.settings.custom_colors_background }}{% endif %};
      {% if section.settings.custom_image_background != blank %}
        {% # theme-check-disable %}
        --gradient-background: url('{{ section.settings.custom_image_background | img_url: 'master' }}') center center / cover no-repeat;
        {% # theme-check-enable %}
      {% endif %}
      --color-foreground: {{ section.settings.custom_colors_text.red }}, {{ section.settings.custom_colors_text.green }}, {{ section.settings.custom_colors_text.blue }};
    }
    {% if section.settings.custom_mobile_image_background != blank %}
      @media screen and (max-width: 740px) {
        .color-scheme-{{ section.id }}.color-custom {
          {% # theme-check-disable %}
          --gradient-background: url('{{ section.settings.custom_mobile_image_background | img_url: 'master' }}') center center / cover no-repeat;
          {% # theme-check-enable %}
        }
      }
    {% endif %}
    .tiktok-videos blockquote {
        padding: 0;
        border: none;
        margin: 0 auto;
        font-style: normal;
  }
    .pill-container-tiktok-section {
        padding: 6px 12px;
        background: {{section.settings.pillbackground}};
        border-radius: {{section.settings.tiktokpillborderradius}}px;
        display: inline-block;
        position: relative;
        box-shadow: inset 0 0 0 #000000 35%;
        border: 1px solid {{section.settings.pillborder}};
        padding-top: 0px;
        padding-bottom: 0px;
      }

      /* Remove border when gradient is enabled */
      .pill-container-tiktok-section.gradient-enabled {
        border: none;
      }

    .pill-container-tiktok-section span {
      color: {{section.settings.pilltextcolor}};
    }
      .pill-container-tiktok-section img {
      vertical-align: middle;
    }

      /* Gradient borders - only when enabled */
      .pill-container-tiktok-section.gradient-enabled[data-logo="tiktoklogo"]::before {
        content: '';
        position: absolute;
        top: -2px;
        right: -2px;
        bottom: -2px;
        left: -2px;
        z-index: -1;
        border-radius: calc({{section.settings.tiktokpillborderradius}}px + 2px);
        background: linear-gradient(45deg, #00f2ea, #ff0050);
      }

      .pill-container-tiktok-section.gradient-enabled[data-logo="facebooklogo"]::before,
      .pill-container-tiktok-section.gradient-enabled[data-logo="facebooklogoblue"]::before {
        content: '';
        position: absolute;
        top: -2px;
        right: -2px;
        bottom: -2px;
        left: -2px;
        z-index: -1;
        border-radius: calc({{section.settings.tiktokpillborderradius}}px + 2px);
        background: #1877F2;
      }

      .pill-container-tiktok-section.gradient-enabled[data-logo="instagramlogo"]::before {
        content: '';
        position: absolute;
        top: -2px;
        right: -2px;
        bottom: -2px;
        left: -2px;
        z-index: -1;
        border-radius: calc({{section.settings.tiktokpillborderradius}}px + 2px);
        background: linear-gradient(45deg, #833ab4, #fd1d1d, #fcb045);
      }

      .pill-container-tiktok-section.gradient-enabled[data-logo="youtubelogo"]::before {
        content: '';
        position: absolute;
        top: -2px;
        right: -2px;
        bottom: -2px;
        left: -2px;
        z-index: -1;
        border-radius: calc({{section.settings.tiktokpillborderradius}}px + 2px);
        background: linear-gradient(45deg, #FF0000, #CC0000);
      }

       {% if section.settings.enable_gradient %}
      .title strong {
        background: {{ section.settings.title_gradient_background }};
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-style: normal;
      }
    {% endif %}

    .tiktok-heading em {
                    {% if section.settings.italic_style == 'italic' %}
                    /* Normal italic styling */
                    text-decoration: none !important;
                    font-style: italic !important;
                    {% elsif section.settings.italic_style == 'font_family' and section.settings.italic_font_family != 'inherit' %}
                      /* Font family styling - no underline */
                      text-decoration: none !important;
                      font-style: italic !important;
                      {% if section.settings.italic_font_family == 'serif' %}
                        font-family: serif !important;
                      {% elsif section.settings.italic_font_family == 'georgia-pro' %}
                        font-family: 'Georgia Pro', Georgia, serif !important;
                      {% elsif section.settings.italic_font_family == 'bodoni-moda' %}
                        font-family: 'Bodoni Moda', Georgia, serif !important;
                      {% elsif section.settings.italic_font_family == 'instrument-serif' %}
                        font-family: 'Instrument Serif', Georgia, serif !important;
                        {% elsif section.settings.italic_font_family == 'custom_google_font' and section.settings.custom_google_font_name != blank %}
                        font-family: '{{ section.settings.custom_google_font_name }}', sans-serif !important;
                      {% elsif section.settings.italic_font_family == 'cursive' %}
                        font-family: cursive !important;
                      {% endif %}
                      {% if section.settings.italic_font_weight != 'inherit' %}
                        font-weight: {{ section.settings.italic_font_weight }} !important;
                      {% endif %}
                    {% else %}
                      /* Underline styling */
                      text-decoration: underline !important;
                      font-style: normal !important;
                      text-decoration-color: {{section.settings.underlinetextcolor}} !important;
                      text-decoration-thickness: {{section.settings.underlinethickness}}px !important;
                    {% endif %}
                  }
{%- endstyle -%}

<div class="color-scheme-{{ section.id }} color-{{ section.settings.color_scheme }} gradient{% if section.settings.title == blank %} no-heading{% endif %} content-for-grouping animate-section animate--hidden {{ section.settings.visibility }}">
  {% if section.settings.display_id %}
    <copy-button class="section-id-btn button" data-content="#shopify-section-{{ section.id }}" data-success="false">
      <span class="copy-text">Click to copy section ID</span>
      <span class="copy-success">ID copied successfully!</span>
    </copy-button>
  {% endif %}
  {%- liquid
    assign has_mobile_slider = false
    assign has_desktop_slider = false
    if section.settings.slider_mobile and section.blocks.size > 1
      assign has_mobile_slider = true
    endif
    if section.settings.slider_desktop and section.blocks.size > section.settings.columns_desktop
      assign has_desktop_slider = true
    endif
  -%}
  <div
    class="tiktok-videos tiktok-videos-{{ section.id }} page-width{% if section.settings.desktop_full_page %} desktop-full-page{% endif %}{% if has_mobile_slider %} mobile-full-page{% endif %} section-{{ section.id }}-padding isolate"
    style="--columns-desktop: {{ section.settings.columns_desktop }};--columns-mobile:1;--gap-desktop:{{ section.settings.desktop_spacing | divided_by: 10.0 }}rem;--gap-mobile:1.5rem;"
  >
    <div class="animate-item animate-item--child index-0">
      {% assign content_index = 0 %}
      {%- unless section.settings.title == blank -%}
        {% assign content_index = 1 %}
        <div class="title-wrapper-with-link title-wrapper--self-padded-mobile title-wrapper--no-top-margin{% if section.settings.text != blank %} multicolumn-title-with-text{% endif %}">
          <h2
            class="title {{ section.settings.heading_size }} title-with-highlight tiktok-heading"
            style="--hightlight-color:{{ section.settings.title_highlight_color }};--gradient-text: {{ section.settings.title_gradient_background }}; "
          >
            {{ section.settings.title }}

            {% if section.settings.enablesocialmediapill %}
              <div>
                <div
                  class="pill-center product__text-{{ section.settings.alignment }}{% if mobile_align %} product__text-mobile-{{ section.settings.mobile_alignment }}{% endif %}"
                  style="{% if section.settings.enable_gradient_border %}margin-top: 10px;{% endif %}"
                >
                  <div
                    class="pill-container-tiktok-section {% if section.settings.enable_gradient_border %}gradient-enabled{% endif %}"
                    data-logo="{{ section.settings.featuredlogo | default: 'tiktoklogo' }}"
                  >
                    <img
                      src="https://cdn4.iconfinder.com/data/icons/social-media-flat-7/64/Social-media_Tiktok-512.png"
                      width="17"
                      height="17"
                      alt="TikTok Logo"
                    >
                    <span style="font-size:{{ section.settings.tiktokpilltextsize }}px;font-weight:normal;vertical-align: middle;">
                      {{- section.settings.tiktokpilltext -}}
                    </span>
                  </div>
                </div>
              </div>
            {% endif %}
          </h2>
        </div>
      {%- endunless -%}
      {% if section.settings.text != blank %}
        {% assign content_index = 1 %}
        <div class="multicolumn-text">
          {{ section.settings.text }}
        </div>
      {% endif %}
    </div>
    {% if has_mobile_slider or has_desktop_slider %}
      <splide-component
        data-type="{{ section.settings.type }}"
        data-autoplay="{{ section.settings.autoplay }}"
        data-autoplay-speed="{{ section.settings.autoplay_speed }}"
        data-arrows-color="{{ section.settings.arrows_color_scheme }}"
        data-dots-color="{{ section.settings.dots_color_scheme }}"
        data-slides-desktop="{{ section.settings.columns_desktop }}"
        data-per-move-desktop="{{ section.settings.per_move_desktop }}"
        data-gap-desktop="{{ section.settings.desktop_spacing }}"
        data-side-padding-desktop="{{ section.settings.desktop_side_padding }}"
        data-padding-calc-desktop="{{ section.settings.desktop_padding_calc }}"
        data-slides-mobile="1"
        data-gap-mobile="15"
        {% if section.settings.enable_mobile_preview %}
          data-side-padding-mobile="24"
        {% else %}
          data-side-padding-mobile="15"
        {% endif %}
        {% if has_desktop_slider == false %}
          data-destroy-desktop="true"
        {% elsif has_mobile_slider == false %}
          data-destroy-mobile="true"
        {% endif %}
        data-pause-videos="true"
      >
    {% endif %}
    <div
      class="splide splide--desktop-dots-{{ section.settings.desktop_dots_position }} splide--mobile-dots-{{ section.settings.mobile_dots_position }} splide--desktop-arrows-{{ section.settings.desktop_arrows_position }} splide--desktop-arrows-outside splide--mobile-arrows-{{ section.settings.mobile_arrows_position }}{% if section.settings.transparent_arrows %} splide--transparent-arrows{% endif %}{% if section.settings.vertical-alignment == 'center' %} splide--vertically-centered{% endif %}{% if has_desktop_slider == false %} splide--destroy-desktop{% endif %}{% if has_mobile_slider == false %} splide--destroy-mobile{% endif %}"
      style="--columns-desktop: {{ section.settings.columns_desktop }};--columns-mobile:1;--gap-desktop:{{ section.settings.desktop_spacing | divided_by: 10.0 }}rem;--gap-mobile:1.5rem;"
      {% if section.settings.desktop_adaptive_height and section.settings.slides_desktop == 1 and has_desktop_slider %}
        data-desktop-adaptive-height="true"
      {% endif %}
      {% if section.settings.mobile_adaptive_height and has_mobile_slider %}
        data-mobile-adaptive-height="true"
      {% endif %}
    >
      <div class="splide__track">
        <ul class="splide__list">
          {%- for block in section.blocks -%}
            <li class="splide__slide">
              <div
                class="splide__slide__container"
                style="--index:{{ forloop.index0 | plus: content_index }};"
                {{ block.shopify_attributes }}
              >
                {% if block.settings.video_code != blank %}
                  {% if forloop.index > 1 %}
                    {{
                      block.settings.video_code
                      | replace: '<script async="" src="https://www.tiktok.com/embed.js"></script>', ''
                    }}
                  {% else %}
                    {{ block.settings.video_code }}
                  {% endif %}
                {% else %}
                  {{ 'image' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
                {% endif %}
              </div>
            </li>
          {%- endfor -%}
        </ul>
      </div>
      <div class="splide__dots-and-arrows">
        <ul class="splide__pagination"></ul>
        <div class="splide__arrows"></div>
      </div>
    </div>
    {% if has_mobile_slider or has_desktop_slider %}
      </splide-component>
    {% endif %}
  </div>
</div>

{% schema %}
{
  "name": "TikTok videos",
  "class": "section",
  "tag": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "checkbox",
      "id": "display_id",
      "label": "Display section ID",
      "info": "ID is used in the Sections group section to merge 2 sections. ID can also be put inside any button link and the button will scroll to this section.",
      "default": false
    },
    {
      "type": "select",
      "id": "visibility",
      "options": [
        {
          "value": "desktop-hidden",
          "label": "Mobile only"
        },
        {
          "value": "mobile-hidden",
          "label": "Desktop only"
        },
        {
          "value": "always-display",
          "label": "All devices"
        }
      ],
      "label": "Display on",
      "default": "always-display"
    },
    {
      "type": "header",
      "content": "General"
    },
    {
      "type": "inline_richtext",
      "id": "title",
      "default": "TikTok videos",
      "label": "Heading",
      "info": "Bold certain words to highlight them with a different color."
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        {
          "value": "h2",
          "label": "Small"
        },
        {
          "value": "h1",
          "label": "Medium"
        },
        {
          "value": "h0",
          "label": "Large"
        }
      ],
      "default": "h1",
      "label": "Heading size"
    },
    {
      "type": "color",
      "id": "title_highlight_color",
      "label": "Heading highlight color",
      "default": "#6D388B"
    },
    {
      "type": "checkbox",
      "id": "enable_gradient",
      "label": "Enable gradient for bold text",
      "default": false,
      "info": "Override solid color with gradient for bold text"
    },
    {
      "type": "color_background",
      "id": "title_gradient_background",
      "label": "Gradient highlight",
      "default": "linear-gradient(45deg, #00f2ea, #ff0050)",
      "info": "Used when gradient is enabled"
    },
    {
      "type": "header",
      "content": "Italic Text Styling",
      "info": "Choose how italic text (created with *text*) should be displayed"
    },
    {
      "type": "select",
      "id": "italic_style",
      "label": "Italic Text Style",
      "options": [
        {
          "value": "italic",
          "label": "Normal Italic"
        },
        {
          "value": "underline",
          "label": "Underline"
        },
        {
          "value": "font_family",
          "label": "Custom Font Family"
        }
      ],
      "default": "underline",
      "info": "Choose to either underline italic text or use a custom font family"
    },
    {
      "type": "color",
      "id": "underlinetextcolor",
      "label": "Underline color",
      "default": "#FF0000",
      "info": "Used when 'Underline' style is selected"
    },
    {
      "type": "range",
      "id": "underlinethickness",
      "min": 1,
      "max": 8,
      "step": 1,
      "unit": "px",
      "label": "Underline thickness",
      "default": 3,
      "info": "Used when 'Underline' style is selected"
    },
    {
      "type": "select",
      "id": "italic_font_family",
      "label": "Italic Text Font Family",
      "options": [
        {
          "value": "inherit",
          "label": "Default (Inherit)"
        },
        {
          "value": "serif",
          "label": "Serif"
        },
        {
          "value": "instrument-serif",
          "label": "Instrument Serif"
        },
        {
          "value": "georgia-pro",
          "label": "Georgia Pro"
        },
        {
          "value": "bodoni-moda",
          "label": "Bodoni Moda"
        },
        {
          "value": "cursive",
          "label": "Cursive"
        },
        {
          "value": "custom_google_font",
          "label": "Custom Google Font"
        }
      ],
      "default": "serif",
      "info": "Used when 'Custom Font Family' style is selected"
    },
    {
      "type": "text",
      "id": "custom_google_font_name",
      "label": "Custom Google Font Name",
      "info": "Enter the exact Google Font family name (e.g., 'Roboto', 'Open Sans', 'Playfair Display'). Font will be loaded from Google Fonts automatically. Browse fonts at https://fonts.google.com/"
    },
    {
      "type": "select",
      "id": "italic_font_weight",
      "label": "Italic Text Font Weight",
      "options": [
        {
          "value": "inherit",
          "label": "Default (Inherit)"
        },
        {
          "value": "300",
          "label": "Light (300)"
        },
        {
          "value": "400",
          "label": "Normal (400)"
        },
        {
          "value": "500",
          "label": "Medium (500)"
        },
        {
          "value": "600",
          "label": "Semi Bold (600)"
        },
        {
          "value": "700",
          "label": "Bold (700)"
        },
        {
          "value": "800",
          "label": "Extra Bold (800)"
        },
        {
          "value": "900",
          "label": "Black (900)"
        }
      ],
      "default": "inherit",
      "info": "Used when 'Custom Font Family' style is selected"
    },

    {
      "type": "richtext",
      "id": "text",
      "label": "Text"
    },
    {
      "type": "header",
      "content": "Tiktok logo"
    },
    {
      "type": "checkbox",
      "id": "enablesocialmediapill",
      "label": "Enable tiktok logo under title",
      "default": true
    },
    {
      "type": "text",
      "id": "tiktokpilltext",
      "label": "Featured text",
      "default": "Over 4M Views on TikTok"
    },
    {
      "type": "range",
      "id": "tiktokpilltextsize",
      "min": 14,
      "max": 17,
      "step": 1,
      "unit": "px",
      "default": 15,
      "label": "Text size"
    },
    {
      "type": "checkbox",
      "id": "enable_gradient_border",
      "label": "Enable Gradient Border",
      "default": false
    },
    {
      "type": "color",
      "id": "pillbackground",
      "label": "Background color",
      "default": "#FFFFFF"
    },
    {
      "type": "color",
      "id": "pillborder",
      "label": "Border color",
      "default": "#FFFFFF"
    },
    {
      "type": "color",
      "id": "pilltextcolor",
      "label": "Text color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "tiktokpillborderradius",
      "min": 0,
      "max": 20,
      "step": 1,
      "unit": "px",
      "label": "Border radius",
      "default": 0
    },
    {
      "type": "header",
      "content": "Section color scheme"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "Accent 1"
        },
        {
          "value": "accent-2",
          "label": "Accent 2"
        },
        {
          "value": "background-1",
          "label": "Background 1"
        },
        {
          "value": "background-2",
          "label": "Background 2"
        },
        {
          "value": "inverse",
          "label": "Inverse"
        },
        {
          "value": "custom",
          "label": "Custom"
        }
      ],
      "default": "background-1",
      "label": "Color scheme",
      "info": "Custom color scheme is edited at the bottom of section settings."
    },
    {
      "type": "header",
      "content": "Slider"
    },
    {
      "type": "paragraph",
      "content": "ATTENTION: ONLY in the theme editor, pagination dots might duplicate after changing section settings. To overcome this, simply click Save. This has NO EFFECT on the published website."
    },
    {
      "type": "select",
      "id": "type",
      "options": [
        {
          "value": "slide",
          "label": "Classic"
        },
        {
          "value": "loop",
          "label": "Infinite"
        }
      ],
      "default": "slide",
      "label": "Type"
    },
    {
      "type": "checkbox",
      "id": "autoplay",
      "label": "Enable autoplay",
      "default": false
    },
    {
      "type": "range",
      "id": "autoplay_speed",
      "min": 1,
      "max": 15,
      "step": 0.5,
      "default": 5,
      "unit": "sec",
      "label": "Autoplay speed"
    },
    {
      "type": "select",
      "id": "arrows_color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "Accent 1"
        },
        {
          "value": "accent-2",
          "label": "Accent 2"
        },
        {
          "value": "background-1",
          "label": "Background 1"
        },
        {
          "value": "background-2",
          "label": "Background 2"
        },
        {
          "value": "inverse",
          "label": "Inverse"
        }
      ],
      "default": "inverse",
      "label": "Arrows color scheme"
    },
    {
      "type": "checkbox",
      "id": "transparent_arrows",
      "label": "Transparent arrows",
      "default": true
    },
    {
      "type": "select",
      "id": "dots_color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "Accent 1"
        },
        {
          "value": "accent-2",
          "label": "Accent 2"
        },
        {
          "value": "background-1",
          "label": "Background 1"
        },
        {
          "value": "background-2",
          "label": "Background 2"
        },
        {
          "value": "inverse",
          "label": "Inverse"
        }
      ],
      "default": "inverse",
      "label": "Dots color scheme"
    },
    {
      "type": "header",
      "content": "Desktop"
    },
    {
      "type": "checkbox",
      "id": "desktop_full_page",
      "label": "Full page width",
      "default": false
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 10,
      "step": 1,
      "default": 3,
      "label": "Slides per page"
    },
    {
      "type": "checkbox",
      "id": "slider_desktop",
      "label": "Enable desktop slider",
      "default": true,
      "info": "The settings bellow are applied if this option is checked"
    },
    {
      "type": "range",
      "id": "per_move_desktop",
      "min": 1,
      "max": 10,
      "step": 1,
      "default": 1,
      "label": "Slides to scroll on one move"
    },
    {
      "type": "range",
      "id": "desktop_spacing",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Spacing",
      "default": 24
    },
    {
      "type": "range",
      "id": "desktop_side_padding",
      "min": 0,
      "max": 150,
      "step": 5,
      "unit": "px",
      "label": "Preview of prev & next slide",
      "default": 0
    },
    {
      "type": "checkbox",
      "id": "desktop_padding_calc",
      "label": "Disable empty preview on first & last slide",
      "default": true,
      "info": "Moves the first slide to the left edge adn last one to the right if Preview value is enabled. Visible if type is set to Slider."
    },
    {
      "type": "checkbox",
      "id": "desktop_adaptive_height",
      "label": "Adaptive height",
      "default": false,
      "info": "Only available if Slides per page is set to 1."
    },
    {
      "type": "select",
      "id": "desktop_dots_position",
      "options": [
        {
          "value": "hidden",
          "label": "Hidden"
        },
        {
          "value": "under",
          "label": "Under the slider"
        }
      ],
      "default": "under",
      "label": "Dots position"
    },
    {
      "type": "select",
      "id": "desktop_arrows_position",
      "options": [
        {
          "value": "hidden",
          "label": "Hidden"
        },
        {
          "value": "under",
          "label": "Under the slider"
        },
        {
          "value": "sides",
          "label": "On sides of the slider"
        }
      ],
      "default": "sides",
      "label": "Arrows position"
    },
    {
      "type": "header",
      "content": "Mobile"
    },
    {
      "type": "checkbox",
      "id": "slider_mobile",
      "label": "Enable mobile slider",
      "default": true,
      "info": "The settings bellow are applied if this option is checked"
    },
    {
      "type": "checkbox",
      "id": "enable_mobile_preview",
      "label": "Preview of prev & next slides",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "mobile_adaptive_height",
      "label": "Adaptive height",
      "default": false
    },
    {
      "type": "select",
      "id": "mobile_dots_position",
      "options": [
        {
          "value": "hidden",
          "label": "Hidden"
        },
        {
          "value": "under",
          "label": "Under the slider"
        }
      ],
      "default": "under",
      "label": "Dots position"
    },
    {
      "type": "select",
      "id": "mobile_arrows_position",
      "options": [
        {
          "value": "hidden",
          "label": "Hidden"
        },
        {
          "value": "under",
          "label": "Under the slider"
        },
        {
          "value": "sides",
          "label": "On sides of the slider"
        }
      ],
      "default": "under",
      "label": "Arrows position"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    },
    {
      "type": "header",
      "content": "Custom color scheme",
      "info": "Applied if Color scheme setting is set to Custom."
    },
    {
      "type": "color",
      "id": "custom_colors_background",
      "default": "#F3F3F3",
      "label": "Background color"
    },
    {
      "type": "color_background",
      "id": "custom_gradient_background",
      "label": "Gradient background",
      "info": "If added, replaces Background color when applicable."
    },
    {
      "type": "image_picker",
      "id": "custom_image_background",
      "label": "Image background"
    },
    {
      "type": "image_picker",
      "id": "custom_mobile_image_background",
      "label": "Mobile image background",
      "info": "If empty, the Image background will also be applied to mobile devices"
    },
    {
      "type": "color",
      "id": "custom_colors_text",
      "default": "#2E2A39",
      "label": "Text"
    }
  ],
  "blocks": [
    {
      "type": "column",
      "name": "TikTok video",
      "settings": [
        {
          "type": "header",
          "content": "HOW TO USE"
        },
        {
          "type": "paragraph",
          "content": "To get the TikTok video to show up, open the video in the TikTok desktop website and press Share. Then, click on the Embed button and copy the code. Lastly, pasted the copied code in the setting below."
        },
        {
          "type": "html",
          "id": "video_code",
          "label": "Video embed code"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "TikTok videos",
      "category": "Media",
      "blocks": [
        {
          "type": "column"
        },
        {
          "type": "column"
        },
        {
          "type": "column"
        }
      ]
    }
  ]
}
{% endschema %}