@layer components {
/* Shopping cart — icon plus notification badge.

   Structure:
     <span class="psw-shopping-cart">
       <svg class="psw-icon ..."></svg>
       <span class="psw-shopping-cart__badge psw-badge psw-badge--count">2</span>
     </span>

   The badge is absolutely positioned over the icon, but the component reserves
   10px of inline layout space to the right so adjacent no-gap content accounts
   for the badge's stable right edge. */

.psw-shopping-cart {
    --psw-shopping-cart-badge-reserve: 10px;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 auto;
    width: calc(24px + var(--psw-shopping-cart-badge-reserve));
    height: 24px;
    color: var(--theme-primary, var(--theme-primary-default));
}

.psw-shopping-cart .psw-icon {
    color: currentColor;
}

.psw-shopping-cart [x-cloak] {
    display: none !important;
}

.psw-shopping-cart__badge {
    position: absolute;
    top: -12px;
    right: 0;
    padding: 0 var(--space-2);
    pointer-events: none;
}
}