////@import "../../../abstracts/abstracts";

// Dynabloqs Material Design file upload
.modal-content,
.dbq-form {
    .dbqmd-form-group {
        .dbqmd-label {
            .dbqdb-file-upload,
            .dbqdb-image-upload {
                width: 100%;

                .dbq-file-streaming-control {
                    .dbqfsc-file-empty,
                    .dbqfsc-file-download,
                    .dbqfsc-file-upload-container {
                        border-radius: 0;
                        background: $material-design-default-background-color !important;
                        border-radius: $material-design-border-radius;
                        color: $material-design-default-label-color;
                        width: $material-design-width;
                        height: $material-design-height;
                        border: 0;
                        padding: 0;
                        border-bottom: 1px solid $material-design-default-border-color;
                        display: flex;
                        gap: $global-margin;

                        .dbqfsc-file-upload {
                            padding-top: $global-padding;
                        }

                        .dbqfsc-file-upload-progress-container {
                            display: flex;
                            align-items: center;
                            //padding: $global-padding; 
                            width: 100%;

                            .dbqfsc-progress-container {
                                width: 100%;
                                margin: $global-margin 0;
                            }
                        }
                    }

                    .dbqfsc-file-empty,
                    .dbqfsc-file-download {
                        background: $material-design-disabled-background-color !important;
                        font-size: $material-design-default-label-font-size;
                        font-weight: 500;
                        display: flex;
                        align-items: center;
                        padding: $global-padding;
                        padding-bottom: 0;

                        .dbqfsc-file-name,
                        .dbqfsc-file-size  {
                            font-size: $material-design-default-label-font-size;
                            font-weight: 400;
                            color: $text-color-default;
                        }
                    }

                    .dbqfsc-file-download {
                        padding: $global-padding;
                    }

                    .dbqfsc-file-download-container {
                        background: $material-design-disabled-background-color;
                    }

                    .dbqfsc-file-upload-container {
                        height: inherit;
                        padding: 0 $global-padding;
                        border: 1px dashed $material-design-default-border-color;
                        //border-bottom: 1px solid $material-design-default-border-color;
                        min-height: $material-design-height;
                        border-radius: $material-design-border-radius-single;
                        flex-direction: column;
                        gap: 0;

                        .dbqfsc-file-upload {
                            padding-top: 0;
                            margin: $global-margin 0;

                            svg {
                                width: $material-design-icon-size;
                                height: $material-design-icon-size;
                            }

                            span {
                                font-size: $field-font-size;
                                font-weight: 400;
                            }

                            
                        }

                        // Hover
                        &:hover {
                            background: $material-design-hover-background-color !important;
                            border: 1px dashed $color-primary;
                        }
                    }
                }
            }

            // Hover
            &.dbqmd-hover {
                &:not(:disabled) {
                    .dbqdb-file-upload {
                        .dbq-file-streaming-control {
                            .dbqfsc-file-empty,
                            .dbqfsc-file-download,
                            .dbqfsc-file-upload-container {
                                background: $material-design-hover-background-color;
                            }
                        }
                    }
                }
        
                &:disabled {
                    .input-group.image-file-upload {
                        cursor: not-allowed;
                    }
                }
            }

            // Styling file not found field
            .dbq-no-file-found {
                border-radius: 0;
                background: $material-design-default-background-color !important;
                border-radius: $material-design-border-radius;
                color: $material-design-default-label-color;
                width: $material-design-width;
                height: $material-design-height;
                border: 0 !important;
                border-bottom: 1px solid $material-design-default-border-color !important;
                line-height: calc($material-design-height - $global-padding);
                padding: 0 $global-padding;
                padding-top: $global-padding;
                font-size: $material-design-default-label-font-size;
                font-weight: 400;
            }

            &:has(.dbq-file-streaming-control) {
                border-radius: 0;
                background: $material-design-default-background-color !important;
                border-radius: $material-design-border-radius;
                color: $material-design-default-label-color;
                border: 0 !important;
                border-bottom: 1px solid $material-design-default-border-color !important;
                padding: $global-padding;
                padding-top: 30px;

                // Styling with end icon
                &.dbqmd-has-end-icon {
                    padding-right: $material-design-end-icon-total-padding;
                }
            }

            &.dbqmd-static-label:has(.dbqdb-file-upload) {
                .dbqmd-title-label {
                    width: unset !important;
                    padding-right: 5px;

                    .dbqmd-icon.dbqmd-icon-info-tooltip {
                        position: relative;
                        display: inline-flex;
                        align-items: center;
                        margin-left: 5px;

                        svg {
                            padding: 0;
                            margin: 0;
                            fill: $material-design-icon-tooltip-color;
                            transform: translateY(3px) ;
                        }
                    }
                }
            } 
        }
    }
}

