.root {
    composes: border-2 from global;
    composes: border-solid from global;
    composes: border-subtle from global;
    composes: grid from global;
    composes: grid-cols-2 from global;
    composes: rounded-box from global;
}

@media screen(lg) {
    .root {
        grid-template-columns:
            minmax(9rem, 1fr) minmax(9rem, 1fr) minmax(9rem, 1fr)
            16rem 2fr 3rem;
    }
}

.orderNumberContainer {
    composes: border-0 from global;
    composes: border-b from global;
    composes: border-solid from global;
    composes: border-subtle from global;
    composes: gap-x-2xs from global;
    composes: gap-y-1 from global;
    composes: grid from global;
    composes: grid-flow-col from global;
    composes: items-center from global;
    composes: justify-start from global;
    composes: overflow-hidden from global;
    composes: p-sm from global;

    composes: lg_border-b-0 from global;
    composes: lg_gap-x-0 from global;
    composes: lg_grid-flow-row from global;
    composes: lg_items-left from global;
}

.orderDateContainer {
    composes: border-0 from global;
    composes: border-b from global;
    composes: border-solid from global;
    composes: border-subtle from global;
    composes: gap-y-1 from global;
    composes: grid from global;
    composes: overflow-hidden from global;
    composes: p-sm from global;

    composes: lg_border-b-0 from global;
    composes: lg_border-l from global;
}

.orderTotalContainer {
    composes: border-0 from global;
    composes: border-b from global;
    composes: border-l from global;
    composes: border-solid from global;
    composes: border-subtle from global;
    composes: gap-y-1 from global;
    composes: grid from global;
    composes: overflow-hidden from global;
    composes: p-sm from global;

    composes: lg_border-b-0 from global;
}

.orderStatusContainer {
    composes: border-0 from global;
    composes: border-l-0 from global;
    composes: border-solid from global;
    composes: border-subtle from global;
    composes: col-end-span2 from global;
    composes: gap-y-1 from global;
    composes: grid from global;
    composes: overflow-hidden from global;
    composes: p-sm from global;
    composes: max-lg_empty_hidden from global;

    composes: lg_border-b-0 from global;
    composes: lg_border-l from global;
    composes: lg_col-end-auto from global;
    composes: lg_gap-y-3 from global;
}

.orderItemsContainer {
    composes: border-0 from global;
    composes: border-b from global;
    composes: border-solid from global;
    composes: border-subtle from global;
    composes: col-end-span2 from global;
    composes: overflow-hidden from global;
    composes: p-0 from global;
    composes: py-sm from global;

    composes: lg_border-0 from global;
    composes: lg_border-l from global;
    composes: lg_col-end-auto from global;
    composes: lg_p-0 from global;
}

.contentToggleContainer {
    composes: border-0 from global;
    composes: border-l from global;
    composes: border-solid from global;
    composes: border-subtle from global;
    composes: col-start-2 from global;
    composes: justify-self-end from global;
    composes: overflow-hidden from global;
    composes: px-xs from global;
    composes: py-0 from global;
    composes: row-start-1 from global;

    composes: lg_border-l from global;
    composes: lg_col-start-6 from global;
    composes: lg_px-xs from global;
    composes: lg_row-start-1 from global;
}

.orderNumberLabel,
.orderDateLabel,
.orderTotalLabel {
    composes: text-2xs from global;
}

.orderNumber,
.orderDate,
.orderTotal {
    composes: font-bold from global;
}

.orderStatusBadge {
    composes: border from global;
    composes: border-solid from global;
    composes: border-subtle from global;
    composes: font-bold from global;
    composes: justify-self-start from global;
    composes: px-xs from global;
    composes: py-1 from global;
    composes: rounded-badge from global;
    composes: text-2xs from global;
}

.content {
    composes: border-t from global;
    composes: border-solid from global;
    composes: border-subtle from global;
    composes: p-sm from global;
    grid-column: 1 / -1;
}

.content_collapsed {
    composes: hidden from global;
}

@media screen(-lg) {
    .orderNumberContainer {
        grid-column: 1 / span 2;
        grid-row: 1;
    }
}