.x-upload-group {
  background-color: theme-color("light");
  @extend %d-flex,
          %justify-content-between,
          %flex-nowrap,
          %py-3,
          %px-4,
          %border;
  @include border-radius($input-border-radius-lg);

  .x-upload-label {
    @extend %mb-xl-0,
            %text-info,
            %font-size-sm,
            %pr-2;
  }
  .x-upload-prepend {
    @extend %d-block;
    @include size(5.750rem);
  }
  .x-upload-content {
    @extend %d-flex,
            %flex-column,
            %flex-xl-row,
            %flex-1,
            %pl-3,
            %justify-content-between,
            %align-items-xl-center;
  }
}

// Prepend / Append
.x-input-group-prepend {
  @extend %input-group-prepend;
}
.x-input-group-append {
  @extend %input-group-append;
}
.x-input-group-prepend,
.x-input-group-append {
  min-width: 2.250rem;

  > * {
    @extend %w-100;
  }

  .btn {
    @extend %btn-sm;
    @include hover-focus-active {
      z-index: $x-input-group-icon-zindex;
    }
  }

  .x-btn-icon-only {
    @extend %p-0;
  }
}

// Uploaded Multiple images preview
.x-upload-prepend,
.x-uploaded-img {
  @extend %overflow-hidden,
          %position-relative;
  @include transition(all 0.18s ease-in-out);
  @include border-radius($input-border-radius-lg);

  @include hover-focus {
    @include transition(all 0.18s ease-in-out);

    .x-btn-hidden,
    &.has-uploaded:before {
      @include invisible(visible);
      opacity: 1;
    }
  }

  &.has-uploaded:before {
    @extend %bg-dark-transparent,
            %position-absolute,
            %h-100,
            %w-100;
    content: '';
    z-index: 0;
    visibility: hidden;
    opacity: 0;
  }
}


.x-btn-delete {
  @extend %btn,
          %close,
          .x-no-focus,
          %py-0,
          %text-white,
          %position-absolute,
          %cursor-pointer,
          %px-2;
  bottom: 0;
  left: 0;
  z-index: 2;

  &.x-btn-hidden {
    @include invisible(hidden);
    opacity: 0;
  }
}