@use "variables" as *;

:host {
    width: 100%;
    max-height: 100%;
    min-height: 0;

    ::ng-deep {
        p-table {
            .p-datatable.dotTable {
                .p-datatable-wrapper {
                    border: none;
                    border-radius: 0;
                }
            }
        }

        p-table {
            .p-datatable.empty-table {
                .p-datatable-wrapper {
                    overflow: hidden;

                    table {
                        height: 100%;
                    }
                }
            }
        }
    }
}

.list-view-title {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    align-items: center;
    gap: $spacing-3;
    width: 100%;
}

.empty-state {
    padding: $spacing-6 $spacing-4;
    text-align: center;
    height: 100%;
    border: none;

    .empty-state-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: $spacing-4;
        max-width: 400px;
        margin: 0 auto;
    }

    .empty-state-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 5rem;
        height: 5rem;
        border-radius: 50%;

        i {
            color: $color-palette-surface-500;
            font-size: 5.75rem;
        }
    }

    .empty-state-message {
        display: flex;
        flex-direction: column;
    }

    .empty-state-title {
        margin: 0;
        font-size: $font-size-lmd;
        font-weight: $font-weight-medium-bold;
        text-align: center;
        color: $color-palette-gray-800;
    }

    .empty-state-description {
        margin: 0;
        color: $black;
        font-size: $font-size-md;
        line-height: 1.5;
    }
}

.content-drive-table__row {
    .content-drive-table__actions-button {
        opacity: 0;
        transition: opacity 0.2s ease-in-out;
    }

    &:hover {
        .content-drive-table__actions-button {
            opacity: 1;
        }
    }
}