// Traditional upload file styling
// Dynabloqs Material Design image file upload
.modal-content,
.dbq-form {
    .dbqmd-form-group {
        .dbqmd-label {
            .input-group.file-upload {
                border-radius: 0;
                background: $material-design-default-background-color !important;
                border-radius: $material-design-border-radius;
                color: $material-design-default-label-color;
                width: $material-design-width;
                height: $material-design-height;
                border: 0;
                padding: 0;
                border-bottom: 1px solid $material-design-default-border-color;
                display: flex;

                &.dbq-has-download-button {
                    .btn-group {
                        .btn.btn-default {
                            svg {
                                margin: 0 !important;
                                padding: 0;
                            }
                        }

                        .file-download-button {
                            border-radius: 0 !important;
                            border: 0 !important;
                            height: 100% !important;
                            padding-top: 0 !important;
                            padding-bottom: 0 !important;
                            display: flex;
                            position: relative;
                            align-items: center;

                            &:hover {
                                background: $material-design-hover-background-color !important;

                                svg {
                                    fill: $color-primary !important;
                                }
                            }

                            svg {
                                margin: 0 !important;
                                padding: 0;
                                width: 20px;
                                height: 20px;
                                fill: $text-color-default;
                            }
                        }
                    }
                }

                .file-upload-filename {
                    height: 100% !important;
                    width: 100% !important;
                    position: initial;
                    flex-grow: 1; // Takes up all the remaining space
                    min-width: 0; // Prevents it from exceeding its necessary width
                    text-overflow: ellipsis;
                    color: $text-color-default;
                    white-space: nowrap;
                    padding-left: 15px;
                    padding-right: 15px;
                    padding-top: $global-padding;
                    border: 0;
                    background: none;
                }

                .btn-group {
                    position: initial;
                    width: initial !important;
                    height: 100% !important;
                    display: flex;
                    flex-shrink: 0;
                    margin-left: auto;
                    align-items: center;
                    background: none;

                    .btn.btn-default {
                        display: flex;
                        position: relative;
                        align-items: center;
                        height: 100%;
                        border: 0 !important;
                        padding: 0px;
                        padding-left: $material-design-icon-padding;
                        padding-right: $material-design-icon-padding;
                        background: none;

                        .file-upload-input-title {
                            color: $material-design-focus-text-color;
                        }

                        svg {
                            fill: $material-design-focus-text-color;
                            padding: 0;
                            margin: 0;
                        }

                        &:hover {
                            background: $material-design-hover-background-color !important;
                            
                            .file-upload-input-title {
                                color: $color-primary !important;
                            }

                            svg {
                                fill: $color-primary !important;
                            }
                        }

                        &.file-upload-clear {
                            .file-upload-clear-title {
                                color: #d5473c; // To-do: add color as variable
                            }
        
                            svg {
                                fill: #d5473c;
                            }

                            &:hover {
                                .file-upload-clear-title {
                                    color: #d5473c !important;
                                }
        
                                svg {
                                    fill: #d5473c !important;
                                }
                            }
                        }

                        .dbqdb-binary-file-upload.dbqdb-upload-input {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }

                input[type=file] {
                    height: inherit;
                }
            }

            &:has([data-is-read-only="true"][data-has-value="false"] ) {
                .input-group.file-upload {
                    background: $material-design-disabled-background-color !important;
                    border-radius: $material-design-border-radius;
                    color: $material-design-disabled-text-color;
                    width: $material-design-width;
                    height: $material-design-height;
                    line-height: calc($material-design-height - $global-padding);
                    padding: 0 $global-padding;
                    padding-top: $global-padding;
                }
            }

            // Hover
            &.dbqmd-hover {
                &:not(:disabled) {
                    .input-group.file-upload {
                        //background: $material-design-hover-background-color !important;
                    }
                }
        
                &:disabled {
                    .input-group.file-upload {
                        cursor: not-allowed;
                    }
                }
            }

            // Create room for the end icon
            &.dbqmd-has-end-icon, &:has(.dbqmd-end-icon) {
                .file-upload {
                    .btn-toolbar {
                        .btn-group {
                            padding-right: $material-design-end-icon-total-padding;
                        }
                    }
                }
            }
        }
    }
}