@layer components {
    dl.invoices.summary {
        display: flex;
        flex-wrap: wrap;
        /* display: grid; */
        width: 100%;
        /* grid-template-columns: repeat(3, 1fr); */

        & div {
            flex-grow: 1;
        }

        & dt {
            border-bottom: solid var(--size--border) var(--color--border);
            display: block;
            white-space: nowrap;
            padding-bottom: var(--space-2xs);
            margin-bottom: var(--space-2xs);

            font-family: var(--font--title--family--xsmall);
            font-size: var(--font--title--size--xsmall);
            font-weight: var(--font--title--weight--xsmall);
            line-height: var(--font--title--line-height--xsmall);
            letter-spacing: var(--font--title--letter-spacing--xsmall);
            text-transform: var(--font--title--casing--xsmall);
        }

        & dd {
            text-align: right;
            display: flex;
            justify-content: end;
            align-items: top;
            column-gap: var(--space-xs);

            font-family: var(--font--family--monospace);
            font-size: 3rem;
            font-weight: 400;
            line-height: normal;
            letter-spacing: 0;
            text-transform: none;

            &.negative {
                /* TODO: Variable-ize this */
                /* color: #FF5320; */
                color: var(--color--danger);
            }

            &.positive {
                color: var(--color--loud)
            }

            & span.cents {
                font-size: 1.5rem;
                font-weight: 600;
                letter-spacing: 0;
            }
        }
    }
}