

{% stylesheet %}
  .logo-block {
    width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end));
    max-width: 100%;
    max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end));
    font-size: var(--logo-height);
    display: flex;

    @media screen and (width <= 750px) {
      max-height: calc(
        var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end)
      );
      font-size: var(--logo-height-mobile, var(--logo-height));
      width: calc(
        var(--logo-width-mobile, var(--logo-width)) + var(--padding-inline-start) + var(--padding-inline-end)
      );
    }
  }

  .logo-block__image-wrapper {
    display: flex;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  .logo-block__image {
    object-fit: contain;
    width: 100%;
  }

  .logo-block--decor-cedar-asset {
    --logo-width: clamp(190px, 20vw, 290px);
    --logo-height: 42px;
    align-items: center;
  }

  .logo-block--decor-cedar-asset .logo-block__image-wrapper {
    align-items: center;
    justify-content: center;
  }

  .logo-block--decor-cedar-asset .logo-block__image {
    max-height: 42px;
    object-fit: contain;
    filter: drop-shadow(0 5px 14px rgba(38, 54, 42, .12));
  }

  @media screen and (width <= 750px) {
    .logo-block--decor-cedar-asset {
      --logo-width: clamp(170px, 54vw, 245px);
      --logo-height: 58px;
    }

    .logo-block--decor-cedar-asset .logo-block__image {
      max-height: 36px;
    }
  }


  /* dc-logo-wordmark-polish-20260704-v2 */
  .logo-block--decor-cedar-asset {
    --logo-height: 42px;
    align-items: center;
  }

  .logo-block--decor-cedar-asset .logo-block__image {
    height: auto;
    max-height: 42px;
    object-fit: contain;
    filter: none;
  }

  @media screen and (width <= 750px) {
    .logo-block--decor-cedar-asset {
      --logo-height-mobile: 36px;
    }

    .logo-block--decor-cedar-asset .logo-block__image {
      max-height: 36px;
    }
  }



  /* dc-logo-inline-brand-polish-20260704-v3 */
  .logo-block--decor-cedar-asset {
    width: auto;
    min-width: clamp(220px, 21vw, 320px);
  }

  .logo-block--decor-cedar-asset .logo-block__image-wrapper {
    width: auto;
    max-width: none;
  }

  .dc-header-brand--logo-block {
    display: inline-flex;
  }

{% endstylesheet %}

{% liquid
  assign image = settings.logo

  if block.settings.inverse and settings.logo_inverse
    assign image = settings.logo_inverse
  endif
%}

{%- if image -%}
  {% capture logo_image %}
    {{-
      image
      | image_url: width: 3840
      | image_tag:
        width: image.width,
        widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840',
        height: image.height,
        class: 'logo-block__image',
        alt: shop.name,
        sizes: '(min-width: 750px) calc(var(--logo-width)), 100vw'
    -}}
  {% endcapture %}
{%- endif -%}

{% unless logo_image %}
  {% capture logo_image %}
    <img
      src="{{ 'decor-cedar-menu-transparent-logo.png' | asset_url }}"
      alt="Decor Cedar"
      class="logo-block__image"
      width="620"
      height="66"
      loading="eager"
    >
  {% endcapture %}
{% endunless %}

<div
  class="
    logo-block
    logo-block--decor-cedar-asset
    spacing-style
  "
  style="
    {% if block.settings.unit == 'percent' %}
      --logo-width: {{ block.settings.percent_width }}%;
    {% else %}
      {% if image %}
        --logo-width: {{ image.width | times: 1.00 | divided_by: image.height | times: block.settings.pixel_height }}px;
      {% else %}
        --logo-width: {{ shop.name.size }}ch;
        --logo-height: {{ block.settings.pixel_height }}px;
      {% endif %}
    {% endif %}

    {% if block.settings.custom_mobile_size %}
      {% if block.settings.unit_mobile == 'percent' %}
        --logo-width-mobile: {{ block.settings.percent_width_mobile }}%;
        --logo-height-mobile: auto;
      {% else %}
        {% if image %}
          --logo-width-mobile: {{ image.width | times: 1.00 | divided_by: image.height | times: block.settings.pixel_height_mobile }}px;
          {% else %}
            --logo-width-mobile: {{ shop.name.size }}ch;
            --logo-height-mobile: {{ block.settings.pixel_height_mobile }}px;
        {% endif %}
      {% endif %}
    {% endif %}
    {% render 'spacing-style', settings: block.settings %}
    {% unless image %}
      --logo-width: clamp(190px, 20vw, 290px);
      --logo-height: 42px;
      --logo-width-mobile: clamp(170px, 54vw, 245px);
      --logo-height-mobile: 36px;
    {% endunless %}
  "
  {{ block.shopify_attributes }}
>
  {% if logo_image %}
    <div class="logo-block__image-wrapper">
      {{ logo_image }}
    </div>
  {% else %}
    {% render 'jumbo-text', text: shop.name %}
  {% endif %}
</div>

{% schema %}
{
  "name": "t:names.logo",
  "tag": null,
  "settings": [
    {
      "type": "checkbox",
      "label": "t:settings.use_inverse_logo",
      "id": "inverse",
      "default": false,
      "visible_if": "{{ settings.logo_inverse }}"
    },
    {
      "type": "select",
      "id": "font",
      "label": "t:settings.font",
      "options": [
        {
          "value": "body",
          "label": "t:options.body"
        },
        {
          "value": "subheading",
          "label": "t:options.subheading"
        },
        {
          "value": "heading",
          "label": "t:options.heading"
        },
        {
          "value": "accent",
          "label": "t:options.accent"
        }
      ],
      "default": "heading",
      "visible_if": "{{ settings.logo == blank and settings.logo_inverse == blank or block.settings.inverse == false }}"
    },
    {
      "type": "paragraph",
      "content": "t:content.edit_logo_in_theme_settings"
    },
    {
      "type": "header",
      "content": "t:content.size"
    },
    {
      "type": "select",
      "id": "unit",
      "label": "t:settings.unit",
      "options": [
        {
          "value": "pixel",
          "label": "t:options.pixel"
        },
        {
          "value": "percent",
          "label": "t:options.percent"
        }
      ],
      "default": "percent"
    },
    {
      "type": "range",
      "id": "percent_width",
      "label": "t:settings.width",
      "min": 10,
      "max": 100,
      "step": 1,
      "unit": "%",
      "default": 100,
      "visible_if": "{{ block.settings.unit == 'percent' }}"
    },
    {
      "type": "range",
      "id": "pixel_height",
      "label": "t:settings.height",
      "min": 16,
      "max": 320,
      "step": 8,
      "unit": "px",
      "default": 48,
      "visible_if": "{{ block.settings.unit == 'pixel' }}"
    },
    {
      "type": "checkbox",
      "id": "custom_mobile_size",
      "label": "t:settings.custom_mobile_size",
      "default": false
    },
    {
      "type": "header",
      "content": "t:content.mobile_size",
      "visible_if": "{{ block.settings.custom_mobile_size == true }}"
    },
    {
      "type": "select",
      "id": "unit_mobile",
      "label": "t:settings.unit",
      "options": [
        {
          "value": "pixel",
          "label": "t:options.pixel"
        },
        {
          "value": "percent",
          "label": "t:options.percent"
        }
      ],
      "default": "percent",
      "visible_if": "{{ block.settings.custom_mobile_size == true }}"
    },
    {
      "type": "range",
      "id": "percent_width_mobile",
      "label": "t:settings.width",
      "min": 10,
      "max": 100,
      "step": 1,
      "unit": "%",
      "default": 100,
      "visible_if": "{{ block.settings.unit_mobile == 'percent' and block.settings.custom_mobile_size == true}}"
    },
    {
      "type": "range",
      "id": "pixel_height_mobile",
      "label": "t:settings.height",
      "min": 16,
      "max": 160,
      "step": 8,
      "unit": "px",
      "default": 120,
      "visible_if": "{{ block.settings.unit_mobile == 'pixel' and block.settings.custom_mobile_size == true}}"
    },
    {
      "type": "header",
      "content": "t:content.padding"
    },
    {
      "type": "range",
      "id": "padding-block-start",
      "label": "t:settings.top",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding-block-end",
      "label": "t:settings.bottom",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding-inline-start",
      "label": "t:settings.left",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding-inline-end",
      "label": "t:settings.right",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 0
    }
  ],
  "presets": [
    {
      "name": "t:names.logo",
      "category": "t:categories.basic",
      "settings": {
        "unit": "pixel",
        "pixel_height": 48
      }
    }
  ]
}
{% endschema %}
