/* ============================================================================
   06-COMPONENTS -> #DROPZONE
   ========================================================================= */

/**
 *  An input which allows users to upload a file from their device.
 */


//
// SCSS imports
//

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


/**
 * Dropzone
 */

.dropzone {
    --dropzone-bg: transparent;
    --dropzone-border-color: var(--form-input-border-color);
    --dropzone-border-radius: var(--form-input-border-radius);
    --dropzone-border-width: var(--form-input-border-width);
    --dropzone-padding-x: var(--card-padding-x);
    --dropzone-padding-y: var(--card-padding-y);
    --dropzone-disabled-bg: var(--form-input-disabled-bg);
    --dropzone-disabled-border-color: var(--form-input-disabled-border-color);

    border: var(--dropzone-border-width) solid var(--dropzone-border-color);
    border-radius: var(--dropzone-border-radius);
    overflow: hidden;
    padding: var(--card-padding-y) var(--card-padding-y);
}


/**
 * Dropzone inner
 */

.dropzone__inner {
    text-align: center;
}




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

/**
 * Modifier: Disabled dropzone
 */

.dropzone[data-disabled=true] {
    background-color: var(--dropzone-disabled-bg);
    border-color: var(--dropzone-disabled-border-color);
    cursor: not-allowed;
    opacity: .5;
}