@import '~@capillarytech/cap-ui-library/styles/_variables';

.upload-type-group-create-container {
    .upload-file-title {
        margin-bottom: 10px;
    }
    .file-drop-zone {
        height: 285px;
        border: 1px dashed map-get($CAP_SECONDARY, base);
        &:focus {
            outline:none;
        }
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        .drop-zone-text {
            /* TODO: cap-react-ui-library class removed — review this override */
            &, .cap-heading2 {
                color: map-get($CAP_SECONDARY, base);
            }
        }
    }

    .upload-file-preview {
        border: 1px solid $CAP_G07;
        padding: $CAP_SPACE_24;
        margin-top: $CAP_SPACE_20;
        
        .file-name {
            display: inline-block;
            margin-right: $CAP_SPACE_12;
        }

        .file-preivew-table {
            margin: $CAP_SPACE_24 0 $CAP_SPACE_12 0;
            .ant-table table {
                white-space: nowrap;
                
                td {
                    min-width: 100px;
                }

                .ant-table-thead > tr > th, .ant-table-tbody > tr > td {
                    word-break: unset;
                }
            }
        }
        
    }

    .selected-files-container {
        .selected-file-row {
            margin-bottom: $CAP_SPACE_08;

            &:first-of-type {
                border-top: 1px solid $CAP_G07;
            }
            .file-name {
                display: inline-block;
                margin-right: $CAP_SPACE_08;
            }
            .preview-link {
                margin-left: auto;
                margin-right: $CAP_SPACE_24;
                font-weight: 500;
            }
        }
        .cap-error {
            position:static;
        }
    }

    .upload-instructions-container {
        padding-left: $CAP_SPACE_32;
        margin-top: 30px;

        .upload-instruction-list {
            list-style-type: none;
            padding-left: 0;
            .instruction {
                margin-top: 30px;
                .instruction-num {
                    display: inline-block;
                    width: 30px;
                    height: 30px;
                    background: #dfe2e7;
                    border-radius: 50%;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 12px;
                    margin-right: 8px;
                }

                a:link {
                    text-decoration: none;
                }
            }
        }
    }
}

.ant-select-dropdown.cap-select-v2-dropdown.upload-type-group-select {
    width: 170px !important;
}