/* @docs */
$upload-draggable-border: 1px dashed $grey-light !default;
$upload-draggable-border-radius: $base-border-radius !default;
$upload-draggable-disabled-opacity: $base-disabled-opacity !default;
$upload-draggable-hover-border-color: $grey !default;
$upload-draggable-padding: 0.25em !default;
/* @docs */

.o-upl {
    position: relative;
    display: inline-flex;
    &--disabled {
        @include avariable('opacity', 'upload-draggable-disabled-opacity', $upload-draggable-disabled-opacity);
        cursor: not-allowed;
    }
    &--expanded {
        width: 100%;
    }
    &__draggable {
        cursor: pointer;
        width: 100%;
        @include avariable('padding', 'upload-draggable-padding', $upload-draggable-padding);
        @include avariable('border', 'upload-draggable-border', $upload-draggable-border);
        @include avariable('border-radius', 'upload-draggable-border-radius', $upload-draggable-border-radius);
        &--hovered {
            @include avariable('border-color', 'upload-draggable-hover-border-color', $upload-draggable-hover-border-color);
            @each $name, $pair in $colors {
                $color: nth($pair, 1);
                &-#{$name} {
                    @include avariable('border-color', ('variant-' + #{$name}), $color);
                }
            }
        }
    }
    input[type=file] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        z-index: -1;
    }
}