@function encodecolor($string) {
  @if type-of($string) == 'color' {
    $hex: str-slice(ie-hex-str($string), 4);
    $string: unquote('#{$hex}');
  }
  $string: '%23' + $string;
  @return $string;
}

@mixin dropzone-background($stroke-color, $stroke-width: 4, $stroke-linecap: 'butt') {
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='#{encodecolor($stroke-color)}' stroke-width='#{$stroke-width}' stroke-dasharray='6%2c4' stroke-dashoffset='0' stroke-linecap='#{encodecolor($stroke-linecap)}'/%3e%3c/svg%3e");
}

.upload-dropzone-border {
  border: 0;
  @include dropzone-background($gray-400, 2, 'round');
  border-radius: 8px;
}

.upload-dropzone-card {
  transition: background $gl-transition-duration-medium $general-hover-transition-curve,
    border $gl-transition-duration-medium $general-hover-transition-curve;
  color: $gl-text-color;

  &:hover,
  &:focus,
  &:focus-within,
  &:active {
    outline: none;
    @include dropzone-background($blue-500);
    color: $gl-text-color;
  }

  &:focus,
  &:focus-within,
  &:active {
    @include gl-focus;
  }

  &:hover {
    border-color: $gray-300;
  }
}

.upload-dropzone-overlay {
  background-color: $blue-50;
  @include dropzone-background($blue-500);
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 1;
}

.upload-dropzone-fade-enter-active,
.upload-dropzone-fade-leave-active {
  transition: opacity $general-hover-transition-duration $general-hover-transition-curve;
}

.upload-dropzone-fade-enter,
.upload-dropzone-fade-leave-to {
  opacity: 0;
}