@import '../../../styles/variables.less';

app-tabs-source-multiplefiles-structure {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    & table.files {
        width: 100%;
        border-spacing: 0px;
        & th {
            height: 56px;
            font-size: 12px;
            font-weight: 500;
            color: #ffffffb3;
            background-color: var(--scheme-bk-color-0);
            position: sticky;
            top: 0;
        }
        & tr {
            & td {
                font-size: 14px;
            }
            & td:last-child {
                overflow: hidden;
            }
        }
        & div.placeholder {
            height: 35px;
            transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
        }
        & .color {
            padding: 0 10px 0 0;
        }
        & div.color-indicator {
            width: 7px;
            height: 35px;
        }
        & .type {
            padding: 0 15px 0 0;
            min-width: 45px;
            max-width: 45px;
        }
        & .name {
            width: 100%;
            padding: 0 15px 0 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        & td.path {
            direction: rtl;
        }
        & .path {
            min-width: 130px;
            max-width: 150px;
            padding: 0 20px 0 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        & .size {
            min-width: 40px;
            max-width: 40px;
            padding: 0 25px 0 0;
            white-space: nowrap;
        }
        & .modification-date {
            min-width: 130px;
            max-width: 130px;
            white-space: nowrap;
        }
    }
    & .cdk-drop-list-dragging *:not(.cdk-drag-placeholder) {
        transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
    }
}

.cdk-drag-animating.multiple-file-draggable {
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.cdk-drag-preview.multiple-file-draggable {
    font-size: 14px;
    color: var(--scheme-color-0);
    background-color: var(--scheme-bk-color-0);
    box-sizing: border-box;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
    & td {
        vertical-align: middle;
    }
    & .color {
        padding: 0 10px 0 0;
    }
    & div.color-indicator {
        width: 7px;
        height: 35px;
    }
    & .type {
        padding: 0 15px 0 0;
        min-width: 45px;
        max-width: 45px;
    }
    & .name {
        max-width: 150px;
        padding: 0 15px 0 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    & td.path {
        direction: rtl;
    }
    & .path {
        min-width: 130px;
        max-width: 150px;
        padding: 0 20px 0 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    & .size {
        min-width: 40px;
        max-width: 40px;
        padding: 0 25px 0 0;
        white-space: nowrap;
    }
    & .modification-date {
        min-width: 130px;
        max-width: 130px;
        white-space: nowrap;
    }
}

& .selected-multiple-file {
    background-color: var(--scheme-color-active);
}