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

:host cdk-virtual-scroll-viewport {
    height: calc(100vh - 50px - 31px - var(--iqser-top-bar-height) - 50px);
    overflow-y: auto !important;
    background-color: var(--iqser-background);
    @include mixins.scroll-bar;

    &.no-data {
        display: none;
    }

    ::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,
            &:has(iqser-circle-button[aria-expanded='true']),
            &.help-mode-active {
                .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);
                }

                .scrollbar-placeholder {
                    background-color: var(--iqser-side-nav);
                }
            }
        }
    }

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

        &.has-scrollbar iqser-table-item::ng-deep {
            .action-buttons:not(.edit-button) {
                right: 0;
                padding-right: 10px;
            }
        }
    }
}

.display-contents {
    display: contents;
}

a {
    display: contents;
    @include mixins.clear-a;
}