.cart {
    gap: 1rem;

    &[data-status] .hint {
        border: 1px solid transparent;
        border-radius: var(--operator-radius);
        padding: 0.25rem 0.5rem;
    }

    &[data-status="pending"] .hint {
        border-color: var(--operator-warning);
        background: var(--operator-warning-bg);
    }

    &[data-status="validated"] .hint {
        border-color: var(--operator-success);
        background: var(--operator-success-bg);
    }

    &[data-status="missing"] .hint {
        border-color: var(--operator-error);
        background: var(--operator-error-bg);
    }

    .lines {
        display: grid;
        gap: 0.5rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .line {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem;
    }

    .lines .line + .line {
        border-block-start: 1px solid var(--rule);
        padding-block-start: 0.5rem;
    }

    .name {
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .cost {
        color: var(--ink-muted);
        font-variant-numeric: tabular-nums;
    }

    .original {
        color: var(--ink-muted);
        text-decoration: line-through;
    }

    .badge {
        color: var(--operator-success);
        font-size: var(--size-small);
    }

    .empty { color: var(--ink-muted) }

    .total {
        border-block-start: 1px solid var(--operator-border);
        margin: 0;
        padding-block-start: 0.5rem;
        font-weight: var(--weight-answer);
    }

    footer {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;

        button { flex: 1 }
    }

    .submit {
        --ground: var(--operator-accent);

        &:hover { background: hsl(from var(--operator-accent) h s calc(l - 8)) }

        &:disabled {
            --ground: var(--operator-border);
            background: var(--ground);
            color: var(--ink-muted);
        }
    }
}