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

:host::ng-deep {
    display: contents;

    // workaround for firefox, user-select: none not working for some reason. needed for shift click selection
    ::selection {
        background: transparent;
    }

    > *: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;
        background-color: var(--iqser-background);

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

    .table-item-title {
        font-weight: 600;
        @include mixins.line-clamp(1);
        width: fit-content;
        max-width: 100%;
    }

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

    .action-buttons:not(.edit-button) {
        position: absolute;
        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-side-nav) 35%);

        mat-icon {
            width: 14px;
        }

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

    redaction-file-attribute {
        height: 100%;
        width: 100%;
    }
}