.root {
    composes: absolute from global;
    composes: h-0 from global;
    composes: max-w-[100vw] from global;
    composes: opacity-0 from global;
    composes: overflow-visible from global;
    composes: top-full from global;
    composes: z-menu from global;
    composes: -translate-x-1/2 from global;
    transition: opacity 192ms var(--venia-global-anim-out),
        visibility 192ms var(--venia-global-anim-out),
        /* Adding delay to move container off the screen after previous transitions happened */
            left 0s 192ms;
    width: calc(100vw - 2rem); /* TODO @TW: review */
}

.root_closed {
    composes: root;

    composes: left-[-100vw] from global;

    @apply invisible;
}

.root_open {
    composes: root;

    composes: left-1/2 from global;
    composes: opacity-100 from global;
    transition: opacity 224ms var(--venia-global-anim-in),
        visibility 224ms var(--venia-global-anim-in), left 0s;

    @apply visible;
}

/* These heights may change based on PWA-605 and should be based on 1.5 and 2.5 visible items. */
.contents {
    composes: absolute from global;
    composes: bg-white from global;
    composes: grid from global;
    composes: max-h-[35rem] from global;
    composes: overflow-hidden from global;
    composes: right-0 from global;
    composes: rounded-sm from global;
    composes: top-0 from global;
    composes: w-[22.5rem] from global;
    box-shadow: 0 1px 6px rgb(var(--venia-global-color-gray-900) / 0.2);
    min-height: 20rem;
    transform: translate3d(0, -8px, 0);
    transition-duration: 192ms;
    transition-property: transform;
    transition-timing-function: var(--venia-global-anim-out);
}

.contents_open {
    composes: contents;

    transform: translate3d(0, 4px, 0);
    transition-duration: 224ms;
    transition-timing-function: var(--venia-global-anim-in);
}

.header {
    composes: border-b-2 from global;
    composes: border-solid from global;
    composes: border-light from global;
    composes: font-semibold from global;
    composes: gap-y-xs from global;
    composes: grid from global;
    composes: grid-cols-autoLast from global;
    composes: items-center from global;
    composes: leading-tight from global;
    composes: mx-xs from global;
    composes: my-0 from global;
    composes: pb-2xs from global;
    composes: pt-xs from global;
    composes: px-2xs from global;
    composes: text-sm from global;
}

.stockStatusMessageContainer {
    composes: col-end-span2 from global;

    composes: empty_hidden from global;
}

.body {
    composes: max-h-[25rem] from global;
    composes: overflow-y-auto from global;
    composes: p-sm from global;
    min-height: 10rem;
}

.quantity {
    composes: opacity-100 from global;
    transition-delay: 64ms;
    transition-duration: 384ms;
    transition-property: opacity;
    transition-timing-function: var(--venia-global-anim-standard);
}

.quantity_loading {
    composes: quantity;

    @apply opacity-50;
}

.price {
    composes: opacity-100 from global;
    transition-delay: 64ms;
    transition-duration: 384ms;
    transition-property: opacity;
    transition-timing-function: var(--venia-global-anim-standard);
}

.price_loading {
    composes: price;

    @apply opacity-50;
}

.footer {
    composes: border-t-2 from global;
    composes: border-solid from global;
    composes: border-light from global;
    composes: gap-2xs from global;
    composes: grid from global;
    composes: items-center from global;
    composes: justify-items-center from global;
    composes: leading-normal from global;
    composes: mx-xs from global;
    composes: my-0 from global;
    composes: overflow-hidden from global;
    composes: p-xs from global;
    composes: text-sm from global;
    min-height: 3rem;
}

.checkoutButton {
    composes: root_highPriority from '../Button/button.module.css';

    @apply bg-brand-dark;
    @apply border-0;
    composes: font-bold from global;
    composes: m-auto from global;
    composes: w-[10rem] from global;
    grid-column: 1 / span 1;
}

.editCartButton {
    composes: text-sm from global;
    composes: underline from global;
}

.emptyCart {
    composes: gap-md from global;
    composes: grid from global;
    composes: p-md from global;
}

.emptyMessage {
    composes: font-bold from global;
    composes: m-auto from global;
}