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

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

    &.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;

            > *:not(.selection-column):not(.scrollbar-placeholder) {
                display: contents;
            }

            > div,
            .cell {
                display: flex;
                flex-direction: column;
                justify-content: center;
                position: relative;
                box-sizing: border-box;
                border-bottom: 1px solid var(--iqser-separator);
                height: var(--itemSize);
                padding: 0 10px;

                &.center {
                    align-items: center;
                    justify-content: center;
                }
            }

            .cell {
                min-width: 110px;

                &:first-of-type {
                    padding: 0 24px;
                }
            }

            .selection-column {
                padding-right: 0 !important;

                iqser-round-checkbox .wrapper {
                    opacity: 0;
                    transition: opacity 0.2s;

                    &.active {
                        opacity: 1;
                    }
                }

                & + * > .cell:first-of-type {
                    padding: 0 10px;
                }
            }

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

                .action-buttons {
                    color: initial;
                }
            }

            .table-item-title {
                font-weight: 600;
                @include mixins.line-clamp(1);
            }

            .action-buttons {
                position: absolute;
                display: none;
                right: -11px;
                top: 0;
                height: 100%;
                width: fit-content;
                flex-direction: row;
                align-items: center;
                padding-left: 100px;
                padding-right: 21px;
                z-index: 1;
                background: linear-gradient(to right, rgba(244, 245, 247, 0) 0%, var(--iqser-grey-2) 35%);

                mat-icon {
                    width: 14px;
                }

                iqser-circle-button:not(:last-child) {
                    margin-right: 2px;
                }
            }

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

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

                .action-buttons {
                    display: flex;
                }
            }

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

    &:hover {
        overflow-y: auto !important;
        @include mixins.scroll-bar;

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

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