/* ============================================================================
   06-COMPONENTS -> #FILE-UPLOAD
   ========================================================================= */

/**
 * Displays the progress and status of a file upload.
 */


//
// SCSS imports
//

@use '../01-settings' as *;
@use '../02-tools' as *;


/**
 * File upload
 *
 * 1. Prevent grid blowout when file name is too long.
 */

.file-upload {
    --file-upload-bg: var(--bg-secondary);
    --file-upload-border-color: var(--form-input-border-color);
    --file-upload-border-radius: var(--form-input-border-radius);
    --file-upload-border-width: var(--form-input-border-width);
    --file-upload-padding-x: var(--card-padding-x);
    --file-upload-padding-y: var(--card-padding-y);
    --file-upload-icon-bg-color: var(--bg-highlight);
    --file-upload-primary-color: var(--form-option-acrtive-bg);

    @include transition(('background-color', 'border-color'), var(--duration-sm), cubic-bezier(.165, .84, .44, 1));
    align-items: flex-start;
    background-color: var(--file-upload-bg);
    border: var(--file-upload-border-width) solid var(--file-upload-border-color);
    border-radius: var(--file-upload-border-radius);
    display: flex;
    flex-direction: row;
    min-width: 0; // [1]
    padding-bottom: var(--file-upload-padding-y);
    padding-left: var(--space-16);
    padding-right: var(--file-upload-padding-x);
    padding-top: var(--file-upload-padding-y);
    position: relative;

    &::after {
        @include transition(('opacity', 'transform'), var(--duration-sm), cubic-bezier(.165, .84, .44, 1));
        background-color: var(--file-upload-primary-color);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 75%;
        border-radius: 50%;
        content: '';
        display: block;
        height: var(--space-4);
        opacity: 0;
        position: absolute;
        transform: scale(.95);
        right: var(--space-4);
        top: var(--space-4);
        width: var(--space-4);
    }
}


/**
 * File upload type
 */

.file-upload__type {
    background-color: var(--file-upload-icon-bg-color);
    border-radius: 50%;
    color: var(--file-upload-primary-color);
    display: inline-flex;
    left: var(--file-upload-padding-x);
    padding: var(--space-2);
    position: absolute;
    top: var(--file-upload-padding-y);
    z-index: var(--z-index-10);
    
    &::before {
        background-color: var(--file-upload-icon-bg-color);
        border-radius: 50%;
        content: '';
        height: 100%;
        left: 50%;
        opacity: .5;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%) scale(1.2);
        width: 100%;
        z-index: -1;
    }
}


/*
 * File upload content
 */

.file-upload__content {    
    width: 100%;
}


/**
 * File upload name
 */

.file-upload__name {
    @include font-size('sm');
    color: var(--text-color-secondary);
    font-weight: var(--font-weight-medium);
    overflow-wrap: break-word;
    padding-right: var(--space-8);
}


/**
 * File upload size
 */

.file-upload__size {
    @include font-size('sm');
    color: var(--text-color-tertiary);
    font-weight: var(--font-weight-light);
    padding-right: var(--space-8);
}




/* MODIFIERS
   ========================================================================= */

/**
 * Complete state
 *
 * Signifies a file has succesfully uploaded.
 */

.file-upload[data-state=complete] {
    --file-upload-bg: var(--color-success-25);
    --file-upload-border-color: var(--color-success-600);
    --file-upload-icon-bg-color: var(--color-success-100);
    --file-upload-primary-color: var(--color-success-600);

    &::after {
        background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.3334 4L6.00002 11.3333L2.66669 8' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
        opacity: 1;
        transform: scale(1);
    }

    .progress {
        --progress-bar-bg: var(--file-upload-primary-color);
    }
}


/**
 * Complete state
 *
 * Signifies a file has not uploaded.
 */

.file-upload[data-state=error] {
    --file-upload-bg: var(--color-error-25);
    --file-upload-border-color: var(--color-error-600);
    --file-upload-icon-bg-color: var(--color-error-100);
    --file-upload-primary-color: var(--color-error-600);

    &::after {
        background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4L4 12M4 4L12 12' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
        opacity: 1;
        transform: scale(1);
    }

    .progress {
        --progress-bar-bg: var(--file-upload-primary-color);
    }
}
 