$upload-overlay: var(--custom-theme-primary-transparent, rgba(theme-color("primary-lighter"), $opacity-base));
$upload-overlay-border: var(--custom-theme-primary, theme-color('primary'));


// Dropzone action area
.x-dropzone {
  @extend %bg-light-transparent,
          %h-100,
          %position-fixed,
          %w-100;
  left: 0;
  right: 0;
  z-index: $zindex-modal;
}

// Visual dropzone cue
.x-upload {
  @extend %align-items-end,
          %d-flex,
          %w-100,
          %justify-content-center,
          %position-absolute;
  bottom: 0;
  top: 3rem;


  &-actions {
    @extend %position-absolute;
    top: 0;
    right: 0;
  }

  // Dropzone styled area
  &_dropzone {
    @extend %pb-5,
            %align-items-center,
            %d-flex,
            %flex-column,
            %position-absolute,
            %w-100,
            %h-100,
            %justify-content-center;
    bottom: 0;
    top: 0;
    z-index: 1;

    .x-icon-container {
      display: none;
    }

    &.nv-file-over {
      background-color: $upload-overlay;
      border-color: $upload-overlay-border;
      border-color: $upload-overlay-border;
      border-style: dashed;
      border-width: 3px;
      visibility: visible;

      .x-icon-container {
        display: inline-flex;
      }
    }
  }



  // Dropzone title
  .x-upload_title {
    font-size: $h3-font-size;
  }

  // Uploaded files content region
  &_content {
    @include border-radius($border-radius-lg);
    @extend .mb-4;
    background-color: theme-color("light");
    box-shadow: $dropdown-box-shadow;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-height: 30rem;
    max-width: 33rem;
    overflow: hidden;
    width: 100%;
    z-index: 999;
  }


  // Content header region controll for collapsable content list
  &_header {
    @extend %py-3,
            %px-3,
            %d-flex,
            %flex-column,
            %w-100,
            %border-bottom;
    background-color: theme-color("light");

    .progress {
      min-height: 0.5rem;
      height: 0.5rem;
      box-shadow: 0 !important;
      background-color: var(--custom-theme-primary-rgb, rgba(theme-color('primary'), 0.3));
    }

  }

  &_header-content {
    @extend %x-flex-a-center,
            %justify-content-between;
  }


  // Content list of uploaded items collapse controlled by content header
  &_list {
    overflow: auto;
  }

  // Content uploaded item
  &_item {
    @extend %list-group;
    background-color: theme-color("light");
    position: reltive;
    width: 100%;
  }

}


// Progress
.x-progress {
  @extend %d-flex,
          %position-relative,
          %overflow-hidden,
          %w-100;
  height: 1.24rem;

  &_detail {
    @extend %px-3,
            %x-flex-a-center,
            %text-light,
            %w-100,
            %justify-content-between;
    top: 0;

    .x-text {
      color: theme-color("light");
      font-size: $font-size-xs;
      font-weight: $font-weight-medium;
    }
  }

  &_btn .btn {
    @extend %p-0;
    color: inherit;
    font-size: $font-size-xs;
    font-weight: $font-weight-medium;
  }

  // Status //
  .progress {
    @include border-radius(0);
    background-color: var(--custom-theme-primary-rgb, rgba(theme-color('primary'), 0.3));
    height: 100%;

    .progress-bar {
      @extend .progress-bar-striped;
    }
  }

  // Cancel
  &.info .progress {
    background-color: rgba(theme-color('info'), 0.5);
  }

  // Error
  &.danger .progress {
    background-color: rgba(theme-color('danger'), 0.5);
  }

  // Success
  &.success .progress {
    background-color: rgba(theme-color('success'), 0.5);
  }

  // Completed
  &-complete {
    @extend .collapsing;
    height: 0;
    transition: $x-transition-transform;
  }

}