@use "variables" as *;

:host {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    width: 100%;

    p-table {
        flex-grow: 1;
    }

    ::ng-deep {
        .p-datatable {
            position: initial;

            &.p-datatable-responsive-scroll > .p-datatable-wrapper {
                overflow-x: visible;
            }
        }

        .p-datatable,
        .p-table {
            display: flex;
            flex-direction: column;
            height: 100%;
            justify-content: space-between;
            background: $white;
        }

        .p-datatable-tablewrapper,
        .p-table-wrapper {
            flex-grow: 1;
            background: $white;

            table tbody.p-datatable-data tr,
            table tbody.p-table-tbody tr {
                td {
                    cursor: pointer;

                    span {
                        word-break: break-word;
                    }
                }
            }
        }

        .p-datatable-data,
        .p-table-tbody {
            & > tr > .listing-datatable__action-column {
                padding-bottom: 0;
                padding-top: 0;
            }
        }
    }
}

.listing-datatable__column-icon {
    display: flex;
    align-items: center;

    dot-icon {
        margin-right: $spacing-1;
    }
}

.listing-datatable__empty {
    display: flex;
    justify-content: center;
    font-size: $spacing-9;
    font-size: $font-size-xl;
    margin-top: $spacing-9;
}

dot-action-header {
    background: $white;
    position: relative;
    z-index: 1;
}

p-dataTable {
    display: flex;
    flex-grow: 1;
}
