@use "sass:list";
@use "../utils/helpers" as h;
@use "../utils/variables" as vars;

/* @docs */
$upload-draggable-padding: calc(4 * h.useVar("control-spacer")) !default;
$upload-disabled-opacity: h.useVar("control-disabled-opacity") !default;

$upload-draggable-background-color: h.useVar(
    "control-background-color"
) !default;
$upload-draggable-border-color: h.useVar("control-border-color") !default;
$upload-draggable-border-style: dashed !default;
$upload-draggable-border-radius: h.useVar("border-radius") !default;
$upload-draggable-border-width: h.useVar("control-border-width") !default;
$upload-draggable-hover-border-color: h.useVar("secondary") !default;
$upload-draggable-hover-background-color: h.useVar(
    "control-background-color"
) !default;
/* @docs */

.o-upload {
    @include h.defineVar("upload-draggable-padding", $upload-draggable-padding);
    @include h.defineVar("upload-disabled-opacity", $upload-disabled-opacity);

    @include h.defineVar(
        "upload-draggable-background-color",
        $upload-draggable-background-color
    );
    @include h.defineVar(
        "upload-draggable-border-color",
        $upload-draggable-border-color
    );
    @include h.defineVar(
        "upload-draggable-border-style",
        $upload-draggable-border-style
    );
    @include h.defineVar(
        "upload-draggable-border-radius",
        $upload-draggable-border-radius
    );
    @include h.defineVar(
        "upload-draggable-border-radius",
        $upload-draggable-border-radius
    );
    @include h.defineVar(
        "upload-draggable-border-width",
        $upload-draggable-border-width
    );
    @include h.defineVar(
        "upload-draggable-hover-border-color",
        $upload-draggable-hover-border-color
    );
    @include h.defineVar(
        "upload-draggable-hover-background-color",
        $upload-draggable-hover-background-color
    );

    position: relative;
    display: inline-flex;

    // color variants
    @each $name, $pair in vars.$colors {
        &--#{$name} {
            @include h.defineVar(
                "upload-draggable-border-color",
                h.useVar($name)
            );
            @include h.defineVar(
                "upload-draggable-hover-background-color",
                h.useVar("#{$name}-lighter")
            );
            @include h.defineVar(
                "upload-draggable-hover-border-color",
                h.useVar($name)
            );
        }
    }

    // add clickable cursor
    @include h.clickable;

    &--disabled {
        @include h.disabled(h.useVar("upload-disabled-opacity"));
    }

    &--expanded {
        width: 100%;
    }

    &__draggable {
        width: 100%;
        padding: h.useVar("upload-draggable-padding");

        background-color: h.useVar("upload-draggable-background-color");
        border-radius: h.useVar("upload-draggable-border-radius");
        border-width: h.useVar("upload-draggable-border-width");
        border-color: h.useVar("upload-draggable-border-color");
        border-style: h.useVar("upload-draggable-border-style");

        &:hover,
        &--hovered {
            border-color: h.useVar("upload-draggable-hover-border-color");
            background-color: h.useVar(
                "upload-draggable-hover-background-color"
            );
        }
    }

    input[type="file"] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        z-index: -1;
    }
}