How to theme cart overlay?

When the customer clicks on the cart icon, the cart overlay appears. It displays the items currently in the cart, as well as the cart total.

It provides buttons for navigating to the cart page or the checkout.

<aside> ℹ️ Usually, styling this element takes from-to: 3-5h

</aside>

What are the dependencies?

Cart item list. How to theme cart item list?
Cart totals. How to theme cart totals?

Where this element can be seen?

Cart overlay can be seen after clicking the cart icon in the header.

How should this element be designed?

Cart overlay should be represented in several states:

No items
With items (2+, to represent max visible items count)

All buttons should represent hover effects if not inherited from the Base template style.

Design example #1

Design example #2

Design example #3

How to develop styles for this element?

Theme the CartOverlay component.

Only default elements should be styles, if designs contain some custom logic that requires BE data/adjustments, this part should be done by the internal team.

<aside> ➡️ Styles should be applied with higher selectors amount to override source styling!