@use '../../../assets/styles/common-mixins' as mixins;

:host cdk-virtual-scroll-viewport {
    height: calc(100vh - 50px - 31px - 111px);
    overflow-y: hidden !important;
    @include mixins.scroll-bar;

    &.no-data {
        display: none;
    }

    &.has-scrollbar:hover ::ng-deep.cdk-virtual-scroll-content-wrapper {
        grid-template-columns: var(--gridTemplateColumnsHover);
    }

    ::ng-deep.cdk-virtual-scroll-content-wrapper {
        grid-template-columns: var(--gridTemplateColumns);
        display: grid;

        .table-item {
            display: contents;

            &.disabled > iqser-table-item > div,
            &.disabled .cell {
                background-color: var(--iqser-grey-2);
                color: var(--iqser-disabled);

                .action-buttons {
                    color: initial;
                }
            }

            input,
            mat-select {
                margin-top: 0;
            }

            &:hover {
                .selection-column iqser-round-checkbox .wrapper {
                    opacity: 1;
                }

                .action-buttons {
                    display: flex !important;
                }
            }

            &:hover:not(.disabled) {
                .cell,
                > * > div {
                    background-color: var(--iqser-not-disabled-table-item);
                }
            }
        }
    }

    &:hover {
        overflow-y: auto !important;

        &.has-scrollbar .table-item::ng-deep {
            .action-buttons {
                right: 0;
                padding-right: 13px;
            }

            .scrollbar-placeholder {
                display: none !important;
            }
        }
    }
}