@use '@theorchard/suite-components/mixins' as mixins;

.PaymentGroupDetails {
    .ErrorMessage {
        align-self: center;
        justify-self: center;
    }

    &-ErrorSection {
        &-container {
            margin-bottom: var(--padding-medium);
        }

        &-SingleError {
            padding-bottom: var(--padding-large);
        }

        &-batchNum {
            font-weight: 500;
        }

        &-batchMsg {
            margin-top: 5px;
        }

        &-contact {
            font-weight: 500;
        }
    }

    &-Header {
        &.SuitePageHeader:not(.SuitePageHeader-grid)
            .SuitePageHeader-main-append {
            margin-left: var(--padding-small);
        }

        .SuitePageHeader-top-metadata-left {
            .Tag {
                margin-right: var(--padding-small);
            }
        }

        &-id {
            color: var(--text-secondary);
            margin-left: var(--padding-small);
            margin-bottom: 0;
        }

        &-status {
            margin-left: var(--padding-small);
        }

        &-actions {
            display: flex;
            gap: 12px;
        }

        .HelpTooltip {
            margin-left: var(--padding-small);
        }

        &-help-tooltip {
            color: var(--white);
            margin-bottom: 3px;

            &-content {
                display: flex;
                flex-direction: column;
                gap: var(--padding-medium-large);

                &-row {
                    &-label {
                        @include mixins.text-body-bold;
                    }
                }
            }
        }
    }

    &-Overview {
        &-generating {
            .ErrorMessage {
                height: calc(100vh - 300px);
                justify-content: center;
            }
        }
    }

    &-Payments {
        &-add-note-popup textarea {
            height: 120px;
            width: 100%;
        }

        &-table {
            .cell-accountName {
                a {
                    word-break: break-word;
                }
            }

            .payment-diff-green {
                color: var(--success);
                text-align: center;
            }

            .payment-diff-red {
                color: var(--danger);
                text-align: center;
            }
        }
    }

    .cell-accountName {
        white-space: break-spaces;
    }
}