_payment-block.scss

.payment-block {
    border: 1px solid $color--mid-grey;
    padding: 1rem;
    margin-bottom: 1rem;

    @include media-query(mob-landscape) {
        padding: 2rem;
    }

    &__header {
        margin-bottom: 1rem;

        @include media-query(tablet-portrait) {
            margin-bottom: 1.5rem;
        }

        @include media-query(mob-landscape) {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }

    &__title {
        font-size: map-get($font-sizes, delta);
        margin: 0 0 1rem;

        @include media-query(mob-landscape) {
            margin: 0;
        }
    }

    &__button {
        padding: .7rem 1.2rem;
    }

    &__status {
        margin: 0;

        @include media-query(tablet-landscape) {
            display: block;
            font-weight: $weight--bold;
        }
    }

    &__rejected {
        text-align: center;
    }

    &__rejected-link {
        font-weight: $weight--bold;
    }

    &__mobile-label {
        display: inline-block;
        font-weight: $weight--bold;
        white-space: pre;

        @include media-query(tablet-landscape) {
            display: none;
        }
    }

    &__table {
        thead {
            display: none;
            border-top: 2px solid $color--light-mid-grey;

            @include media-query(tablet-landscape) {
                display: table-header-group;
            }

            th {
                color: $color--mid-dark-grey;
                padding: 10px;

                @include media-query(tablet-landscape) {
                    text-align: left;
                }
            }

            tr {
                border-color: $color--light-mid-grey;
            }
        }

        tbody {
            font-size: map-get($font-sizes, zeta);

            a {
                text-decoration: underline;
            }
        }

        tr {
            border: 0;
            border-bottom: 2px solid $color--light-grey;

            &:hover {
                box-shadow: none;
            }

            td {
                padding: 0 0 .5rem;
                word-break: break-word;

                &:first-child {
                    padding: 1rem 0 .5rem;

                    @include media-query(tablet-landscape) {
                        padding: 1rem;
                    }
                }

                &:last-child {
                    padding: 0 0 1rem;
                    display: flex;
                    flex-wrap: wrap;

                    & > * {
                        flex: 1 1 55px;
                        max-width: 55px;
                    }
                }

                @include media-query(tablet-landscape) {
                    padding: 1rem;
                }
            }
        }
    }

    &__table-amount {
        width: 25%;
        min-width: 90px;
    }

    &__table-status {
        min-width: 160px;
        width: 25%;
    }

    &__table-date {
        min-width: 180px;
        width: 25%;
    }

    &__table-update {
        min-width: 160px;
        width: 25%;
    }
}