@use "variables" as *;

:host {
    height: 100%;
    .dot-experiment-list-table {
        display: flex;
        flex-direction: column;
        margin-bottom: $spacing-5;
        height: 100%;
    }

    //ng-table overwritte
    ::ng-deep {
        .p-datatable {
            border-collapse: separate;
            border-spacing: 0;

            tr:not(:first-child) td,
            tr:not(:last-child) td,
            tr:only-child td {
                &:first-child {
                    border-left: 1px solid $color-palette-gray-300;
                }

                &:last-child {
                    border-right: 1px solid $color-palette-gray-300;
                }
            }

            tr:last-child td {
                &:first-child {
                    border-bottom-left-radius: $border-radius-sm;
                }

                &:last-child {
                    border-bottom-right-radius: $border-radius-sm;
                }
            }

            .p-datatable-thead {
                tr > th {
                    color: $color-palette-gray-900;
                    font-size: $font-size-sm;
                    font-weight: $font-weight-semi-bold;
                    background: $color-palette-gray-200;
                }

                th:first-child {
                    border-top-left-radius: $border-radius-sm;
                }

                th:last-child {
                    border-top-right-radius: $border-radius-sm;
                }
            }

            .p-datatable-header {
                border: none;
                color: $color-palette-gray-700;
            }
        }
    }
}
