@use '../abstracts/variables';
@use '../abstracts/mixins';
@use '../abstracts/functions';

// -----------------------------------------------------
//  File
// -----------------------------------------------------
$file-input-z-index: 1;

.pepperi-file-container, .pep-file-container {
    ::ng-deep {
        .mat-form-field {
            .pepperi-file-wrapper, .pep-file-wrapper {
                position: relative;
                border-radius: variables.$border-radius-md;
                cursor: pointer;
                padding: 1px 0.25rem;

                .pepperi-file, .pep-file {
                    border-radius: variables.$border-radius-md;
                    display: grid;
                    justify-content: center;
                    align-items: center;
                    width: 100%;
                    max-width: 100%;
                    height: inherit;
                    text-align: center;

                    .pepperi-file-message, .pep-file-message {
                        display: grid;
                        align-items: center;
                        justify-items: center;

                        a {
                            display: grid;
                            align-items: center;
                            justify-items: center;
                        }

                        span {
                            width: 100%;
                        }
                    }

                    .pepperi-file-preview, .pep-file-preview {
                        display: grid;
                        align-items: center;
                        justify-items: center;
                        z-index: $file-input-z-index + 1;

                        img {
                            object-fit: contain;
                            max-height: 100%;
                            max-height: stretch;
                            max-width: 100%;
                            max-width: stretch;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                        }
                    }

                    .pepperi-button, .pep-button {
                        // + 2px for the border top + bottom (as :after)
                        height: calc(2.5rem + 2px);
                        max-height: calc(2.5rem + 2px);
                        width: 2.5rem;
                        max-width: 2.5rem;
                        position: absolute;
                        z-index: $file-input-z-index + 8;
                        top: 0;
                        right: 0;
                        border-radius: 0 variables.$border-radius-md 0 variables.$border-radius-md;
                        padding: 0;
                        justify-content: center;

                        mat-icon {
                            vertical-align: middle;
                        }

                        &.right-alignment {
                            right: unset;
                            left: 0;
                            border-radius: variables.$border-radius-md 0 variables.$border-radius-md 0;
                        }
                    }

                    input {
                        position: absolute;
                        height: 100%;
                        width: 100%;
                        opacity: 0;
                        cursor: pointer;
                        z-index: $file-input-z-index + 4;
                    }

                }

                .hidden-input {
                    position: absolute;
                    top: 0;
                    opacity: 0;
                    cursor: pointer;
                    z-index: $file-input-z-index;
                    width: 100%;
                    height: 100%;

                    &.signature {
                        z-index: $file-input-z-index + 5;
                    }
                }
            }

            // -----------------------------------------------------
            //  Override material style
            // -----------------------------------------------------
            &.mat-form-field-disabled {
                .hidden-input {
                    cursor: auto !important;
                }
            }
        }
    }

    &.one-row {
        ::ng-deep {
            .mat-form-field {
                .pepperi-file-wrapper, .pep-file-wrapper {
                    .pepperi-file, .pep-file {
                        .pepperi-file-message, .pep-file-message {
                            display: flex;

                            a {
                                display: flex;
                            }
                        }

                        .pepperi-button, .pep-button {
                            border-radius: 0 variables.$border-radius-md variables.$border-radius-md 0;

                            &.right-alignment {
                                right: unset;
                                left: 0.0625rem;
                                border-radius: variables.$border-radius-md 0 0 variables.$border-radius-md;
                            }
                        }
                    }
                }
            }
        }    
    }
}

.pepperi-report-file, .pep-report-file {
    cursor: pointer;
    border-radius: variables.$border-radius-md;
}

// -----------------------------------------------------
//  Override material style
// -----------------------------------------------------
.pepperi-file-container, .pep-file-container {
    display: grid;

    ::ng-deep {
        .mat-form-field {
            .mat-form-field-flex {
                padding: 0 !important;

                .mat-form-field-infix {
                    display: block !important;
                    width: 100%;
                }
            }
        }
    }
}

@mixin pep-file-theme() {
    .pepperi-file-container, .pep-file-container {
        ::ng-deep {
            .mat-form-field {
                .pepperi-file-wrapper, .pep-file-wrapper {
                    color: functions.get-pep-color(color-text, color-dimmed);
                    @include mixins.inline(functions.get-pep-color(color-system-primary, color-flat-r-20), 1px, dashed);

                    .pepperi-file, .pep-file {
                        .pepperi-button, .pep-button {
                            color: functions.get-pep-color(color-system-primary-invert, color-base);

                            &.delete {
                                background-color: functions.get-pep-color(color-system-primary, color-tran-70);

                                .svg-icon {
                                    fill: functions.get-pep-color(color-system-primary-invert, color-base);
                                }

                                &:hover {
                                    background: functions.get-pep-color(color-system-caution, color-base);
                                    box-shadow: functions.get-pep-shadow(shadow-xs, regular);
                                }
                            }
                        }

                        .svg-icon {
                            fill: functions.get-pep-color(color-text, color-dimmed);
                        }

                        .pepperi-file-preview, .pep-file-preview {
                            a {
                                color: functions.get-pep-color(color-text, color-link);

                                .svg-icon {
                                    fill: functions.get-pep-color(color-text, color-link);
                                }
                            }
                        }
                    }
                }

                // Disabled
                &.mat-form-field-disabled {
                    .pepperi-file-wrapper:after, .pep-file-wrapper:after {
                        border: unset;
                    }
                }
            }
        }

        .modal-dialog {
            .modal-content {
                color: functions.get-pep-color(color-text, color-dimmed);
            }
        }
    }
}