{% comment %}
  This is the cart drawer component.
{% endcomment %}

<script
  src="{{ 'cart-drawer.js' | asset_url }}"
  type="module"
></script>

<style>
  .cart-items__wrapper,
  .cart-drawer__summary {
    --cart-secondary-font-family: var(--font-{{settings.cart_price_font}}--family);
    --cart-secondary-font-style: var(--font-{{settings.cart_price_font}}--style);
    --cart-secondary-font-weight: var(--font-{{settings.cart_price_font}}--weight);
  }

  .cart-items-component {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .cart-drawer__heading .cart-bubble {
    width: fit-content;
    border-radius: var(--style-border-radius-buttons-primary);
    aspect-ratio: auto;
    padding: var(--cart-padding);
  }

  .cart-drawer__heading .cart-bubble[data-maintain-ratio] {
    aspect-ratio: 1;
    min-width: 26px;
  }

  .cart-drawer__header {
    background-color: var(--color-background);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--cart-drawer-padding);
    border-bottom: var(--style-border-width) solid none;
    position: sticky;
    top: 0;
    z-index: 1;

    @media screen and (width >= 750px) {
      padding: var(--cart-drawer-padding-desktop);
    }
  }

  .cart-drawer__dialog {
    overflow: hidden;
  }

  .cart-drawer__inner {
    height: 100%;
    overflow: hidden;
  }

  .cart-drawer__content {
    height: calc(100% - var(--header-height));
    display: flex;
    flex-direction: column;
  }

  .cart-drawer__summary {
    background-color: var(--color-background);
    position: sticky;
    bottom: 0;
    z-index: 1;
  }
</style>

<cart-drawer-component
  class="cart-drawer"
  {{ block.shopify_attributes }}
  {{ cart_drawer_sizes }}
  {% if settings.auto_open_cart_drawer %}
    auto-open
  {% endif %}
>
  <button
    class="button header-actions__action button-unstyled"
    on:click="/open"
    aria-label="{{ 'accessibility.open_cart_drawer' | t }}"
  >
    {% render 'cart-icon-component' %}
  </button>

  <dialog
    ref="dialog"
    class="cart-drawer__dialog dialog-modal dialog-drawer color-{{ settings.drawer_color_scheme }}{% if cart.empty? %} cart-drawer--empty{%endif%}"
    scroll-lock
  >
    <div class="cart-drawer__inner">
      <cart-items-component
        class="cart-items-component"
        data-section-id="{{ section.id }}"
      >
        {%- if cart.empty? -%}
          <div class="cart-drawer__header">
            <button
              ref="closeButton"
              on:click="cart-drawer-component/close"
              class="button cart-drawer__close-button button-unstyled"
              aria-label="{{ 'actions.close_dialog' | t }}"
            >
              <span class="svg-wrapper">
                {{- 'icon-close.svg' | inline_asset_content -}}
              </span>
            </button>
          </div>

          <div
            class="cart-drawer__content motion-reduce"
            aria-label="{{ 'accessibility.cart' | t }}"
          >
            <span class="cart-drawer__heading h3 cart-drawer__heading--empty">
              {{ 'content.your_cart_is_empty' | t }}
            </span>

            <div class="cart-drawer__items">
              {% render 'cart-products' %}
            </div>
          </div>
        {%- else -%}
          <div
            class="cart-drawer__header"
            id="cart-drawer-header"
          >
            <span class="cart-drawer__heading h3">
              {{ 'content.cart_title' | t }}
              {% render 'cart-bubble' %}
            </span>

            <button
              ref="closeButton"
              on:click="cart-drawer-component/close"
              class="button cart-drawer__close-button button-unstyled"
              aria-label="{{ 'actions.close_dialog' | t }}"
            >
              <span class="svg-wrapper">
                {{- 'icon-close.svg' | inline_asset_content -}}
              </span>
            </button>
          </div>

          <div
            class="cart-drawer__content motion-reduce"
            aria-label="{{ 'accessibility.cart' | t }}"
            style="--header-height: {{ section.settings.header_height | default: 60 }}px;"
          >
            <scroll-hint
              class="cart-drawer__items"
            >
              {% render 'cart-products' %}
            </scroll-hint>

            <div
              class="cart-drawer__summary"
            >
              {% render 'cart-summary' %}
            </div>
          </div>
        {%- endif -%}
      </cart-items-component>
    </div>
  </dialog>
</cart-drawer-component>
