@layer components {
    section.invoice-list {
        & p {
            margin-bottom: var(--space-xl);
        }
    }
    table.invoice-list {
        th.date, th.status,
        td.date, td.status {
            display: none;
        }

        tr {
            &.status-unpaid {
                td.status {
                    color: var(--color--danger);
                }
            }

            &.status-clientPaid, &.status-studioPaid, &.status-systemPaid {
                td.status {
                    color: var(--color--loud);
                }
            }

            &.status-voided {
                td.status {
                    color: var(--color--brand--80);
                }
            }
        }
    }

    @media (min-width: 600px) {
        table.invoice-list {
            th.date, th.status,
            td.date, td.status {
                display: table-cell;
            }
        }
    }
}