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

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

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

                .pepperi-file-message {
                    display: grid;
                    align-items: center;
                    justify-items: center;
                    
                    .svg-icon {
                        height: 1.5rem;
                        width: 1.5rem;
                        margin: 0 0.125rem;
                        justify-self: center;
                    }

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

                    span {
                        width: 100%;
                    }
                }

                .pepperi-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 {
                    height: 2.5rem;
                    width: 2.5rem;
                    max-height: 2.5rem;
                    max-width: 2.5rem;
                    position: absolute;
                    z-index: $file-input-z-index + 8;
                    top: 0;
                    right: 0;
                    border-radius: 0 $border-radius-md 0 $border-radius-md;
                    padding: 0;
                    justify-content: center;

                    mat-icon {
                        vertical-align: middle;
                    }

                    &.right-alignment {
                        right: unset;
                        left: 0;
                        border-radius: $border-radius-md 0 $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 {
        .mat-form-field {
            .pepperi-file-wrapper {
                .pepperi-file {
                    .pepperi-file-message {
                        display: flex;

                        a {
                            display: flex;
                        }
                    }

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

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

.pepperi-report-file {
    cursor: pointer;
    border-radius: $border-radius-md;
    // margin: 0.25rem;

    &.pepperi-report-img {
        visibility: hidden;
        // margin-top: 0.25rem;
    }
}

// -----------------------------------------------------
//  Override material style
// -----------------------------------------------------
.pepperi-file-container {
    display: grid;
    
    .mat-form-field {
        .mat-form-field-flex {
            padding: 0 !important;

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

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

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

                        &.delete {
                            background-color: get-pepperi-color($pepperi-theme, color-system-primary, color-tran-70);

                            .svg-icon {
                                fill: get-pepperi-color($pepperi-theme, color-system-primary-invert, color-base);
                            }
                        
                            &:hover {
                                background: get-pepperi-color($pepperi-theme, color-system-caution, color-base);
                                box-shadow: get-pepperi-shadow($pepperi-theme, shadow-xs, regular);
                            }
                        }
                    }

                    .svg-icon {
                        fill: get-pepperi-color($pepperi-theme, color-text, color-dimmed);
                    }

                    .pepperi-file-preview {
                        a {
                            color: get-pepperi-color($pepperi-theme, color-text, color-link);
                            
                            .svg-icon {
                                fill: get-pepperi-color($pepperi-theme, color-text, color-link);
                            }
                        }
                    }
                }
            }

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