{% doc %}
  Cart Items Component

  Renders the cart-items-component custom element wrapper.

  @param {string} children - The HTML content to render inside the component
  @param {boolean} [is_drawer] - If true, adds the data-drawer attribute
  @param {string} [section_id] - The ID of the section to render the component in

  @example
  {% capture cart_content %}
    ... cart items content ...
  {% endcapture %}
  {% render 'cart-items-component', children: cart_content, is_drawer: true, section_id: section.id %}
{% enddoc %}

<cart-items-component
  class="cart-items-component"
  {% if is_drawer %}
    data-drawer
  {% endif %}
  data-section-id="{{ section_id }}"
>
  {{ children }}
</cart-items-component>

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

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-items-component {
        view-transition-name: cart-drawer-content;
      }
    }

    html:active-view-transition-type(empty-cart-page) {
      .cart-items-component {
        view-transition-name: cart-page-content;
      }
    }
  }

  ::view-transition-old(cart-page-content) {
    animation: cart-page-content-old var(--animation-speed-fast) var(--animation-easing) forwards;
  }

  @keyframes cart-page-content-old {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
      filter: blur(4px);
    }
  }

  ::view-transition-old(cart-drawer-content) {
    transform-origin: 50% 33%;
    animation: cart-contents-old var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  ::view-transition-new(cart-drawer-content) {
    transform-origin: top center;
    animation: cart-contents-new var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  @keyframes cart-contents-old {
    to {
      scale: 0.92;
      opacity: 0;
    }
  }

  @keyframes cart-contents-new {
    from {
      scale: 1.05;
      translate: 0 128px;
      filter: blur(1px);
      opacity: 0;
    }
  }
{% endstylesheet %}
