.root {
    composes: relative from global;
    composes: content-start from global;
    composes: grid from global;
    composes: gap-x-0 from global;
    composes: gap-y-xs from global;
    grid-template-areas:
        'image name'
        'image options'
        'image quantity';
    grid-template-columns: 80px 1fr;
    grid-template-rows: min-content minmax(54px, 1fr) min-content;
}

.imageContainer {
    grid-area: image;
}

.image {
    composes: bg-subtle from global;
    composes: border from global;
    composes: border-solid from global;
    composes: border-subtle from global;
    composes: h-[100px] from global;
    composes: object-contain from global;
    composes: object-center from global;
    composes: rounded-sm from global;
}

.name {
    composes: font-semibold from global;
    composes: pt-0.5 from global;
    composes: text-sm from global;
    grid-area: name;
}

.quantityRow {
    composes: items-center from global;
}

.quantity {
    composes: flex from global;
    composes: items-end from global;
    composes: self-end from global;
    composes: text-sm from global;
    grid-column: 2 / span 1;
}

.quantityOperator {
    composes: inline-flex from global;
    composes: items-center from global;
    composes: mx-1.5 from global;
    composes: my-0 from global;
    composes: text-subtle from global;
}

.price {
    composes: items-center from global;
    composes: inline-flex from global;
}

.mask {
    composes: absolute from global;
    composes: bg-subtle from global;
    composes: bottom-[-7px] from global;
    composes: left-[-24px] from global;
    composes: opacity-50 from global;
    composes: right-[-24px] from global;
    composes: top-[-7px] from global;
    composes: z-mask from global;
}