@import '../_variables.scss';

adf-document-list {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;

    & > adf-datatable {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: auto;
    }
}

adf-document-list .adf-data-table {
    border: none !important;

    .sr-only {
        display: none;
    }

    tr, td {
        &:focus {
            outline: none !important;
        }
    }

    // TODO: Remove tr background-color once it gets to ADF
    tbody tr {
        &:hover, &:focus {
            background-color: $alfresco-app-color--hue-1;
        }
    }

    tr {
        &.is-selected {
            background-color: $alfresco-app-color--hue-1;

            &:hover {
                background-color: $alfresco-app-color--hue-1;
            }

            .image-table-cell {
                position: relative;

                &:before {
                    content: "\E876"; /* "done" */
                    font-family: "Material Icons";
                    font-size: 24px;
                    line-height: 32px;
                    text-align: center;
                    color: white;
                    position: absolute;
                    width: 32px;
                    height: 32px;
                    top: 50%;
                    left: 50%;
                    margin-top: -16px;
                    margin-left: -14px;
                    border-radius: 100%;
                    background: #00bcd4;
                }
            }
        }

        .app-name-column {
            width: 100%;

            .cell-container {
                max-width: 45vw;
                text-overflow: ellipsis;
                overflow: hidden;
            }
        }
    }

    .adf-location-cell {
        a {
            text-decoration: none;
            color: $alfresco-primary-text-color;
        }
    }

    .adf-no-content-container {
        border: none !important;
    }
}

.empty-list {
    .adf-data-table {
        height: 100%;

        tr:hover, tr:focus {
            background-color: unset;
            cursor: default;
        }
    }

    &__block {
        color: $alfresco-secondary-text-color;
        display: flex;
        flex-direction: column;
        align-items: center;

        p {
            line-height: 0;
        }
    }

    &__title {
        font-size: 18px;
        font-weight: 600;
    }

    &__subtitle {
        font-size: 14px;
        font-weight: 300;
    }

    &__block > mat-icon {
        font-size: 52px;
        height: 52px;
        width: 52px;
    }
}