@mixin payment-status-colors {
    &.accepted,
    &.pending_acceptance {
        .GlyphIcon {
            color: var(--warning);
        }
    }

    &.cancelled,
    &.failed,
    &.failure {
        .GlyphIcon {
            color: var(--danger);
        }
    }

    &.successful {
        .GlyphIcon {
            color: var(--success);
        }
    }
}

.PaymentSearch {
    &-Toolbar {
        flex-wrap: wrap;
        gap: var(--padding-medium);

        .SuiteListView {
            .Status {
                @include payment-status-colors;
            }
        }
    }

    &-Table {
        &-HeaderLeftMessage {
            color: var(--text-secondary);
            font-size: var(--sizing-sizing-12);
            font-style: italic;
        }

        .InfoMessage {
            min-height: calc(100vh - 320px);
        }

        .TableColumnSpan-group-align-top .GridTable-cell {
            align-items: flex-start;
        }

        .GridTable-row-cell {
            white-space: normal;

            .Status {
                @include payment-status-colors;
            }
        }
    }
}