/** Shopify CDN: Minification failed

Line 17:0 Unexpected "{"
Line 17:1 Expected identifier but found "%"
Line 24:0 Unexpected "{"
Line 24:1 Expected identifier but found "%"
Line 25:2 Unexpected "<"
Line 27:3 Expected identifier but found "%"
Line 28:4 Unexpected "{"
Line 28:5 Expected identifier but found "%"
Line 28:83 Expected identifier but found "%"
Line 139:4 Unexpected "{"
... and 87 more hidden warnings

**/

{%- liquid
  assign show_localization = false
  if section.settings.enable_country_selector or section.settings.enable_language_selector
    assign show_localization = true
  endif
-%}

{%- if section.settings.link1 or section.settings.link2 or show_localization or section.blocks.size > 0 -%}
  <script src="{{ 'announcement.js' | asset_url }}" defer="defer"></script>

  {%- style -%}
    {%- comment -%} Inlined announcement.css to eliminate render-blocking request {%- endcomment -%}
    .announcement__col--right > a:not(.no-spacer)::after, .announcement__localization .localization__selector:nth-child(2) .custom-select__btn::before {
      content: "|";
      padding: 0 12px;
      opacity: 0.7;
      font-weight: normal;
    }
    .cc-announcement {
      position: relative;
      z-index: 31;
    }
    .shopify-section + .cc-announcement, .overlay-predictive-search .cc-announcement {
      position: static;
      z-index: auto;
    }
    .announcement {
      color: rgb(var(--announcement-text-color));
    }
    .announcement a {
      color: inherit;
    }
    .announcement__text {
      justify-content: center;
      padding: 6px 0;
      text-align: center;
    }
    .announcement__text a {
      text-decoration: underline;
    }
    .announcement__text p {
      margin-bottom: 0;
    }
    .announcement__localization {
      display: inline-block;
    }
    .announcement__localization .custom-select__btn {
      --input-text-color: var(--announcement-text-color);
      --text-color: var(--announcement-text-color);
      width: auto;
      margin-inline-end: calc(2 * var(--space-unit));
      padding: 0;
      border: 0;
      background-color: transparent;
      color: currentColor;
      font-size: inherit;
      line-height: 1.5;
      white-space: nowrap;
    }
    .announcement__localization .custom-select__btn > .icon {
      right: 0;
      width: 20px;
      padding-inline-start: 0;
    }
    body:not(.tab-used) .announcement__localization .custom-select__btn:focus {
      box-shadow: none;
    }
    .announcement__localization .localization__selector {
      display: inline-block;
    }
    .announcement__localization .custom-select__listbox {
      min-width: 180px;
    }
    .announcement__col--left {
      flex: 1;
    }
    .announcement__col--right {
      padding: 5px 0;
    }
    .announcement__slider {
      display: flex;
      overflow-x: scroll;
      scroll-behavior: smooth;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
    .announcement__slider::-webkit-scrollbar {
      display: none;
    }
    .announcement__slider .announcement__text {
      position: relative;
      flex: 0 0 100%;
      width: 100%;
      scroll-snap-align: start;
    }
    .announcement__slider .announcement__text > p {
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mob__announcement-links {
      list-style: none;
    }
    .secondary-nav-container + .mob__announcement-links {
      margin-top: 0;
    }
    @media (min-width: 769px) {
      .announcement__col--right {
        padding-inline-start: 10px;
      }
      .announcement__col--align-center .announcement__text {
        padding-right: calc(4 * var(--space-unit));
        padding-left: calc(4 * var(--space-unit));
      }
      .announcement__col--align-left .announcement__text {
        justify-content: flex-start;
        padding-inline-end: calc(4 * var(--space-unit));
        text-align: start;
      }
    }

    {%- comment -%} Section-specific settings {%- endcomment -%}
    .announcement {
      --announcement-text-color: {{ section.settings.text_color.rgb }};
      background-color: {{ section.settings.bg_color }};
    }
  {%- endstyle -%}

  {%- if show_localization -%}
    <script src="{{ 'custom-select.js' | asset_url }}" defer="defer"></script>
  {%- endif -%}

  <announcement-bar class="announcement block text-body-{{ section.settings.text_type_scale }}" data-slide-delay="{{- section.settings.read_time | times: 1000 -}}">
    <div class="container">
      <div class="flex">
        <div class="announcement__col--left {% if section.settings.link1 or section.settings.link2 or show_localization %}announcement__col--align-left{% else %}announcement__col--align-center{% endif %}{% if section.blocks.size > 1 %} announcement__slider{% endif %}"{% if section.blocks.size > 1 %} aria-roledescription="carousel" aria-live="off"{% endif %}>
          {%- for block in section.blocks -%}
            <div class="announcement__text flex items-center m-0" {{ block.shopify_attributes }}{% if section.blocks.size > 1 %} aria-roledescription="slide"{% endif %}>
              <div class="rte">{{- block.settings.text -}}</div>
            </div>
          {%- endfor -%}
        </div>

        {% if section.settings.link1 or section.settings.link2 or show_localization %}
          <div class="announcement__col--right hidden md:flex md:items-center">
            {%- if section.settings.link1 or section.settings.link2 -%}
              {%- if section.settings.link1 -%}
                <a href="{{ section.settings.link1 }}" class="js-announcement-link font-bold{% if section.settings.link2 == blank and show_localization == false %} no-spacer{% endif %}">
                  {%- if section.settings.link1_label != blank -%}
                    {{- section.settings.link1_label | escape -}}
                  {%- else -%}
                    {{- section.settings.link1 -}}
                  {%- endif -%}
                </a>
              {%- endif -%}

              {%- if section.settings.link2 -%}
                <a href="{{ section.settings.link2 }}" class="js-announcement-link font-bold{% unless show_localization %} no-spacer{% endunless %}">
                  {%- if section.settings.link2_label != blank -%}
                    {{- section.settings.link2_label | escape -}}
                  {%- else -%}
                    {{- section.settings.link2 -}}
                  {%- endif -%}
                </a>
              {%- endif -%}
            {%- endif -%}

            {%- if show_localization -%}
              <div class="announcement__localization">
                {% render 'localization-form', id: 'nav-localization', hide_labels: true %}
              </div>
            {%- endif -%}
          </div>
        {%- endif -%}
      </div>
    </div>
  </announcement-bar>
{%- endif -%}

{% schema %}
{
  "name": "Announcement",
  "class": "cc-announcement",
  "settings": [
    {
      "type": "paragraph",
      "content": "The links and country/currency selectors will appear inside the navigation menu on mobile."
    },
    {
      "type": "header",
      "content": "Links"
    },
    {
      "type": "url",
      "id": "link1",
      "label": "Link 1"
    },
    {
      "type": "text",
      "id": "link1_label",
      "label": "Link 1 label"
    },
    {
      "type": "url",
      "id": "link2",
      "label": "Link 2"
    },
    {
      "type": "text",
      "id": "link2_label",
      "label": "Link 2 label"
    },
    {
      "type": "paragraph",
      "content": "Links will appear inside the mobile menu on smaller screens."
    },
    {
      "type": "header",
      "content": "Country/Region selector",
      "info": "To add a country/region, go to your [payment settings](/admin/settings/payments)"
    },
    {
      "type": "checkbox",
      "id": "enable_country_selector",
      "label": "Enable country/region selector",
      "default": true
    },
    {
      "type": "header",
      "content": "Language selector",
      "info": "To add a language, go to your [language settings](/admin/settings/languages)"
    },
    {
      "type": "checkbox",
      "id": "enable_language_selector",
      "label": "Enable language selector",
      "default": true
    },
    {
      "type": "header",
      "content": "Style"
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Background color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text color",
      "default": "#ffffff"
    },
    {
      "type": "select",
      "id": "text_type_scale",
      "label": "Text size",
      "options": [
        {
          "value": "small",
          "label": "Small"
        },
        {
          "value": "medium",
          "label": "Medium"
        },
        {
          "value": "large",
          "label": "Large"
        }
      ],
      "default": "small"
    },
    {
      "type": "range",
      "id": "read_time",
      "min": 3,
      "max": 15,
      "step": 1,
      "unit": "s",
      "label": "Announcement read time",
      "default": 7
    }
  ],
  "max_blocks": 3,
  "blocks": [
    {
      "type": "announcement",
      "name": "Announcement",
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "label": "Text",
          "default": "<p>Welcome to our store. <a href='#' title='#'>Learn more</a></p>",
          "info": "If you have multiple announcements, keep them short as they may wrap on smaller screens."
        }
      ]
    }
  ],
  "default": {
    "blocks": [
      {
        "type": "announcement"
      }
    ]
  }
}
{% endschema %}